text overlay ui

cloudinary · Dec 29, 2019 · 2f9d708 · 2f9d708
1 parent 499895d
commit 2f9d708
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 10 deletions.
diff --git a/bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.js b/bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.js
@@ -0,0 +1,8 @@
+ 'use strict';
+
+var PageMgr = require('dw/experience/PageMgr');
+var HashMap = require('dw/util/HashMap');
+
+module.exports.init = function (editor) {
+	var conf = new HashMap();
+}
diff --git a/bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.json b/bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.json
@@ -0,0 +1,14 @@
+
+{
+  "name": "Cloudinary Text Overlay Selector",
+  "description": "Add a text overlay",
+  "resources": {
+    "scripts": [
+      "/experience/editors/cloudinary/form_elements.js",
+      "/experience/editors/cloudinary/text_overlay.js"
+    ],
+    "styles": [
+      "https://cdnjs.cloudflare.com/ajax/libs/design-system/2.8.3/styles/salesforce-lightning-design-system.min.css"
+    ]
+  }
+}
diff --git a/...gedesigner_custom/cartridge/static/default/experience/editors/cloudinary/form_elements.js b/...gedesigner_custom/cartridge/static/default/experience/editors/cloudinary/form_elements.js
@@ -0,0 +1,88 @@
+window.formsEls = {
+  getCheckbox: function (label, checked, propName, classes) {
+    var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || '';
+    var checkedStr = checked ? 'checked' : ''
+    var id = window.checkboxIdNum + 1 || 1;
+    window.checkboxIdNum = id;
+    return `
+    <div class="slds-form-element">
+        <div class="slds-form-element__control">
+            <div class="slds-checkbox ${classesStr}">
+                <input type="checkbox" name="options" data-propName="${propName}" ${checkedStr} id="checkbox-unique-id-${id}" />
+                <label class="slds-checkbox__label" for="checkbox-unique-id-${id}">
+                    <span class="slds-checkbox_faux"></span>
+                    <span class="slds-form-element__label">${label}</span>
+                </label>
+        </div>
+    </div>
+</div>`
+  },
+
+  getTextField: function (label, value, required, propName, classes) {
+    var requiredStr = required ? '<abbr class="slds-required" title="required">* </abbr>' : '';
+    var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || '';
+    var id = window.inputIdNum + 1 || 1;
+    window.inputIdNum = id;
+    return `
+    <div class="slds-form-element ${classesStr}">
+  <label class="slds-form-element__label" for="text-input-id-${id}">
+    ${requiredStr}${label}</label>
+  <div class="slds-form-element__control">
+    <input type="text" id="text-input-id-${id}" data-propName="${propName}" value="${value}" ${required ? 'required' : ''} class="slds-input" />
+  </div>
+</div>
+    `
+  },
+
+  getSelectField: function (label, options, required, propName, selected, classes) {
+    var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || '';
+    var requiredStr = required ? '<abbr class="slds-required" title="required">* </abbr>' : '';
+    var id = window.selectIdNum + 1 || 1;
+    window.selectIdNum = id;
+    var optionsStr = '';
+    var optionsKeys = Object.keys(options);
+    optionsKeys.forEach(function (op) {
+      if (op === selected) {
+        optionsStr += '<option value="' + op + '" selected="selected">' + options[op] + '</option>'
+      } else {
+        optionsStr += '<option value="' + op + '">' + options[op] + '</option>'
+      }
+    })
+
+    return `
+    <div class="slds-form-element ${classesStr}">
+  <label class="slds-form-element__label" for="select-${id}">
+    ${requiredStr}${label}</label>
+  <div class="slds-form-element__control">
+    <div class="slds-select_container">
+      <select class="slds-select" id="select-${id}" data-propName="${propName}" ${required ? 'required' : ''}>
+        <option value="">Please select</option>
+        ${optionsStr}
+      </select>
+    </div>
+  </div>
+</div>
+    `
+  },
+  getButton: function (label, classes) {
+    var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || '';
+    return `<button class="slds-button slds-button_neutral">${label}</button>`
+  },
+  getTextArea: function (label, value, required, propName, classes) {
+    var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || '';
+    var requiredStr = required ? '<abbr class="slds-required" title="required">* </abbr>' : '';
+    var id = window.textareaIdNum + 1 || 1;
+    window.textareaIdNum = id;
+    return `
+        <div class="slds-form-element">
+  <label class="slds-form-element__label" for="textarea-id-${id}">
+    ${requiredStr}${label}</label>
+  <div class="slds-form-element__control">
+    <textarea id="textarea-id-${id}" ${required ? 'required' : ''} data-propName="${propName}" class="slds-textarea" value="${value}"></textarea>
+  </div>
+</div>
+        `
+
+  }
+}
+
diff --git a/...agedesigner_custom/cartridge/static/default/experience/editors/cloudinary/text_overlay.js b/...agedesigner_custom/cartridge/static/default/experience/editors/cloudinary/text_overlay.js
@@ -0,0 +1,59 @@
+subscribe('sfcc:ready', async ({ value, config, isDisabled, isRequired, dataLocale, displayLocale }) => {
+    console.log('Text Overlay, sfcc:ready', dataLocale, displayLocale, value, config);
+    var template = overlayTemplate(value);
+    var clone = document.importNode(template.content, true);
+    document.body.appendChild(clone);
+    var els = [].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('input'));
+    els = els.concat([].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('select')));
+    els = els.concat([].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('textarea')));
+    els.forEach(function (el) {
+        el.addEventListener('blur', emitUpdatedValues)
+    })
+
+});
+
+const emitUpdatedValues = function () {
+    var values = {};
+    var els = [].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('input'));
+    els = els.concat([].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('select')));
+    els = els.concat([].slice.call(document.getElementsByClassName('text-overlay')[0].getElementsByTagName('textarea')));
+    els.forEach(function (el) {
+        var propName = el.dataset.propname;
+        if (el.type === 'checkbox') {
+            values[propName] = el.checked;
+        } else {
+            values[propName] = el.value;
+        }
+    });
+    console.log(values);
+    emit({
+        type: 'sfcc:value',
+        payload: values
+    });
+}
+
+const overlayTemplate = function (value) {
+    const template = document.createElement('template');
+    const fontStyles = {
+        'normal': 'Normal',
+        'bold': 'Bold',
+        'italic': 'Italic',
+        'underline': 'Underline',
+        'subscript': 'Subscript',
+        'superscript': 'Superscript'
+    };
+    template.innerHTML = `
+    <div class="slds-panel__body text-overlay">
+    ${formsEls.getCheckbox('Enable Text Overlay', !!value.enable, 'enable')}
+    ${formsEls.getTextArea('Text To Overlay', value.text, true, 'text')}
+    ${formsEls.getTextField('font Famaly', (value.font || 'Arial'), true, 'font')}
+    ${formsEls.getTextField('font size', '12', true, 'fontSize')}
+    ${formsEls.getSelectField('Font Type', fontStyles, false, 'fontStyle', (value.fontStyle || 'normal'))}
+    ${formsEls.getTextField('Opacity', value.opacity || '100', true, 'opacity')}
+    ${formsEls.getTextField('X position', value.xPos || 0, true, 'xPos')}
+    ${formsEls.getTextField('Y position', value.yPos || 0, true, 'yPos')}
+    ${formsEls.getTextField('Overlay width', value.width || '100%', true, 'width')}
+    </div>
+    `;
+    return template;
+}
diff --git a/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.js b/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.js
@@ -230,7 +230,7 @@ module.exports.render = function (context) {
   viewmodel.type = 'image';
   viewmodel.altText = context.content.alt || 'alt';
   let val = context.content.asset_sel;
-  if (val.secure_url) {
+  if (val && val.secure_url) {
     let brs = getBreackpoints(val.public_id);
     var globalPart = getImageSettingUrlPart();
     var assetUrl = getImageUrlFromAsset(val);

diff --git a/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.json b/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.json
@@ -29,7 +29,7 @@
           "id": "placeholderImageType",
           "name": "Plaseholder image type",
           "type": "enum",
-          "values":[
+          "values": [
             "none",
             "blur",
             "vectorize",
@@ -39,15 +39,24 @@
           "default_value": "none"
         },
         {
-        "id": "overlay",
-        "name": "Image Overlay",
-        "type": "custom",
-        "required": false,
-        "editor_definition": {
-          "type": "cloudinary.overlay_selector"
-        }
+          "id": "overlay",
+          "name": "Image Overlay",
+          "type": "custom",
+          "required": false,
+          "editor_definition": {
+            "type": "cloudinary.overlay_selector"
+          }
+        },
+        {
+          "id": "textOverlay",
+          "name": "Text Overlay",
+          "type": "custom",
+          "required": false,
+          "editor_definition": {
+            "type": "cloudinary.text_overlay_selector"
+          }
         }
-     ]
+      ]
     }
   ],
   "region_definitions": []