slices 1.0.0

data/app/assets/javascripts/slices/app/backbones/generic.js

@@ -0,0 +1,101 @@
+var GenericBackbone = {
+  collection_prototype: {
+    page: 1,
+    total_pages: 1,
+    search_term: '',
+    search: function() {
+      var self = this;
+      $.get(self.search_url, this.search_data(), function(results) {
+        self.page = results.current_page;
+        self.total_pages = results.total_pages;
+        self.reset(results.items);
+      }, 'json');
+    }
+
+  },
+
+  model_prototype: {
+    idAttribute: '_id',
+
+    clear: function() {
+      this.view.remove();
+      this.destroy();
+    }
+  },
+
+  view_prototype: {
+    initialize: function() {
+      this.model.view = this;
+    },
+
+    remove: function() {
+      $(this.el).remove();
+    },
+
+    clear: function() {
+      this.model.clear();
+      return false;
+    },
+
+    render: function() {
+      $(this.el).html(this.template(this.model.for_template()));
+      return this;
+    },
+  },
+
+  app_view_prototype: {
+    render_pagination: function() {
+      $pagination = this.$('#pagination');
+      if (this.collection.total_pages === 1) {
+        $pagination.empty();
+        return
+      }
+      var self = this;
+      var pages = [];
+      for (var page = 1; page <= self.collection.total_pages; page++) {
+        if (page === this.collection.page) {
+          pages.push({num: page, klass:  'active'});
+        } else if ((page === this.collection.page + 1) || (page === this.collection.page -1)) {
+          pages.push({num: page, klass:  ''})
+        } else if ((page <= 2) || (page > (this.collection.total_pages - 2))) {
+          pages.push({num: page, klass:  ''})
+        }
+      }
+      $pagination.empty();
+      _.each(pages, function(page, index) {
+        $pagination.append($("<a />", {text: page.num, className: page.klass, href: '#'}));
+        if ((pages[index+1]) && (pages[index+1].num != page.num+1)) {
+          $pagination.append($('<span>...</span>').wrap('<li />'));
+        }
+      });
+      $pagination.find("a, span").wrap(document.createElement('li'));
+    },
+
+    paginate: function(e) {
+      var page_num = $(e.target).text();
+      this.collection.page = page_num;
+      this.search();
+    },
+
+    setup_search: function() {
+      var self = this;
+      setInterval(function() {
+        if ( self.search_now ) {
+          self.search_now = false;
+          self.collection.page = 1;
+          self.search();
+        }
+      }, 250);
+    },
+
+    call_search: function() {
+      this.search_now = true;
+    },
+
+    search: function() {
+      this.collection.search_term = this.$('#entries-search').val();
+      this.collection.search();
+    }
+
+  }
+}

data/app/assets/javascripts/slices/app/backbones/snippets.js

@@ -0,0 +1,113 @@
+var SnippetsBackbone = $.extend(true, {}, GenericBackbone, {
+  collection_prototype: {
+    search_url: '/admin/snippets',
+    search_data: function() {
+      return { search: this.search_term, page: this.page }
+    }
+  },
+
+  model_prototype: {
+    for_template: function() {
+      return this.toJSON();
+    },
+
+    url: function() {
+      return "/admin/snippets/" + this.get('id');
+    },
+  },
+
+  view_prototype: {
+     events: {
+      "click a.edit": "edit"
+    },
+
+    edit: function(event) {
+      event.preventDefault();
+      $('#general-modal').jqm({
+        ajax: '/admin/snippets/' + this.model.get('id') + '/edit',
+        modal: false,
+        onHide: function (h) { h.w.fadeOut(100); h.o.fadeOut(100); },
+        onShow: function (h) {},
+        onLoad: function (h) { h.w.fadeIn(50); h.o.fadeIn(100); },
+        overlay: 40
+      }).jqmShow();
+    },
+
+    tagName: 'tr',
+    template: Handlebars.compile(
+      "<td>{{key}}</td>" +
+      "<td>{{value}}</td>" +
+      "<td class='action right'><a href='#' rel='nofollow' id='edit-{{id}}' class='edit button small-button'>Edit</a></td>"
+    )
+
+  },
+
+  app_view_prototype: {
+
+    events: {
+      "click #add-snippet": "create",
+    },
+
+    initialize: function() {
+      this.collection = this.options.collection;
+      this.view_prototype = this.options.view_prototype;
+      _.bindAll(this, "render");
+      this.collection.bind('reset', this.render);
+      this.bind_create();
+      this.search();
+    },
+
+    create: function() {
+      $('#general-modal').jqm({
+        ajax: '/admin/snippets/new',
+        modal: false,
+        onHide: function (h) { h.w.fadeOut(100); h.o.fadeOut(100); },
+        onShow: function (h) {},
+        onLoad: function (h) { h.w.fadeIn(50); h.o.fadeIn(100); },
+        overlay: 20
+      }).jqmShow();
+    },
+
+    bind_create: function() {
+      var self = this;
+      $('#general-modal').bind('ajax:success', function (event, data) {
+        if (_.isEmpty(data.errors)) {
+          self.search();
+          $('#general-modal').jqmHide();
+        } else {
+          _.each(data.errors, function (error, field) {
+            $('#snippet_' + field).parent().addClass('field_with_errors');
+            $('#snippet_' + field).parent().append($('<span>' + error + '</span>'));
+          });
+        }
+      })
+    },
+
+    render: function() {
+      var self = this;
+      this.$('#snippets-list tbody').empty();
+      _.each(this.collection.models, function(snippet) {
+        var view = new self.view_prototype({model: snippet});
+        this.$("#snippets-list tbody").append(view.render().el);
+      });
+      this.render_pagination();
+    }
+
+  },
+
+  bind_prototypes: function() {
+    this.collection_prototype = Backbone.Collection.extend(this.collection_prototype);
+    this.model_prototype = Backbone.Model.extend(this.model_prototype);
+    this.app_view_prototype.el = $('#container');
+    this.app_view_prototype = Backbone.View.extend(this.app_view_prototype);
+    this.view_prototype = Backbone.View.extend(this.view_prototype);
+  },
+
+  boot: function() {
+    this.bind_prototypes();
+    this.collection = new this.collection_prototype
+    this.collection.model = this.model_prototype
+    this.view = new this.app_view_prototype({collection: this.collection, view_prototype: this.view_prototype})
+  }
+
+});

data/app/assets/javascripts/slices/app/helpers/assets.js

@@ -0,0 +1,61 @@
+// Create an attachment composer for a collection
+//
+// Within the attachmentComposer, define the html for the fields the composer
+// should display. Here, we’re assuming there’s a field on the slice called
+// `myAttachments`.
+//
+//     {{#attachmentComposer myAttachments}}
+//       <textarea name="caption" class="full-height">{{caption}}</textarea>
+//     {{/attachmentComposer}}
+//
+Handlebars.registerHelper('attachmentComposer', function(options) {
+  if (!options.hash) {
+    return new Handlebars.SafeString(
+      '<code style="color: red">' +
+        'DEPRECATION: Please use the new attachmentComposer syntax: ' +
+        '{{attachmentComposer field="example"}}' +
+      '</code>'
+    );
+  }
+
+  // Instantiate an AssetComposerView.
+  var composer = new slices.AttachmentComposerView({
+    id         : slices.fieldId(this, options.hash.field),
+    collection : this[options.hash.field],
+    fields     : options.fn,
+    autoAttach : true
+  });
+
+  // Return the placeholder. Don’t worry, this is replaced automatically later.
+  return new Handlebars.SafeString(composer.placeholder());
+});
+
+// Create a new AssetLibraryView and append it to the given `el`.
+// If no `el` is given, render will write one in-place to the dom,
+// and render it there.
+//
+// Rendering asset library at the current point in html
+//
+//     <script>slices.renderAssetLibrary({ mode: 'full' })</script>
+//
+slices.renderAssetLibrary = function(options) {
+  options = options || {};
+  if (!options.el) {
+    document.write('<div id="asset-library" class="asset-library">');
+    options.el = '#asset-library';
+  }
+  return new slices.AssetLibraryView(options);
+}
+
+// Returns the singlton asset drawer, which we’d normally just send close/open.
+//
+//     slices.assetDrawer().open();
+//
+slices.assetDrawer = function() {
+  if (!slices._assetDrawer) {
+    var el = $('<div id="asset-drawer" class="asset-library">').appendTo('body');
+    slices._assetDrawer = slices.renderAssetLibrary({ el: el, mode: 'drawer' });
+  }
+  return slices._assetDrawer;
+}
+

data/app/assets/javascripts/slices/app/helpers/breadcrumbs.js

@@ -0,0 +1,30 @@
+$(function() {
+  $('#children').on('change', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    var val = $(this).val();
+
+    $(this).find('option:selected').removeAttr('selected');
+    $(this).find('option:first').attr('selected', 'selected');
+
+    if (val.match(/pages\/new/)) {
+      $('#general-modal').jqm({
+        ajax: val,
+        modal: false,
+        onHide: function (h) {
+          h.w.fadeOut(100);
+          h.o.fadeOut(100);
+        },
+        onShow: function (h) {},
+        onLoad: function (h) {
+          h.w.fadeIn(50);
+          h.o.fadeIn(100);
+        },
+        overlay: 40
+      }).jqmShow();
+    } else if (val.length > 0) {
+      window.location.pathname = val;
+    }
+  });
+});

data/app/assets/javascripts/slices/app/helpers/composer.js

@@ -0,0 +1,26 @@
+// Create a composer for a given field on the model.
+//
+// Example:
+//
+//     {{#composer field="ingredients"}}
+//       <input type="text"
+//              name="name"
+//              placeholder="Name (e.g. Cheese)..."
+//              value="{{name}}">
+//       <input type="text"
+//              name="amount"
+//              placeholder="Amount (e.g. 10kg)..."
+//              value="{{amount}}">
+//     {{/composer}}
+//
+Handlebars.registerHelper('composer', function(options) {
+  var view = new slices.ComposerView({
+    id         : slices.fieldId(this, options.hash.field),
+    value      : this[options.hash.field],
+    fields     : options.fn,
+    addLabel   : options.hash.addLabel,
+    autoAttach : true
+  });
+
+  return new Handlebars.SafeString(view.placeholder());
+});

data/app/assets/javascripts/slices/app/helpers/date_field.js

@@ -0,0 +1,16 @@
+// Creates a date field.
+//
+// Example:
+//
+//     {{dateField field="example"}}
+//
+Handlebars.registerHelper('dateField', function(options) {
+  var view = new slices.DateFieldView({
+    id         : slices.fieldId(this, options.hash.field),
+    name       : options.hash.field,
+    value      : this[options.hash.field],
+    autoAttach : true
+  });
+
+  return new Handlebars.SafeString(view.placeholder());
+});

data/app/assets/javascripts/slices/app/helpers/get_value.js

@@ -0,0 +1,31 @@
+// An all-purpose value-grabber. This method has been extracted from a couple
+// of different places in the codebase, and could do with a haircut.
+slices.getValue = function(inp) {
+  inp = $(inp);
+
+  // If the input has a computed value assigned, return it.
+  if (inp.data('computed-value')) {
+    return inp.data('computed-value');
+
+  // If the input is a special array type, return concatenated value.
+  } else if (inp.data('type') === 'array') {
+    return inp.val().split('||');
+
+  // If the input is a checkbox, return true/false for checked/unchecked.
+  } else if (inp.is(':checkbox')) {
+    return inp.is(':checked');
+
+  // If field contains a set of radio buttons, find checked and return value.
+  } else if (inp.is(':has(:radio)')) {
+    return inp.find(':checked').val();
+
+  // Otherwise, this is simple input and we just take its value normally.
+  } else {
+    return inp.val();
+  }
+}
+
+// Returns the value for a particular id.
+slices.getValueForId = function(id) {
+  return slices.getValue('#' + id);
+}

data/app/assets/javascripts/slices/app/helpers/icon_upload_names.js.erb

@@ -0,0 +1,5 @@
+slices_paths = {
+  <% %w(thinking happy sad).each do |name| %>
+      '<%= name %>': '<%= asset_path("slices/icon_upload_#{name}.png") %>',
+  <% end %>
+}

data/app/assets/javascripts/slices/app/helpers/layout.js

@@ -0,0 +1,20 @@
+$(function() {
+
+  $(window).scroll(function() {
+    if ($(window).scrollTop() >= 40) {
+      $('#container-actions').css({
+        position : 'fixed',
+        top      : '0',
+        width    : '100%'
+      });
+    } else {
+      $('#container-actions').css({
+        position : 'absolute',
+        top      : '40px',
+        width    : '100%'
+      });
+    }
+  });
+
+});
+

data/app/assets/javascripts/slices/app/helpers/sitemap.js

@@ -0,0 +1,150 @@
+$(function () {
+
+  var KEY_ESC = 27;
+
+  var locked = true;
+
+  function serialiseSitemap(ul) {
+    var children = [];
+    ul.find('>li:not(.set-link)').each(
+
+      function () {
+        var li = $(this);
+        var item = { id: li.attr('rel') }
+        var childHolder = li.find('>ol');
+        if (childHolder.length && childHolder.find('>li:not(.set-link)').length) {
+          item.children = serialiseSitemap(childHolder);
+        }
+        children.push(item);
+      }
+    );
+    return children;
+  }
+
+  function filterSitemap(needle){
+
+    var show = [];
+    var hide = [];
+
+    $('#sitemap li h2, #virtual-pages li h2').each(function(){
+      if ($(this).text().search(new RegExp(needle, "i")) > -1) {
+        show.push( $(this).closest('li')[0] );
+      } else {
+        hide.push( $(this).closest('li')[0] );
+      }
+    });
+
+    $(hide).find('div').hide();
+    $(show).find('div').show();
+
+  }
+
+  var searchField = $('#sitemap-search');
+
+  if (searchField.length) {
+
+    searchField.on('keyup click', function(event) {
+      // ESC key handing
+      if (event.which === KEY_ESC) {
+        if ($(this).val() !== '') {
+          $(this).val('');
+        } else {
+          $(this).blur();
+          return;
+        }
+      }
+
+      filterSitemap($(this).val());
+    });
+
+    // Cmd/ctrl + F focuses the search field.
+    $(document).on('keypress', function(event) {
+      if (
+        (event.which === 102 && event.metaKey) || // cmd + F
+        (event.which === 6 && event.ctrlKey) // ctrl + F
+      ) {
+        event.preventDefault();
+        searchField.focus();
+      }
+    });
+
+  }
+
+  $('#sitemap-form').bind('submit', function (e) {
+    if (locked) { return false; }
+    var sitemap = serialiseSitemap($('#sitemap'));
+    $.ajax({
+      url: '/admin/site_maps/update',
+      type: 'PUT',
+      data: JSON.stringify({ sitemap: sitemap }),
+      contentType: 'application/json',
+      dataType: 'json',
+      success: function (data, statusText, xhr) {
+        // TODO:
+      },
+      error: function (xhr, textStatus, errorThrown) {
+        // TODO:
+      }
+    });
+    return false;
+  });
+
+  $('.add-child').bind('click', function () {
+    $('#general-modal').jqm({
+      ajax: this.href,
+      modal: false,
+      onHide: function (h) {
+        h.w.fadeOut(100);
+        h.o.fadeOut(100);
+      },
+      onShow: function (h) {},
+      onLoad: function (h) {
+        h.w.fadeIn(50);
+        h.o.fadeIn(100);
+      },
+      overlay: 40
+    }).jqmShow();
+    return false;
+  });
+
+  $('a.delete').toggle();
+  $('#structure-locked a').bind('click', function() {
+    locked = !locked;
+    $('#sitemap').toggleClass('unlocked');
+    $('#structure-locked, #structure-unlocked').toggle();
+    $('a.delete').toggle();
+    if (!locked) {
+      $('html').addClass('sitemap-unlocked');
+    } else {
+      $('html').removeClass('sitemap-unlocked');
+    }
+
+    $sitemap = $('#sitemap > li > ol');
+    $sitemap.nestedSortable({
+      forcePlaceholderSize : true,
+      toleranceElement     : '> div',
+      disableNesting       : 'no-nest',
+      placeholder          : 'placeholder',
+      errorClass           : 'nested-error',
+      tolerance            : 'pointer',
+      tabSize              : 25,
+      opacity              : 0.6,
+      scroll               : false,
+      handle               : 'div',
+      items                : 'li',
+
+      beforeStart: function() {
+        $sitemap.freezeHeight();
+        window.autoscroll.start();
+      },
+      stop: function() {
+        $sitemap.thawHeight();
+        window.autoscroll.stop();
+      }
+    });
+
+    return false;
+  });
+
+});
+