From 2f9d708f97f7eeaf4e22ea01d80c0add62559269 Mon Sep 17 00:00:00 2001 From: Yaniv Aran-Shamir Date: Sun, 29 Dec 2019 17:15:29 +0200 Subject: [PATCH] text overlay ui --- .../cloudinary/text_overlay_selector.js | 8 ++ .../cloudinary/text_overlay_selector.json | 14 +++ .../editors/cloudinary/form_elements.js | 88 +++++++++++++++++++ .../editors/cloudinary/text_overlay.js | 59 +++++++++++++ .../components/assets/media_library.js | 2 +- .../components/assets/media_library.json | 27 ++++-- 6 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.js create mode 100644 bm_pagedesigner_custom/cartridge/experience/editors/cloudinary/text_overlay_selector.json create mode 100644 bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/form_elements.js create mode 100644 bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/text_overlay.js 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 new file mode 100644 index 0000000..c6a5b4f --- /dev/null +++ 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 new file mode 100644 index 0000000..7d82479 --- /dev/null +++ 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" + ] + } +} \ No newline at end of file diff --git a/bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/form_elements.js b/bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/form_elements.js new file mode 100644 index 0000000..ec1d0b1 --- /dev/null +++ b/bm_pagedesigner_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 ` +
+
+
+ + +
+
+
` + }, + + getTextField: function (label, value, required, propName, classes) { + var requiredStr = required ? '* ' : ''; + var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || ''; + var id = window.inputIdNum + 1 || 1; + window.inputIdNum = id; + return ` +
+ +
+ +
+
+ ` + }, + + getSelectField: function (label, options, required, propName, selected, classes) { + var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || ''; + var requiredStr = required ? '* ' : ''; + var id = window.selectIdNum + 1 || 1; + window.selectIdNum = id; + var optionsStr = ''; + var optionsKeys = Object.keys(options); + optionsKeys.forEach(function (op) { + if (op === selected) { + optionsStr += '' + } else { + optionsStr += '' + } + }) + + return ` +
+ +
+
+ +
+
+
+ ` + }, + getButton: function (label, classes) { + var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || ''; + return `` + }, + getTextArea: function (label, value, required, propName, classes) { + var classesStr = Array.isArray(classes) ? classes.join(' ') : classes || ''; + var requiredStr = required ? '* ' : ''; + var id = window.textareaIdNum + 1 || 1; + window.textareaIdNum = id; + return ` +
+ +
+ +
+
+ ` + + } +} + diff --git a/bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/text_overlay.js b/bm_pagedesigner_custom/cartridge/static/default/experience/editors/cloudinary/text_overlay.js new file mode 100644 index 0000000..722b2db --- /dev/null +++ b/bm_pagedesigner_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 = ` +
+ ${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')} +
+ `; + return template; +} \ No newline at end of file diff --git a/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.js b/module_pagedesigner_custom/cartridge/experience/components/assets/media_library.js index d6edb80..a0d4798 100644 --- 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 index e96e2e5..88bd37f 100644 --- 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": []