promethee 1.1.0 → 1.2.0

data/app/views/promethee/{edit/write/component/_slider.html.erb → components/slider/_edit.write.html.erb}

@@ -1,41 +1,44 @@
-<script type="text/ng-template" id="promethee/write/component/slider">
-  <div
-    ng-controller="SliderController"
-    ng-click="inspect(component, $event)"
-    class="row promethee-editor__component promethee-editor__component--slider"
-  >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
-      <div class="promethee-editor__toolbar">
+<script type="text/ng-template" id="promethee/components/slider/edit/write">
+  <div  ng-controller="SliderController"
+        ng-click="inspect(component, $event)"
+        class=" row 
+                promethee-edit__component 
+                promethee-edit__component--slider">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
         Slider
-
         <ng-include src="'promethee/write/toolbar'"></ng-include>
-
         <div class="pull-right">
-          <span ng-show="editing" ng-click="prev()" class="promethee-editor__button"><%= fa_icon 'chevron-left' %></span>
-          <span ng-show="editing" ng-click="next()" class="promethee-editor__button"><%= fa_icon 'chevron-right' %></span>
+          <span ng-show="editing" ng-click="prev()" class="promethee-edit__button"><%= fa_icon 'chevron-left' %></span>
+          <span ng-show="editing" ng-click="next()" class="promethee-edit__button"><%= fa_icon 'chevron-right' %></span>
         </div>
       </div>
-
       <div id="{{sliderId}}" class="carousel slide" data-ride="carousel" ng-init="components = component.children">
         <div class="carousel-inner" style="min-height: 100px">
           <div ng-repeat="component in components track by $index" class="item" ng-class="{active: $index === 0}">
             <ng-include src="'promethee/' + (editing ? 'write' : 'move') + '/component'"></ng-include>
           </div>
         </div>
-
-        <a ng-hide="editing" ng-click="$event.preventDefault()" class="left carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="prev">
+        <a  ng-hide="editing" 
+            ng-click="$event.preventDefault()" 
+            class="left carousel-control fontawesome-carousel-control" 
+            href="#{{sliderId}}" 
+            data-slide="prev">
           <%= fa_icon 'angle-left' %>
         </a>
-        <a ng-hide="editing" ng-click="$event.preventDefault()" class="right carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="next">
+        <a  ng-hide="editing" 
+            ng-click="$event.preventDefault()" 
+            class="right carousel-control fontawesome-carousel-control" 
+            href="#{{sliderId}}" 
+            data-slide="next">
           <%= fa_icon 'angle-right' %>
         </a>
       </div>
-
-      <span
-        type="button"
-        class="btn btn-default btn-block"
-        ng-click="addComponentTo(component.children);goToLastItem();"
-      >
+      <span type="button"
+            class=" btn 
+                    btn-default 
+                    btn-block"
+            ng-click="addComponentTo(component.children);goToLastItem();">
         Add item
       </span>
     </div>
@@ -43,16 +46,6 @@
 </script>
 
 <script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Slider',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'slider',
-      attributes: {},
-      children: []
-    }
-  });
-
   promethee.controller('SliderController', ['$scope', '$element', function($scope, $element) {
     $scope.sliderId = 'slider-' + Date.now() + '-' + Math.floor(Math.random()*1000000);
 

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

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/components/slider/localize">
+
+</script>

data/app/views/promethee/components/text/_edit.define.html.erb

@@ -0,0 +1,12 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Text',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'text',
+      attributes: {
+        body: 'Edit me'
+      }
+    }
+  });
+</script>

data/app/views/promethee/{edit/inspector/component/_text.html.erb → components/text/_edit.inspect.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/inspector/component/text">
+<script type="text/ng-template" id="promethee/components/text/edit/inspect">
   {{promethee.inspected.attributes.body | textContentFromHTML: 'distinctParagraphs' | numberOfWords}} words<br>
   {{promethee.inspected.attributes.body | textContentFromHTML | numberOfCharacters}} characters
 </script>

data/app/views/promethee/{edit/move/component/_text.html.erb → components/text/_edit.move.html.erb}

@@ -1,3 +1,3 @@
-<script type="text/ng-template" id="promethee/move/component/text">
+<script type="text/ng-template" id="promethee/components/text/edit/move">
   <div ng-bind-html="component.attributes.body | htmlSafe"></div>
 </script>

data/app/views/promethee/components/text/_edit.write.html.erb

@@ -0,0 +1,32 @@
+<script type="text/ng-template" id="promethee/components/text/edit/write">
+  <div  ng-controller="TextController"
+        ng-click="inspect(component, $event)"
+        class=" promethee-edit__component
+                promethee-edit__component--text">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
+        Text
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <div ng-show="promethee.inspected === component">
+        <summernote config="options" ng-model="component.attributes.body"></summernote>
+      </div>
+      <div ng-hide="promethee.inspected === component">
+        <div class="promethee-edit__wrapper" ng-bind-html="component.attributes.body | htmlSafe"></div>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script>
+  promethee.controller('TextController', ['$scope', function($scope) {
+    $scope.options = {
+      toolbar: [
+        ['headline', ['style']],
+        ['style', ['bold', 'italic']],
+        ['alignment', ['ul', 'ol', 'paragraph']],
+        ['code', ['codeview']]
+      ]
+    };
+  }]);
+</script>

data/app/views/promethee/{localize/component/_text.html.erb → components/text/_localize.html.erb}

@@ -1,11 +1,13 @@
-<script type="text/ng-template" id="promethee/localize/component/text">
+<script type="text/ng-template" id="promethee/components/text/localize">
   <div class="row">
     <div class="col-md-6">
+      <b>Local</b>
       <summernote config="options" ng-model="component.attributes.body"></summernote>
     </div>
     <div class="col-md-6">
       <b>Master</b>
-      <div class="promethee-editor__wrapper" ng-bind-html="component.master.attributes.body | htmlSafe"></div>
+      <div class="promethee-edit__wrapper" ng-bind-html="component.master.attributes.body | htmlSafe"></div>
     </div>
   </div>
+  <hr>
 </script>

data/app/views/promethee/components/video/_edit.define.html.erb

@@ -0,0 +1,12 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Video',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'video',
+      attributes: {
+        url: 'https://vimeo.com/115082758'
+      }
+    }
+  });
+</script>

data/app/views/promethee/{edit/inspector/component/_video.html.erb → components/video/_edit.inspect.html.erb}

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

data/app/views/promethee/{edit/move/component/_video.html.erb → components/video/_edit.move.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/move/component/video">
+<script type="text/ng-template" id="promethee/components/video/edit/move">
   <div ng-controller="VideoController">
     <div class="embed-responsive embed-responsive-16by9">
       <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>

data/app/views/promethee/{edit/write/component/_video.html.erb → components/video/_edit.write.html.erb}

@@ -1,15 +1,13 @@
-<script type="text/ng-template" id="promethee/write/component/video">
-  <div
-    ng-controller="VideoController"
-    ng-click="inspect(component, $event)"
-    class="promethee-editor__component promethee-editor__component--video"
-  >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
-      <div class="promethee-editor__toolbar">
+<script type="text/ng-template" id="promethee/components/video/edit/write">
+  <div  ng-controller="VideoController"
+        ng-click="inspect(component, $event)"
+        class=" promethee-edit__component 
+                promethee-edit__component--video">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
         Video
         <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-
       <div class="embed-responsive embed-responsive-16by9">
         <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
         <div class="video-neutralizing-overlay"></div>
@@ -19,37 +17,7 @@
 </script>
 
 <script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Video',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'video',
-      attributes: {
-        url: 'https://vimeo.com/115082758'
-      }
-    }
-  });
-
   promethee.controller('VideoController', ['$scope', function($scope) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
     Object.defineProperty($scope, 'embed', {
       get: function() {
         var embed = null;

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

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/components/video/localize">
+
+</script>

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

@@ -1,79 +1,40 @@
-<%= render 'promethee/edit/move/component' %>
-<%= render 'promethee/edit/move/components' %>
-<% Dir[__dir__ + '/move/component/*.html.erb'].map do |file| %>
-  <%= render "promethee/edit/move/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
-<% end %>
-
-<div class="promethee-editor__move" ng-show="mode == 'move'">
+<div class="promethee-edit__move" ng-show="promethee.mode == 'move'">
   <ng-include src="'promethee/move/components'"></ng-include>
 </div>
 
-<script type="text/javascript">
-  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-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
-              // 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-editor__move__droppable');
-              }
-              $droppableBefore.addClass('promethee-editor__move__droppable--hidden');
-              */
-            },
-            stop: function() {
-              var $elementDragged = $(element[0]);
-              var type = $elementDragged.data('type');
-              $('.promethee-editor__move').removeClass('promethee-editor__move--dragging promethee-editor__move--dragging--' + type);
-              // $('.promethee-editor__move__droppable').removeClass('promethee-editor__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);
+<script type="text/ng-template" id="promethee/move/component">
+  <div class="promethee-edit__move__component">
+    <ng-include src="'promethee/components/' + component.type + '/edit/move'"></ng-include>
+  </div>
+</script>
 
-              scope.$apply();
-            }
-          });
-        }
-      }
-    });
+<script type="text/ng-template" id="promethee/move/components">
+  <div ng-init="type = component.type; components = component.children">
+    <div 
+      droppable
+      class=" promethee-edit__move__droppable 
+              promethee-edit__move__droppable--{{type}} 
+              promethee-edit__move__droppable--{{type}}--first"
+      data-index="0"
+      >
+    </div>
+    <div
+      draggable
+      ng-repeat="component in components"
+      class=" promethee-edit__move__draggable
+              promethee-edit__move__draggable--{{type}}"
+      data-index="{{$index}}"
+      data-type="{{component.type}}"
+      >
+      <ng-include src="'promethee/move/component'"></ng-include>
+      <div
+        droppable
+        class=" promethee-edit__move__droppable 
+                promethee-edit__move__droppable--{{type}}"
+        data-index="{{$index+1}}"
+        data-type="{{type}}"
+        >
+      </div>
+    </div>
+  </div>
 </script>

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

@@ -1,4 +1,4 @@
-<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 class="promethee-edit__preview promethee-edit__preview--{{promethee.preview}}" ng-show="promethee.mode == 'preview'">
+  <i class="fa fa-refresh fa-spin fa-fw promethee-edit__preview-loader"></i>
+  <iframe class="promethee-edit__preview-frame" name="preview" sandbox="allow-scripts" frameBorder="0"></iframe>
 </div>

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

@@ -1,21 +1,71 @@
-<%= render 'promethee/edit/write/add_button' %>
-<%= render 'promethee/edit/write/toolbar' %>
-<%= render 'promethee/edit/write/component' %>
-<%= render 'promethee/edit/write/components' %>
-<% Dir[__dir__ + '/write/component/_*.html.erb'].map do |file| %>
-  <%= render "promethee/edit/write/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
-<% end %>
-<% Dir[__dir__ + '/inspector/component/_*.html.erb'].map do |file| %>
-  <%= render "promethee/edit/inspector/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
-<% end %>
-<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"
-          >
+<div class="promethee-edit__write" ng-show="promethee.mode == 'write'">
+  <div ng-class="{ 'container-fluid': promethee.fullscreen }">
+    <div  ng-init="component = promethee.data"
+          class=" promethee-edit__component 
+                  promethee-edit__component--page">
       <ng-include src="'promethee/write/components'"></ng-include>
     </div>
   </div>
   <ng-include src="'promethee/write/add_button'"></ng-include>
-  <%= render 'promethee/edit/inspector/inspector' %>
-</div>
+  <div class="promethee-edit__inspect" ng-show="promethee.inspected">
+    <div class="promethee-edit__inspect-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-edit__inspect-content">
+      <ng-include ng-if="promethee.inspected" src="'promethee/components/' + promethee.inspected.type + '/edit/inspect'"></ng-include>
+    </div>
+  </div>
+</div>
+
+<script type="text/ng-template" id="promethee/write/components">
+  <div ng-init="components = component.children">
+    <div ng-repeat="component in components">
+      <ng-include src="'promethee/write/component'"></ng-include>
+    </div>
+  </div>
+</script>
+
+<script type="text/ng-template" id="promethee/write/component">
+  <ng-include src="'promethee/components/' + component.type + '/edit/write'"></ng-include>
+</script>
+
+<script type="text/ng-template" id="promethee/write/toolbar">
+  <div class="pull-right">
+    <span ng-click="remove(component, components)" class="promethee-edit__button"><%= fa_icon :times %></span>
+  </div>
+</script>
+
+<script type="text/ng-template" id="promethee/write/add_button">
+  <a ng-click="addComponentTo(component.children)" class="promethee-edit__adder__button"><%= fa_icon 'plus-circle', class: "fa-3x" %></a>
+</script>
+
+<div class="promethee-edit__adder" ng-controller="AdderController">
+  <% # FIXME le style comme ça ce n'est pas propre, sortir de la modal bootstrap et utiliser ng-show %>
+  <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>