forest_cms 0.98.1

data/app/assets/images/forest/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/app/assets/images/forest/favicons/manifest.json.erb

@@ -0,0 +1,18 @@
+{
+    "name": "",
+    "icons": [
+        {
+            "src": "<%= asset_path 'forest/favicons/android-chrome-192x192.png' %>",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "<%= asset_path 'forest/favicons/android-chrome-512x512.png' %>",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

data/app/assets/images/forest/favicons/safari-pinned-tab.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.001633,-0.001633)"
+fill="#000000" stroke="none">
+<path d="M3596 8363 l-1295 -1438 731 -5 730 -5 -1161 -1290 c-638 -709 -1161
+-1293 -1161 -1297 0 -5 327 -9 726 -10 l725 -3 -1160 -1290 -1161 -1290 1730
+-3 1730 -2 0 -430 0 -430 -234 0 c-128 0 -258 -5 -287 -10 -127 -24 -245 -116
+-302 -237 l-32 -68 -3 -277 -3 -278 1731 0 1731 0 -3 278 -3 277 -32 67 c-35
+75 -104 150 -173 191 -84 49 -142 57 -407 57 l-243 0 0 430 0 430 1730 2 1729
+3 -1161 1290 -1160 1290 726 3 c399 1 726 5 726 10 0 4 -522 588 -1161 1297
+l-1160 1290 730 5 730 5 -1295 1438 c-712 790 -1299 1437 -1304 1437 -5 0
+-591 -647 -1304 -1437z"/>
+</g>
+</svg>

data/app/assets/javascripts/forest/admin/lib/jquery_plugins.js

@@ -0,0 +1,32 @@
+(function($) {
+
+  // Remove event handlers before assigning them. This ensures that the event
+  // will not stack when using turbolinks. Use a namespaced handler to
+  // avoid removing all events assigned to the element.
+  // http://api.jquery.com/off/
+  $.fn.offOn = function(event, selector, callback) {
+    if(event.indexOf('.') == -1){
+      console.warn('You are disabling all "'+ event +'" events attached to "' + this.selector + '".\nConsider namespacing your event, e.g. $("element").on("click.myNamespace", function(){});');
+    }
+    return this.off(event).on(event, selector, callback);
+  };
+
+  // jQuery nextWrap and prevWrap selectors.
+  // Usage: $('.element').nextWrap()
+  $.fn.nextWrap = function( selector ) {
+    var $next = $(this).next( selector );
+    if ( ! $next.length ) {
+      $next = $(this).parent().children( selector ).first();
+    }
+    return $next;
+  };
+
+  $.fn.prevWrap = function( selector ) {
+    var $previous = $(this).prev( selector );
+    if ( ! $previous.length ) {
+      $previous = $(this).parent().children( selector ).last();
+    }
+    return $previous;
+  };
+
+}(jQuery));

data/app/assets/javascripts/forest/admin/main.js

@@ -0,0 +1,59 @@
+//////////////////////////////////////////////////////////////
+// App namespace
+//////////////////////////////////////////////////////////////
+
+window.App = window.App || {};
+
+App.pageLoad = [];
+App.pageResize = [];
+App.pageScroll = [];
+App.teardown = [];
+App.runFunctions = function(array) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    array[i]();
+  }
+};
+
+//////////////////////////////////////////////////////////////
+// On page load
+//////////////////////////////////////////////////////////////
+
+$(document).on('turbolinks:load', function(e) {
+  App.scrollTop = $(window).scrollTop();
+
+  App.windowWidth  = $(window).width();
+  App.windowHeight = $(window).height();
+
+  App.runFunctions(App.pageLoad);
+  App.runFunctions(App.pageResize);
+  App.runFunctions(App.pageScroll);
+});
+
+//////////////////////////////////////////////////////////////
+// On scroll
+//////////////////////////////////////////////////////////////
+
+$(window).on('scroll', function() {
+  App.scrollTop = $(window).scrollTop();
+
+  App.runFunctions(App.pageScroll);
+});
+
+//////////////////////////////////////////////////////////////
+// On resize
+//////////////////////////////////////////////////////////////
+
+$(window).on('resize', function() {
+  App.windowWidth  = $(window).width();
+  App.windowHeight = $(window).height();
+
+  App.runFunctions(App.pageResize);
+});
+
+//////////////////////////////////////////////////////////////
+// On turbolinks:before-cache
+//////////////////////////////////////////////////////////////
+
+$(document).on('turbolinks:before-cache', function() {
+  App.runFunctions(App.teardown);
+});

data/app/assets/javascripts/forest/admin/partials/add_block.js

@@ -0,0 +1,22 @@
+$(document).on('click', '[data-block-add]', function() {
+  var $blockLayout = $(this).closest('.block-layout');
+  var $blockSlot = $(this).closest('.block-slot');
+  var $blockSlots = $blockLayout.find('.block_slots');
+  var $addBlockButton = $blockLayout.find('.add-block-button');
+  var initialInsertionNode = $addBlockButton.attr('data-association-insertion-node');
+
+  $blockSlot.attr('data-insertion-target', true);
+
+  $addBlockButton.attr('data-association-insertion-node', '[data-insertion-target]');
+
+  $addBlockButton.trigger('click');
+
+  $blockSlot.removeAttr('data-insertion-target');
+
+  if ( initialInsertionNode ) {
+    $addBlockButton.attr('data-association-insertion-node', initialInsertionNode);
+  } else {
+    $addBlockButton.removeAttr('data-association-insertion-node')
+                   .removeData('association-insertion-node');
+  }
+});

data/app/assets/javascripts/forest/admin/partials/block_collapser.js

@@ -0,0 +1,49 @@
+$(document).on('click', '[data-block-collapse-all]', function() {
+  var $button = $(this);
+  var $wrapper = $button.closest('.panel');
+  var $icon = $button.find('.collapsable-icon');
+  var $blockWrappers = $wrapper.find('.nested-fields');
+  var $blockIcons = $wrapper.find('.collapsable-icon');
+
+  if ( $button.hasClass('collapsed') ) {
+    $button.removeClass('collapsed');
+    $blockWrappers.removeClass('collapsed');
+    $icon.add($blockIcons).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+  } else {
+    $button.addClass('collapsed');
+    $blockWrappers.addClass('collapsed');
+    $icon.add($blockIcons).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+  }
+});
+
+$(document).on('click', '[data-block-collapser]', function() {
+  var $button = $(this);
+  var $wrapper = $button.closest('.nested-fields');
+  var $icon = $button.find('.collapsable-icon');
+  var $body = $wrapper.find('.panel-body');
+
+  if ( $wrapper.hasClass('collapsed') ) {
+    $wrapper.removeClass('collapsed');
+    $icon.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+  } else {
+    $wrapper.addClass('collapsed');
+    $icon.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+  }
+});
+
+$(document).on('click', '[data-collapse-parent] [data-collapse-trigger]', function() {
+  var $button = $(this);
+  var $wrapper = $button.closest('[data-collapse-parent]');
+  var $icon = $button.find('.collapsable-icon');
+  var $body = $wrapper.find('[data-collapse-body]');
+
+  if ( $wrapper.hasClass('collapsed') ) {
+    $wrapper.removeClass('collapsed');
+    $body.show();
+    $icon.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+  } else {
+    $wrapper.addClass('collapsed');
+    $body.hide();
+    $icon.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+  }
+});

data/app/assets/javascripts/forest/admin/partials/block_errors.js

@@ -0,0 +1,11 @@
+// Block errors
+
+$(document).on('turbolinks:load', function() {
+  var $blocksWithErrors = $('.form-group.has-error');
+
+  $blocksWithErrors.each(function() {
+    var $blockSlot = $(this).closest('.block-slot');
+
+    $blockSlot.addClass('block-slot--has-error');
+  });
+});

data/app/assets/javascripts/forest/admin/partials/block_selector_inputs.js

@@ -0,0 +1,61 @@
+// Block selector inputs
+
+$(document).on('turbolinks:load forest:block-slot-after-insert', function(e, blockSlot) {
+  var $blockSelectors;
+
+  if ( blockSlot ) {
+    $blockSelectors = $(blockSlot).find('.form-group.block_selector');
+  } else {
+    $blockSelectors = $('.form-group.block_selector');
+  }
+
+  if ( !$blockSelectors.length ) return;
+
+  var $blocks = $('.block-slot');
+
+  var titleize = function(str) {
+    // Replace dashes with spaces
+    str = str.replace(/-/g, ' ');
+    // Capitalize the first letter of each word
+    str = str.replace(/\w\S*/g, function(txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    });
+    return str;
+  };
+
+  $blocks = $blocks.filter(function() {
+    var $block = $(this);
+
+    return $block.attr('id') && $block.attr('data-kind') != 'JumpLinkBlock';
+  });
+
+  $blockSelectors.each(function() {
+    var $blockSelector = $(this);
+    var $select = $blockSelector.find('select.block_selector');
+    var selectedValue = $select.attr('data-selected');
+    var optionArray = [];
+
+    $blocks.each(function() {
+      var $block = $(this);
+      var blockID = $block.attr('id');
+      var blockName = titleize( blockID );
+      var option = new Option(blockName, blockID, false, false);
+
+      optionArray.push(option);
+    });
+
+    // Remove empty options from select
+    $select.find('option').filter(function() {
+      return !this.value || $.trim(this.value).length == 0 || $.trim(this.text).length == 0;
+    }).remove();
+
+    for ( var i = 0; i < optionArray.length; i++ ) {
+      $select.append( optionArray[i] ).trigger('change');
+    }
+
+    if ( selectedValue ) {
+      $select.val( selectedValue );
+      $select.trigger('change');
+    }
+  });
+});

data/app/assets/javascripts/forest/admin/partials/cocoon_events.js

@@ -0,0 +1,3 @@
+$(document).on('cocoon:after-insert', '.cocoon, .sortable-field-set', function(e) {
+  $(document).trigger( 'forest:block-slot-after-insert', $(this) );
+});

data/app/assets/javascripts/forest/admin/partials/cocoon_sortable_field_sets.js

@@ -0,0 +1,55 @@
+// Sortable fields
+//
+// This pattern for sorting fields can be used with the Cocoon gem.
+//
+// Sortable field sets can be nested multiple times, but need to follow this hierarchy:
+// <div class="sortable-field-set">
+//   <div class="sortable-field">
+//     <div class="sortable-field-set__handle"></div>
+//     <div class="sortable-field-set__position">
+//       <%= f.hidden_field :position %>
+//     </div>
+//   </div>
+// </div>
+
+$(document).on('turbolinks:load cocoon:after-insert', function() {
+  var $fieldSets = $('.sortable-field-set');
+
+  $fieldSets.each(function() {
+    var $fieldSet = $(this);
+
+    $fieldSet.sortable({
+      items: '> .sortable-field',
+      containment: $fieldSet,
+      // tolerance: 'pointer',
+      placeholder: 'sortable-placeholder',
+      handle: '.sortable-field-set__handle',
+      forcePlaceholderSize: true,
+      start: function(e, ui) {
+        ui.placeholder.height( ui.item.outerHeight(true) );
+      }
+    });
+
+    calculatePositions( $fieldSet );
+
+    $fieldSet.on('sortupdate.sortableFieldSets', function() {
+      calculatePositions( $fieldSet );
+    });
+
+    $(document).one('turbolinks:before-cache', function() {
+      $fieldSet.off('sortupdate.sortableFieldSets');
+      $fieldSet.sortable('destroy');
+    });
+  });
+
+  function calculatePositions($fieldSet) {
+    var $fields = $fieldSet.find('> .sortable-field');
+
+    $fields.each(function(index) {
+      var $field = $(this);
+      var $input = $field.find('> .sortable-field-set__position input');
+
+      $input.val(index);
+    });
+  }
+});

data/app/assets/javascripts/forest/admin/partials/collage_inputs.js

@@ -0,0 +1,286 @@
+// Collage inputs
+
+(function() {
+  var collageCanvasSelector = '.collage-input__canvas';
+  var collageItemSelector = '.collage-input__item';
+  var totalGridColumnNumber = 12;
+  var uiInteractionInProgress = false;
+
+  var updateZIndexes = function($canvas) {
+    var $items = $canvas.find(collageItemSelector);
+
+    for ( var i = 0; i < $items.length; i++ ) {
+      var $highestEl;
+      var maxZ = -Infinity;
+
+      $items.each(function() {
+        var z = parseInt( $(this).css('zIndex') ) || 0;
+
+        if ( maxZ < z ) {
+          $highestEl = $(this);
+          maxZ = z;
+        }
+      });
+
+      $highestEl.css({ zIndex: -$items.length + i });
+    }
+
+    $items.each(function(index) {
+      var $item = $(this);
+      var zIndex = Math.abs( parseInt( $item.css('zIndex') ) || 0 );
+      var $inputZIndex = $item.find('.collage-input__input--z-index');
+
+      $item.css({ zIndex: zIndex });
+      $inputZIndex.val( zIndex );
+    });
+  };
+
+  var updateInputValues = function($item) {
+    var $image = $item.find('.media-item-chooser__image');
+    var $canvas = $item.closest(collageCanvasSelector);
+    var $collage = $canvas.closest('.collage');
+    var $items = $canvas.find(collageItemSelector);
+    var canvasWidth = $canvas.width();
+    var canvasHeight = $canvas.height();
+    var imageWidth = $image.width();
+    var imageHeight = $image.height();
+    var itemPosition = $item.position();
+
+    // Inputs
+    var $inputLeft = $item.find('.collage-input__input--position-left');
+    var $inputTop = $item.find('.collage-input__input--position-top');
+    var $inputItemWidth = $item.find('.collage-input__input--item-width');
+    var $inputItemHeight = $item.find('.collage-input__input--item-height');
+
+    $item.css({ width: '', height: '' });
+
+    updateZIndexes( $canvas );
+
+    $inputLeft.val( itemPosition.left / canvasWidth * 100 );
+    $inputTop.val( itemPosition.top / canvasHeight * 100 );
+    $inputItemWidth.val( imageWidth / canvasWidth * 100 );
+    $inputItemHeight.val( imageHeight / canvasHeight * 100 );
+  };
+
+  var setRelativeImageSizes = function($canvas) {
+    var canvasWidth = $canvas.width();
+    var $items = $canvas.find(collageItemSelector);
+
+    $items.each(function() {
+      var $item = $(this);
+      var itemWidth = $item.width();
+      var ratio = itemWidth / canvasWidth;
+
+      $item.attr( 'data-item-width-to-canvas-width-ratio', ratio );
+    });
+  };
+
+  var updateCanvasInputValues = function($canvas) {
+    var $collage = $canvas.closest('.collage');
+    var $inputCanvasHeightRatio = $collage.find('.collage-input__input--height-ratio');
+
+    $canvas.attr( 'data-original-height-ratio', getItemRatio($canvas) );
+    $inputCanvasHeightRatio.val( getItemRatio($canvas) );
+  };
+
+  var setMaxZIndexForItem = function($item) {
+    var $canvas = $item.closest(collageCanvasSelector);
+    var $items = $canvas.find(collageItemSelector);
+    var zIndex = parseInt( $item.css('zIndex') ) || 0;
+    var zIndexArray = [];
+
+    $items.each(function() {
+      var thisZIndex = parseInt( $(this).css('zIndex') ) || 0;
+      zIndexArray.push( thisZIndex );
+    });
+
+    var largestZIndex = Math.max.apply( null, zIndexArray );
+
+    $item.css({ zIndex: largestZIndex + 1 });
+
+    updateZIndexes( $canvas );
+  };
+
+  var getItemRatio = function($item) {
+    return $item.height() / $item.width() * 100;
+  };
+
+  var resizableCanvasOptions = {
+    handles: 's',
+    start: function(event, ui) {
+      uiInteractionInProgress = true;
+    },
+    stop: function(event, ui) {
+      var $canvas = ui.helper;
+      var $items = $canvas.find(collageItemSelector);
+
+      setRelativeImageSizes($canvas);
+      updateCanvasInputValues($canvas);
+
+      $items.each(function() {
+        var $item = $(this);
+
+        updateInputValues($item);
+      });
+
+      uiInteractionInProgress = false;
+    }
+  };
+
+  var resizableImageOptions = {
+    aspectRatio: true,
+    start: function(event, ui) {
+      uiInteractionInProgress = true;
+    },
+    stop: function(event, ui) {
+      var $item = ui.helper.closest(collageItemSelector);
+      var $canvas = $item.closest(collageCanvasSelector);
+
+      updateInputValues($item);
+      setRelativeImageSizes($canvas);
+
+      uiInteractionInProgress = false;
+    }
+  };
+
+  var draggableOptions = {
+    containment: 'parent',
+    start: function(event, ui) {
+      uiInteractionInProgress = true;
+      setMaxZIndexForItem(ui.helper);
+    },
+    stop: function(event, ui) {
+      var $item = ui.helper.closest(collageItemSelector);
+
+      updateInputValues($item);
+
+      uiInteractionInProgress = false;
+    }
+  };
+
+  $(document).on('turbolinks:load forest:block-slot-after-insert', function() {
+    var $canvases = $('.collage-input__canvas:not(.pre-initialized)');
+
+    if ( !$canvases.length ) return;
+
+    $canvases.addClass('pre-initialized');
+
+    $canvases.each(function() {
+      var $canvas = $(this);
+      var canvasId = '#' + $canvas.attr('id');
+
+      $canvas.css({ height: $canvas.outerHeight(), paddingBottom: '' });
+      $canvas.attr('data-original-height-ratio', getItemRatio($canvas) );
+
+      updateCanvasInputValues($canvas);
+
+      $canvas.imagesLoaded(function() {
+        var $items = $canvas.find(collageItemSelector);
+        var $images = $items.find('.media-item-chooser__image');
+
+        $canvas.resizable(resizableCanvasOptions);
+
+        $items.draggable(draggableOptions);
+        $images.resizable(resizableImageOptions);
+        $images.resizable('option', 'containment', canvasId);
+
+        setRelativeImageSizes($canvas);
+
+        $canvas.addClass('initialized');
+
+        $(document).one('turbolinks:before-cache', function() {
+          $items.draggable('destroy');
+          $images.resizable('destroy');
+        });
+      });
+
+      $(document).one('turbolinks:before-cache', function() {
+        $canvas.resizable('destroy')
+               .removeClass('pre-initialized');
+      });
+    });
+
+    $(window).on('resize.collageInput', $.debounce(250, function() {
+      if ( uiInteractionInProgress ) return;
+
+      $canvases.each(function() {
+        var $canvas = $(this);
+        var newCanvasWidth = $canvas.width();
+        var originalRatio = parseFloat( $canvas.attr('data-original-height-ratio') ) / 100;
+        var newHeight = $canvas.width() * originalRatio;
+        var $items = $canvas.find(collageItemSelector);
+
+        $canvas.css({ height: newHeight });
+
+        $items.each(function() {
+          var $item = $(this);
+          var $image = $item.find('.media-item-chooser__image');
+          var $uiWrapper = $item.find('.ui-wrapper');
+          var itemWidth = $item.width();
+          var originalItemRatio = $item.attr('data-item-width-to-canvas-width-ratio');
+          var newWidth = newCanvasWidth * originalItemRatio;
+          var imageWidth = $image.width();
+          var imageHeight = $image.height();
+          var imageRatio = imageHeight / imageWidth;
+          var newHeight = newWidth * imageRatio;
+
+          $item.add($uiWrapper)
+               .add($image)
+               .css({ width: newWidth, height: newHeight });
+        });
+      });
+    }));
+
+    $(document).one('turbolinks:before-cache', function() {
+      $(window).off('resize.collageInput');
+    });
+  });
+
+  $(document).on('cocoon:after-insert', collageCanvasSelector, function(e, insertedItem) {
+    var $item = $(insertedItem);
+    var $mediaGalleryChooserButton = $item.find('.media-item-chooser__button');
+    var $collage = $item.closest('.collage');
+    var $canvas = $collage.find(collageCanvasSelector);
+    var canvasId = '#' + $canvas.attr('id');
+
+    $mediaGalleryChooserButton.trigger('click');
+
+    $(document).one('forest:update-media-gallery-preview.collageInput', function(e, insertedMediaItem) {
+      var $newItem = $(insertedMediaItem).closest(collageItemSelector);
+      var $newImage = $newItem.find('.media-item-chooser__image');
+      var $emptyCanvasMessage = $canvas.find('.collage-input__empty-canvas-message');
+
+      setMaxZIndexForItem($newItem);
+      $newImage.css({
+        opacity: 0,
+        width: $canvas.width() / 3
+      });
+
+      $newItem.imagesLoaded(function() {
+        $newItem.draggable(draggableOptions)
+                .css({
+                  top: 'calc(50% - ' + ( $newImage.height() / 2 ) + 'px)',
+                  left: 'calc(50% - ' + ( $newImage.width() / 2 ) + 'px)',
+                });
+        $newImage.resizable(resizableImageOptions)
+                 .css({ opacity: 1 });
+        $newImage.resizable('option', 'containment', canvasId);
+
+        updateInputValues($newItem);
+
+        $(document).one('turbolinks:before-cache', function() {
+          $newItem.draggable('destroy');
+          $newImage.resizable('destroy');
+        });
+      });
+
+      $mediaGalleryChooserButton.remove();
+
+      if ( $emptyCanvasMessage.length ) $emptyCanvasMessage.remove();
+    });
+  });
+
+  $(document).on('click', collageItemSelector, function() {
+    setMaxZIndexForItem( $(this) );
+  });
+})();