promethee 1.0.20 → 1.1.0

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

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

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

@@ -1,5 +1,6 @@
 <script type="text/ng-template" id="promethee/write/component/column">
   <div
+    ng-click="inspect(component, $event)"
     class="
       col
       col-md-{{component.attributes.size}}
@@ -7,47 +8,14 @@
       promethee-editor__component
       promethee-editor__component--column
     "
-    ng-controller="ColumnController"
-    ng-click="edit($event);"
-  >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Column
         <ng-include src="'promethee/write/toolbar'"></ng-include>
       </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>
+      <ng-include src="'promethee/write/add_button'"></ng-include>
     </div>
   </div>
-</script>
-
-<script>
-  promethee.controller('ColumnController', ['$scope', 'inspected', function($scope, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-  }]);
-</script>
+</script>

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

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/write/component/cover">
   <div
     ng-controller="CoverController"
+    ng-click="inspect(component, $event)"
     class="promethee-editor__component promethee-editor__component--cover"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Cover
         <ng-include src="'promethee/write/toolbar'"></ng-include>
@@ -42,26 +42,7 @@
     }
   });
 
-  promethee.controller('CoverController', ['$scope', 'inspected', function($scopen, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
+  promethee.controller('CoverController', ['$scope', function($scopen) {
     $scope.options = {
       toolbar: [
         ['headline', ['style']],

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

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/write/component/details">
   <div
     ng-controller="DetailsController"
+    ng-click="inspect(component, $event)"
     class="promethee-editor__component promethee-editor__component--details"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Details
         <ng-include src="'promethee/write/toolbar'"></ng-include>
@@ -39,26 +39,7 @@
     }
   });
 
-  promethee.controller('DetailsController', ['$scope', 'inspected', function($scope, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
+  promethee.controller('DetailsController', ['$scope', function($scope) {
     $scope.options = {
       toolbar: [
         ['headline', ['style']],

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

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/write/component/image">
   <div
     ng-controller="ImageController"
+    ng-click="inspect(component, $event)"
     class="promethee-editor__component promethee-editor__component--image"
-    ng-click="edit($event);"
-  >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Image
         <ng-include src="'promethee/write/toolbar'"></ng-include>
@@ -36,26 +36,7 @@
     }
   });
 
-  promethee.controller('ImageController', ['$scope', 'inspected', function($scope, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
+  promethee.controller('ImageController', ['$scope', function($scope) {
     $scope.options = {
       toolbar: [
         ['headline', ['style']],

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

@@ -1,17 +1,17 @@
 <script type="text/ng-template" id="promethee/write/component/row">
   <div
     ng-controller="RowController"
+    ng-click="inspect(component, $event)"
     class="row promethee-editor__component promethee-editor__component--row"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Row
         <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
       <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>
+      <a ng-click="addColumn()" class="promethee-editor__adder__button"><%= fa_icon :columns, class: "fa-2x" %></a>
     </div>
   </div>
 </script>
@@ -27,28 +27,7 @@
     }
   });
 
-  promethee.controller('RowController', ['$scope', 'inspected', function($scope, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
-    $scope.allowedTypes = ['column'];
-
+  promethee.controller('RowController', ['$scope', function($scope) {
     $scope.addColumn = function() {
       this.component.children.push({
         type: 'column',

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

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/write/component/slider">
   <div
     ng-controller="SliderController"
+    ng-click="inspect(component, $event)"
     class="row promethee-editor__component promethee-editor__component--slider"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Slider
 
@@ -53,24 +53,7 @@
     }
   });
 
-  promethee.controller('SliderController', ['$scope', '$element', 'inspected', function($scope, $element, inspected) {
-    $scope.editing = false;
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      $scope.editing = true;
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      $scope.editing = false;
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
+  promethee.controller('SliderController', ['$scope', '$element', function($scope, $element) {
     $scope.sliderId = 'slider-' + Date.now() + '-' + Math.floor(Math.random()*1000000);
 
     $scope.$watch('editing', function(newVal) {

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

@@ -1,18 +1,18 @@
 <script type="text/ng-template" id="promethee/write/component/text">
   <div
     ng-controller="TextController"
+    ng-click="inspect(component, $event)"
     class="promethee-editor__component promethee-editor__component--text"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Text
         <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-      <div ng-show="editing">
+      <div ng-show="promethee.inspected === component">
         <summernote config="options" ng-model="component.attributes.body"></summernote>
       </div>
-      <div ng-hide="editing">
+      <div ng-hide="promethee.inspected === component">
         <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe"></div>
       </div>
     </div>
@@ -31,26 +31,7 @@
     }
   });
 
-  promethee.controller('TextController', ['$scope', 'inspected', function($scope, inspected) {
-    Object.defineProperty($scope, 'editing', {
-      get: function() {
-        return inspected.component == $scope.component;
-      }
-    });
-
-    $scope.edit = function(event) {
-      event.stopPropagation();
-      inspected.component = $scope.component;
-    };
-
-    $scope.complete = function() {
-      inspected.component = null;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope[$scope.editing ? 'complete' : 'edit']();
-    };
-
+  promethee.controller('TextController', ['$scope', function($scope) {
     $scope.options = {
       toolbar: [
         ['headline', ['style']],

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

@@ -1,10 +1,10 @@
 <script type="text/ng-template" id="promethee/write/component/video">
   <div
     ng-controller="VideoController"
+    ng-click="inspect(component, $event)"
     class="promethee-editor__component promethee-editor__component--video"
-    ng-click="edit($event);"
   >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
       <div class="promethee-editor__toolbar">
         Video
         <ng-include src="'promethee/write/toolbar'"></ng-include>
@@ -12,6 +12,7 @@
 
       <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>
@@ -29,20 +30,20 @@
     }
   });
 
-  promethee.controller('VideoController', ['$scope', 'inspected', function($scope, inspected) {
+  promethee.controller('VideoController', ['$scope', function($scope) {
     Object.defineProperty($scope, 'editing', {
       get: function() {
-        return inspected.component == $scope.component;
+        return inspected == $scope.component;
       }
     });
 
     $scope.edit = function(event) {
       event.stopPropagation();
-      inspected.component = $scope.component;
+      inspected = $scope.component;
     };
 
     $scope.complete = function() {
-      inspected.component = null;
+      inspected = null;
     };
 
     $scope.toggleEdit = function() {

data/lib/promethee/data.rb

@@ -2,130 +2,86 @@
 module Promethee
   class Data
     def initialize(data, options = {})
-      @master_data = convert_if_necessary data
-      @master_data_unlocalized = deep_clone @master_data
-      localization_data = options[:localization_data]
-      unless localization_data.nil?
-        @localization_data = convert_if_necessary localization_data
-        localize!
-      end
-    end
-
-    def localization_data
-      prepare_localization
-      @localization_data
+      @master_data = hashify data
+      @localization_data_raw = hashify options[:localization_data] if options.include? :localization_data
+      prepare_localization_data
+      localize_master_data
     end
 
     def localization_data_to_json
-      localization_data.to_json
+      @localization_data.to_json
     end
 
     def to_json
       @master_data.to_json
     end
 
-    def to_h
-      @master_data
-    end
+    # The data acts as a hash
+    def [](value)
+      @master_data[value]
+    end 
 
     protected
 
-    def convert_if_necessary(string_or_hash_or_anything)
-      # string_or_hash_or_anything could be a string a hash or anything so we need to handle potential exception to keep this method safe
-      begin
-        converted = string_or_hash_or_anything.is_a?(String) ? JSON.parse(string_or_hash_or_anything, symbolize_names: true) : string_or_hash_or_anything
-      rescue
-        converted = {}
+    def hashify(string_or_hash)
+      string_or_hash.is_a?(String) ? JSON.parse(string_or_hash, symbolize_names: true) : string_or_hash
+    end
+
+    # We merge the localization data in the components from the master data.
+    # This will :
+    # 1 get what's already localized, based on the component id
+    # 2 add new components
+    # 3 remove components not in the master anymore
+    # 4 take the order from the master
+    def prepare_localization_data
+      @localization_data = {
+        version: @master_data[:version],
+        components: []
+      }
+      # We create a flat list of the children and all their child, in the master's order
+      master_components_flat = Promethee::Data.flatten_components @master_data.deep_dup[:children]
+      master_components_flat.each do |component|
+        localized_component = Promethee::Data.find_localized_component component[:id], @localization_data_raw
+        # We take either the localized, or the master component
+        data = localized_component || component
+        # We add master reference
+        data[:master] = component.deep_dup
+        # We add it to the list of localized components
+        @localization_data[:components] << data
       end
-
-      # The parsed json could be anything: "\"hey\"" => "hey", "[\"hey\"]" => ["hey"], "null" => nil, ...
-      converted = {} unless converted.is_a? Hash
-
-      # The data might not be a json string so the "symbolize_names" options wouldn't do anything on a ruby hash because JSON.parse wouldn't be called
-      converted.deep_symbolize_keys!
-
-      # The children array is required in order to make this class work
-      converted[:children] = [] unless converted[:children].is_a?(Array)
-
-      # The type is required in order to make this class work
-      converted[:type] = converted[:type].is_a?(String) || converted[:type].is_a?(Symbol) ? converted[:type].to_s : 'page'
-
-      converted
-    end
-
-    def deep_clone(hash)
-      JSON.parse(hash.to_json, symbolize_names: true)
-    end
-
-    # This will recursively merge the localization_data into the master_data
-    def localize!
-      merge!
-      localize_children!
-    end
-
-    def merge!
-      @master_data[:attributes].merge! localized_component[:attributes] if localized?
-    end
-
-    # Look for localized component with the same id
-    def localized_component
-      @localized_component ||= components.select { |component| component[:id] == @master_data[:id] }.first
-    end
-
-    def components
-      @components ||= @localization_data.include?(:components) ? @localization_data[:components] : []
     end
 
-    def localized?
-      !localized_component.nil?
+    # Recursively merge the localization_data into the master_data
+    def localize_master_data
+      Promethee::Data.localize_component @master_data, @localization_data
     end
 
-    def localize_children!
-      children.each do |child_hash|
-        child_data = Promethee::Data.new child_hash, localization_data: @localization_data
-        child_data.localize!
-      end
+    def self.find_localized_component(id, array)
+      return nil if array.nil?
+      return nil unless array.include? :components
+      array[:components].select { |component| component[:id] == id }.first
     end
 
-    def children
-      return [] if !@master_data.include? :children or @master_data[:children].nil?
-      @master_data[:children]
+    def self.localize_component(component, localization_data)
+      localize_component_attributes component, localization_data
+      localize_component_children component, localization_data
     end
 
-    def flat_children
-      self.class.flatten_components @master_data_unlocalized[:children]
+    def self.localize_component_attributes(component, localization_data)
+      return unless component.include? :attributes
+      localized_component = Promethee::Data.find_localized_component component[:id], localization_data
+      return if localized_component.nil?
+      component[:attributes].merge! localized_component[:attributes]
     end
 
-    def prepare_localization
-      # TODO extract localizable components from master data, in the correct order, merged with existing ones
-      # TODO update master_version
-
-      # Selects only text components within the children components flat array
-      # TODO think about a better way to handle localized attributes among all the components (not only text type)
-      flat_master_data = flat_children.select { |component| component[:type].to_sym === :text }
-
-      if @localization_data
-        # If localization_data has been provided, we merge flat_master_data components with its components
-        @localization_data[:components] = flat_master_data.map do |component|
-          localized_component = @localization_data[:components].find do |localized_component|
-            localized_component[:id] == component[:id]
-          end
-
-          # If the localized_component isn't found, we create it with the master (component)
-          # Eventually, we add a reference to the master in the localized component
-          (localized_component || component).merge master: component.deep_dup
-        end
-      else
-        # In the other case, localization_data components are flat_master_data components
-        @localization_data = {
-          version: @master_data[:version],
-          components: flat_master_data
-        }
-      end
+    def self.localize_component_children(component, localization_data)
+      return unless component.include? :children
+      component[:children].each { |child| localize_component child, localization_data }
     end
 
-    # This method take an array of components and puts every components and their children into a unique flat array
-    def self.flatten_components components
+    # Takes an array of components and puts every component and their children into a unique flat array
+    def self.flatten_components(components)
+      return [] if components.nil?
       components.reduce [] do |flat_components, component|
         flat_components +
         [component.except(:children)] +
@@ -133,4 +89,4 @@ module Promethee
       end
     end
   end
-end
+end