promethee 3.0.2 → 4.0.0

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

@@ -1,37 +1,40 @@
 <script type="text/ng-template" id="promethee/components/image/localize">
-  <div ng-show="master.attributes.searchable_alt || master.attributes.searchable_caption">
+  <div ng-show="master.attributes.alt.value || master.attributes.caption.value">
     <hr>
 
     <div class="row">
       <div class="col-md-6">
-        <img ng-src="/promethee/blob/{{component.attributes.image.id}}" class="img-fluid img-responsive">
+        <img ng-src="/promethee/blob/{{master.attributes.image.value.id}}" class="img-fluid img-responsive" style="max-width: 200px">
       </div>
-    </div>
-
-    <div class="row" ng-show="master.attributes.searchable_alt">
       <div class="col-md-6">
-        <b>Alt</b>
-        <p>{{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.searchable_alt" type="text">
-        </div>
+        <img ng-src="/promethee/blob/{{component.attributes.image.value.id}}" class="img-fluid img-responsive" style="max-width: 200px">
       </div>
     </div>
 
-    <div class="row" ng-show="master.attributes.searchable_caption">
+    <div class="row" ng-show="master.attributes.caption.value">
       <div class="col-md-6">
         <b>Caption</b>
-        <p>{{master.attributes.searchable_caption}}</p>
+        <p>{{master.attributes.caption.value}}</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.searchable_caption" type="text">
+          <b>Caption</b>
+          <input class="form-control" ng-model="component.attributes.caption.value" type="text">
         </div>
       </div>
     </div>
   </div>
+
+  <div class="row" ng-show="master.attributes.alt.value">
+    <div class="col-md-6">
+      <b>Alt</b>
+      <p>{{master.attributes.alt.value}}</p>
+    </div>
+    <div class="col-md-6">
+      <div class="form-group">
+        <b>Alt</b>
+        <input class="form-control" ng-model="component.attributes.alt.value" type="text">
+      </div>
+    </div>
+  </div>
 </script>

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

@@ -1,14 +1,14 @@
 <%
-blob = blob_from_data component[:attributes][:image]
+blob = blob_from_data component[:attributes].dig(:image, :value)
 
-searchable_alt = component[:attributes][:searchable_alt].to_s
-searchable_caption = component[:attributes][:searchable_caption].to_s
+alt = component[:attributes].dig(:alt, :value)&.to_s
+caption = component[:attributes].dig(:caption, :value)&.to_s
 %>
 <figure class="<%= promethee_class_for component %>">
-  <%= render 'promethee/show/image.srcset', blob: blob, alt: searchable_alt, caption: searchable_caption if blob %>
-  <% unless searchable_caption.blank? %>
+  <%= render 'promethee/show/image.srcset', blob: blob, alt: alt, caption: caption if blob %>
+  <% unless caption.blank? %>
     <figcaption>
-      <%= searchable_caption %>
+      <%= caption %>
     </figcaption>
   <% end %>
 </figure>

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

@@ -8,18 +8,43 @@
       data: {
         type: 'page',
         attributes: {
-          searchable_title: 'New page',
-          searchable_description: '',
+          title: {
+            searchable: true,
+            translatable: true,
+            type: 'string',
+            value: 'New page'
+          },
+          description: {
+            searchable: true,
+            translatable: true,
+            type: 'text',
+            value: ''
+          },
           thumbnail: {
-            id: undefined,
-            name: ''
+            searchable: false,
+            translatable: false,
+            type: 'blob',
+            value: {
+              id: undefined,
+              name: ''
+            }
+          },
+          stylesheets: {
+            searchable: false,
+            translatable: false,
+            type: 'string',
+            value: ''
           },
-          stylesheets: '',
-          javascripts: ''
+          javascripts: {
+            searchable: false,
+            translatable: false,
+            type: 'string',
+            value: ''
+          }
         },
         children: []
       }
     })
   JAVASCRIPT
 %>
-<div ng-init="<%= init %>"></div>
+<div ng-init="<%= init %>"></div>

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

@@ -2,26 +2,26 @@
   <% unless @disable_page_attributes %>
     <div class="form-group">
       <label class="label-control">Title</label>
-      <input class="form-control" ng-model="promethee.inspected.attributes.searchable_title">
+      <input class="form-control" ng-model="promethee.inspected.attributes.title.value">
     </div>
 
     <div class="form-group">
       <label class="label-control">Description</label>
-      <textarea class="form-control" ng-model="promethee.inspected.attributes.searchable_description"></textarea>
+      <textarea class="form-control" ng-model="promethee.inspected.attributes.description.value"></textarea>
     </div>
   <% end %>
 
   <%= render 'promethee/edit/inspect.advanced' %>
-    <promethee-uploader ng-model="promethee.inspected.attributes.thumbnail" label="Thumbnail" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
+    <promethee-uploader ng-model="promethee.inspected.attributes.thumbnail.value" label="Thumbnail" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
 
     <div class="form-group">
       <label class="label-control">Stylesheets</label>
-      <textarea class="form-control" ng-model="promethee.inspected.attributes.stylesheets"></textarea>
+      <textarea class="form-control" ng-model="promethee.inspected.attributes.stylesheets.value"></textarea>
     </div>
 
     <div class="form-group">
       <label class="label-control">Javascripts</label>
-      <textarea class="form-control" ng-model="promethee.inspected.attributes.javascripts"></textarea>
+      <textarea class="form-control" ng-model="promethee.inspected.attributes.javascripts.value"></textarea>
     </div>
   </div>
 </script>

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

@@ -1,31 +1,31 @@
 <script type="text/ng-template" id="promethee/components/page/localize">
   <% unless @disable_page_attributes %>
   <hr>
-  
+
     <div class="row">
       <div class="col-md-6">
         <b>Page title</b>
-        <p>{{master.attributes.searchable_title}}</p><br>
+        <p>{{master.attributes.title.value}}</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.searchable_title" type="text">
+          <b>Page title</b>
+          <input class="form-control" ng-model="component.attributes.title.value" type="text">
         </div>
       </div>
     </div>
 
-    <div class="row" ng-show="master.attributes.searchable_description">
+    <div class="row" ng-show="master.attributes.description.value">
       <div class="col-md-6">
         <div>
           <b>Page description</b>
-          <p>{{master.attributes.searchable_description}}</p>
+          <p>{{master.attributes.description.value}}</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.searchable_description"></textarea>
+          <b>Page description</b>
+          <textarea class="form-control" ng-model="component.attributes.description.value"></textarea>
         </div>
       </div>
     </div>

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

@@ -1,14 +1,14 @@
 <%
-  stylesheets = component[:attributes][:stylesheets]
-  javascripts = component[:attributes][:javascripts]
+  stylesheets = component[:attributes].dig(:stylesheets, :value)&.to_s&.html_safe
+  javascripts = component[:attributes].dig(:javascripts, :value)&.to_s&.html_safe
 %>
 
 <% if stylesheets.present? %>
-  <style><%= stylesheets.html_safe %></style>
+  <style><%= stylesheets %></style>
 <% end %>
 
 <% if javascripts.present? %>
-  <script><%= javascripts.html_safe %></script>
+  <script><%= javascripts %></script>
 <% end %>
 
 <div class="<%= promethee_class_for component %>">

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

@@ -8,8 +8,18 @@
       data: {
         type: 'row',
         attributes: {
-          bgcolor: "rgba(255,255,255,0)",
-          backgrounds: []
+          bgcolor: {
+            searchable: false,
+            translatable: false,
+            type: 'color',
+            value: "rgba(255,255,255,0)",
+          },
+          backgrounds: {
+            searchable: false,
+            translatable: false,
+            type: 'array',
+            value: []
+          }
         },
         children: []
       }

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

@@ -20,22 +20,22 @@
   <%= render 'promethee/edit/inspect.advanced' %>
     <div class="form-group">
       <label  class="label-control">Background color</label>
-      <input  ng-model="promethee.inspected.attributes.bgcolor"
+      <input  ng-model="promethee.inspected.attributes.bgcolor.value"
               colorpicker="rgba"
               class="form-control"
               type="text" />
     </div>
 
     <div>
-      <div class="btn btn-default btn-light" ng-click="promethee.inspected.attributes.backgrounds.push( { image: { id: undefined, name: '' }, posh: 'center', posv: 'center', size: 'auto' } )">Add background image</div>
+      <div class="btn btn-default btn-light" ng-click="promethee.inspected.attributes.backgrounds.value.push( { image: { searchable: false, type: 'blob', value: { id: undefined, name: '' } }, posh: { collection: [ { label: 'Left', value: 'left' }, { label: 'Center', value: 'center' }, { label: 'Right', value: 'right' } ], searchable: false, type: 'enum', value: 'center' }, posv: { collection: [ { label: 'Top', value: 'top' }, { label: 'Center', value: 'center' }, { label: 'Bottom', value: 'bottom' } ], searchable: false, type: 'enum', value: 'center' }, size: { collection: [ { label: 'Auto', value: 'auto' }, { label: 'Cover', value: 'cover' }, { label: 'Contain', value: 'contain' } ], searchable: false, type: 'enum', value: '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>
+      <div ng-repeat="background in promethee.inspected.attributes.backgrounds.value" style="margin-top: 20px">
+        <h3>Background {{$index + 1}} <span class="fa fa-trash" ng-click="promethee.inspected.attributes.backgrounds.value.splice($index, 1)" style="cursor: pointer"></span></h3>
+        <promethee-uploader ng-model="background.image.value" label="" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
 
-        <%= render 'promethee/edit/radiobuttons', label: 'Horizontal position', model: 'background.posh', values: ['left', 'center', 'right'] %>
-        <%= render 'promethee/edit/radiobuttons', label: 'Vertical position', model: 'background.posv', values: ['top', 'center', 'bottom'] %>
-        <%= render 'promethee/edit/radiobuttons', label: 'Size', model: 'background.size', values: ['auto', 'cover', 'contain'] %>
+        <%= render 'promethee/edit/radiobuttons', label: 'Horizontal position', model: 'background.posh.value', values: ['left', 'center', 'right'] %>
+        <%= render 'promethee/edit/radiobuttons', label: 'Vertical position', model: 'background.posv.value', values: ['top', 'center', 'bottom'] %>
+        <%= render 'promethee/edit/radiobuttons', label: 'Size', model: 'background.size.value', values: ['auto', 'cover', 'contain'] %>
       </div>
 
     </div>

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

@@ -2,23 +2,23 @@
 <%= render 'promethee/edit/move.header', type: 'row' %>
     <div class="header">Row</div>
     <div class="row" ng-controller="RowMoveController">
-      <div class="row__background row__background--color" ng-style="{'background': component.attributes.bgcolor}"></div>
+      <div class="row__background row__background--color" ng-style="{'background': component.attributes.bgcolor.value}"></div>
 
-      <div ng-repeat="background in component.attributes.backgrounds"
+      <div ng-repeat="background in component.attributes.backgrounds.value"
            class="row__background"
            style="
-           background-image:url('{{background.image.id ? '/promethee/blob/'+background.image.id : ''}}');
-               background-position:{{background.posh+' '+background.posv}};
-               background-size: {{background.size}}" >
+           background-image:url('{{background.image.value.id ? '/promethee/blob/'+background.image.value.id : ''}}');
+               background-position:{{background.posh.value+' '+background.posv.value}};
+               background-size: {{background.size.value}}" >
       </div>
 
       <div  ng-click="inspect(component, $event)"
             ng-class="{'promethee-edit__component--selected': promethee.inspected === component}"
             ng-repeat="component in components"
             class=" <%= promethee_bem_classes 'promethee-edit__component', "--column" %>
-                    col-md-{{component.attributes.size}}
-                    offset-md-{{component.attributes.offset}}
-                    col-md-offset-{{component.attributes.offset}}">
+                    col-md-{{component.attributes.size.value}}
+                    offset-md-{{component.attributes.offset.value}}
+                    col-md-offset-{{component.attributes.offset.value}}">
         <div class="promethee-edit__component__inner">
           <%= render 'promethee/edit/move.remove' %>
             <div class="header">Column {{$index + 1}}</div>
@@ -39,4 +39,4 @@
     $scope.parent_type = $scope.component.type;
     $scope.components = $scope.component.children;
   }]);
-</script>
+</script>

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

@@ -1,20 +1,21 @@
 <%
-background_color = component[:attributes][:bgcolor] || "rgba(255, 255, 255, 0)"
+background_color = component[:attributes].dig(:bgcolor, :value)&.to_s || "rgba(255, 255, 255, 0)"
+backgrounds = component[:attributes].dig(:backgrounds, :value)
 background_images = []
 background_positions = []
 background_sizes = []
 
 has_background = !(background_color =~ /rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*0\s*\)/)
 
-if component[:attributes] && component[:attributes].has_key?(:backgrounds) # retro-compatibility
-  component[:attributes][:backgrounds].each do |item|
-    blob = blob_from_data item[:image]
+if backgrounds
+  backgrounds.each do |item|
+    blob = blob_from_data item.dig(:image, :value)
     if blob
       url = "url(#{url_for(blob)})"
-      position = "#{item[:posh]} #{item[:posv]}"
+      position = "#{item.dig(:posh, :value)} #{item.dig(:posv, :value)}"
       background_images << url
       background_positions << position
-      background_sizes << item[:size]
+      background_sizes << item.dig(:size, :value)
     end
   end
 end

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

@@ -8,14 +8,36 @@
       data: {
         type: 'slider_item',
         attributes: {
-          searchable_caption: "",
-          media_type: "image",
+          caption: {
+            searchable: true,
+            translatable: true,
+            type: 'text',
+            value: ''
+          },
+          media_type: {
+            collection: [
+              { label: 'Image', value: 'image' },
+              { label: 'Video', value: 'video' }
+            ],
+            searchable: false,
+            translatable: false,
+            type: 'enum',
+            value: 'image'
+          },
           image: {
-            id: undefined,
-            name: ""
+            searchable: false,
+            translatable: false,
+            type: 'blob',
+            value: {
+              id: undefined,
+              name: ""
+            }
           },
           video: {
-            url: "https://vimeo.com/115082758"
+            searchable: false,
+            translatable: true,
+            type: 'string',
+            value: 'https://vimeo.com/115082758'
           }
         }
       }

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

@@ -3,28 +3,28 @@
     <label class="label-control">Media type</label>
     <div>
       <label for="sliderItemMediaTypeImage" class="radio-inline form-check form-check-inline">
-        <input ng-model="promethee.inspected.attributes.media_type" class="form-check-input" type="radio" value="image" id="sliderItemMediaTypeImage" />
+        <input ng-model="promethee.inspected.attributes.media_type.value" class="form-check-input" type="radio" value="image" id="sliderItemMediaTypeImage" />
         <span class="form-check-label">Image</span>
       </label>
       <label for="sliderItemMediaTypeVideo" class="radio-inline form-check form-check-inline">
-        <input ng-model="promethee.inspected.attributes.media_type" class="form-check-input" type="radio" value="video" id="sliderItemMediaTypeVideo" />
+        <input ng-model="promethee.inspected.attributes.media_type.value" class="form-check-input" type="radio" value="video" id="sliderItemMediaTypeVideo" />
         <span class="form-check-label">Video</span>
       </label>
     </div>
   </div>
 
-  <promethee-uploader ng-show="promethee.inspected.attributes.media_type == 'image'" ng-model="promethee.inspected.attributes.image" label="Image" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
+  <promethee-uploader ng-show="promethee.inspected.attributes.media_type.value == 'image'" ng-model="promethee.inspected.attributes.image.value" label="Image" limits="'.jpg,.jpeg,.png,.gif'"></promethee-uploader>
 
-  <div class="form-group" ng-show="promethee.inspected.attributes.media_type == 'video'">
+  <div class="form-group" ng-show="promethee.inspected.attributes.media_type.value == 'video'">
     <label class="label-control">Video URL</label>
-    <input class="form-control" ng-model="promethee.inspected.attributes.video.url"></summernote>
+    <input class="form-control" ng-model="promethee.inspected.attributes.video.value"></summernote>
   </div>
 
   <div class="row">
     <div class="col-xs-12 col-12">
       <div class="form-group">
         <label class="label-control">Caption</label>
-        <summernote config="summernoteConfig" ng-model="promethee.inspected.attributes.searchable_caption"></summernote>
+        <summernote config="summernoteConfig" ng-model="promethee.inspected.attributes.caption.value"></summernote>
       </div>
     </div>
   </div>

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

@@ -3,8 +3,8 @@
       <div class="header">Slider Item</div>
       <div class="row">
         <div class="col-12 col-xs-12">
-          <img ng-show="component.attributes.media_type == 'image'" ng-if="component.attributes.image.id != undefined" ng-src="/promethee/blob/{{component.attributes.image.id}}" class="img-fluid img-responsive">
-          <div ng-show="component.attributes.media_type == 'video'" ng-controller="SliderItemVideoController">
+          <img ng-show="component.attributes.media_type.value == 'image'" ng-if="component.attributes.image.value.id != undefined" ng-src="/promethee/blob/{{component.attributes.image.value.id}}" class="img-fluid img-responsive">
+          <div ng-show="component.attributes.media_type.value == 'video'" ng-controller="SliderItemVideoController">
             <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>
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-12 col-xs-12 slider-item-caption" ng-show="component.attributes.searchable_caption !== ''">Caption</div>
+        <div class="col-12 col-xs-12 slider-item-caption" ng-show="component.attributes.caption.value !== ''" ng-bind-html="component.attributes.caption.value | htmlSafe"></div>
       </div>
     </div>
   </div>
@@ -24,13 +24,13 @@
     Object.defineProperty($scope, 'embed', {
       get: function() {
         var embed = null;
-        var url = this.component.attributes.video.url + '';
+        var url = this.component.attributes.video.value + '';
 
-        if(url.includes('vimeo')) {
+        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')) {
+        else if (url.includes('youtube')) {
           var parts = url.split('watch?v=');
           var id = parts[parts.length - 1];
           embed = 'https://www.youtube.com/embed/' + id;
@@ -43,4 +43,4 @@
       }
     })
   }]);
-</script>
+</script>