atomic_cms 0.2.1 → 0.2.2

data/app/assets/javascripts/atomic_cms.js

@@ -0,0 +1,286 @@
+//= require angular-markdown
+//= require showdown.min
+
+(function() {
+  'use strict';
+  var findElementIndex, page, positionEditBox, scrollTo, cmsType;
+
+  findElementIndex = function(node) {
+    var i = 0;
+    while (node.previousSibling) {
+      node = node.previousSibling;
+      if (node.nodeType === 1) {
+        i += 1;
+      }
+    }
+    return i;
+  };
+
+  scrollTo = function(node) {
+    return $('html, body').animate({
+      scrollTop: $(node).offset().top
+    }, 0);
+  };
+
+  positionEditBox = function(node) {
+    var minTop, top;
+    minTop = $('#edit-' + cmsType()).offset().top + $('#edit-' + cmsType()).height() + 25;
+    top = Math.max(minTop, $(node).offset().top);
+    top -= $('#edit-node-column').offset().top;
+    return $('#edit-node').css({
+      top: top
+    }).show();
+  };
+
+  cmsType = function(node) {
+    var cms_type = angular.element(document.querySelector('#cms_type')).val();
+    return (cms_type !== undefined) ? cms_type : 'page';
+  };
+
+  page = angular.module('page', ['markdown', 'ngSanitize']);
+
+  page.filter('vimeo_url', [
+    '$sce', function($sce) {
+      return function(id) {
+        if (id.match(/^\d+$/)) {
+          return $sce.trustAsResourceUrl('https://player.vimeo.com/video/' + id);
+        }
+      };
+    }
+  ]);
+
+  page.controller('CmsCtrl', [
+    '$scope', function($scope) {
+      $scope.prefix = cmsType() + '[content_object]';
+      return $scope.preview = {};
+    }
+  ]);
+
+  page.directive('cmsNode', function() {
+    return {
+      restrict: 'A',
+      scope: true,
+      controller: [
+        '$scope', '$compile', function($scope, $compile) {
+          $scope.$compile = $compile;
+          $scope.preview = {};
+          return $scope.dragControlListeners = {
+            itemMoved: function(event) {
+              return alert('moved');
+            },
+            orderChanged: function(event) {
+              return alert('changed');
+            }
+          };
+        }
+      ],
+      link: function($scope, element, attrs, controller) {
+        var appendNode, prefixName, topLevelArray;
+        prefixName = $(element).data('cmsNode');
+        if (element.hasClass('cms-array-node')) {
+          prefixName = findElementIndex(element.get(0));
+          $scope.$on('renumber', function(event, args) {
+            prefixName = findElementIndex(element.get(0));
+            return $scope.prefix = $scope.$parent.prefix + '[' + prefixName + ']';
+          });
+        }
+        $scope.$parent.$watch('prefix', function(prefix) {
+          return $scope.prefix = prefix + '[' + prefixName + ']';
+        });
+        if ($(element).hasClass('cms-array')) {
+          topLevelArray = $(element).parent().closest('.cms-array').size() === 0;
+          appendNode = function(source) {
+            var newEl;
+            newEl = angular.element(source);
+            element.append(newEl);
+            $scope.$compile(newEl)($scope);
+            $('a', newEl).click(function(e) {
+              return e.preventDefault();
+            });
+            $(newEl).click();
+            if (topLevelArray) {
+              return scrollTo(newEl);
+            }
+          };
+          $scope.$on('append', function(event, args) {
+            if (!event.defaultPrevented) {
+              $.get(args.href, function(data) {
+                return appendNode(data);
+              });
+              return event.preventDefault();
+            }
+          });
+          if (topLevelArray) {
+            $('ol.edit-buttons li a.button').unbind('click').bind('click', function() {
+              $scope.$broadcast('append', {
+                href: $(this).attr('href')
+              });
+              return false;
+            });
+          }
+        }
+        return $scope.edit = function() {
+          var $delete, $draft, $editor, $element, $move, $sidebarButtons, $sidebarFields, domNode, parentScope, template;
+          $element = $(element);
+          $editor = $('#edit-node-fields');
+          $sidebarFields = $('<ol>');
+          $sidebarButtons = $('#edit-node fieldset.actions ol');
+          $sidebarButtons.find('li.button-field').remove();
+          $element.find('> .cms-fields > span.li').each(function() {
+            var li;
+            li = $('<li>').addClass($(this).attr('class')).html($(this).html());
+            if (li.hasClass('button-field')) {
+              return $sidebarButtons.prepend(li);
+            } else {
+              return $sidebarFields.append(li);
+            }
+          });
+
+          $editor.empty().append($sidebarFields);
+
+          $editor.find(':file').each(function() {
+            var $input = $(this);
+            var $next = $($input.siblings('input'));
+            $input.attr('name', null).val('');
+
+            $input.on('change', function(event) {
+              var formData = new FormData(),
+                  fileData = event.target.files[0];
+                  formData.append('file', fileData);
+
+              $.ajax({
+                url: '/atomic_cms/media',
+                type: 'POST',
+                dataType: 'text',
+                data: formData,
+                contentType: false,
+                processData: false,
+                success: function (data) {
+                  var parsed = JSON.parse(data);
+                  $next.val(parsed.url);
+                  $next.change();
+                }
+              });
+            });
+          });
+
+          $editor.find('.add-children-sublist-item').each(function() {
+            var $input = $(this);
+            $input.attr('name', null).val('');
+            $input.click(function(e) {
+              e.preventDefault();
+              var component = $(this).siblings('.children-sublist').val();
+              if (component !== ''){
+                $scope.$broadcast('append', {
+                  href: component
+                });
+              }
+            });
+          });
+
+          $editor.find(':input').each(function() {
+            //guard clause for handling alternatly handled inputs
+            if($(this).prop('type') === 'file') { return; }
+            if($(this).hasClass('children-sublist')) { return; }
+
+            var $input = $(this);
+            var fieldName = $input.attr('name').replace($scope.prefix, '').replace(/\[|\]/g, '');
+
+            $input.attr('name', null).val($scope.preview[fieldName]);
+
+            $input.on('keyup change', function() {
+              $scope.$apply(function() {
+                $scope.preview[fieldName] = $input.val();
+              });
+            });
+          });
+
+          $sidebarButtons.find('li.button-field a').unbind('click').click(function() {
+            if ($(this).hasClass('emit')) {
+              $scope.$emit('append', {
+                href: $(this).attr('href')
+              });
+            } else {
+              $scope.$broadcast('append', {
+                href: $(this).attr('href')
+              });
+            }
+            return false;
+          });
+          $draft = $('#draft-panel');
+          $draft.find('[data-cms-node]').removeClass('active');
+          $draft.add(element).addClass('active');
+          template = $element.find('> input[name*=template]').val();
+          $('#edit-node legend span').html('Edit ' + (template.replace(/([A-Z]+)/g, ' $1')));
+          positionEditBox($element);
+          $editor.find(':input').first().focus();
+          $delete = $('#edit-node li.delete').hide();
+          $move = $('#edit-node li.move').hide();
+          parentScope = $scope.$parent;
+          if (element.hasClass('cms-array-node')) {
+            $move.show();
+            $delete.show();
+            $delete.find('a.button').unbind('click').click(function() {
+              $('#done-edit-node').click();
+              element.remove();
+              $scope.$destroy();
+              return parentScope.$broadcast('renumber');
+            });
+            domNode = element.get(0);
+            $move.find('a#move-node-up').unbind('click').click(function() {
+              if (domNode.previousSibling) {
+                domNode.parentNode.insertBefore(domNode, domNode.previousSibling);
+                positionEditBox(domNode);
+                scrollTo(domNode);
+                parentScope.$broadcast('renumber');
+              }
+              return false;
+            });
+            $move.find('a#move-node-down').unbind('click').click(function() {
+              if (domNode.nextSibling) {
+                domNode.parentNode.insertBefore(domNode.nextSibling, domNode);
+                positionEditBox(domNode);
+                scrollTo(domNode);
+                parentScope.$broadcast('renumber');
+              }
+              return false;
+            });
+          }
+          return false;
+        };
+      }
+    };
+  });
+
+  page.directive('cmsField', function() {
+    return {
+      restrict: 'C',
+      scope: false,
+      link: function($scope, element, attrs) {
+        var $element, fieldName;
+        $element = $(element);
+        fieldName = $element.attr('name');
+        $scope.preview[fieldName] = $element.val();
+        return $scope.$watch('prefix', function(prefix) {
+          return $element.attr('name', prefix + '[' + fieldName + ']');
+        });
+      }
+    };
+  });
+
+  $(document).ready(function() {
+    $('#done-edit-node').click(function() {
+      var $draft = $('#draft-panel');
+
+      $draft.removeClass('active');
+      $draft.find('[data-cms-node]').removeClass('active');
+
+      $('#edit-node').hide();
+      return false;
+    });
+    return $('.preview a').click(function(e) {
+      return e.preventDefault();
+    });
+  });
+
+}).call(this);

data/app/assets/stylesheets/atomic_cms.css.scss

@@ -0,0 +1,135 @@
+@mixin component_cms_preview {
+  #component_preview {
+    @content;
+  }
+}
+
+#component_preview {
+  a.button.append-inline, a.button.append-block {
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  a.button.append-block {
+    @include outer-container;
+    display: block;
+  }
+
+  .cms-fields {
+    display: none;
+  }
+}
+
+#wrapper #active_admin_content #main_content_wrapper #main_content {
+  form#edit-page, form.edit-atomic-content {
+    div.buttons {
+      @include clearfix;
+      margin: 0 0 20px;
+
+      ol.edit-buttons {
+        @include clearfix;
+        float: left;
+        width: 75%;
+
+        li {
+          float: left;
+          font-size: 12px;
+          margin: 0 10px 10px 0;
+
+          a.button {
+            @include linear-gradient(to bottom, #ffffff, #f1f1f1, $fallback: #f8f8f8);
+            @include shadow(1px, 1px, 3px, rgba(138, 138, 138, 0.22));
+            border-color: #dcdcdc;
+            color: #666666;
+            font-weight: normal;
+            line-height: 20px;
+            padding-left: 35px;
+            position: relative;
+            text-shadow: none;
+
+            &::after {
+              @include retina-image("icon_add_component", 16px 15px, "png", null, "@2x", true);
+              background-position: left center;
+              background-repeat: no-repeat;
+              content: '';
+              height: 30px;
+              position: absolute;
+              left: 10px;
+              top: 0;
+              width: 16px;
+            }
+          }
+        }
+      }
+
+      fieldset.actions {
+        float: right;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+
+  #draft-panel.active {
+    [data-cms-node] {
+      h1, h2, h3, h4, h5, h6, p, li, img, a.button, iframe {
+        opacity: 0.35;
+      }
+
+      li li {
+        opacity: 1;
+      }
+
+      &.active {
+        h1, h2, h3, h4, h5, h6, p, li, img, a.button, iframe {
+          opacity: 1;
+        }
+
+        [data-cms-node] {
+          h1, h2, h3, h4, h5, h6, p, li, img, a.button, iframe {
+            opacity: 0.35;
+          }
+        }
+      }
+    }
+  }
+}
+
+#edit-node-column {
+  position: relative;
+}
+
+#edit-node {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  li {
+    margin: 0 10px 10px 0;
+  }
+
+  li.delete {
+    a.button {
+      background-color: #d44040;
+      border-color: #cc2525;
+      color: #ffffff;
+    }
+  }
+}
+
+#edit-node-fields {
+  input[type=file] {
+    width: calc(80% - 22px);
+    font-size: 0.95em;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 10px 7px;
+  }
+  label.filler {
+    color: transparent;
+  }
+}

data/app/components/array_component.rb

@@ -0,0 +1,11 @@
+class ArrayComponent < AtomicAssets::Component
+  def render
+    children.map(&:render).reduce(:+)
+  end
+
+  def edit
+    rtn = cms_fields
+    rtn << render_child_array
+    rtn.html_safe
+  end
+end

data/app/controllers/atomic_cms/components_controller.rb

@@ -0,0 +1,7 @@
+module  AtomicCms
+  class ComponentsController < ApplicationController
+    def edit
+      render text: component(params[:id]).edit_array(!!params[:inline])
+    end
+  end
+end

data/app/controllers/atomic_cms/media_controller.rb

@@ -0,0 +1,18 @@
+module AtomicCms
+  class MediaController < ApplicationController
+    def create
+      asset = MediaScrubber.new(file: media_params)
+      if asset.save
+        render json: { url: asset.url }.to_json, status: :created
+      else
+        render json: {}.to_json, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def media_params
+      params.require(:file)
+    end
+  end
+end

data/app/controllers/concerns/media_scrubber.rb

@@ -0,0 +1,28 @@
+class MediaScrubber
+  attr_accessor :original, :filtered
+
+  def initialize(args)
+    @original = args.fetch(:file, nil)
+    @filtered = infer_media_type
+  end
+
+  def infer_media_type
+    return nil unless original.respond_to?(:content_type)
+    AtomicCms::Image.new(file: original) if original.content_type.match(/image/)
+  end
+
+  def valid?
+    return false unless filtered
+    filtered.valid?
+  end
+
+  def save
+    return false unless valid?
+    filtered.save
+  end
+
+  def url
+    return nil unless filtered
+    filtered.file.url
+  end
+end

data/app/helpers/component_helper.rb

@@ -0,0 +1,21 @@
+module ComponentHelper
+  def add_option(option, output = nil)
+    return unless option
+    return output if output
+    option
+  end
+
+  def markdown(text)
+    return unless text
+    Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(text).html_safe
+  end
+
+  def markdown_help_url
+    "http://nestacms.com/docs/creating-content/markdown-cheat-sheet"
+  end
+
+  def render_children(children)
+    return children unless children.present? && children.is_a?(Array)
+    children.map(&:render).reduce(:+)
+  end
+end

data/app/models/atomic_cms/image.rb

@@ -0,0 +1,6 @@
+module AtomicCms
+  class Image < Media
+    validates_attachment :file, presence: true,
+                                content_type: { content_type: /\Aimage/ }
+  end
+end

data/app/models/atomic_cms/media.rb

@@ -0,0 +1,12 @@
+module AtomicCms
+  class Media < ActiveRecord::Base
+    self.inheritance_column = "media_type"
+
+    has_attached_file :file
+    do_not_validate_attachment_file_type :file
+
+    def self.available_types
+      descendants.map { |desc| desc.name.demodulize }
+    end
+  end
+end

data/app/views/components/_children_field.html.slim

@@ -0,0 +1,6 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  select.cms-field class="children-sublist"
+    option
+    = options_for_select(options[:collection], value)
+  a class="button add-children-sublist-item" Add

data/app/views/components/_edit.html.slim

@@ -0,0 +1,2 @@
+div#component_preview data-ng-app="page" data-ng-controller="CmsCtrl"
+  = f.object.content_edit

data/app/views/components/_file_field.slim

@@ -0,0 +1,5 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  input.cms-field type="file"
+  label.label.filler #{name.to_s.humanize}
+  input.cms-field type="text" name="#{name}" data-ng-model="preview.#{name}" value="#{value}"

data/app/views/components/_markdown_field.slim

@@ -0,0 +1,5 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  textarea.cms-field type="text" name="#{name}" data-ng-model="preview.#{name}" rows="10"
+    = value
+  = link_to "Need help with Markdown?", markdown_help_url, target: '_new'

data/app/views/components/_select_field.slim

@@ -0,0 +1,5 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  select.cms-field name="#{name}" data-ng-model="preview.#{name}"
+    option
+    = options_for_select(options[:collection], value)

data/app/views/components/_template_field.slim

@@ -0,0 +1 @@
+input.cms-field type="hidden" name="template_name" value="#{value}"

data/app/views/components/_text_area_field.slim

@@ -0,0 +1,4 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  textarea.cms-field type="text" name="#{name}" data-ng-model="preview.#{name}" rows="10"
+    = value

data/app/views/components/_text_field.slim

@@ -0,0 +1,3 @@
+span.li.string.input
+  label.label #{name.to_s.humanize}
+  input.cms-field type="text" name="#{name}" value="#{value}" data-ng-model="preview.#{name}"

data/atomic_cms.gemspec

@@ -0,0 +1,30 @@
+Gem::Specification.new do |s|
+  s.name        = 'atomic_cms'
+  s.version     = '0.2.2'
+  s.date        = '2015-06-19'
+  s.summary     = 'Atomic CMS'
+  s.description = 'Live CMS powered by atomic assets.'
+  s.authors     = ['Don Humphreys']
+  s.email       = 'dhumphreys88@gmail.com'
+  s.files       = `git ls-files`.split(/\n/)
+  s.test_files  = Dir['spec/**/*']
+  # s.homepage    = 'http://rubygems.org/gems/atomic_cms'
+  # s.license       = 'MIT'
+
+  s.add_dependency 'rails', '~> 4.2'
+  s.add_dependency 'activeadmin', '1.0.0.pre2'
+  s.add_dependency 'atomic_assets', '~> 0.1.0'
+  s.add_dependency 'jquery-rails', '~> 4.0', '>= 4.0.3'
+  s.add_dependency 'redcarpet', '~> 3.3'
+  s.add_dependency 'slim-rails', '~> 3.0'
+  s.add_dependency 'paperclip', '~> 4.3'
+
+  s.add_development_dependency 'rspec-core', '~> 3.3'
+  s.add_development_dependency 'rspec-expectations', '~> 3.3'
+  s.add_development_dependency 'rspec-mocks', '~> 3.3'
+  s.add_development_dependency 'rspec-support', '~> 3.3'
+  s.add_development_dependency 'rspec-rails'
+  s.add_development_dependency 'factory_girl_rails'
+  s.add_development_dependency 'shoulda-matchers'
+  s.add_development_dependency 'sqlite3'
+end

data/bin/rails

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/atomic_cms/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/routes.rb

@@ -0,0 +1,4 @@
+AtomicCms::Engine.routes.draw do
+  resources :components, only: [:edit]
+  resources :media, only: [:create]
+end

data/db/migrate/20151013175254_create_media.rb

@@ -0,0 +1,9 @@
+class CreateMedia < ActiveRecord::Migration
+  def change
+    create_table :atomic_cms_media do |t|
+      t.string :media_type
+      t.attachment :file
+      t.timestamps
+    end
+  end
+end