promethee 1.0.20 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 932ca1d52484c654de7f178f55548aa6753942cd
-  data.tar.gz: a998da307c6021b046a87230f97301c522638757
+  metadata.gz: fedae453568a7c76951d9a5f5afac39107887fa1
+  data.tar.gz: d9999169433575cee9b82bb574241d4265d68c3e
 SHA512:
-  metadata.gz: ec99cb5ea11a85d88149dacfbc2c4e266b85d6642f93e3cda86d8e92dd2e724729a5abc4b5e9dbcf7f02e1d00eff3172464c682c1df5fbfea4a6c5cc3052ef9d
-  data.tar.gz: 63d672f686c5a4b9bb793fef19c422b107f8daf40fe780950bd83d69c956c5898862cfbeac50a319fdcba59476b065cc4b0b7f3b99af46f69f6556dd83c14867
+  metadata.gz: f9a7e5e765d5f8a2d770a2cba25e3c26b0dc2219e0e3936b9c25911934a0e6bb908b8b20d563f0cdd629e15d6299c77ebb200db1d2ebb098a217521a7309d1fb
+  data.tar.gz: 66d57d9ef3e5c6699aa773db250d6a233ad2ed5dbed2286bc44cc483d27ba54f848b25e22ced61c9c51b20a52a8a17f2c30fac013aab1f6c6ce6fa5b26b37c79

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

@@ -3,9 +3,9 @@ $promethee-transparent-grey: transparentize($promethee-grey, .8)
 $promethee-light-grey: #eee
 $promethee-color: #ff9900 !default
 
-@import 'promethee-editor/mover'
+@import 'promethee-editor/write'
+@import 'promethee-editor/move'
 @import 'promethee-editor/preview'
-@import 'promethee-editor/component'
 
 .promethee-editor
   background: white
@@ -15,73 +15,42 @@ $promethee-color: #ff9900 !default
     left: 0
     right: 0
     bottom: 0
-    top: 0
+    top: 50px
     z-index: 10000
     overflow: auto
-  &--preview
-    overflow: hidden
+    .promethee-editor__write
+      padding-right: 300px
+      padding-top: 15px
+    .promethee-editor__inspector
+      top: 65px
 
   &__navbar
     border-radius: 0
     border: none
-    border-bottom: 2px solid $promethee-color
-    background: transparent
+    background: #232323
+    margin-bottom: 0
+    ul.nav li a
+      color: white
+      &:hover
+        color: #eee
+    .dropdown-menu
+      background: #232323
+      min-width: 20px
 
   &__icon
     svg path
-      fill: $promethee-color
+      fill: white
 
   &__button
-    color: $promethee-color
-    margin-left: 10px
-
-  &__toolbar
-    background: #eee
-    padding: 10px
-    font-size: 11px
-    text-transform: uppercase
-    font-weight: bold
-    color: $promethee-color
-    &, *
-      user-select: none
+    color: white
 
   &__wrapper
     padding: 10px
 
-  &__component-selected
-    border: 2px solid transparent
-
-    &--visible
-      border-color: $promethee-color
-
-  &__inspector
-    background: #fff
-    border: 1px solid rgba(0, 0, 0, .1)
-    width: 300px
-    height: calc(100vh - 30px)
-    top: 15px
-    left: 100%
-    margin-left: -15px
-    transform: translateX(-100%)
-    z-index: 1000
-    display: none
-    position: fixed
-
-    &--open
-      display: block
-
-  &__inspector-header
-    padding: 15px
-    border-bottom: 1px solid rgba(0, 0, 0, .1)
-
-    &, h5
-      font-size: 11px
-
-  h5
-    margin: 0
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
-    font-weight: bold
-    text-transform: uppercase
-
-.promethee-editor__inspector-content
-  padding: 15px
+  .video-neutralizing-overlay
+    background: transparent
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0

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

@@ -0,0 +1,102 @@
+.promethee-editor__move
+  width: 432px
+  margin: 0 auto
+  padding-bottom: 200px
+  *
+    font-size: 100%
+    line-height: 100%
+    margin: 0
+  .header
+    padding: 5px 0
+    font-size: 9px
+    text-transform: uppercase
+    border-bottom: 1px solid #ccc
+  &__component
+    user-select: none
+
+  .row
+    margin-left: -5px
+    margin-right: -5px
+  .col
+    padding-left: 5px
+    padding-right: 5px
+
+  &__droppable
+    visibility: hidden
+    margin: 10px 0
+    position: relative
+    background: #253742
+    width: 100%
+    height: 10px
+    transition: width .2s, height .2s
+    &.ui-droppable-active
+      visibility: visible
+      height: 10px
+    &.ui-droppable-hover
+      height: 20px
+    &--row
+      position: absolute
+      display: none
+      width: 10px
+      height: 100%
+      &.ui-droppable-active
+        width: 10px
+        height: 100%
+      &.ui-droppable-hover
+        width: 20px
+        height: 100%
+      &--first
+        display: block
+        left: -10px
+        top: 9px
+      &--inside-column
+        display: block
+        right: -10px
+        top: -11px
+
+  // All this is done to mask droppable that would put the draggable at the same position 
+    // &--hidden
+    //   visibility: hidden
+    //   pointer-events: none
+  //   &--row
+  //     &:not(&--first)
+  //       visibility: hidden
+  //       pointer-events: none
+
+  //     &--first
+  //       position: absolute
+  //       top: 0
+  //       left: -25px
+  //       width: 40px
+  //       height: 400px
+
+  //     &--inside-column
+  //       position: absolute
+  //       top: 0
+  //       right: -25px
+  //       width: 40px
+  //       height: 400px
+
+
+  .ui-draggable-dragging
+    z-index: 1000
+    opacity: 0.5
+    // Nothing is droppable inside components being dragged
+    .promethee-editor__move__droppable
+      visibility: hidden !important
+
+  // By default, nothing is dropped in rows
+  &--dragging
+    .promethee-editor__move__droppable--row
+      display: none
+
+  // Except for columns, which can be dropped only on rows
+  &--dragging.promethee-editor__move--dragging--column
+    .promethee-editor__move__droppable
+      display: none
+      // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
+      &.promethee-editor__move__droppable--row--inside-column,
+      &.promethee-editor__move__droppable--row--first
+        display: block
+
+

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

@@ -1,9 +1,8 @@
 .promethee-editor__preview
-  background: #000
+  background: black
   position: relative
-  height: calc(100% - 52px)
+  height: 100%
   min-height: 500px
-  margin-top: -20px
 
   &-frame
     top: 0

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

@@ -0,0 +1,58 @@
+.promethee-editor__write
+  
+  .promethee-editor__toolbar
+    background: #253742
+    padding: 10px
+    font-size: 11px
+    text-transform: uppercase
+    color: white
+    text-align: center
+    &, *
+      user-select: none
+
+  .promethee-editor__inspector
+    background: #fff
+    width: 300px
+    top: 15px
+    right: 0
+    bottom: 15px
+    z-index: 1000
+    position: fixed
+    border-left: 1px solid #253742
+    border-bottom: 1px solid #253742
+    &-header
+      background: #253742
+      padding: 15px
+      color: white
+      &, h5
+        font-size: 11px
+        margin: 0
+        text-transform: uppercase
+    &-content
+      padding: 15px
+
+  .promethee-editor__adder__button
+    display: block
+    text-align: center
+    margin: 50px 0
+
+  .promethee-editor__component
+    margin-bottom: 5px
+    &--cover
+      .promethee-editor__cover-content
+        padding: 150px 30px
+        background-repeat: no-repeat
+        background-position: center center
+        background-size: cover
+    &--row > div > .promethee-editor__toolbar
+        margin-bottom: 5px
+    &--column > div > .promethee-editor__toolbar
+      margin-bottom: 5px
+    &--slider
+      .fontawesome-carousel-control .fa
+          top: 50%
+          position: absolute
+          transform: translateY(-50%)
+          font-size: 30px
+    &-selected--visible
+      border: 2px solid #253742

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

@@ -4,53 +4,11 @@ promethee_data = Promethee::Data.new master_data
 %>
 
 <script>
-  var State = function(value) {
-    this.default = this.current = value;
-  };
-
-  State.prototype = {
-    get enabled() {
-      return !!this.current;
-    },
-
-    get disabled() {
-      return !this.enabled;
-    },
-
-    enable: function() {
-      this.set(true);
-    },
-
-    disable: function() {
-      this.set(false);
-    },
-
-    is: function(state) {
-      return this.current === state;
-    },
-
-    set: function(state) {
-      this.current = state
-    },
-
-    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)
-    }
-  };
 
   var promethee = angular
     .module('Promethee', ['summernote', 'ngAnimate'])
     .value('data', <%= promethee_data.to_json.html_safe %>)
     .value('definitions', [])
-    .value('inspected', {component: null})
-    .value('action', new State('write'))
-    .value('preview', new State('desktop'))
-    .value('fullscreen', new State(false))
     .config(function($rootScopeProvider) {
       $rootScopeProvider.digestTtl(20);
     })
@@ -102,7 +60,8 @@ promethee_data = Promethee::Data.new master_data
       };
     });
 
-  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 'action', 'preview', 'fullscreen', 'inspected', function(data, $scope, definitions, $http, action, preview, fullscreen, inspected) {
+  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 === '') {
@@ -114,43 +73,35 @@ promethee_data = Promethee::Data.new master_data
       };
     }
 
+    $scope.promethee = { inspected: null };
     $scope.data = $scope.component = data;
-    $scope.inspected = inspected;
-
-    // Application states
-    $scope.action = action;
-    $scope.preview = preview;
-    $scope.fullscreen = fullscreen;
-
-    // $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.mode = 'write';
+    $scope.preview = 'desktop';
+    $scope.fullscreen = false;
+
+    $scope.inspect = function(component, event) {
+      $scope.promethee.inspected = component;
+      event.stopPropagation();
+    }
+
+    $scope.enablePreview = function() {
+      if (this.mode === 'preview') return;
+      this.mode = 'preview';
+
+      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.remove = function(component, components) {
       var index = components.indexOf(component);
@@ -163,31 +114,15 @@ promethee_data = Promethee::Data.new master_data
 
 <div
   id="promethee"
-  ng-class="{
-    'promethee-editor': true,
-    'promethee-editor--fullscreen': fullscreen.enabled
-  }"
+  class="promethee-editor"
+  ng-class="{ 'promethee-editor--fullscreen': fullscreen }"
   ng-app="Promethee"
   ng-controller="PrometheeController as prometheeController"
->
+  >
+  <%= render 'promethee/edit/shared/data' %>
   <%= 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}}" />
-
-  <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>