promethee 1.0.12 → 1.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7fe31ec0d7adc409f49fbf90da07df2a23d2f0d2
-  data.tar.gz: 678e2427463e8ff0889d9fd97b32e194c0f29160
+  metadata.gz: 015e43dd4219428e600f3d92561e7f3278337d69
+  data.tar.gz: 8ad05e21264ef4945f3a811cb620932fbeeb4b97
 SHA512:
-  metadata.gz: bc907edd671068955c40ad3ef09a40a034a3a5fe47cba2fb65887d7155a0a4980fb25777637b0524515696f72a69fcccd6922f16ce2dc8702337f38654a2cfd6
-  data.tar.gz: 6a2e2276aadbdda5316409d5abaac12c3fbe41e889009c9c47dd7f29f13c4f3611c22e6185003a67bfa49e8566588b70e3e94af64b810a4c33b13ccc9d4b52bf
+  metadata.gz: 6ecbd712471d0692f881983a089d3b9d11ab0d86c6defdaa457f0fa846d5770d276063e41bf4615f1663a6c4c65206b9f8a1852311b3968b96805703e9df435f
+  data.tar.gz: 1842b06180cb6df6c14e8e1a2e7bc145e1ffbdf46555f879960b704ffb867854ed2df8e3cc3a1578834c075bdfe89c50f98dcbbd284bd463562a9df08df0625d

data/app/assets/stylesheets/promethee-editor/_mover.sass

@@ -1,4 +1,4 @@
-.promethee-editor__mover
+.promethee__move
   transform-origin: top
   transition: transform ease-out 0.5s
   transform: scale(0.3)
@@ -17,46 +17,53 @@
     &--row
       padding-left: 10px
   &--droppable
+    margin: 10px 0
     position: relative
-    background: white
-    width: 200px
-    height: 50px
+    border-radius: 6px
+    border: 5px solid transparent
+    width: 400px
+    height: 40px
+    transition: .2s
     &--hidden
       visibility: hidden
+      pointer-events: none
+
     &--row
-      display: none
+      &:not(&--first)
+        visibility: hidden
+        pointer-events: none
+
       &--first
-        display: block
         position: absolute
         top: 0
         left: -25px
-        width: 50px
-        height: 200px
+        width: 40px
+        height: 400px
       &--inside-column
         position: absolute
         top: 0
         right: -25px
-        width: 50px
-        height: 200px
+        width: 40px
+        height: 400px
   &--dragged
     opacity: 0.25
-  .ui-droppable-hover
-    opacity: 1 !important
-    margin-bottom: 0
   .ui-droppable-active
-    background: $promethee-color
-    opacity: 0.5
+    border-color: $promethee-color
+
+  .ui-droppable-hover
+    background: transparentize($promethee-color, .6)
+
   // By default, nothing is dropped in rows
   &--dragging
-    .promethee-editor__mover--droppable.promethee-editor__mover--droppable--row
+    .promethee__move--droppable.promethee__move--droppable--row
       display: none
   // Except for columns, which can be dropped only on rows
-  &--dragging.promethee-editor__mover--dragging--column 
-    .promethee-editor__mover--droppable
+  &--dragging.promethee__move--dragging--column
+    .promethee__move--droppable
       display: none
       // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
-      &.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--inside-column,
-      &.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--first
+      &.promethee__move--droppable.promethee__move--droppable--row--inside-column,
+      &.promethee__move--droppable.promethee__move--droppable--row--first
         display: block
   .video-neutralizing-overlay
     background: transparent

data/app/assets/stylesheets/promethee-editor/_preview.sass

@@ -1,25 +1,30 @@
 .promethee-editor__preview
+  background: #000
   position: relative
   height: calc(100% - 52px)
   min-height: 500px
-  background: black
   margin-top: -20px
-  &--frame
-    transition: width 1s, left 1s, margin 1s
+
+  &-frame
+    top: 0
+    left: 50%
+    transition: width .7s
     position: absolute
     height: 100%
-  &--mobile
-    .promethee-editor__preview--frame
-      left: 50%
-      margin-left: -187px
-      width: 375px
-  &--tablet
-    .promethee-editor__preview--frame
-      left: 50%
-      margin-left: -384px
-      width: 768px
-  &--desktop
-    .promethee-editor__preview--frame
-      width: 100%
-      left: 0
-      right: 0
+    transform: translate3d(-50%, 0, 0)
+
+  &-loader
+    left: 50%
+    margin: 100px 0
+    position: absolute
+    color: #fff
+    transform: translateX(-50%)
+
+  &--mobile &-frame
+    width: 375px
+
+  &--tablet &-frame
+    width: 768px
+
+  &--desktop &-frame
+    width: 100%

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

@@ -8,6 +8,9 @@ promethee_data = Promethee::Data.new master_data
     .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);
@@ -28,7 +31,7 @@ promethee_data = Promethee::Data.new master_data
   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 === '') {
+    if(data === null || data === '') {
       data = {
         id: '',
         type: 'page',
@@ -36,66 +39,82 @@ promethee_data = Promethee::Data.new master_data
         children: []
       };
     }
-    $scope.data = data;
 
-    // Preview modes
-    $scope.fullscreen = false;
-    $scope.move = false;
-    $scope.preview = false;
-    $scope.pageHidden = false;
-    $scope.previewMode = 'desktop';
+    $scope.data = $scope.component = data;
 
-    var moveTimeout;
-
-    $scope.enableMove = function() {
-      clearTimeout(moveTimeout);
-      this.move = true;
+    var State = function(value) {
+      this.default = this.current = value;
     };
 
-    $scope.disableMove = function() {
-      var self = this;
+    State.prototype = {
+      get enabled() {
+        return !!this.current;
+      },
 
-      this.pageHidden = true;
-      this.move = false;
-      moveTimeout = setTimeout(function() {
-        self.pageHidden = false;
-        self.$apply();
-      }, 500);
-    };
+      get disabled() {
+        return !this.enabled;
+      },
 
-    $scope.toggleMove = function() {
-      this.move ? this.disableMove() : this.enableMove();
-    };
+      enable: function() {
+        this.set(true);
+      },
 
-    $scope.enablePreview = function() {
-      this.preview = true;
-      this.move = false;
-
-      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);
-    }
+      disable: function() {
+        this.set(false);
+      },
 
-    $scope.disablePreview = function() {
-      this.preview = false;
-    }
+      is: function(state) {
+        return this.current === state;
+      },
 
-    $scope.enableFullscreen = function() {
-      this.fullscreen = true;
-    }
+      set: function(state) {
+        this.current = state
+      },
 
-    $scope.disableFullscreen = function() {
-      this.fullscreen = false;
-    }
+      exit: function(state) {
+        if(this.is(state)) this.current = this.default;
+      },
+
+      toggle: function(state) {
+        if(arguments.length === 0) state = true;
+        this.is(state) ? this.exit(state) : this.set(state)
+      }
+    };
+
+    // Application states
+    $scope.action = new State('write');
+    $scope.preview = new State('desktop');
+    $scope.fullscreen = new State(false);
+
+    // $scope.enablePreview = function() {
+    //   this.preview = true;
+    //   this.move = false;
+
+    //   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.disablePreview = function() {
+    //   this.preview = false;
+    // }
+
+    // $scope.enableFullscreen = function() {
+    //   this.fullscreen = true;
+    // }
+
+    // $scope.disableFullscreen = function() {
+    //   this.fullscreen = false;
+    // }
 
     $scope.remove = function(component, components) {
       var index = components.indexOf(component);
@@ -106,20 +125,33 @@ promethee_data = Promethee::Data.new master_data
 
 </script>
 
-<div id="promethee"
-     class="promethee-editor"
-     ng-app="Promethee"
-     ng-controller="PrometheeController as prometheeController"
-     ng-class="{
-       'promethee-editor--fullscreen': fullscreen,
-       'promethee-editor--move': move,
-       'promethee-editor--preview': preview
-     }">
+<div
+  id="promethee"
+  ng-class="{
+    'promethee-editor': true,
+    'promethee-editor--fullscreen': fullscreen.enabled
+  }"
+  ng-app="Promethee"
+  ng-controller="PrometheeController as prometheeController"
+>
+  <%= render 'promethee/edit/shared/navbar' %>
+
+  <%= render 'promethee/edit/write' %>
+  <%= render 'promethee/edit/move' %>
+  <%= render 'promethee/edit/preview' %>
+
   <input type="hidden" name="page[data]" id="page_data" value="{{data}}" />
-  <%= render 'promethee/partials/include_components' %>
-  <%= render 'promethee/partials/navbar' %>
-  <%= render 'promethee/partials/preview' %>
-  <%= render 'promethee/partials/mover' %>
-  <%= render 'promethee/partials/page' %>
+
+  <div ng-show="action.is('write')" class="promethee__write">
+    <ng-include src="'promethee/write'"></ng-include>
+  </div>
+
+  <div ng-show="action.is('move')" class="promethee__move">
+    <ng-include src="'promethee/move'"></ng-include>
+  </div>
+
+  <div ng-show="action.is('preview')" class="promethee__preview">
+    <ng-include src="'promethee/preview'"></ng-include>
+  </div>
 </div>
 

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

@@ -14,7 +14,7 @@ promethee_data = Promethee::Data.new master_data, localization_data: localizatio
 
   prometheeLocalizer.controller('PrometheeLocalizerController', ['$scope', 'data', function($scope, data) {
 
-    $scope.data = data;
+    $scope.data = $scope.component = data;
 
     $scope.options = {
       toolbar: [
@@ -37,8 +37,12 @@ promethee_data = Promethee::Data.new master_data, localization_data: localizatio
      ng-app="PrometheeLocalizer"
      ng-controller="PrometheeLocalizerController as prometheeLocalizerController">
   <input type="hidden" name="page[data]" id="page_data" value="{{data}}" />
-  <%= render 'promethee/partials/include_components' %>
-  <div ng-repeat="component in data.components">
-    <ng-include src="'promethee/components/' + component.type + '/localize'"></ng-include>
+
+  <% Dir[__dir__ + '/localize/component/*.html.erb'].map do |file| %>
+    <%= render "promethee/localize/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
+  <% end %>
+
+  <div ng-repeat="component in component.children">
+    <ng-include src="'promethee/localize/components'"></ng-include>
   </div>
 </div>

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

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

data/app/views/promethee/{partials/_mover.html.erb → edit/_move.html.erb}

@@ -1,19 +1,25 @@
-<script type="text/ng-template" id="promethee/partials/mover">
+<%= 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 %>
+
+<script type="text/ng-template" id="promethee/move">
   <div  ng-init="components = component.children; type = component.type"
-        class="promethee-editor__mover--list">
-    <div  class="promethee-editor__mover--droppable promethee-editor__mover--droppable--{{type}} promethee-editor__mover--droppable--{{type}}--first"
+        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-editor__mover--draggable promethee-editor__mover--draggable--{{type}}"
+          class="promethee__move--draggable promethee__move--draggable--{{type}}"
           draggable
           data-index="{{$index}}"
           data-type="{{component.type}}"
           >
-        <ng-include src="'promethee/components/' + component.type + '/move'"></ng-include>
-        <div  class="promethee-editor__mover--droppable promethee-editor__mover--droppable--{{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}}"
@@ -23,10 +29,6 @@
   </div>
 </script>
 
-<div class="promethee-editor__mover" ng-show="move || moverVisible" ng-init="component = data">
-  <ng-include src="'promethee/partials/mover'"></ng-include>
-</div>
-
 <script type="text/javascript">
   promethee
     .directive('draggable', function() {
@@ -40,25 +42,25 @@
             refreshPositions: true,
             start: function() {
               var $elementDragged = $(element[0]);
-              $elementDragged.addClass('promethee-editor__mover--dragged');
+              $elementDragged.addClass('promethee__move--dragged');
               var type = $elementDragged.data('type');
-              $('.promethee-editor__mover').addClass('promethee-editor__mover--dragging promethee-editor__mover--dragging--' + type);
+              $('.promethee__move').addClass('promethee__move--dragging promethee__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-editor__mover--draggable').find('.promethee-editor__mover--droppable').last();
+              var $droppableBefore = $elementDragged.prev('.promethee__move--draggable').find('.promethee__move--droppable').last();
               if ($droppableBefore.length === 0) {
                 // For the first child, we look for the previous droppable zone
-                $droppableBefore = $elementDragged.prev('.promethee-editor__mover--droppable');
+                $droppableBefore = $elementDragged.prev('.promethee__move--droppable');
               }
-              $droppableBefore.addClass('promethee-editor__mover--droppable--hidden');
+              $droppableBefore.addClass('promethee__move--droppable--hidden');
             },
             stop: function() {
               var $elementDragged = $(element[0]);
-              $elementDragged.removeClass('promethee-editor__mover--dragged');
+              $elementDragged.removeClass('promethee__move--dragged');
               var type = $elementDragged.data('type');
-              $('.promethee-editor__mover').removeClass('promethee-editor__mover--dragging promethee-editor__mover--dragging--' + type);
+              $('.promethee__move').removeClass('promethee__move--dragging promethee__move--dragging--' + type);
 
-              $('.promethee-editor__mover--droppable').removeClass('promethee-editor__mover--droppable--hidden');
+              $('.promethee__move--droppable').removeClass('promethee__move--droppable--hidden');
             },
             helper: function( event ) {
               return $( '<div></div>' );

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

@@ -0,0 +1,36 @@
+<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>

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

@@ -0,0 +1,21 @@
+<%= 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 %>
+
+<script type="text/ng-template" id="promethee/write">
+  <div class="promethee-editor__page">
+    <div ng-class="{ 'container': fullscreen }">
+      <div
+        ng-init="component = component || data"
+        class="promethee-editor__component promethee-editor__component--page"
+      >
+        <ng-include src="'promethee/write/components'"></ng-include>
+      </div>
+    </div>
+    <ng-include src="'promethee/write/add_button'"></ng-include>
+  </div>
+</script>

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

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

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

@@ -0,0 +1,20 @@
+<script type="text/ng-template" id="promethee/move/components">
+  <div ng-init="type = component.type; components = component.children">
+    <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'"></ng-include>
+      <div
+        class="promethee__move--droppable promethee__move--droppable--{{type}}"
+        droppable
+        data-index="{{$index+1}}"
+        data-type="{{type}}"
+      >
+      </div>
+    </div>
+  </div>
+</script>

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

@@ -0,0 +1,13 @@
+<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>
+</script>

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

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/move/component/image">
+  <img ng-src="{{component.attributes.src}}" class="img-responsive">
+</script>

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

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

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

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

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

@@ -0,0 +1,8 @@
+<script type="text/ng-template" id="promethee/move/component/video">
+  <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>
+      <div class="video-neutralizing-overlay"></div>
+    </div>
+  </div>
+</script>

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

@@ -0,0 +1,31 @@
+<nav class="navbar navbar-default promethee-editor__navbar">
+  <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>
+
+        <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>
+      </ul>
+    </div>
+  </div>
+</nav>

data/app/views/promethee/{partials/_adder.html.erb → edit/write/_add_button.html.erb}

@@ -1,25 +1,33 @@
-<span type="button" 
-      class="btn btn-default btn-block" 
-      ng-click="addComponentTo(data.children)" 
-      ng-hide="preview"
-      style="margin-bottom: 6px">Add component</span>
+<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="preview"
+    style="margin-bottom: 6px"
+  >
+    Add component
+  </span>
 
-<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 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>
             </div>
           </div>
@@ -27,7 +35,8 @@
       </div>
     </div>
   </div>
-</div>
+</script>
+
 <script type="text/javascript">
   promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', function($scope, $rootScope, definitions) {
 
@@ -61,4 +70,4 @@
     };
 
   }]);
-</script>
+</script>

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

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/write/component">
+  <ng-include src="'promethee/write/component/' + component.type"></ng-include>
+</script>

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

@@ -0,0 +1,7 @@
+<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>

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

@@ -0,0 +1,6 @@
+<script type="text/ng-template" id="promethee/write/toolbar">
+  <div class="pull-right">
+    <span ng-click="editing = !editing" class="promethee-editor__button"><%= fa_icon 'pencil-square' %></span>
+    <span ng-click="remove(component, components)" class="promethee-editor__button"><%= fa_icon 'window-close' %></span>
+  </div>
+</script>

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

@@ -0,0 +1,34 @@
+<script type="text/ng-template" id="promethee/write/component/column">
+  <div class="
+    col
+    col-md-{{component.attributes.size}}
+    col-md-offset-{{component.attributes.offset}}
+    promethee-editor__component
+    promethee-editor__component--column"
+  >
+    <div class="promethee-editor__toolbar">
+      Column
+      <ng-include src="'promethee/write/toolbar'"></ng-include>
+    </div>
+    <div ng-show="editing" class="promethee-editor__wrapper">
+      <div class="form-group">
+        <label class="label-control">Size</label>
+        <input ng-model="component.attributes.size" class="form-control" type="number"/>
+      </div>
+      <div class="form-group">
+        <label class="label-control">Offset</label>
+        <input ng-model="component.attributes.offset" class="form-control" type="number"/>
+      </div>
+    </div>
+
+    <ng-include src="'promethee/write/components'"></ng-include>
+
+    <span
+      type="button"
+      class="btn btn-default btn-block"
+      ng-click="addComponentTo(component.children)"
+    >
+      Add component
+    </span>
+  </div>
+</script>

data/app/views/promethee/{components/_image_edit.html.erb → edit/write/component/_image.html.erb}

@@ -1,8 +1,8 @@
-<script type="text/ng-template" id="promethee/components/image">
+<script type="text/ng-template" id="promethee/write/component/image">
   <div ng-controller="ImageController" class="promethee-editor__component promethee-editor__component--image">
     <div class="promethee-editor__toolbar">
       Image
-      <%= render 'promethee/partials/toolbar_buttons' %>
+      <ng-include src="'promethee/write/toolbar'"></ng-include>
     </div>
     <div ng-show="editing" class="promethee-editor__wrapper">
       <div class="form-group">
@@ -23,10 +23,6 @@
   </div>
 </script>
 
-<script type="text/ng-template" id="promethee/components/image/move">
-  <img ng-src="{{component.attributes.src}}" class="img-responsive">
-</script>
-
 <script>
   angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Image',

data/app/views/promethee/{components/_row_edit.html.erb → edit/write/component/_row.html.erb}

@@ -1,25 +1,18 @@
-<script type="text/ng-template" id="promethee/components/row">
+<script type="text/ng-template" id="promethee/write/component/row">
   <div  ng-controller="RowController"
         class="row promethee-editor__component promethee-editor__component--row">
     <div class="promethee-editor__toolbar">
       Row
-      <%= render 'promethee/partials/toolbar_buttons' %>
+      <ng-include src="'promethee/write/toolbar'"></ng-include>
     </div>
     <div ng-show="editing" class="promethee-editor__wrapper">
     </div>
-    <ng-include src="'promethee/components/children'"></ng-include>
+    <ng-include src="'promethee/write/components'"></ng-include>
     <div class="clearfix"></div>
     <span class="btn btn-default btn-block" ng-click="addColumn()" style="margin: 0 6px 6px 6px;width: auto">Add column</span>
   </div>
 </script>
 
-<script type="text/ng-template" id="promethee/components/row/move">
-  <h1>Row</h1>
-  <div class="row">
-    <ng-include src="'promethee/partials/mover'"></ng-include>
-  </div>
-</script>
-
 <script>
   angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Row',

data/app/views/promethee/{components/_text_edit.html.erb → edit/write/component/_text.html.erb}

@@ -1,9 +1,9 @@
-<script type="text/ng-template" id="promethee/components/text">
-  <div  ng-controller="TextController" 
+<script type="text/ng-template" id="promethee/write/component/text">
+  <div  ng-controller="TextController"
         class="promethee-editor__component promethee-editor__component--text">
     <div class="promethee-editor__toolbar">
       Text
-      <%= render 'promethee/partials/toolbar_buttons' %>
+      <ng-include src="'promethee/write/toolbar'"></ng-include>
     </div>
     <div ng-show="editing">
       <summernote config="options" ng-model="component.attributes.body"></summernote>
@@ -14,22 +14,6 @@
   </div>
 </script>
 
-<script type="text/ng-template" id="promethee/components/text/move">
-  <div ng-bind-html="component.attributes.body | htmlSafe"></div>
-</script>
-
-<script type="text/ng-template" id="promethee/components/text/localize">
-  <div class="row">
-    <div class="col-md-6">
-      <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>
-  </div>
-</script>
-
 <script>
   angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Text',

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

@@ -1,9 +1,9 @@
-<script type="text/ng-template" id="promethee/components/video">
-  <div  ng-controller="VideoController" 
+<script type="text/ng-template" id="promethee/write/component/video">
+  <div  ng-controller="VideoController"
         class="promethee-editor__component promethee-editor__component--video">
     <div class="promethee-editor__toolbar">
       Video
-      <%= render 'promethee/partials/toolbar_buttons' %>
+      <ng-include src="'promethee/write/toolbar'"></ng-include>
     </div>
     <div ng-show="editing" class="promethee-editor__wrapper">
       <div class="form-group">
@@ -17,15 +17,6 @@
   </div>
 </script>
 
-<script type="text/ng-template" id="promethee/components/video/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>
-      <div class="video-neutralizing-overlay"></div>
-    </div>
-  </div>
-</script>
-
 <script>
   angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Video',

data/app/views/promethee/localize/component/_column.html.erb

@@ -0,0 +1,11 @@
+<script type="text/ng-template" id="promethee/localize/component/text">
+  <div class="row">
+    <div class="col-md-6">
+      <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>
+  </div>
+</script>

data/app/views/promethee/localize/component/_image.html.erb

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

data/app/views/promethee/localize/component/_row.html.erb

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

data/app/views/promethee/localize/component/_text.html.erb

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

data/app/views/promethee/localize/component/_video.html.erb

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

data/app/views/promethee/show/_component.html.erb

@@ -0,0 +1 @@
+<%= render "promethee/show/component/#{component[:type]}", component: component %>

data/app/views/promethee/show/_components.html.erb

@@ -0,0 +1,3 @@
+<% components.each do |component| %>
+  <%= render 'promethee/show/component', component: component %>
+<% end %>

data/app/views/promethee/{components → show/component}/_column.html.erb

@@ -1,8 +1,7 @@
 <%
 size = component[:attributes][:size]
 offset = component[:attributes][:offset]
-children = component[:children]
 %>
 <div class="col col-md-<%= size %><%= " col-md-offset-#{offset}" if offset > 0 %> <%= promethee_class_for component %>">
-  <%= render 'promethee/components/children', children: children %>
+  <%= render 'promethee/show/components', components: component[:children] %>
 </div>

data/app/views/promethee/show/component/_row.html.erb

@@ -0,0 +1,3 @@
+<div class="row <%= promethee_class_for component %>">
+  <%= render 'promethee/show/components', components: component[:children] %>
+</div>

data/lib/promethee/rails/version.rb

@@ -1,5 +1,5 @@
 module Promethee
   module Rails
-    VERSION = '1.0.12'
+    VERSION = '1.0.14'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: promethee
 version: !ruby/object:Gem::Version
-  version: 1.0.12
+  version: 1.0.14
 platform: ruby
 authors:
 - Julien Dargelos
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-05 00:00:00.000000000 Z
+date: 2018-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -236,28 +236,39 @@ files:
 - app/views/promethee/_edit.html.erb
 - app/views/promethee/_localize.html.erb
 - app/views/promethee/_show.html.erb
-- app/views/promethee/components/_children.html.erb
-- app/views/promethee/components/_children_edit.html.erb
-- app/views/promethee/components/_column.html.erb
-- app/views/promethee/components/_column_edit.html.erb
-- app/views/promethee/components/_image.html.erb
-- app/views/promethee/components/_image_edit.html.erb
-- app/views/promethee/components/_page.html.erb
-- app/views/promethee/components/_page_edit.html.erb
-- app/views/promethee/components/_row.html.erb
-- app/views/promethee/components/_row_edit.html.erb
-- app/views/promethee/components/_text.html.erb
-- app/views/promethee/components/_text_edit.html.erb
-- app/views/promethee/components/_video.html.erb
-- app/views/promethee/components/_video_edit.html.erb
-- app/views/promethee/partials/_adder.html.erb
-- app/views/promethee/partials/_include_components.html.erb
-- app/views/promethee/partials/_mover.html.erb
-- app/views/promethee/partials/_navbar.html.erb
-- app/views/promethee/partials/_page.html.erb
-- app/views/promethee/partials/_preview.html.erb
-- app/views/promethee/partials/_toolbar_buttons.html.erb
+- app/views/promethee/edit/_move.html.erb
+- app/views/promethee/edit/_preview.html.erb
+- app/views/promethee/edit/_write.html.erb
+- app/views/promethee/edit/move/_component.html.erb
+- app/views/promethee/edit/move/_components.html.erb
+- app/views/promethee/edit/move/component/_column.html.erb
+- app/views/promethee/edit/move/component/_image.html.erb
+- app/views/promethee/edit/move/component/_row.html.erb
+- app/views/promethee/edit/move/component/_text.html.erb
+- app/views/promethee/edit/move/component/_video.html.erb
+- app/views/promethee/edit/shared/_navbar.html.erb
+- app/views/promethee/edit/write/_add_button.html.erb
+- app/views/promethee/edit/write/_component.html.erb
+- app/views/promethee/edit/write/_components.html.erb
+- app/views/promethee/edit/write/_toolbar.html.erb
+- app/views/promethee/edit/write/component/_column.html.erb
+- app/views/promethee/edit/write/component/_image.html.erb
+- app/views/promethee/edit/write/component/_row.html.erb
+- app/views/promethee/edit/write/component/_text.html.erb
+- app/views/promethee/edit/write/component/_video.html.erb
+- app/views/promethee/localize/component/_column.html.erb
+- app/views/promethee/localize/component/_image.html.erb
+- app/views/promethee/localize/component/_row.html.erb
+- app/views/promethee/localize/component/_text.html.erb
+- app/views/promethee/localize/component/_video.html.erb
 - app/views/promethee/preview.html.erb
+- app/views/promethee/show/_component.html.erb
+- app/views/promethee/show/_components.html.erb
+- app/views/promethee/show/component/_column.html.erb
+- app/views/promethee/show/component/_image.html.erb
+- app/views/promethee/show/component/_row.html.erb
+- app/views/promethee/show/component/_text.html.erb
+- app/views/promethee/show/component/_video.html.erb
 - config/routes.rb
 - lib/promethee.rb
 - lib/promethee/configuration.rb

data/app/views/promethee/components/_children.html.erb

@@ -1,4 +0,0 @@
-<% children.each do |component| %>
-  <% type = component[:type] %>
-  <%= render "promethee/components/#{type}", component: component %>
-<% end %>

data/app/views/promethee/components/_children_edit.html.erb

@@ -1,7 +0,0 @@
-<script type="text/ng-template" id="promethee/components/children">
-  <div ng-init="components = component.children">
-    <div ng-repeat="component in components">
-      <ng-include src="'promethee/components/' + component.type"></ng-include>
-    </div>
-  </div>
-</script>

data/app/views/promethee/components/_column_edit.html.erb

@@ -1,42 +0,0 @@
-<script type="text/ng-template" id="promethee/components/column">
-  <div class="col 
-              col-md-{{component.attributes.size}} 
-              col-md-offset-{{component.attributes.offset}} 
-              promethee-editor__component 
-              promethee-editor__component--column">
-    <div class="promethee-editor__toolbar">
-      Column
-      <%= render 'promethee/partials/toolbar_buttons' %>
-    </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Size</label>
-        <input ng-model="component.attributes.size" class="form-control" type="number"/>
-      </div>
-      <div class="form-group">
-        <label class="label-control">Offset</label>
-        <input ng-model="component.attributes.offset" class="form-control" type="number"/>
-      </div>
-    </div>
-
-    <ng-include src="'promethee/components/children'"></ng-include>
-
-    <span type="button" 
-          class="btn btn-default btn-block" 
-          ng-click="addComponentTo(component.children)">Add component</span>
-  </div>
-</script>
-
-<script type="text/ng-template" id="promethee/components/column/move">
-  <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
-    <h1>Column</h1>
-    <ng-include src="'promethee/partials/mover'"></ng-include>
-    <div  class=" promethee-editor__mover--droppable 
-                  promethee-editor__mover--droppable--row 
-                  promethee-editor__mover--droppable--row--inside-column" 
-          droppable 
-          data-index="{{$index+1}}"
-          data-type="{{type}}"
-          >
-  </div>
-</script>

data/app/views/promethee/components/_page.html.erb

@@ -1 +0,0 @@
-<%= render 'promethee/components/children', children: page[:children] %>

data/app/views/promethee/components/_page_edit.html.erb

@@ -1,10 +0,0 @@
-<script type="text/ng-template" id="promethee/components/page">
-  <div  ng-init="component = data"
-        class="promethee-editor__component promethee-editor__component--page">
-    <ng-include src="'promethee/components/children'"></ng-include>
-  </div>
-</script>
-
-<script type="text/ng-template" id="promethee/components/page/move">
-  <ng-include src="'promethee/partials/mover'"></ng-include>
-</script>

data/app/views/promethee/components/_row.html.erb

@@ -1,3 +0,0 @@
-<div class="row <%= promethee_class_for component %>">
-  <%= render 'promethee/components/children', children: component[:children] %>
-</div>

data/app/views/promethee/partials/_include_components.html.erb

@@ -1,9 +0,0 @@
-<% # TODO iterate over files in gem, instead of a predefined array %>
-<% ['page', 'children', 'row', 'column', 'text', 'image', 'video'].each do |type| %>
-  <%= render "promethee/components/#{type}_edit" %>
-<% end %>
-
-<% # TODO iterate over custom views to add custom types and override existing types %>
-<% Dir['app/views/promethee/components/*'].each do |file| %>
-  
-<% end %>

data/app/views/promethee/partials/_navbar.html.erb

@@ -1,26 +0,0 @@
-<nav class="navbar navbar-default promethee-editor__navbar">
-  <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="toggleMove()"><a><%= fa_icon :arrows %></a></li>
-        <li ng-click="enablePreview()" ng-hide="preview"><a><%= fa_icon :eye %></a></li>
-        <li ng-click="previewMode = 'mobile'" ng-class="{ active: previewMode == 'mobile' }" ng-show="preview">
-          <a><%= fa_icon :mobile %></a>
-        </li>
-        <li ng-click="previewMode = 'tablet'" ng-class="{ active: previewMode == 'tablet' }" ng-show="preview"><a>
-          <%= fa_icon :tablet %></a>
-        </li>
-        <li ng-click="previewMode = 'desktop'" ng-class="{ active: previewMode == 'desktop' }" ng-show="preview"><a>
-          <%= fa_icon :desktop %></a>
-        </li>
-        <li ng-click="disablePreview()" ng-show="preview"><a><%= fa_icon 'eye-slash' %></a>
-        </li>
-        <li ng-click="enableFullscreen()" ng-hide="fullscreen"><a><%= fa_icon :expand %></a></li>
-        <li ng-click="disableFullscreen()" ng-show="fullscreen"><a><%= fa_icon :compress %></a></li>
-      </ul>
-    </div>
-  </div>
-</nav>

data/app/views/promethee/partials/_page.html.erb

@@ -1,6 +0,0 @@
-<div class="promethee-editor__page" ng-hide="preview || move || pageHidden">
-  <div ng-class="{ 'container': fullscreen }">
-    <ng-include src="'promethee/components/page'"></ng-include>
-  </div>
-  <%= render 'promethee/partials/adder' %>
-</div>

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

@@ -1,12 +0,0 @@
-<div  class="promethee-editor__preview" ng-show="preview"
-      ng-class="{
-       'promethee-editor__preview--mobile': preview && previewMode == 'mobile',
-       'promethee-editor__preview--tablet': preview && previewMode == 'tablet',
-       'promethee-editor__preview--desktop': preview && previewMode == 'desktop'
-      }">
-  <iframe class="promethee-editor__preview--frame"
-          name="preview" 
-          sandbox="allow-scripts" 
-          frameBorder="0">
-  </iframe>
-</div>

data/app/views/promethee/partials/_toolbar_buttons.html.erb

@@ -1,21 +0,0 @@
-<%
-  except ||= []
-  except = [except] unless except.is_a? Array
-  except.map! { |button| button.to_s.to_sym }
-
-  only ||= []
-  only = [only] unless only.is_a? Array
-  only.map! { |button| button.to_s.to_sym }
-
-  buttons = [:edit, :remove].map{ |button| [button, (only.empty? || button.in?(only)) &&  !button.in?(except)] }.to_h
-%>
-
-<div class="pull-right">
-  <% if buttons[:edit] %>
-    <span ng-click="editing = !editing" class="promethee-editor__button"><%= fa_icon 'pencil-square' %></span>
-  <% end %>
-
-  <% if buttons[:remove] %>
-    <span ng-click="remove(component, components)" class="promethee-editor__button"><%= fa_icon 'window-close' %></span>
-  <% end %>
-</div>