promethee 0.1.3 → 0.1.5

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

@@ -1,25 +1,25 @@
 <script type="text/ng-template" id="promethee/components/text">
-  <div ng-controller="TextController">
-    <div  dnd-draggable="component"
-          dnd-moved="remove()"
-          dnd-type="component.type"
-          class="promethee-editor__component promethee-editor__component--text promethee-editor__component--final">
-      <div class="promethee-editor__toolbar">
-        Text
-        <%= render 'promethee/partials/toolbar_buttons' %>
-      </div>
-      <div ng-show="editing">
-        <textarea ui-tinymce="tinymceOptions" ng-model="component.attributes.body"></textarea>
-      </div>
-      <div ng-hide="editing">
-        <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe" ng-click="edit()"></div>
-      </div>
+  <div  ng-controller="TextController" 
+        class="promethee-editor__component promethee-editor__component--text">
+    <div class="promethee-editor__toolbar">
+      Text
+      <%= render 'promethee/partials/toolbar_buttons' %>
+    </div>
+    <div ng-show="editing">
+      <textarea ui-tinymce="tinymceOptions" ng-model="component.attributes.body"></textarea>
+    </div>
+    <div ng-hide="editing">
+      <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe" ng-click="edit()"></div>
     </div>
   </div>
 </script>
 
+<script type="text/ng-template" id="promethee/components/text/move">
+  <div ng-bind-html="component.attributes.body | htmlSafe"></div>
+</script>
+
 <script>
-  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Text',
     thumb: 'http://via.placeholder.com/300x200',
     data: {
@@ -42,10 +42,6 @@
       this.editing = false;
     };
 
-    $scope.remove = function() {
-      this.components.splice(this.components.indexOf(this.component), 1);
-    };
-
     $scope.tinymceOptions = {
       plugins: 'autoresize',
       toolbar: 'styleselect | bold italic',

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

@@ -1,28 +1,33 @@
 <script type="text/ng-template" id="promethee/components/video">
-  <div ng-controller="VideoController">
-    <div  dnd-draggable="component"
-          dnd-moved="remove()"
-          dnd-type="component.type"
-          class="promethee-editor__component promethee-editor__component--video promethee-editor__component--final">
-      <div class="promethee-editor__toolbar">
-        Video
-        <%= render 'promethee/partials/toolbar_buttons' %>
-      </div>
-      <div ng-show="editing" class="promethee-editor__wrapper">
-        <div class="form-group">
-          <label class="label-control">Url</label>
-          <input ng-model="component.attributes.url" class="form-control" type="text"/>
-        </div>
-      </div>
-      <div class="embed-responsive embed-responsive-16by9">
-        <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
+  <div  ng-controller="VideoController" 
+        class="promethee-editor__component promethee-editor__component--video">
+    <div class="promethee-editor__toolbar">
+      Video
+      <%= render 'promethee/partials/toolbar_buttons' %>
+    </div>
+    <div ng-show="editing" class="promethee-editor__wrapper">
+      <div class="form-group">
+        <label class="label-control">Url</label>
+        <input ng-model="component.attributes.url" class="form-control" type="text"/>
       </div>
     </div>
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
+    </div>
+  </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_id %>']).get('definitions').push({
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Video',
     thumb: 'http://via.placeholder.com/300x200',
     data: {
@@ -37,10 +42,6 @@
 
     $scope.editing = false;
 
-    $scope.remove = function() {
-      this.components.splice(this.components.indexOf(this.component), 1);
-    };
-
     Object.defineProperty($scope, 'embed', {
       get: function() {
         var embed = null;

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

@@ -0,0 +1,64 @@
+<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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', function($scope, $rootScope, definitions) {
+
+    $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 = $scope.createIdentifier();
+      $scope.childrenToAddTo.push(definition);
+      $scope.close();
+    };
+
+    $rootScope.addComponentTo = function(components) {
+      $scope.adding = true;
+      $scope.childrenToAddTo = components;
+    };
+
+    // https://gist.github.com/gordonbrander/2230317
+    $scope.createIdentifier = function () {
+      // Math.random should be unique because of its seeding algorithm.
+      // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+      // after the decimal.
+      return '' + Math.random().toString(36).substr(2, 9);
+    };
+
+  }]);
+</script>

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

@@ -0,0 +1,9 @@
+<% # 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/_mover.html.erb

@@ -0,0 +1,98 @@
+<script type="text/ng-template" id="promethee/partials/mover">
+  <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" 
+          droppable 
+          data-index="0"
+          >
+    </div>
+    <div  ng-repeat="component in components" 
+          class="promethee-editor__mover--draggable promethee-editor__mover--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}}" 
+              droppable 
+              data-index="{{$index+1}}"
+              data-type="{{type}}"
+              >
+        </div>
+    </div>
+  </div>
+</script>
+
+<div class="promethee-editor__mover" ng-show="move" ng-init="component = data">
+  <ng-include src="'promethee/partials/mover'"></ng-include>
+</div>
+
+<script type="text/javascript">
+  promethee
+    .directive('draggable', function() {
+      return {
+        restrict:'A',
+        link: function(scope, element, attrs) {
+          element.draggable({
+            scroll: true,
+            cursor: "pointer",
+            cursorAt: { top: 0, left: 0 },
+            refreshPositions: true,
+            start: function() {
+              var $elementDragged = $(element[0]);
+              $elementDragged.addClass('promethee-editor__mover--dragged');
+              var type = $elementDragged.data('type');
+              $('.promethee-editor__mover').addClass('promethee-editor__mover--dragging promethee-editor__mover--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();
+              if ($droppableBefore.length === 0) {
+                // For the first child, we look for the previous droppable zone
+                $droppableBefore = $elementDragged.prev('.promethee-editor__mover--droppable');
+              }
+              $droppableBefore.addClass('promethee-editor__mover--droppable--hidden');
+            },
+            stop: function() {
+              var $elementDragged = $(element[0]);
+              $elementDragged.removeClass('promethee-editor__mover--dragged');
+              var type = $elementDragged.data('type');
+              $('.promethee-editor__mover').removeClass('promethee-editor__mover--dragging promethee-editor__mover--dragging--' + type);
+
+              $('.promethee-editor__mover--droppable').removeClass('promethee-editor__mover--droppable--hidden');
+            },
+            helper: function( event ) {
+              return $( '<div></div>' );
+            }
+          });
+        }
+      }
+    })
+    .directive('droppable', function($compile) {
+      return {
+        restrict: 'A',
+        link: function(scope, element, attrs) {
+          element.droppable({
+            drop: function(event, ui) {
+              var draggedFromList = angular.element(ui.draggable).parent().scope().components;
+              var draggedFromIndex = parseInt(ui.draggable[0].getAttribute('data-index'));
+              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;
+                }
+              }
+              droppedToList.splice(droppedToIndex, 0, component);
+
+              scope.$apply();
+            }
+          });
+        }
+      }
+    });
+</script>

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

@@ -0,0 +1,26 @@
+<nav class="navbar navbar-default promethee-editor__navbar">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <%= image_tag 'icon-promethee.png', class: 'navbar-brand' %>
+    </div>
+    <div id="navbar">
+      <ul class="nav navbar-nav navbar-right">
+        <li ng-click="move = !move"><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

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

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

@@ -0,0 +1,12 @@
+<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,4 +1,4 @@
 <div class="pull-right">
-  <span ng-click="editing = !editing" class="btn btn-default btn-xs"><%= fa_icon :edit %></span>
-  <span ng-click="remove()" class="btn btn-default btn-xs"><%= fa_icon :close %></span>
+  <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>

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

@@ -0,0 +1 @@
+<%= promethee @data %>

data/config/routes.rb

@@ -0,0 +1,3 @@
+Rails.application.routes.draw do
+  post 'promethee/preview' => 'promethee#preview', as: 'promethee_preview'
+end

data/lib/promethee.rb

@@ -1,11 +1,12 @@
 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 'material_icons'
+require 'angular_rails_csrf'
 
 module Promethee
   module Rails
@@ -14,26 +15,6 @@ module Promethee
     require 'promethee/rails/version'
   end
 
-  require 'promethee/component'
-  require 'promethee/component/attribute'
-  require 'promethee/component/attribute/boolean'
-  require 'promethee/component/attribute/integer'
-  require 'promethee/component/attribute/float'
-  require 'promethee/component/attribute/string'
-
-  require 'promethee/component/attributes'
-  require 'promethee/component/attributes/definer'
-
-  require 'promethee/component/base'
-  require 'promethee/component/collection'
-  require 'promethee/component/row'
-  require 'promethee/component/column'
-  require 'promethee/component/text'
-  require 'promethee/component/image'
-  require 'promethee/component/video'
-
-  require 'promethee/grid'
-
   require 'promethee/core_ext/tags'
   require 'promethee/core_ext/form_helper'
   require 'promethee/core_ext/form_builder'

data/lib/promethee/core_ext/tags.rb

@@ -6,11 +6,8 @@ module ActionView
       # https://github.com/rails/rails/blob/bdc581616b760d1e2be3795c6f0f3ab4b1e125a5/actionview/lib/action_view/helpers/tags/text_field.rb
       class PrometheeEditor < Base
         def render
-          options = @options.stringify_keys
-          add_default_name_and_id(options)
-          data = options.fetch("value") { value_before_type_cast(object) }
-
-          Promethee::Grid.new(data, name: options["name"]).edit
+          data = @options[:value]
+          ApplicationController.renderer.render partial: 'promethee/edit', locals: { data: data }
         end
       end
     end

data/lib/promethee/rails/version.rb

@@ -1,5 +1,5 @@
 module Promethee
   module Rails
-    VERSION = "0.1.3"
+    VERSION = "0.1.5"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: promethee
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.5
 platform: ruby
 authors:
 - Julien Dargelos
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-10 00:00:00.000000000 Z
+date: 2017-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -153,6 +153,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: angular_rails_csrf
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -196,54 +210,47 @@ files:
 - app/assets/images/icon-promethee.png
 - app/assets/images/logo-promethee-horizontal.svg
 - app/assets/images/logo-promethee-vertical.svg
+- app/assets/javascripts/promethee-editor.js
 - app/assets/javascripts/promethee.js
-- app/assets/javascripts/promethee/controller.js
 - app/assets/stylesheets/promethee-editor.sass
-- app/assets/stylesheets/promethee-editor/_mixins.sass
-- app/assets/stylesheets/promethee-editor/_variables.sass
+- app/assets/stylesheets/promethee-editor/_component.sass
+- app/assets/stylesheets/promethee-editor/_mover.sass
+- app/assets/stylesheets/promethee-editor/_preview.sass
 - app/assets/stylesheets/promethee.sass
+- app/controllers/promethee_controller.rb
 - app/views/promethee/_edit.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/_index.html.erb
-- app/views/promethee/components/_index_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/_show.html.erb
-- app/views/promethee/components/_show_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/preview.html.erb
+- config/routes.rb
 - lib/promethee.rb
-- lib/promethee/component.rb
-- lib/promethee/component/attribute.rb
-- lib/promethee/component/attribute/boolean.rb
-- lib/promethee/component/attribute/float.rb
-- lib/promethee/component/attribute/integer.rb
-- lib/promethee/component/attribute/string.rb
-- lib/promethee/component/attributes.rb
-- lib/promethee/component/attributes/definer.rb
-- lib/promethee/component/base.rb
-- lib/promethee/component/collection.rb
-- lib/promethee/component/column.rb
-- lib/promethee/component/image.rb
-- lib/promethee/component/row.rb
-- lib/promethee/component/text.rb
-- lib/promethee/component/video.rb
 - lib/promethee/core_ext/form_builder.rb
 - lib/promethee/core_ext/form_helper.rb
 - lib/promethee/core_ext/tags.rb
-- lib/promethee/grid.rb
 - lib/promethee/rails/engine.rb
 - lib/promethee/rails/helper.rb
 - lib/promethee/rails/version.rb
 - lib/tasks/promethee/promethee.rake
-- vendor/assets/javascripts/angular-drag-and-drop-lists.js
 homepage: https://github.com/lespoupeesrusses/promethee
 licenses:
 - MIT
@@ -264,7 +271,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.11
+rubygems_version: 2.6.14
 signing_key: 
 specification_version: 4
 summary: Bring fire to your page