promethee 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fedae453568a7c76951d9a5f5afac39107887fa1
-  data.tar.gz: d9999169433575cee9b82bb574241d4265d68c3e
+  metadata.gz: b6fd84303285742e3b357dde0c4fcf780d3de1b3
+  data.tar.gz: 1b5d5b514e70ee8ac836f0ad341e5287479d970a
 SHA512:
-  metadata.gz: f9a7e5e765d5f8a2d770a2cba25e3c26b0dc2219e0e3936b9c25911934a0e6bb908b8b20d563f0cdd629e15d6299c77ebb200db1d2ebb098a217521a7309d1fb
-  data.tar.gz: 66d57d9ef3e5c6699aa773db250d6a233ad2ed5dbed2286bc44cc483d27ba54f848b25e22ced61c9c51b20a52a8a17f2c30fac013aab1f6c6ce6fa5b26b37c79
+  metadata.gz: ac96f5b9991320ae569efcd8d63632f74b387477942aeb7009a2fb1647b0bd2f3cb575da37f097fc5445f8b76eb78f99c0ddd8cab8f9c54c88e05bb3fbda307e
+  data.tar.gz: c44d83d03795e3ae3cda160d47aa5d5b94004db1d164298ea62e3a7125679375ca06a97c5e0a3273ed30d27b36a85452d1db284a54ad8a2deb5ec2220e985a51

data/README.md

@@ -1,43 +1,7 @@
-![Prométhée](https://github.com/lespoupeesrusses/promethee/blob/master/app/assets/images/logo-promethee-vertical.svg)
-
-# Bring fire to your page
+# Prométhée
 
 [![Maintainability](https://api.codeclimate.com/v1/badges/98a8649f411bc9f50786/maintainability)](https://codeclimate.com/github/lespoupeesrusses/promethee/maintainability)
 
-## Where does it come from?
-As we build sites and digital solutions for some of the most prestigious brands (Givenchy, L’Oréal, Lancôme, Cartier, Hermès…) we often need to build spectacular pages, with a responsive layout, using a predefined design system or visual guidelines. Very often, our clients need to be able to do some creation or adaptation on their own. And in most situation, it has to be translated very easily, with no technical cost.
-
-Our first approach was to generate custom templates. For example, 10 years ago, before responsivity, we did a lot of multilingual content for Parfums Lolita Lempicka using a simple read/write system with something like 10 templates. We soon made a “Do what you feel” template, allowing the designer to put fields wherever he needed on the page, but it was completely unusable for people who lacked either design or development background.
-
-We then built a system for Cartier, where the content was made by a designer, then implemented by a front end developer with keys allowing the translation. This was good because creation was very free, but the client could make no content on its own.
-
-We built another tool for Diptyque, with content bricks that we assembled. Basically, it looked like vertical slides doing a nice one-page. It seemed like the perfect solution, but in the end it had so many options it became very hard to use, and still the different pages like quite similar.
-
-Then came the page builder. Inspired by Divi, the idea was to offer rows and columns, based on bootstrap. We built that for Hermès, as one of the different components available to build pages. Translation was fine, responsivity was fine, content was not super simple to do, but still quite simple, and the use of presets provided a good “easy to use” solution.
-
-We re-used the concept for Céline, and realized we had a mis-conception: the builder was the basic page editor, and we could add components in it.
-
-As we needed the solution for 2 projects, and a third one coming, we decided to make it a gem.
-
-Prométhée was born.
-
-## What does it do?
-It builds responsive pages!
-
-There are 2 parts: the editor, which lets you build the pages, and the renderer. The pages are stored as json data, which can easily be added to a model in rails, and saved via a regular form.
-
-## How does it relate to existing solutions?
-
-### Regarding wysiwyg editors like tinymce, trix...
-
-It's not only rich text: it lets you build complete pages, with a grid system.
-
-### Regarding page builders like Divi, Semplice, Shogun
-
-It's for Rails (unlike Divi or Semplice which are for Wordpress).
-It's open source.
-It does not provide as many options, as it's intended to be integrated in a website with specific brand guidelines through some custom css.
-
 ## Installation
 Add this line to your application's Gemfile:
 
@@ -169,7 +133,7 @@ With javascript set:
 //= require angular-ui-bootstrap
 //= require angular-summernote
 //= require promethee
-//= require promethee-editor
+//= require promethee-edit
 ```
 
 With stylesheets set:
@@ -179,7 +143,7 @@ With stylesheets set:
 @import 'material_icons.css'
 @import 'summernote'
 @import 'promethee'
-@import 'promethee-editor'
+@import 'promethee-edit'
 ```
 
 #### The editor has components

data/app/assets/javascripts/promethee-edit.js

@@ -0,0 +1,209 @@
+var promethee = angular
+  .module('Promethee', ['summernote', 'ngAnimate'])
+  .value('definitions', [])
+  // What does the next 3 lines do? Why?
+  .config(function($rootScopeProvider) {
+    $rootScopeProvider.digestTtl(20);
+  })
+  .filter('htmlSafe', ['$sce', function($sce) {
+    return function(val) {
+      return $sce.trustAsHtml(val);
+    };
+  }])
+  .filter('urlSafe', ['$sce', function($sce) {
+    return function(val) {
+      return $sce.trustAsResourceUrl(val);
+    };
+  }])
+  .filter('humanize', function() {
+    return function(val) {
+      val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
+      return val[0].toUpperCase() + val.substring(1).toLowerCase();
+    };
+  })
+  .filter('textContentFromHTML', function() {
+    return function(val, distinctParagraphs) {
+      var element = document.createElement('div');
+      element.innerHTML = val;
+
+      if(distinctParagraphs === 'distinctParagraphs') {
+        var paragraphs = element.querySelectorAll('p');
+        for(var i = 0; i < paragraphs.length; i++) paragraphs[i].textContent += ' ';
+      }
+
+      return element.textContent;
+    }
+  })
+  .filter('numberOfCharacters', function() {
+    return function(val) {
+      return val.length;
+    };
+  })
+  .filter('numberOfWords', function() {
+    return function(val) {
+      var words = val
+        .replace(/\bhttps?:\/\/[a-z0-9\-\._]+(?:\/[^\s\n\r]+)?/gi, 'a') // A URL is one word
+        .replace(/\b[a-z0-9\-\._]+@[a-z0-9\-\._]+\.[a-z0-9\-\._]+\b/gi, 'a') // An email is one word
+        .replace(/[^a-z0-9\s\n\r]/gi, ' ')
+        .replace(/[\s\n\r]+/g, ' ')
+        .trim()
+        .split(' ');
+
+      return words[0] === '' ? 0 : words.length;
+    };
+  });
+
+promethee.controller('PrometheeController', ['$scope', 'definitions', '$http', function($scope, definitions, $http) {
+
+  // Data (TODO use Adder and probably page definition to init)
+  if($scope.data === null || $scope.data === '') {
+    $scope.data = {
+      id: '',
+      type: 'page',
+      version: 1,
+      children: []
+    };
+  }
+  
+  $scope.promethee = { 
+    data: $scope.data,
+    inspected: null,
+    mode: 'write',
+    preview: 'desktop',
+    fullscreen: false
+  };
+
+  $scope.inspect = function(component, event) {
+    $scope.promethee.inspected = component;
+    event.stopPropagation();
+  }
+
+  $scope.enablePreview = function() {
+    if (this.promethee.mode === 'preview') return;
+    this.promethee.mode = 'preview';
+
+    var form = document.createElement('form');
+    document.body.appendChild(form);
+    form.method = 'POST';
+    form.action = '/promethee/preview';
+    form.target = 'preview';
+    
+    var input = document.createElement('input');
+    input.type = 'text';
+    input.value = JSON.stringify($scope.promethee.data);
+    input.name = 'data';
+    form.appendChild(input);
+    form.submit();
+    document.body.removeChild(form);
+  }
+
+  $scope.remove = function(component, components) {
+    var index = components.indexOf(component);
+    components.splice(index, 1);
+  }
+
+}]);
+
+
+promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', function($scope, $rootScope, definitions) {
+
+  $scope.adding = false;
+  $scope.childrenToAddTo = null;
+  $scope.definitions = definitions;
+
+  $scope.close = function() {
+    $scope.adding = false;
+    $scope.addingToChildren = null;
+  };
+
+  $scope.pushComponent = function(definition) {
+    var definition = angular.copy(definition.data);
+    definition.id = $scope.createIdentifier();
+    $scope.childrenToAddTo.push(definition);
+    $scope.close();
+  };
+
+  $rootScope.addComponentTo = function(components) {
+    $scope.adding = true;
+    $scope.childrenToAddTo = components;
+  };
+
+  // https://gist.github.com/gordonbrander/2230317
+  $scope.createIdentifier = function () {
+    // Math.random should be unique because of its seeding algorithm.
+    // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+    // after the decimal.
+    return '' + Math.random().toString(36).substr(2, 9);
+  };
+
+}])
+
+
+
+promethee
+  .directive('draggable', function() {
+    return {
+      restrict:'A',
+      link: function(scope, element, attrs) {
+        element.draggable({
+          revert: true,
+          revertDuration: 0,
+          scroll: true,
+          refreshPositions: true,
+          start: function() {
+            var $elementDragged = $(element[0]);
+            var type = $elementDragged.data('type');
+            $('.promethee-edit__move').addClass('promethee-edit__move--dragging promethee-edit__move--dragging--' + type);
+
+            // The droppable zone immediately before has no use, it would put the object at the same position
+            // FIXME the selector is not correct
+            /*
+            var $droppableBefore = $elementDragged.prev('.promethee-edit__move__draggable').find('.promethee-edit__move__droppable').last();
+            if ($droppableBefore.length === 0) {
+              // For the first child, we look for the previous droppable zone
+              $droppableBefore = $elementDragged.prev('.promethee-edit__move__droppable');
+            }
+            $droppableBefore.addClass('promethee-edit__move__droppable--hidden');
+            */
+          },
+          stop: function() {
+            var $elementDragged = $(element[0]);
+            var type = $elementDragged.data('type');
+            $('.promethee-edit__move').removeClass('promethee-edit__move--dragging promethee-edit__move--dragging--' + type);
+            // $('.promethee-edit__move__droppable').removeClass('promethee-edit__move__droppable--hidden');
+          }
+        });
+      }
+    }
+  })
+  .directive('droppable', function($compile) {
+    return {
+      restrict: 'A',
+      link: function(scope, element, attrs) {
+        element.droppable({
+          tolerance: 'pointer',
+          drop: function(event, ui) {
+            var draggedFromList = angular.element(ui.draggable).parent().scope().components;
+            var draggedFromIndex = parseInt(ui.draggable[0].getAttribute('data-index'));
+            // console.log('dragged', draggedFromList, draggedFromIndex);
+            draggedFromList.splice(draggedFromIndex, 1);
+
+            var component = angular.element(ui.draggable).scope().component;
+            var droppedToList = angular.element(this).scope().components;
+            var droppedToIndex = parseInt(this.getAttribute('data-index'));
+            if (draggedFromList == droppedToList) {
+              // The object we dragged was removed from the list
+              if (draggedFromIndex < droppedToIndex) {
+                // It was before the dropped index, so removing it changed the index
+                droppedToIndex -= 1;
+              }
+            }
+            // console.log('dropped', component, droppedToList, droppedToIndex);
+            droppedToList.splice(droppedToIndex, 0, component);
+
+            scope.$apply();
+          }
+        });
+      }
+    }
+  });

data/app/assets/stylesheets/{promethee-editor.sass → promethee-edit.sass}

@@ -3,11 +3,11 @@ $promethee-transparent-grey: transparentize($promethee-grey, .8)
 $promethee-light-grey: #eee
 $promethee-color: #ff9900 !default
 
-@import 'promethee-editor/write'
-@import 'promethee-editor/move'
-@import 'promethee-editor/preview'
+@import 'promethee-edit/write'
+@import 'promethee-edit/move'
+@import 'promethee-edit/preview'
 
-.promethee-editor
+.promethee-edit
   background: white
   position: relative
   &--fullscreen
@@ -18,10 +18,10 @@ $promethee-color: #ff9900 !default
     top: 50px
     z-index: 10000
     overflow: auto
-    .promethee-editor__write
+    .promethee-edit__write
       padding-right: 300px
       padding-top: 15px
-    .promethee-editor__inspector
+    .promethee-edit__inspect
       top: 65px
 
   &__navbar

data/app/assets/stylesheets/{promethee-editor → promethee-edit}/_move.sass

@@ -1,4 +1,4 @@
-.promethee-editor__move
+.promethee-edit__move
   width: 432px
   margin: 0 auto
   padding-bottom: 200px
@@ -82,21 +82,21 @@
     z-index: 1000
     opacity: 0.5
     // Nothing is droppable inside components being dragged
-    .promethee-editor__move__droppable
+    .promethee-edit__move__droppable
       visibility: hidden !important
 
   // By default, nothing is dropped in rows
   &--dragging
-    .promethee-editor__move__droppable--row
+    .promethee-edit__move__droppable--row
       display: none
 
   // Except for columns, which can be dropped only on rows
-  &--dragging.promethee-editor__move--dragging--column
-    .promethee-editor__move__droppable
+  &--dragging.promethee-edit__move--dragging--column
+    .promethee-edit__move__droppable
       display: none
       // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
-      &.promethee-editor__move__droppable--row--inside-column,
-      &.promethee-editor__move__droppable--row--first
+      &.promethee-edit__move__droppable--row--inside-column,
+      &.promethee-edit__move__droppable--row--first
         display: block
 
 

data/app/assets/stylesheets/{promethee-editor → promethee-edit}/_preview.sass

@@ -1,4 +1,4 @@
-.promethee-editor__preview
+.promethee-edit__preview
   background: black
   position: relative
   height: 100%

data/app/assets/stylesheets/{promethee-editor → promethee-edit}/_write.sass

@@ -1,6 +1,6 @@
-.promethee-editor__write
+.promethee-edit__write
   
-  .promethee-editor__toolbar
+  .promethee-edit__toolbar
     background: #253742
     padding: 10px
     font-size: 11px
@@ -10,7 +10,7 @@
     &, *
       user-select: none
 
-  .promethee-editor__inspector
+  .promethee-edit__inspect
     background: #fff
     width: 300px
     top: 15px
@@ -31,22 +31,22 @@
     &-content
       padding: 15px
 
-  .promethee-editor__adder__button
+  .promethee-edit__adder__button
     display: block
     text-align: center
     margin: 50px 0
 
-  .promethee-editor__component
+  .promethee-edit__component
     margin-bottom: 5px
     &--cover
-      .promethee-editor__cover-content
+      .promethee-edit__cover-content
         padding: 150px 30px
         background-repeat: no-repeat
         background-position: center center
         background-size: cover
-    &--row > div > .promethee-editor__toolbar
+    &--row > div > .promethee-edit__toolbar
         margin-bottom: 5px
-    &--column > div > .promethee-editor__toolbar
+    &--column > div > .promethee-edit__toolbar
       margin-bottom: 5px
     &--slider
       .fontawesome-carousel-control .fa

data/app/views/promethee/_edit.html.erb

@@ -1,126 +1,44 @@
 <%
-master_data ||= nil
 promethee_data = Promethee::Data.new master_data
 %>
-
-<script>
-
-  var promethee = angular
-    .module('Promethee', ['summernote', 'ngAnimate'])
-    .value('data', <%= promethee_data.to_json.html_safe %>)
-    .value('definitions', [])
-    .config(function($rootScopeProvider) {
-      $rootScopeProvider.digestTtl(20);
-    })
-    .filter('htmlSafe', ['$sce', function($sce) {
-      return function(val) {
-        return $sce.trustAsHtml(val);
-      };
-    }])
-    .filter('urlSafe', ['$sce', function($sce) {
-      return function(val) {
-        return $sce.trustAsResourceUrl(val);
-      };
-    }])
-    .filter('humanize', function() {
-      return function(val) {
-        val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
-        return val[0].toUpperCase() + val.substring(1).toLowerCase();
-      };
-    })
-    .filter('textContentFromHTML', function() {
-      return function(val, distinctParagraphs) {
-        var element = document.createElement('div');
-        element.innerHTML = val;
-
-        if(distinctParagraphs === 'distinctParagraphs') {
-          var paragraphs = element.querySelectorAll('p');
-          for(var i = 0; i < paragraphs.length; i++) paragraphs[i].textContent += ' ';
-        }
-
-        return element.textContent;
-      }
-    })
-    .filter('numberOfCharacters', function() {
-      return function(val) {
-        return val.length;
-      };
-    })
-    .filter('numberOfWords', function() {
-      return function(val) {
-        var words = val
-          .replace(/\bhttps?:\/\/[a-z0-9\-\._]+(?:\/[^\s\n\r]+)?/gi, 'a') // A URL is one word
-          .replace(/\b[a-z0-9\-\._]+@[a-z0-9\-\._]+\.[a-z0-9\-\._]+\b/gi, 'a') // An email is one word
-          .replace(/[^a-z0-9\s\n\r]/gi, ' ')
-          .replace(/[\s\n\r]+/g, ' ')
-          .trim()
-          .split(' ');
-
-        return words[0] === '' ? 0 : words.length;
-      };
-    });
-
-  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 
-                                        function(data, $scope, definitions, $http) {
-
-    // Data (TODO use Adder and probably page definition to init)
-    if(data === null || data === '') {
-      data = {
-        id: '',
-        type: 'page',
-        version: 1,
-        children: []
-      };
-    }
-
-    $scope.promethee = { inspected: null };
-    $scope.data = $scope.component = data;
-    $scope.mode = 'write';
-    $scope.preview = 'desktop';
-    $scope.fullscreen = false;
-
-    $scope.inspect = function(component, event) {
-      $scope.promethee.inspected = component;
-      event.stopPropagation();
-    }
-
-    $scope.enablePreview = function() {
-      if (this.mode === 'preview') return;
-      this.mode = 'preview';
-
-      var form = document.createElement('form');
-      document.body.appendChild(form);
-      form.method = 'POST';
-      form.action = <%= promethee_preview_path.to_json.html_safe %>;
-      form.target = 'preview';
-      
-      var input = document.createElement('input');
-      input.type = 'text';
-      input.value = JSON.stringify(data);
-      input.name = 'data';
-      form.appendChild(input);
-      form.submit();
-      document.body.removeChild(form);
-    }
-
-    $scope.remove = function(component, components) {
-      var index = components.indexOf(component);
-      components.splice(index, 1);
-    }
-
-  }]);
-
-</script>
-
 <div
   id="promethee"
-  class="promethee-editor"
-  ng-class="{ 'promethee-editor--fullscreen': fullscreen }"
+  class="promethee-edit"
   ng-app="Promethee"
+  ng-class="{ 'promethee-edit--fullscreen': promethee.fullscreen }"
   ng-controller="PrometheeController as prometheeController"
+  ng-init="promethee.data=<%= promethee_data.to_json %>"
   >
-  <%= render 'promethee/edit/shared/data' %>
-  <%= render 'promethee/edit/shared/navbar' %>
+  <input type="hidden" name="page[data]" id="page_data" value="{{promethee.data}}" />
+  <nav class="navbar navbar-default promethee-edit__navbar" ng-class="{'navbar-fixed-top': promethee.fullscreen }">
+    <div class="container-fluid">
+      <div class="navbar-header promethee-edit__icon">
+        <div class="navbar-brand"><%= File.read(__dir__ + '/../../assets/images/icon-promethee.svg').html_safe %></div>
+      </div>
+      <div id="navbar">
+        <ul class="nav navbar-nav navbar-right">
+          <li ng-click="promethee.mode = 'write'" ng-class="{active: promethee.mode == 'write'}"><a><%= fa_icon :pencil %></a></li>
+          <li ng-click="promethee.mode = 'move'" ng-class="{active: promethee.mode == 'move'}"><a><%= fa_icon :arrows %></a></li>
+          <li ng-click="enablePreview()" ng-class="{active: promethee.mode == 'preview'}">
+            <a data-toggle="dropdown"><%= fa_icon :eye %></a>
+            <ul class="dropdown-menu" ng-show="promethee.mode == 'preview'">
+              <li ng-click="promethee.preview = 'desktop'" ng-class="{active: promethee.preview == 'desktop'}"><a><i class="fa fa-desktop"></i></a></li>
+              <li ng-click="promethee.preview = 'tablet'" ng-class="{active: promethee.preview == 'tablet'}"><a><i class="fa fa-tablet"></i></a></li>
+              <li ng-click="promethee.preview = 'mobile'" ng-class="{active: promethee.preview == 'mobile'}"><a><i class="fa fa-mobile"></i></a></li>
+            </ul>
+          </li>
+          <li ng-click="promethee.fullscreen = !promethee.fullscreen">
+            <a ng-show="promethee.fullscreen"><%= fa_icon :expand %></a>
+            <a ng-hide="promethee.fullscreen"><%= fa_icon :compress %></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <% Dir["#{__dir__}/components/*/_edit.*.html.erb"].map do |file| %>
+    <% partial = file.split('app/views/').last.gsub('.html.erb', '').gsub('/_', '/') %>
+    <%= render partial %>
+  <% end %>
   <%= render 'promethee/edit/write' %>
   <%= render 'promethee/edit/move' %>
   <%= render 'promethee/edit/preview' %>