promethee 1.3.1 → 1.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: df6de340e1248075527cd543a63f61b6e945906e
-  data.tar.gz: 51c9b6dd8d36a655c0ef0d7d70e2bfa7aa76ed27
+  metadata.gz: d9d64c7758ac9560202c0c5e3a2df6a42290bb4a
+  data.tar.gz: 9e9b2f4dd45a864b334fae766af431d5187fe845
 SHA512:
-  metadata.gz: ce27d68fe8214f2874d8636fce7be2b2b56358af1bff3515f9d5a7352aa97e56eca5a01d5773e19fd3984467e7e34e65b8338c6657d9cdf16bb6d6d7b8e934f0
-  data.tar.gz: a01862be7b582b3adeeb126a868d0dd05ce8045d7af35caa4d15afbeb237d74d9e1a5b113c9f23dcd2f497926ebcf1c0b221674954abaf60bacf5515a5feb44d
+  metadata.gz: 185bc919628cd9e1a86ba9c4085c01f2e0ecfa32be03203699006d92254197c61be9f1e6260f35bfeb26f27168da11c758d3e6825453ffb28a78dfb7cd3f7d16
+  data.tar.gz: 53a3a042392290e5e179b73047749e53295cd60d8e63862ab0011a0ebc4b2e30c2e384a93b58f8e8918c1331fda7a6339fdbfcfa4baa8fa43a3e07cabdc9c11c

data/README.md

@@ -97,7 +97,6 @@ With stylesheets set:
 ```
 @import 'bootstrap'
 @import 'font-awesome.css'
-@import 'material_icons.css'
 @import 'summernote'
 @import 'promethee'
 ```
@@ -138,7 +137,6 @@ With stylesheets set:
 ```
 @import 'bootstrap'
 @import 'font-awesome.css'
-@import 'material_icons.css'
 @import 'summernote'
 @import 'promethee'
 @import 'promethee-edit'

data/app/assets/stylesheets/promethee-edit/_move.sass

@@ -41,6 +41,7 @@
           background: black
   &__page
     z-index: 1
+    padding-bottom: 200px
   &__columns, &__page
     .row
       margin-left: -5px
@@ -60,16 +61,15 @@
   &__droppable
     visibility: hidden
     opacity: .2
-    margin: 10px 0
+    margin: 2px 0
     position: relative
     background: white
     width: 100%
-    height: 10px
+    height: 20px
     border: 1px dashed #253742
     transition: width .2s, height .2s, opacity .2s 
     &.ui-droppable-active
       visibility: visible
-      height: 10px
     &.ui-droppable-hover
       opacity: 1
       height: 100px
@@ -112,61 +112,51 @@
     .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-edit__move__droppable--row--inside-column,
-      &.promethee-edit__move__droppable--row--first
+      &.promethee-edit__move__droppable--row--first,
+      &.promethee-edit__move__droppable--row--inside-column
         display: block
 
-  .promethee-edit__inspect
-    background: white
-    position: fixed
-    width: calc(50vw - 420px)
-    min-width: 100px
-    top: 80px
-    right: 30px
-    bottom: 15px
-    z-index: 1000
-    &-header
-      font-size: 18px
-      font-weight: bold
-      text-transform: uppercase
-      margin-bottom: 20px
-    &-content
-      overflow: scroll
-    label.label-control
-      font-weight: normal
-
-  .promethee-edit__library
-    background: white
-    position: fixed
-    width: calc(50vw - 420px)
-    min-width: 100px
-    top: 80px
-    left: 30px
-    bottom: 15px
-    z-index: 1000
-    &-header
-      font-size: 18px
-      font-weight: bold
-      text-transform: uppercase
-      margin-bottom: 20px
-    &-content
-      overflow: scroll
-    &__item
-      max-width: 300px
-      z-index: 100000
-      background-color: #253742
-      margin-bottom: 30px
-      height: 100px
+  .promethee-edit
+    &__inspect, &__library
       min-width: 100px
-      padding-top: 10px
-      text-align: center
-      color: white
-      &__icon
-        display: block
-        svg
-          width: 60px
-      &__name
-        margin-top: -10px
-        font-size: 11px
-        font-weight: normal
+      max-width: 400px
+      background: white
+      position: fixed
+      top: 80px
+      bottom: 15px
+      z-index: 1000
+      width: calc(50vw - 420px)
+      overflow-x: hidden
+      overflow-y: scroll
+      &-header
+        font-size: 18px
+        font-weight: bold
         text-transform: uppercase
+        margin-bottom: 20px
+
+    &__inspect
+      right: 30px
+      label.label-control
+        font-weight: normal
+
+    &__library
+      left: 30px
+      &__item
+        max-width: 300px
+        z-index: 100000
+        background-color: #253742
+        margin-bottom: 30px
+        height: 100px
+        min-width: 100px
+        padding-top: 10px
+        text-align: center
+        color: white
+        &__icon
+          display: block
+          svg
+            width: 60px
+        &__name
+          margin-top: -10px
+          font-size: 11px
+          font-weight: normal
+          text-transform: uppercase

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

@@ -32,8 +32,8 @@ promethee.controller('PrometheeController', ['$scope', 'summernoteConfig', funct
     inspected: null,
     mode: 'move',
     preview: 'desktop',
-    fullscreen: false
-    // fullscreen: true
+    // fullscreen: false
+    fullscreen: true
   };
 
   $scope.inspect = function(component, event) {
@@ -67,6 +67,7 @@ promethee.controller('PrometheeController', ['$scope', 'summernoteConfig', funct
   $scope.remove = function(component, components) {
     var index = components.indexOf(component);
     components.splice(index, 1);
+    this.promethee.inspected = null;
   }
 
   $scope.submit = function() {

data/app/views/promethee/components/column/_edit.move.html.erb

@@ -1,8 +1,7 @@
 <script type="text/ng-template" id="promethee/components/column/edit/move">
   <div  ng-click="inspect(component, $event)"
         ng-class="{'promethee-edit__component--selected': promethee.inspected === component}"
-        class=" promethee-edit__component
-                promethee-edit__component--column
+        class=" <%= promethee_bem_classes 'promethee-edit__component', "--column" %>
                 col 
                 col-md-{{component.attributes.size}} 
                 col-md-offset-{{component.attributes.offset}}">
@@ -11,12 +10,11 @@
         <div class="header">Column</div>
         <ng-include src="'promethee/move/components'"></ng-include>
         <div 
-          class=" promethee-edit__move__droppable
-                  promethee-edit__move__droppable--row
-                  promethee-edit__move__droppable--row--inside-column"
           droppable
+          class=" <%= promethee_bem_classes 'promethee-edit__move__droppable', '--row', '--inside-column' %>"
           data-index="{{$index+1}}"
-          data-type="{{type}}"
+          data-id="{{parent_id}}"
+          data-type="{{parent_type}}"
           >
         </div>
       </div>

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

@@ -1,7 +1,6 @@
 <%# This causes an infinite loop when imported as angular, so i import it as erb %>
 <div  ng-click="inspect(component, $event)"
       ng-class="{'promethee-edit__component--selected': promethee.inspected === component}"
-      class=" promethee-edit__component
-              promethee-edit__component--<%= type %>">
+      class="<%= promethee_bem_classes 'promethee-edit__component', "--#{type}" %>">
   <div class="promethee-edit__component__inner">
     <%= render 'promethee/edit/move.close' %>

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

@@ -10,8 +10,17 @@ promethee
           scroll: true,
           refreshPositions: true,
           cursor: 'move', 
+          cursorAt: { top: 0, left: 0 },
           helper: 'clone',
-          appendTo: '.promethee-edit__move'
+          appendTo: '.promethee-edit__move',
+          start: function(event, ui) {
+            var type = $(element[0]).data('type');
+            $('.promethee-edit__move').addClass('promethee-edit__move--dragging promethee-edit__move--dragging--' + type);
+          },
+          stop: function(event, ui) {
+            var type = $(element[0]).data('type');
+            $('.promethee-edit__move').removeClass('promethee-edit__move--dragging promethee-edit__move--dragging--' + type);
+          }
         });
       }
     }
@@ -30,23 +39,17 @@ promethee
             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');
-            */
+            var listId = $elementDragged.data('list-id');
+            var listIndex = $elementDragged.data('list-index');
+            $('.promethee-edit__move__droppable[data-id="' + listId + '"][data-index="' + listIndex + '"]').hide();
           },
           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');
+            var listId = $elementDragged.data('list-id');
+            var listIndex = $elementDragged.data('list-index');
+            $('.promethee-edit__move__droppable[data-id="' + listId + '"][data-index="' + listIndex + '"]').show();
           }
         });
       }
@@ -80,7 +83,7 @@ promethee
               }
               component.id = guid();
             } else {
-              var draggedFromIndex = parseInt(ui.draggable[0].getAttribute('data-index'));
+              var draggedFromIndex = parseInt(ui.draggable[0].getAttribute('data-list-index'));
               // console.log('dragged', draggedFromList, draggedFromIndex);
               draggedFromList.splice(draggedFromIndex, 1);
 
@@ -138,12 +141,17 @@ promethee.controller('AdderController',
       <div class="row">
         <div  ng-repeat="definition in promethee.definitions"
               class="col-md-12 col-lg-6">
-          <div class="promethee-edit__library__item" addable>
+          <div  addable 
+                class="promethee-edit__library__item" 
+                data-type="{{definition.data.type}}">
             <div class="promethee-edit__library__item__icon" ng-bind-html="definition.icon | htmlSafe"></div>
             <div class="promethee-edit__library__item__name">{{definition.name}}</div>
           </div>
         </div>
+      </div>
     </div>
+    <div class="promethee-edit__library-header">Presets</div>
+    <div class="promethee-edit__library-content">
     </div>
   </div>
 
@@ -180,30 +188,32 @@ promethee.controller('AdderController',
 </script>
 
 <script type="text/ng-template" id="promethee/move/components">
-  <div ng-init="type = component.type; components = component.children">
+  <div ng-init="parent_id = component.id; parent_type = component.type; components = component.children">
     <div 
       droppable
-      class=" promethee-edit__move__droppable 
-              promethee-edit__move__droppable--{{type}} 
-              promethee-edit__move__droppable--{{type}}--first"
+      class="<%= promethee_bem_classes 'promethee-edit__move__droppable', '--{{parent_type}}', '--first' %>"
+      data-id="{{parent_id}}"
+      data-type="{{parent_type}}"
       data-index="0"
       >
     </div>
     <div
       draggable
       ng-repeat="component in components"
-      class=" promethee-edit__move__draggable
-              promethee-edit__move__draggable--{{type}}"
-      data-index="{{$index}}"
+      class="<%= promethee_bem_classes 'promethee-edit__move__draggable', '--{{component.type}}' %>"
+      data-id="{{component.id}}"
       data-type="{{component.type}}"
+      data-list-id="{{parent_id}}"
+      data-list-type="{{parent_type}}"
+      data-list-index="{{$index}}"
       >
       <ng-include src="'promethee/move/component'"></ng-include>
       <div
         droppable
-        class=" promethee-edit__move__droppable 
-                promethee-edit__move__droppable--{{type}}"
+        class="<%= promethee_bem_classes 'promethee-edit__move__droppable', '--{{parent_type}}' %>"
+        data-id="{{parent_id}}"
+        data-type="{{parent_type}}"
         data-index="{{$index+1}}"
-        data-type="{{type}}"
         >
       </div>
     </div>

data/lib/promethee.rb

@@ -1,11 +1,8 @@
 require 'bootstrap-sass'
 require 'font-awesome-rails'
-require 'material_icons'
 require 'jquery-rails'
 require 'jquery-ui-rails'
-require 'tinymce-rails'
 require 'angularjs-rails'
-require 'angular-ui-tinymce/rails'
 require 'angular_rails_csrf'
 
 module Promethee

data/lib/promethee/rails/helper.rb

@@ -22,6 +22,18 @@ module Promethee::Rails::Helper
     promethee_partials_for 'utils/_*.html.erb'
   end
 
+  # promethee_bem_classes 'promethee-edit__move__droppable', '--{{type}}', '--first'
+  # -> promethee-edit__move__droppable promethee-edit__move__droppable--{{type}} promethee-edit__move__droppable--{{type}}--first"
+  def promethee_bem_classes(*args)
+    classes = ''
+    current_class = ''
+    args.each do |arg|
+      current_class << arg
+      classes << "#{current_class} "
+    end
+    classes
+  end
+
   protected
 
   # Example:  promethee_partials_for 'components/*/_edit.*.html.erb'

data/lib/promethee/rails/version.rb

@@ -1,5 +1,5 @@
 module Promethee
   module Rails
-    VERSION = '1.3.1'
+    VERSION = '1.3.2'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: promethee
 version: !ruby/object:Gem::Version
-  version: 1.3.1
+  version: 1.3.2
 platform: ruby
 authors:
 - Julien Dargelos
@@ -13,7 +13,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-19 00:00:00.000000000 Z
+date: 2018-03-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails