promethee 1.6.14 → 1.6.16

data/app/views/promethee/components/cover/_show.html.erb

@@ -4,21 +4,21 @@ if image_data && image_data[:id]
   blob = ActiveStorage::Blob.find image_data[:id]
 end
 
-surtitle = component[:attributes][:surtitle].to_s
-title = component[:attributes][:title].to_s
-subtitle = component[:attributes][:subtitle].to_s
+searchable_surtitle = component[:attributes][:searchable_surtitle].to_s
+searchable_title = component[:attributes][:searchable_title].to_s
+searchable_subtitle = component[:attributes][:searchable_subtitle].to_s
 %>
 <div id="component-<%= image_data[:id] %>" class="<%= promethee_class_for(component) %>" style="background-image: url(<%= url_for(blob.variant(resize: '1920')) if blob %>)">
-  <% if surtitle.present? %>
-    <p><%= surtitle %></p>
+  <% if searchable_surtitle.present? %>
+    <p><%= searchable_surtitle %></p>
   <% end %>
 
-  <% if title.present? %>
-    <h1><%= title %></h1>
+  <% if searchable_title.present? %>
+    <h1><%= searchable_title %></h1>
   <% end %>
 
-  <% if subtitle.present? %>
-    <p><%= subtitle %></p>
+  <% if searchable_subtitle.present? %>
+    <p><%= searchable_subtitle %></p>
   <% end %>
 
 </div>

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

@@ -12,8 +12,8 @@
             id: undefined,
             name: ''
           },
-          alt: '',
-          caption: ''
+          searchable_alt: '',
+          searchable_caption: ''
         }
       }
     })

data/app/views/promethee/components/image/_edit.inspect.html.erb

@@ -4,19 +4,13 @@
 
   <div class="form-group">
     <label class="label-control">Caption</label>
-    <input class="form-control" ng-model="promethee.inspected.attributes.caption">
+    <input class="form-control" ng-model="promethee.inspected.attributes.searchable_caption">
   </div>
 
-  <div class="panel panel-default" ng-init="advancedConfigurationOpen = false">
-    <div class="panel-heading" ng-click="advancedConfigurationOpen = !advancedConfigurationOpen">
-      Advanced configuration
-      <%= fa_icon 'angle-down', class: 'fa-pull-right', 'ng-class': "{'fa-rotate-180': advancedConfigurationOpen}", style: 'font-size: 18px' %>
-    </div>
-    <div class="panel-body" ng-show="advancedConfigurationOpen">
-      <div class="form-group">
-        <label class="label-control">Alt</label>
-        <input class="form-control" ng-model="promethee.inspected.attributes.alt">
-      </div>
+  <%= render 'promethee/edit/inspect.advanced' %>
+    <div class="form-group">
+      <label class="label-control">Alt</label>
+      <input class="form-control" ng-model="promethee.inspected.attributes.searchable_alt">
     </div>
   </div>
 </script>

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

@@ -3,13 +3,14 @@
       <figure ng-show="component.attributes.image.id">
         <img  ng-src="/promethee/blob/{{component.attributes.image.id}}"
               class="img-responsive">
-        <figcaption ng-show="component.attributes.caption">{{component.attributes.caption}}</figcaption>
+        <figcaption ng-show="component.attributes.searchable_caption">
+          {{component.attributes.searchable_caption}}
+        </figcaption>
       </figure>
       <div  ng-hide="component.attributes.image.id">
         <p  ng-hide="editing"
             class="text-center text-empty">Click to set the image</p>
       </div>
-      <pre class="hidden">{{component.attributes.search = (component.attributes.caption + ' ' + component.attributes.alt)}}</pre>
     </div>
   </div>
 </script>

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

@@ -1,5 +1,5 @@
 <script type="text/ng-template" id="promethee/components/image/localize">
-  <div ng-show="component.master.attributes.alt || component.master.attributes.caption">
+  <div ng-show="component.master.attributes.searchable_alt || component.master.attributes.searchable_caption">
     <hr>
 
     <div class="row">
@@ -8,32 +8,30 @@
       </div>
     </div>
 
-    <div class="row" ng-show="component.master.attributes.alt">
+    <div class="row" ng-show="component.master.attributes.searchable_alt">
       <div class="col-md-6">
         <b>Alt</b>
-        <p>{{component.master.attributes.alt}}</p>
+        <p>{{component.master.attributes.searchable_alt}}</p>
       </div>
       <div class="col-md-6">
         <div class="form-group">
           <label class="label-control">Alt</label>
-          <input class="form-control" ng-model="component.attributes.alt" type="text">
+          <input class="form-control" ng-model="component.attributes.searchable_alt" type="text">
         </div>
       </div>
     </div>
 
-    <div class="row" ng-show="component.master.attributes.caption">
+    <div class="row" ng-show="component.master.attributes.searchable_caption">
       <div class="col-md-6">
         <b>Caption</b>
-        <p>{{component.master.attributes.caption}}</p>
+        <p>{{component.master.attributes.searchable_caption}}</p>
       </div>
       <div class="col-md-6">
         <div class="form-group">
           <label class="label-control">Caption</label>
-          <input class="form-control" ng-model="component.attributes.caption" type="text">
+          <input class="form-control" ng-model="component.attributes.searchable_caption" type="text">
         </div>
       </div>
     </div>
   </div>
-
-  <pre class="hidden">{{component.attributes.search = (component.attributes.caption + ' ' + component.attributes.alt)}}</pre>
 </script>

data/app/views/promethee/components/image/_show.html.erb

@@ -4,14 +4,14 @@ if image_data && image_data[:id]
   blob = ActiveStorage::Blob.find image_data[:id]
 end
 
-alt = component[:attributes][:alt]
-caption = component[:attributes][:caption].to_s
+searchable_alt = component[:attributes][:searchable_alt].to_s
+searchable_caption = component[:attributes][:searchable_caption].to_s
 %>
 <figure class="<%= promethee_class_for component %>">
-  <%= image_tag url_for(blob.variant(resize: '1920')), class: 'img-responsive', alt: alt if blob %>
-  <% unless caption.blank? %>
+  <%= image_tag url_for(blob.variant(resize: '1920')), class: 'img-responsive', alt: searchable_alt if blob %>
+  <% unless searchable_caption.blank? %>
     <figcaption>
-      <%= caption %>
+      <%= searchable_caption %>
     </figcaption>
   <% end %>
 </figure>

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

@@ -8,8 +8,8 @@
       data: {
         type: 'page',
         attributes: {
-          title: 'New page',
-          description: '',
+          searchable_title: 'New page',
+          searchable_description: '',
           stylesheets: '',
           javascripts: ''
         },

data/app/views/promethee/components/page/_edit.inspect.html.erb

@@ -1,29 +1,23 @@
 <script type="text/ng-template" id="promethee/components/page/edit/inspect">
   <div class="form-group">
     <label class="label-control">Title</label>
-    <input class="form-control" ng-model="promethee.inspected.attributes.title">
+    <input class="form-control" ng-model="promethee.inspected.attributes.searchable_title">
   </div>
 
   <div class="form-group">
     <label class="label-control">Description</label>
-    <textarea class="form-control" ng-model="promethee.inspected.attributes.description"></textarea>
+    <textarea class="form-control" ng-model="promethee.inspected.attributes.searchable_description"></textarea>
   </div>
 
-  <div class="panel panel-default" ng-init="advancedConfigurationOpen = false">
-    <div class="panel-heading" ng-click="advancedConfigurationOpen = !advancedConfigurationOpen">
-      Advanced configuration
-      <%= fa_icon 'angle-down', class: 'fa-pull-right', 'ng-class': "{'fa-rotate-180': advancedConfigurationOpen}", style: 'font-size: 18px' %>
+  <%= render 'promethee/edit/inspect.advanced' %>
+    <div class="form-group">
+      <label class="label-control">Stylesheets</label>
+      <textarea class="form-control" ng-model="promethee.inspected.attributes.stylesheets"></textarea>
     </div>
-    <div class="panel-body" ng-show="advancedConfigurationOpen">
-      <div class="form-group">
-        <label class="label-control">Stylesheets</label>
-        <textarea class="form-control" ng-model="promethee.inspected.attributes.stylesheets"></textarea>
-      </div>
 
-      <div class="form-group">
-        <label class="label-control">Javascripts</label>
-        <textarea class="form-control" ng-model="promethee.inspected.attributes.javascripts"></textarea>
-      </div>
+    <div class="form-group">
+      <label class="label-control">Javascripts</label>
+      <textarea class="form-control" ng-model="promethee.inspected.attributes.javascripts"></textarea>
     </div>
   </div>
 </script>

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

@@ -4,7 +4,6 @@
       class="<%= promethee_bem_classes 'promethee-edit__component', "--page" %>">
     <div class="promethee-edit__component__inner">
       <div class="header">Page</div>
-
       <div class="promethee-edit__move__columns">
         <div class="row">
           <% 12.times do %>
@@ -12,9 +11,6 @@
           <% end %>
         </div>
       </div>
-      
-      <pre class="hidden">{{component.attributes.search = concatenateChildrenSearch(component)}}</pre>
-
       <ng-include src="'promethee/move/components'"></ng-include>
     </div>
   </div>

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

@@ -4,31 +4,28 @@
   <div class="row">
     <div class="col-md-6">
       <b>Page title</b>
-      <p>{{component.master.attributes.title}}</p><br>
+      <p>{{component.master.attributes.searchable_title}}</p><br>
     </div>
     <div class="col-md-6">
       <div class="form-group">
         <label class="label-control">Page title</label>
-        <input class="form-control" ng-model="component.attributes.title" type="text">
+        <input class="form-control" ng-model="component.attributes.searchable_title" type="text">
       </div>
     </div>
   </div>
 
-  <div class="row" ng-show="component.master.attributes.description">
+  <div class="row" ng-show="component.master.attributes.searchable_description">
     <div class="col-md-6">
       <div>
         <b>Page description</b>
-        <p>{{component.master.attributes.description}}</p>
+        <p>{{component.master.attributes.searchable_description}}</p>
       </div>
     </div>
     <div class="col-md-6">
       <div class="form-group">
         <label class="label-control">Page description</label>
-        <textarea class="form-control" ng-model="component.attributes.description"></textarea>
+        <textarea class="form-control" ng-model="component.attributes.searchable_description"></textarea>
       </div>
     </div>
   </div>
-
-  <pre class="hidden">{{component.attributes.search = concatenateSearch()}}</pre>
-
 </script>

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

@@ -8,15 +8,8 @@
       data: {
         type: 'row',
         attributes: {
-          bgcolor: "transparent",
-          bgimage1: {
-            id: undefined,
-            name: ''
-          },
-          bgimage2: {
-            id: undefined,
-            name: ''
-          },
+          bgcolor: "rgba(255,255,255,0)",
+          backgrounds: []
         },
         children: []
       }

data/app/views/promethee/components/row/_edit.inspect.html.erb

@@ -1,24 +1,46 @@
 <script type="text/ng-template" id="promethee/components/row/edit/inspect">
   <div class="form-group">
-    <div class="btn btn-default" ng-click="addComponentByType('column', promethee.inspected.children)">Add column</div>
-    <ul class="list-unstyled">
-      <li ng-repeat="column in promethee.inspected.children">Column {{$index + 1}}</li>
-    </ul>
+    <div  class="btn btn-default"
+          ng-click="addComponentByType('column', promethee.inspected.children)">
+      Add column
+    </div>
+    <div  ng-show="promethee.inspected.children.length > 1">
+      <br><br>
+      <label class="label-control">Drag the columns below to reorder them:</label>
+      <ul ui-sortable
+          ng-model="promethee.inspected.children"
+          class="list-unstyled">
+        <li ng-repeat="column in promethee.inspected.children">
+          <%= fa_icon :bars %> Column {{$index + 1}}
+        </li>
+      </ul>
+    </div>
   </div>
 
-  <div class="panel panel-default" ng-init="advancedConfigurationOpen = false">
-    <div class="panel-heading" ng-click="advancedConfigurationOpen = !advancedConfigurationOpen">
-      Advanced configuration
-      <%= fa_icon 'angle-down', class: 'fa-pull-right', 'ng-class': "{'fa-rotate-180': advancedConfigurationOpen}", style: 'font-size: 18px' %>
+  <%= render 'promethee/edit/inspect.advanced' %>
+    <div class="form-group">
+      <label  class="label-control">Background color</label>
+      <input  ng-model="promethee.inspected.attributes.bgcolor"
+              colorpicker="rgba"
+              class="form-control"
+              type="text" />
     </div>
-    <div class="panel-body" ng-show="advancedConfigurationOpen">
-      <div class="form-group">
-        <label class="label-control">Background color</label>
-        <input ng-model="promethee.inspected.attributes.bgcolor" colorpicker="rgba" class="form-control" type="text" />
-      </div>
 
-      <promethee-uploader ng-model="promethee.inspected.attributes.bgimage1" label="Background Image 1" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
-      <promethee-uploader ng-model="promethee.inspected.attributes.bgimage2" label="Background Image 2" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
+    <div>
+      <div class="btn btn-default" ng-click="promethee.inspected.attributes.backgrounds.push( { image: { id: undefined, name: '' }, posh: 'center', posv: 'center', size: 'auto' } )">Add background image</div>
+
+      <div ng-repeat="background in promethee.inspected.attributes.backgrounds" style="margin-top: 20px">
+        <h3>Background {{$index + 1}} <span class="fa fa-trash" ng-click="promethee.inspected.attributes.backgrounds.splice($index, 1)" style="cursor: pointer"></span></h3>
+        <promethee-uploader ng-model="background.image" label="" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
+
+        <%= render 'promethee/edit/radiobuttons', label: 'Horizontal position', attribute: 'posh', values: ['left', 'center', 'right'] %>
+        <%= render 'promethee/edit/radiobuttons', label: 'Vertical position', attribute: 'posv', values: ['top', 'center', 'bottom'] %>
+        <%= render 'promethee/edit/radiobuttons', label: 'Size', attribute: 'size', values: ['auto', 'cover', 'contain'] %>
+      </div>
 
     </div>
+
+
+
+  </div>
 </script>

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

@@ -1,9 +1,13 @@
 <script type="text/ng-template" id="promethee/components/row/edit/move">
   <%= render 'promethee/edit/move.header', type: 'row' %>
       <div class="header">Row</div>
-      <div class="row" style="background-image:url('{{ component.attributes.blob.id ? '/promethee/blob/' + component.attributes.blob.id : '' }}')">
-        <ng-include src="'promethee/move/components'"></ng-include>
-        <pre class="hidden">{{component.attributes.search = concatenateChildrenSearch(component)}}</pre>
+      <div class="row">
+        <div ng-init="components = component.children">
+          <div ng-repeat="component in components"
+            class="<%= promethee_bem_classes 'promethee-edit__move__draggable', '--{{component.type}}' %>">
+            <ng-include src="'promethee/move/component'"></ng-include>
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,3 +1,2 @@
 <script type="text/ng-template" id="promethee/components/row/localize">
-
 </script>

data/app/views/promethee/components/row/_show.html.erb

@@ -1,3 +1,25 @@
-<div class="row <%= promethee_class_for component %>">
+<%
+background_color = component[:attributes][:bgcolor]
+background_images = []
+background_positions = []
+background_sizes = []
+
+if component[:attributes].has_key?(:backgrounds) # retro-compatibility
+  component[:attributes][:backgrounds].each do |item|
+    image_data = item[:image]
+    if image_data && image_data[:id]
+      blob_id = image_data[:id]
+      blob = ActiveStorage::Blob.find blob_id
+      url = "url(#{url_for(blob)})"
+      position = "#{item[:posh]} #{item[:posv]}"
+      background_images << url
+      background_positions << position
+      background_sizes << item[:size]
+    end
+  end
+end
+%>
+
+<div class="row <%= promethee_class_for component %>" style="background-color: <%= background_color %>; <%= background_images.count > 0 ? "background-repeat: no-repeat; background-image: #{background_images.join(', ')}; background-position: #{background_positions.join(', ')}; background-size: #{background_sizes.join(', ')};" : '' %>">
   <%= render 'promethee/show/components', components: component[:children] %>
 </div>

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

@@ -7,9 +7,6 @@
       library: true,
       data: {
         type: 'slider',
-        attributes: {
-          contents: {}
-        },
         children: []
       }
     })

data/app/views/promethee/components/slider/_edit.inspect.html.erb

@@ -1,54 +1,14 @@
 <script type="text/ng-template" id="promethee/components/slider/edit/inspect">
-  <div ui-sortable="{handle: '.handle'}" ng-model="promethee.inspected.children">
-    <div
-      class="panel panel-default"
-      ng-repeat="component in promethee.inspected.children"
-    >
-      <div class="panel-body">
-        <div class="row handle">
-          <div class="col-xs-9">
-            <span class="label label-default">#{{$index + 1}}</span>
-            <span class="label label-info">{{component.type}}</span>
-          </div>
-          <div class="col-xs-3">
-            <ng-include src="'promethee/move/component'"></ng-include>
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="col-xs-12">
-            <div class="form-group">
-              <label class="label-control">Text</label>
-              <summernote config="summernoteConfig" ng-model="promethee.inspected.attributes.contents['content-' + component.id]"></summernote>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div class="form-group">
+    <div class="btn btn-default" ng-click="addComponentByType('slider_item', promethee.inspected.children)">Add item</div>
+    <div ng-show="promethee.inspected.children.length > 1">
+      <br><br>
+      <label class="label-control">Drag the items below to reorder them:</label>
+      <ul ui-sortable ng-model="promethee.inspected.children" class="list-unstyled">
+        <li ng-repeat="item in promethee.inspected.children">
+          <%= fa_icon :bars %> Item {{$index + 1}}
+        </li>
+      </ul>
     </div>
   </div>
-
-  <div class="pull-right btn-toolbar" ng-controller="SliderInspectorController">
-    <span ng-repeat="definition in itemDefinitions" class="btn btn-default" ng-click="addItem(definition)">Add {{definition.name}}</span>
-  </div>
-</script>
-
-<script>
-  promethee.controller('SliderInspectorController', ['$scope', function($scope) {
-    var availableComponents = ['image', 'video'];
-
-    $scope.itemDefinitions = $scope.promethee.definitions.filter(function(definition) {
-      return availableComponents.includes(definition.data.type);
-    });
-
-    var clone = function(object) {
-      return JSON.parse(JSON.stringify(object));
-    };
-
-    $scope.addItem = function(definition) {
-      var item = JSON.parse(JSON.stringify(definition.data));
-      item.id = $scope.generateIdentifier();
-
-      $scope.promethee.inspected.children.push(item);
-    }
-  }])
-</script>
+</script>