From 7ff93fe6e01c529453be3028fbd45123ee767867 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 2 Jan 2022 19:29:15 +0100 Subject: [PATCH] Update PropertyFile view --- src/style_manager/index.js | 2 +- src/style_manager/view/LayerView.js | 2 +- src/style_manager/view/PropertyFileView.js | 144 +++++---------------- src/style_manager/view/PropertyView.js | 11 +- 4 files changed, 40 insertions(+), 119 deletions(-) diff --git a/src/style_manager/index.js b/src/style_manager/index.js index da307339b..6088f23b4 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -653,7 +653,7 @@ export default () => { const isStack = prop.getType() === 'stack'; const isComposite = prop.getType() === 'composite'; const opt = { ...opts, __up: true }; - const canUpdate = !isComposite; + const canUpdate = !isComposite && !isStack; let newLayers = isStack ? prop.__getLayersFromStyle(style) : []; let newProps = isComposite ? prop.__getPropsFromStyle(style) : {}; let newValue = hasVal ? value : null; diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 6f9a3ac44..acdbfe068 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -12,7 +12,7 @@ export default View.extend({ template() { const { pfx, ppfx } = this; const icons = this.em?.getConfig('icons'); - const iconClose = icons?.close || '⨯'; + const iconClose = icons?.close || ''; const iconMove = icons?.move || ''; return ` diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index ae6680122..1db561f86 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/src/style_manager/view/PropertyFileView.js @@ -1,10 +1,15 @@ import { isString } from 'underscore'; -import Backbone from 'backbone'; import PropertyView from './PropertyView'; -const $ = Backbone.$; - export default PropertyView.extend({ + events() { + return { + ...PropertyView.prototype.events, + 'click [data-clear-asset]': 'clear', + 'click [data-open-assets]': 'openAssetManager', + }; + }, + templateInput() { const { pfx, em } = this; const icons = this.em?.getConfig('icons'); @@ -14,128 +19,41 @@ export default PropertyView.extend({
-
-
-
-
${iconClose}
+
+
+
${iconClose}
`; }, - init() { - const em = this.em; - this.modal = em.get('Modal'); - this.am = em.get('AssetManager'); - this.events['click #' + this.pfx + 'close'] = 'removeFile'; - this.events['click #' + this.pfx + 'images'] = 'openAssetManager'; - this.delegateEvents(); - }, - - onRender() { - if (!this.$input) { - const plh = this.model.getDefaultValue(); - this.$input = $(``); - } - - if (!this.$preview) { - this.$preview = this.$el.find('#' + this.pfx + 'preview-file'); - } - - if (!this.$previewBox) { - this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box'); - } - - this.setValue(this.componentValue, 0); - }, - - clearCached() { - PropertyView.prototype.clearCached.apply(this, arguments); - this.$preview = null; - this.$previewBox = null; - }, - - setValue(value, f) { - PropertyView.prototype.setValue.apply(this, arguments); - this.setPreviewView(value && value != this.model.getDefaultValue()); - this.setPreview(value); + __setValueInput(value) { + const { model, el } = this; + const valueDef = model.getDefaultValue(); + const prvBoxEl = el.querySelector('[data-preview-box]'); + const prvEl = el.querySelector('[data-preview]'); + prvBoxEl.style.display = !value || value === valueDef ? 'none' : ''; + prvEl.style.backgroundImage = value || model.getDefaultValue(); }, - /** - * Change visibility of the preview box - * @param bool Visibility - * - * @return void - * */ - setPreviewView(v) { - const pv = this.$previewBox; - pv && pv[v ? 'addClass' : 'removeClass'](`${this.pfx}show`); - pv && pv.css({ display: v ? 'block' : 'none' }); - }, - - /** - * Spread url - * @param string Url - * - * @return void - * */ - spreadUrl(url) { - this.model.set('value', url); - this.setPreviewView(1); - }, - - /** - * Shows file preview - * @param string Value - * */ - setPreview(value) { - const preview = this.$preview; - value = value && value.indexOf('url(') < 0 ? `url(${value})` : value; - preview && preview.css('background-image', value); - }, - - /** @inheritdoc */ - cleanValue() { - this.setPreviewView(0); - this.model.set({ value: '' }, { silent: true }); - }, - - /** - * Remove file from input - * - * @return void - * */ - removeFile(...args) { - this.model.set('value', this.model.getDefaultValue()); - PropertyView.prototype.cleanValue.apply(this, args); - this.setPreviewView(0); - }, - - /** - * Open dialog for image selecting - * @param {Object} e Event - * - * @return void - * */ openAssetManager() { - const { em } = this; - const am = em && em.get('AssetManager'); - const handleAsset = a => this.spreadUrl(isString(a) ? a : a.get('src')); - - am && - am.open({ - select(asset, complete) { - handleAsset(asset); - complete && am.close(); - }, - target: this.getTargetModel(), - types: ['image'], - accept: 'image/*', - }); + const am = this.em?.get('AssetManager'); + + am?.open({ + select: (asset, complete) => { + const url = isString(asset) ? asset : asset.get('src'); + this.model.upValue(url, { partial: !complete }); + complete && am.close(); + }, + target: this.getTargetModel(), + types: ['image'], + accept: 'image/*', + }); }, }); diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 11f394fb9..b8bfb41c4 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -21,7 +21,7 @@ export default Backbone.View.extend({ const { icon = '', info = '' } = model.attributes; const label = model.getLabel(); const icons = em?.getConfig('icons'); - const iconClose = icons?.close || '⨯'; + const iconClose = icons?.close || ''; return ` @@ -395,6 +395,9 @@ export default Backbone.View.extend({ // 'onValueChange', // this.model.getName(), // { + // cid: this.model.cid, + // val, + // value: this.model.get('value'), // fullValue: this.model.getFullValue(), // hasValue: this.model.hasValue(), // hasValueLocal: this.model.hasValue({ noParent: true }), @@ -579,9 +582,9 @@ export default Backbone.View.extend({ * @param {string} value * @private */ - setRawValue(value) { - this.setValue(this.model.parseValue(value)); - }, + // setRawValue(value) { + // this.setValue(this.model.parseValue(value)); + // }, /** * Update the element input.