promethee 1.0.20 → 1.1.0

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

@@ -37,7 +37,7 @@ promethee_data = Promethee::Data.new master_data, localization_data: localizatio
      class="promethee-localizer"
      ng-app="PrometheeLocalizer"
      ng-controller="PrometheeLocalizerController as prometheeLocalizerController">
-  <input type="hidden" name="page[data]" id="page_data" value="{{data}}" />
+  <input type="hidden" name="localization[data]" id="page_data" value="{{data}}" />
 
   <%= render 'promethee/localize/component' %>
   <% Dir[__dir__ + '/localize/component/*.html.erb'].map do |file| %>

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

@@ -1,7 +1,6 @@
 <%
-promethee_data = Promethee::Data.new(master_data, localization_data: localization_data).to_h
+promethee_data = Promethee::Data.new master_data, localization_data: localization_data
 %>
-
 <div class="promethee">
   <%= render 'promethee/show/components', components: promethee_data[:children] %>
 </div>

data/app/views/promethee/edit/_move.html.erb

@@ -4,30 +4,9 @@
   <%= render "promethee/edit/move/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
 <% end %>
 
-<script type="text/ng-template" id="promethee/move">
-  <div  ng-init="components = component.children; type = component.type"
-        class="promethee__move--list">
-    <div  class="promethee__move--droppable promethee__move--droppable--{{type}} promethee__move--droppable--{{type}}--first"
-          droppable
-          data-index="0"
-          >
-    </div>
-    <div  ng-repeat="component in components"
-          class="promethee__move--draggable promethee__move--draggable--{{type}}"
-          draggable
-          data-index="{{$index}}"
-          data-type="{{component.type}}"
-          >
-        <ng-include src="'promethee/move/component/' + component.type"></ng-include>
-        <div  class="promethee__move--droppable promethee__move--droppable--{{type}}"
-              droppable
-              data-index="{{$index+1}}"
-              data-type="{{type}}"
-              >
-        </div>
-    </div>
-  </div>
-</script>
+<div class="promethee-editor__move" ng-show="mode == 'move'">
+  <ng-include src="'promethee/move/components'"></ng-include>
+</div>
 
 <script type="text/javascript">
   promethee
@@ -36,34 +15,31 @@
         restrict:'A',
         link: function(scope, element, attrs) {
           element.draggable({
+            revert: true,
+            revertDuration: 0,
             scroll: true,
-            cursor: "pointer",
-            cursorAt: { top: 0, left: 0 },
             refreshPositions: true,
             start: function() {
               var $elementDragged = $(element[0]);
-              $elementDragged.addClass('promethee__move--dragged');
               var type = $elementDragged.data('type');
-              $('.promethee__move').addClass('promethee__move--dragging promethee__move--dragging--' + type);
+              $('.promethee-editor__move').addClass('promethee-editor__move--dragging promethee-editor__move--dragging--' + type);
 
               // The droppable zone immediately before has no use, it would put the object at the same position
-              var $droppableBefore = $elementDragged.prev('.promethee__move--draggable').find('.promethee__move--droppable').last();
+              // FIXME the selector is not correct
+              /*
+              var $droppableBefore = $elementDragged.prev('.promethee-editor__move__draggable').find('.promethee-editor__move__droppable').last();
               if ($droppableBefore.length === 0) {
                 // For the first child, we look for the previous droppable zone
-                $droppableBefore = $elementDragged.prev('.promethee__move--droppable');
+                $droppableBefore = $elementDragged.prev('.promethee-editor__move__droppable');
               }
-              $droppableBefore.addClass('promethee__move--droppable--hidden');
+              $droppableBefore.addClass('promethee-editor__move__droppable--hidden');
+              */
             },
             stop: function() {
               var $elementDragged = $(element[0]);
-              $elementDragged.removeClass('promethee__move--dragged');
               var type = $elementDragged.data('type');
-              $('.promethee__move').removeClass('promethee__move--dragging promethee__move--dragging--' + type);
-
-              $('.promethee__move--droppable').removeClass('promethee__move--droppable--hidden');
-            },
-            helper: function( event ) {
-              return $( '<div></div>' );
+              $('.promethee-editor__move').removeClass('promethee-editor__move--dragging promethee-editor__move--dragging--' + type);
+              // $('.promethee-editor__move__droppable').removeClass('promethee-editor__move__droppable--hidden');
             }
           });
         }
@@ -74,9 +50,11 @@
         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;
@@ -89,6 +67,7 @@
                   droppedToIndex -= 1;
                 }
               }
+              // console.log('dropped', component, droppedToList, droppedToIndex);
               droppedToList.splice(droppedToIndex, 0, component);
 
               scope.$apply();

data/app/views/promethee/edit/_preview.html.erb

@@ -1,36 +1,4 @@
-<script type="text/ng-template" id="promethee/preview">
-  <div ng-controller="PreviewController" class="promethee-editor__preview promethee-editor__preview--{{preview.current}}">
-
-    <i class="fa fa-refresh fa-spin fa-3x fa-fw promethee-editor__preview-loader"></i>
-
-    <iframe
-      class="promethee-editor__preview-frame"
-      name="preview"
-      sandbox="allow-scripts"
-      frameBorder="0"
-    >
-    </iframe>
-  </div>
-</script>
-
-<script>
-  promethee.controller('PreviewController', ['data', '$scope', function(data, $scope) {
-    var update = function() {
-      var form = document.createElement('form');
-      form.method = 'post';
-      form.action = <%= promethee_preview_path.to_json.html_safe %>;
-      form.target = 'preview';
-
-      var input = document.createElement('input');
-      input.name = 'data';
-      input.value = JSON.stringify($scope.data);
-
-      form.appendChild(input);
-      form.submit();
-    };
-
-    $scope.$watch('action.current', function(newValue, oldValue) {
-      if(newValue !== oldValue && newValue == 'preview') update();
-    });
-  }]);
-</script>
+<div class="promethee-editor__preview promethee-editor__preview--{{preview}}" ng-show="mode == 'preview'">
+  <i class="fa fa-refresh fa-spin fa-fw promethee-editor__preview-loader"></i>
+  <iframe class="promethee-editor__preview-frame" name="preview" sandbox="allow-scripts" frameBorder="0"></iframe>
+</div>

data/app/views/promethee/edit/_write.html.erb

@@ -8,30 +8,14 @@
 <% Dir[__dir__ + '/inspector/component/_*.html.erb'].map do |file| %>
   <%= render "promethee/edit/inspector/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
 <% end %>
-
-<script type="text/ng-template" id="promethee/write">
-  <div class="promethee-editor__page">
-    <div ng-class="{ 'container': fullscreen.enabled, 'container-fluid': fullscreen.disabled }">
-      <div
-        ng-init="component = component || data"
-        class="promethee-editor__component promethee-editor__component--page"
-      >
-        <ng-include src="'promethee/write/components'"></ng-include>
-      </div>
+<div class="promethee-editor__write" ng-show="mode == 'write'">
+  <div ng-class="{ 'container-fluid': fullscreen }">
+    <div  ng-init="component = component || data"
+          class="promethee-editor__component promethee-editor__component--page"
+          >
+      <ng-include src="'promethee/write/components'"></ng-include>
     </div>
-    <ng-include src="'promethee/write/add_button'"></ng-include>
   </div>
-
-  <div class="promethee-editor__inspector" ng-class="{'promethee-editor__inspector--open': inspected.component}">
-    <div class="promethee-editor__inspector-header">
-      <div class="pull-right">
-        <span ng-click="inspected.component = null"><%= fa_icon 'window-close' %></span>
-      </div>
-      <h5 ng-if="inspected.component">{{inspected.component.type}}</h5>
-    </div>
-
-    <div ng-if="inspected.component" class="promethee-editor__inspector-content">
-      <ng-include src="'promethee/inspector/component/' + inspected.component.type"></ng-include>
-    </div>
-  </div>
-</script>
+  <ng-include src="'promethee/write/add_button'"></ng-include>
+  <%= render 'promethee/edit/inspector/inspector' %>
+</div>

data/app/views/promethee/edit/inspector/_inspector.html.erb

@@ -0,0 +1,11 @@
+<div class="promethee-editor__inspector" ng-show="promethee.inspected">
+  <div class="promethee-editor__inspector-header">
+    <div class="pull-right">
+      <span ng-click="promethee.inspected = null"><%= fa_icon :times %></span>
+    </div>
+    <h5>{{promethee.inspected.type}}</h5>
+  </div>
+  <div class="promethee-editor__inspector-content">
+    <ng-include ng-if="promethee.inspected" src="'promethee/inspector/component/' + promethee.inspected.type"></ng-include>
+  </div>
+</div>

data/app/views/promethee/edit/inspector/component/_column.html.erb

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/inspector/component/column">
   <div class="form-group">
     <label class="label-control">Size</label>
-    <input ng-model="inspected.component.attributes.size" class="form-control" type="number"/>
+    <input ng-model="promethee.inspected.attributes.size" class="form-control" type="number"/>
   </div>
   <div class="form-group">
     <label class="label-control">Offset</label>
-    <input ng-model="inspected.component.attributes.offset" class="form-control" type="number"/>
+    <input ng-model="promethee.inspected.attributes.offset" class="form-control" type="number"/>
   </div>
 </script>

data/app/views/promethee/edit/inspector/component/_cover.html.erb

@@ -1,6 +1,6 @@
 <script type="text/ng-template" id="promethee/inspector/component/cover">
   <div class="form-group">
     <label class="label-control">Image Url</label>
-    <input ng-model="inspected.component.attributes.src" class="form-control" type="text"/>
+    <input ng-model="promethee.inspected.attributes.src" class="form-control" type="text"/>
   </div>
 </script>

data/app/views/promethee/edit/inspector/component/_details.html.erb

@@ -1,6 +1,6 @@
 <script type="text/ng-template" id="promethee/inspector/component/details">
   <div class="form-group">
     <label class="label-control">Summary</label>
-    <input ng-model="inspected.component.attributes.summary" class="form-control" type="text"/>
+    <input ng-model="promethee.inspected.attributes.summary" class="form-control" type="text"/>
   </div>
 </script>

data/app/views/promethee/edit/inspector/component/_image.html.erb

@@ -1,12 +1,12 @@
 <script type="text/ng-template" id="promethee/inspector/component/image">
   <div class="form-group">
     <label class="label-control">Url</label>
-    <input class="form-control" ng-model="inspected.component.attributes.src">
+    <input class="form-control" ng-model="promethee.inspected.attributes.src">
   </div>
 
   <div class="form-group">
     <label class="label-control">Alt</label>
-    <input class="form-control" ng-model="inspected.component.attributes.alt">
+    <input class="form-control" ng-model="promethee.inspected.attributes.alt">
   </div>
 
   <div class="form-group">
@@ -18,6 +18,6 @@
         ['alignment', ['ul', 'ol', 'paragraph']],
         ['code', ['codeview']]
       ]
-    }" ng-model="inspected.component.attributes.caption"></summernote>
+    }" ng-model="promethee.inspected.attributes.caption"></summernote>
   </div>
 </script>

data/app/views/promethee/edit/inspector/component/_text.html.erb

@@ -1,13 +1,4 @@
 <script type="text/ng-template" id="promethee/inspector/component/text">
-  <ul class="list-group">
-    <li class="list-group-item">
-      Number of words
-      <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML: 'distinctParagraphs' | numberOfWords}}</span>
-    </li>
-
-    <li class="list-group-item">
-      Number of characters
-      <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML | numberOfCharacters}}</span>
-    </li>
-  </ul>
+  {{promethee.inspected.attributes.body | textContentFromHTML: 'distinctParagraphs' | numberOfWords}} words<br>
+  {{promethee.inspected.attributes.body | textContentFromHTML | numberOfCharacters}} characters
 </script>

data/app/views/promethee/edit/inspector/component/_video.html.erb

@@ -1,6 +1,6 @@
 <script type="text/ng-template" id="promethee/inspector/component/video">
   <div class="form-group">
     <label class="label-control">Url</label>
-    <input ng-model="inspected.component.attributes.url" class="form-control" type="text"/>
+    <input ng-model="promethee.inspected.attributes.url" class="form-control" type="text"/>
   </div>
 </script>

data/app/views/promethee/edit/move/_component.html.erb

@@ -1,3 +1,5 @@
 <script type="text/ng-template" id="promethee/move/component">
-  <ng-include src="'promethee/move/component/' + component.type"></ng-include>
+  <div class="promethee-editor__move__component">
+    <ng-include src="'promethee/move/component/' + component.type"></ng-include>
+  </div>
 </script>

data/app/views/promethee/edit/move/_components.html.erb

@@ -1,19 +1,25 @@
 <script type="text/ng-template" id="promethee/move/components">
   <div ng-init="type = component.type; components = component.children">
+    <div 
+      class="promethee-editor__move__droppable promethee-editor__move__droppable--{{type}} promethee-editor__move__droppable--{{type}}--first"
+      droppable
+      data-index="0"
+      >
+    </div>
     <div
       ng-repeat="component in components"
-      class="promethee__move--draggable promethee__move--draggable--{{type}}"
+      class="promethee-editor__move__draggable promethee-editor__move__draggable--{{type}}"
       draggable
       data-index="{{$index}}"
       data-type="{{component.type}}"
-    >
+      >
       <ng-include src="'promethee/move/component'"></ng-include>
       <div
-        class="promethee__move--droppable promethee__move--droppable--{{type}}"
+        class="promethee-editor__move__droppable promethee-editor__move__droppable--{{type}}"
         droppable
         data-index="{{$index+1}}"
         data-type="{{type}}"
-      >
+        >
       </div>
     </div>
   </div>

data/app/views/promethee/edit/move/component/_column.html.erb

@@ -1,13 +1,15 @@
 <script type="text/ng-template" id="promethee/move/component/column">
   <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
-    <h1>Column</h1>
-    <ng-include src="'promethee/move'"></ng-include>
-    <div  class=" promethee__move--droppable
-                  promethee__move--droppable--row
-                  promethee__move--droppable--row--inside-column"
-          droppable
-          data-index="{{$index+1}}"
-          data-type="{{type}}"
-          >
+    <div class="header">Column</div>
+    <ng-include src="'promethee/move/components'"></ng-include>
+    <div 
+      class=" promethee-editor__move__droppable
+              promethee-editor__move__droppable--row
+              promethee-editor__move__droppable--row--inside-column"
+      droppable
+      data-index="{{$index+1}}"
+      data-type="{{type}}"
+      >
+    </div>
   </div>
 </script>

data/app/views/promethee/edit/move/component/_cover.html.erb

@@ -3,6 +3,6 @@
       class="promethee-editor__wrapper promethee-editor__cover-content"
       ng-bind-html="component.attributes.body | htmlSafe"
       style="background-image: url('{{component.attributes.src}}')"
-    ></div>
+      ></div>
   </div>
 </script>

data/app/views/promethee/edit/move/component/_details.html.erb

@@ -1,6 +1,6 @@
 <script type="text/ng-template" id="promethee/move/component/details">
   <details>
     <summary>{{component.attributes.summary}}</summary>
-    <ng-include src="'promethee/move'"></ng-include>
+    <ng-include src="'promethee/move/components'"></ng-include>
   </details>
 </script>

data/app/views/promethee/edit/move/component/_row.html.erb

@@ -1,6 +1,6 @@
 <script type="text/ng-template" id="promethee/move/component/row">
-  <h1>Row</h1>
+  <div class="header">Row</div>
   <div class="row">
-    <ng-include src="'promethee/move'"></ng-include>
+    <ng-include src="'promethee/move/components'"></ng-include>
   </div>
 </script>

data/app/views/promethee/edit/shared/_data.html.erb

@@ -0,0 +1 @@
+<input type="hidden" name="page[data]" id="page_data" value="{{data}}" />

data/app/views/promethee/edit/shared/_navbar.html.erb

@@ -1,29 +1,23 @@
-<nav class="navbar navbar-default promethee-editor__navbar">
+<nav class="navbar navbar-default promethee-editor__navbar" ng-class="{'navbar-fixed-top': fullscreen }">
   <div class="container-fluid">
     <div class="navbar-header promethee-editor__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="action.toggle('move')" ng-class="{active: action.is('move')}"><a><%= fa_icon :arrows %></a></li>
-
-        <li
-          ng-show="action.is('preview')"
-          ng-repeat="device in ['desktop', 'tablet', 'mobile']"
-          ng-click="preview.set(device)"
-          ng-class="{active: preview.is(device)}"
-        >
-          <a><i class="fa fa-{{device}}"></i></a>
+        <li ng-click="mode = 'write'" ng-class="{active: mode == 'write'}"><a><%= fa_icon :pencil %></a></li>
+        <li ng-click="mode = 'move'" ng-class="{active: mode == 'move'}"><a><%= fa_icon :arrows %></a></li>
+        <li ng-click="enablePreview()" ng-class="{active: mode == 'preview'}">
+          <a data-toggle="dropdown"><%= fa_icon :eye %></a>
+          <ul class="dropdown-menu" ng-show="mode == 'preview'">
+            <li ng-click="preview = 'desktop'" ng-class="{active: preview == 'desktop'}"><a><i class="fa fa-desktop"></i></a></li>
+            <li ng-click="preview = 'tablet'" ng-class="{active: preview == 'tablet'}"><a><i class="fa fa-tablet"></i></a></li>
+            <li ng-click="preview = 'mobile'" ng-class="{active: preview == 'mobile'}"><a><i class="fa fa-mobile"></i></a></li>
+          </ul>
         </li>
-
-        <li ng-click="action.toggle('preview')" ng-class="{active: action.is('preview')}">
-          <a ng-hide="action.is('preview')"><%= fa_icon :eye %></a>
-          <a ng-show="action.is('preview')"><%= fa_icon 'eye-slash' %></a>
-        </li>
-
-        <li ng-click="fullscreen.toggle()" ng-class="{active: fullscreen.enabled}">
-          <a ng-show="fullscreen.disabled"><%= fa_icon :expand %></a>
-          <a ng-show="fullscreen.enabled"><%= fa_icon :compress %></a>
+        <li ng-click="fullscreen = !fullscreen">
+          <a ng-show="fullscreen"><%= fa_icon :expand %></a>
+          <a ng-hide="fullscreen"><%= fa_icon :compress %></a>
         </li>
       </ul>
     </div>

data/app/views/promethee/edit/write/_add_button.html.erb

@@ -1,33 +1,26 @@
 <script type="text/ng-template" id="promethee/write/add_button">
-  <span
-    type="button"
-    class="btn btn-default btn-block"
-    ng-click="addComponentTo(data.children)"
-    ng-hide="action.is('preview')"
-    style="margin-bottom: 6px"
-  >
-    Add component
-  </span>
+  <a ng-click="addComponentTo(component.children)" class="promethee-editor__adder__button"><%= fa_icon 'plus-circle', class: "fa-3x" %></a>
+</script>
 
-  <div class="promethee-editor__adder" ng-controller="AdderController">
-    <div class="modal fade in" tabindex="-1" role="dialog" style="display: {{adding ? 'block' : 'none'}}">
-      <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" ng-click="close()"><span aria-hidden="true">&times;</span></button>
-            <h4 class="modal-title">Select component</h4>
-          </div>
-          <div class="modal-body">
-            <div class="row">
-              <div
-                ng-repeat="definition in definitions"
-                ng-click="pushComponent(definition)"
-                class="col-md-3"
-              >
-                <div class="thumbnail">
-                  <img ng-src="{{definition.thumb}}" class="img-responsive">
-                  <h4>{{definition.name}}</h4>
-                </div>
+<div class="promethee-editor__adder" ng-controller="AdderController">
+  <div class="modal fade in" tabindex="-1" role="dialog" style="display: {{adding ? 'block' : 'none'}}">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" ng-click="close()"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">Select component</h4>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div
+              ng-repeat="definition in definitions"
+              ng-click="pushComponent(definition)"
+              class="col-md-3"
+            >
+              <div class="thumbnail">
+                <img ng-src="{{definition.thumb}}" class="img-responsive">
+                <h4>{{definition.name}}</h4>
+                <p>{{definition.description}}</p>
               </div>
             </div>
           </div>
@@ -35,12 +28,11 @@
       </div>
     </div>
   </div>
-</script>
+</div>
 
 <script type="text/javascript">
-  promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', 'action', function($scope, $rootScope, definitions, action) {
+  promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', function($scope, $rootScope, definitions) {
 
-    $scope.action = action;
     $scope.adding = false;
     $scope.childrenToAddTo = null;
     $scope.definitions = definitions;