promethee 1.2.31 → 1.3.0

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

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

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-md-6">
       <b>Local</b>
-      <summernote config="summernoteConfig" ng-model="component.attributes.body"></summernote>
+      <summernote config="options" ng-model="component.attributes.body"></summernote>
     </div>
     <div class="col-md-6">
       <b>Master</b>

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

@@ -1,12 +1,31 @@
-<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'
-      }
+<% 
+icon = '
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<rect x="18.9" y="28" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="62.1" height="44"/>
+<g>
+  <path fill="#FFFFFF" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
+</g>
+<g>
+  <polygon fill="#FFFFFF" points="47.2,44.6 47.2,55.4 56.3,50   "/>
+  <g>
+    <path fill="#FFFFFF" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
+      c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
+  </g>
+</g>
+</svg>
+'
+%>
+
+<div ng-init="promethee.definitions.push({
+  name: 'Video',
+  icon: '<%= icon %>',
+  data: {
+    type: 'video',
+    attributes: {
+      url: 'https://vimeo.com/115082758'
     }
-  });
-</script>
+  }
+})"></div>

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

@@ -1,8 +1,34 @@
 <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>
-      <div class="video-neutralizing-overlay"></div>
+  <%= render 'promethee/edit/move.header', type: '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>
     </div>
   </div>
 </script>
+
+<script>
+  promethee.controller('VideoController', ['$scope', function($scope) {
+    Object.defineProperty($scope, 'embed', {
+      get: function() {
+        var embed = null;
+        var url = this.component.attributes.url + '';
+
+        if(url.includes('vimeo')) {
+          var id = url.replace(/^(?:https?:)?\/\/(?:(?:www|player)\.)?vimeo\.com\/(?:video\/)?(\d+).*?$/, '$1');
+          embed = 'https://player.vimeo.com/video/' + id + '?color=ffffff&title=0&byline=0&portrait=0';
+        }
+        else if(url.includes('youtube')) {
+          var parts = url.split('watch?v=');
+          var id = parts[parts.length - 1];
+          embed = 'http://www.youtube.com/embed/' + id;
+        }
+
+        return embed;
+      }
+    })
+  }]);
+</script>

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

@@ -0,0 +1,4 @@
+<%# This causes an infinite loop when imported as angular, so i import it as erb %>
+<div  class="promethee-edit__component__close"
+      ng-click="remove(component, components)"
+      ng-show="promethee.inspected === component"><%= fa_icon :times %></div>

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

@@ -0,0 +1,7 @@
+<%# 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 %>">
+  <div class="promethee-edit__component__inner">
+    <%= render 'promethee/edit/move.close' %>

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

@@ -1,6 +1,21 @@
-
 <script type="text/javascript">
 promethee
+  .directive('addable', function() {
+    return {
+      restrict:'A',
+      link: function(scope, element, attrs) {
+        element.draggable({
+          revert: true,
+          revertDuration: 0,
+          scroll: true,
+          refreshPositions: true,
+          cursor: 'move', 
+          helper: 'clone',
+          appendTo: '.promethee-edit__move'
+        });
+      }
+    }
+  })
   .directive('draggable', function() {
     return {
       restrict:'A',
@@ -44,19 +59,38 @@ promethee
         element.droppable({
           tolerance: 'pointer',
           drop: function(event, ui) {
+            var draggedFromLibrary = false;
             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;
+            if (draggedFromList === undefined) {
+              draggedFromLibrary = true;
+            }
+            if (draggedFromLibrary) {
+              var definition = angular.element(ui.draggable).scope().definition;
+              var component = angular.copy(definition.data);
+              // FIXME dirty
+              function guid() {
+                function s4() {
+                  return Math.floor((1 + Math.random()) * 0x10000)
+                    .toString(16)
+                    .substring(1);
+                }
+                return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+              }
+              component.id = guid();
+            } else {
+              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;
+              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);
@@ -68,17 +102,75 @@ promethee
       }
     }
   });
+
+promethee.controller('AdderController', 
+  ['$scope', '$rootScope', 'definitions', 'identifier', 
+  function($scope, $rootScope, definitions, identifier) {
+
+  $scope.adding = false;
+  $scope.childrenToAddTo = null;
+  $scope.definitions = definitions;
+
+  $scope.close = function() {
+    $scope.adding = false;
+    $scope.addingToChildren = null;
+  };
+
+  $scope.pushComponent = function(definition) {
+    var definition = angular.copy(definition.data);
+    definition.id = identifier.generate();
+    $scope.childrenToAddTo.push(definition);
+    $scope.close();
+  };
+
+  $rootScope.addComponentTo = function(components) {
+    $scope.adding = true;
+    $scope.childrenToAddTo = components;
+  };
+
+}])
 </script>
 
 <div class="promethee-edit__move" ng-show="promethee.mode == 'move'">
-  <div class="promethee-edit__move__columns row">
-    <% 12.times do %>
-      <div class="col col-md-1"><div class="color"></div></div>
-    <% end %>
+  <div class="promethee-edit__library">
+    <div class="promethee-edit__library-header">Library</div>
+    <div class="promethee-edit__library-content">
+      <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 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>
+
+  <div class="promethee-edit__move__columns">
+    <div class="row">
+      <% 12.times do %>
+        <div class="col col-md-1"><div class="color"></div></div>
+      <% end %>
+    </div>
+  </div>
+
   <div class="promethee-edit__move__page">
     <ng-include src="'promethee/move/components'"></ng-include>
   </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 'minus-square' %></span>
+      </div>
+      {{promethee.inspected.type}}
+    </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/move/component">

data/lib/promethee/rails/version.rb

@@ -1,5 +1,5 @@
 module Promethee
   module Rails
-    VERSION = '1.2.31'
+    VERSION = '1.3.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: promethee
 version: !ruby/object:Gem::Version
-  version: 1.2.31
+  version: 1.3.0
 platform: ruby
 authors:
 - Julien Dargelos
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-05 00:00:00.000000000 Z
+date: 2018-03-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -200,7 +200,6 @@ files:
 - app/assets/stylesheets/promethee-edit.sass
 - app/assets/stylesheets/promethee-edit/_move.sass
 - app/assets/stylesheets/promethee-edit/_preview.sass
-- app/assets/stylesheets/promethee-edit/_write.sass
 - app/assets/stylesheets/promethee.sass
 - app/controllers/promethee_controller.rb
 - app/views/promethee/_edit.html.erb
@@ -209,54 +208,47 @@ files:
 - app/views/promethee/components/aside/_edit.define.html.erb
 - app/views/promethee/components/aside/_edit.inspect.html.erb
 - app/views/promethee/components/aside/_edit.move.html.erb
-- app/views/promethee/components/aside/_edit.write.html.erb
 - app/views/promethee/components/aside/_localize.html.erb
 - app/views/promethee/components/aside/_show.html.erb
 - app/views/promethee/components/column/_edit.define.html.erb
 - app/views/promethee/components/column/_edit.inspect.html.erb
 - app/views/promethee/components/column/_edit.move.html.erb
-- app/views/promethee/components/column/_edit.write.html.erb
 - app/views/promethee/components/column/_localize.html.erb
 - app/views/promethee/components/column/_show.html.erb
 - app/views/promethee/components/cover/_edit.define.html.erb
 - app/views/promethee/components/cover/_edit.inspect.html.erb
 - app/views/promethee/components/cover/_edit.move.html.erb
-- app/views/promethee/components/cover/_edit.write.html.erb
 - app/views/promethee/components/cover/_localize.html.erb
 - app/views/promethee/components/cover/_show.html.erb
 - app/views/promethee/components/image/_edit.define.html.erb
 - app/views/promethee/components/image/_edit.inspect.html.erb
 - app/views/promethee/components/image/_edit.move.html.erb
-- app/views/promethee/components/image/_edit.write.html.erb
 - app/views/promethee/components/image/_localize.html.erb
 - app/views/promethee/components/image/_show.html.erb
 - app/views/promethee/components/row/_edit.define.html.erb
 - app/views/promethee/components/row/_edit.inspect.html.erb
 - app/views/promethee/components/row/_edit.move.html.erb
-- app/views/promethee/components/row/_edit.write.html.erb
 - app/views/promethee/components/row/_localize.html.erb
 - app/views/promethee/components/row/_show.html.erb
 - app/views/promethee/components/slider/_edit.define.html.erb
 - app/views/promethee/components/slider/_edit.inspect.html.erb
 - app/views/promethee/components/slider/_edit.move.html.erb
-- app/views/promethee/components/slider/_edit.write.html.erb
 - app/views/promethee/components/slider/_localize.html.erb
 - app/views/promethee/components/slider/_show.html.erb
 - app/views/promethee/components/text/_edit.define.html.erb
 - app/views/promethee/components/text/_edit.inspect.html.erb
 - app/views/promethee/components/text/_edit.move.html.erb
-- app/views/promethee/components/text/_edit.write.html.erb
 - app/views/promethee/components/text/_localize.html.erb
 - app/views/promethee/components/text/_show.html.erb
 - app/views/promethee/components/video/_edit.define.html.erb
 - app/views/promethee/components/video/_edit.inspect.html.erb
 - app/views/promethee/components/video/_edit.move.html.erb
-- app/views/promethee/components/video/_edit.write.html.erb
 - app/views/promethee/components/video/_localize.html.erb
 - app/views/promethee/components/video/_show.html.erb
+- app/views/promethee/edit/_move.close.html.erb
+- app/views/promethee/edit/_move.header.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/preview.html.erb
 - app/views/promethee/show/_component.html.erb
 - app/views/promethee/show/_components.html.erb
@@ -357,7 +349,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: Bring fire to your page

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

@@ -1,94 +0,0 @@
-.promethee-edit__write
-
-  .promethee-edit__toolbar
-    background: #253742
-    height: 36px
-    padding: 0 8px
-    font-size: 11px
-    text-transform: uppercase
-    color: white
-    line-height: 36px
-    text-align: center
-
-    &, *
-      user-select: none
-
-    &--transparent
-      background: none
-      width: 100%
-      color: transparent
-      z-index: 2
-      position: absolute
-
-  .promethee-edit__toolbar-buttons
-    opacity: 0
-    transition: .2s
-    transform: translateX(20px)
-
-  .promethee-edit__component:hover
-    > .promethee-edit__toolbar, > * > .promethee-edit__toolbar
-      .promethee-edit__toolbar-buttons
-        opacity: 1
-        transform: translateX(0)
-
-  .promethee-edit__inspect
-    background: #fff
-    width: 300px
-    top: 15px
-    right: 15px
-    bottom: 15px
-    z-index: 1000
-    position: fixed
-    display: flex
-    flex-direction: column
-    border: 1px solid #253742
-    &-header
-      background: #253742
-      height: 36px
-      padding: 0 8px
-      color: white
-      flex-grow: 0
-      flex-shrink: 0
-      line-height: 36px
-      text-transform: uppercase
-      font-size: 11px
-
-    &-content
-      flex-grow: 1
-      flex-shrink: 1
-      padding: 15px
-      overflow: scroll
-
-  .promethee-edit__adder__button
-    display: block
-    text-align: center
-    margin: 50px 0
-
-  .promethee-edit__component
-    margin-bottom: 5px
-    position: relative
-    &--cover
-      .promethee-edit__cover-content
-        padding: 150px 30px
-        background-repeat: no-repeat
-        background-position: center center
-        background-size: cover
-    &--row > div > .promethee-edit__toolbar
-        margin-bottom: 5px
-    &--column > div > .promethee-edit__toolbar
-      margin-bottom: 5px
-    &--slider
-      .fontawesome-carousel-control .fa
-          top: 50%
-          position: absolute
-          transform: translateY(-50%)
-          font-size: 30px
-    &-selected
-      position: relative
-      border: 2px solid transparent
-
-      &--visible
-        border-color: #253742
-
-    &:hover
-      background: rgba(0, 0, 0, .05)