@innovastudio/contentbuilder 1.4.94 → 1.4.96
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -2077,7 +2077,7 @@ button:focus-visible {
|
|
2077
2077
|
.is-ui .is-modal.imageadjust2,
|
2078
2078
|
.is-ui .is-modal.audioselect,
|
2079
2079
|
.is-ui .is-modal.mediasource {
|
2080
|
-
z-index:
|
2080
|
+
z-index: 10006 !important;
|
2081
2081
|
}
|
2082
2082
|
#_cbhtml .is-modal.previewcontent,
|
2083
2083
|
.is-ui .is-modal.previewcontent {
|
@@ -15886,10 +15886,6 @@ const prepareSvgIcons = builder => {
|
|
15886
15886
|
<path d="M4 12h4"></path>
|
15887
15887
|
<path d="M4 18h4"></path>
|
15888
15888
|
</symbol>
|
15889
|
-
<symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
15890
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
15891
|
-
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
|
15892
|
-
</symbol>
|
15893
15889
|
<symbol id="icon-folder-media" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
15894
15890
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
15895
15891
|
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
|
@@ -15958,6 +15954,23 @@ const prepareSvgIcons = builder => {
|
|
15958
15954
|
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
15959
15955
|
<path d="M20.2 20.2l1.8 1.8"></path>
|
15960
15956
|
</symbol>
|
15957
|
+
|
15958
|
+
<symbol id="icon-folder-old" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
15959
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
15960
|
+
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
|
15961
|
+
</symbol>
|
15962
|
+
<symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
15963
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
15964
|
+
<path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
|
15965
|
+
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
15966
|
+
<path d="M20.2 20.2l1.8 1.8"></path>
|
15967
|
+
</symbol>
|
15968
|
+
<symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
15969
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
15970
|
+
<path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
|
15971
|
+
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
15972
|
+
<path d="M20.2 20.2l1.8 1.8"></path>
|
15973
|
+
</symbol>
|
15961
15974
|
|
15962
15975
|
</defs>
|
15963
15976
|
</svg>`;
|
@@ -49551,6 +49564,7 @@ class Image$1 {
|
|
49551
49564
|
<input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
|
49552
49565
|
</div>
|
49553
49566
|
<button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button>
|
49567
|
+
<button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button>
|
49554
49568
|
<button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
|
49555
49569
|
</div>
|
49556
49570
|
<div id="divImageProgress">
|
@@ -50067,6 +50081,37 @@ class Image$1 {
|
|
50067
50081
|
util.hideModal(modalImageLink);
|
50068
50082
|
this.builder.elmTool.refresh();
|
50069
50083
|
});
|
50084
|
+
const btnOpenAsset = imageTool.querySelector('.open-asset');
|
50085
|
+
if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
|
50086
|
+
btnOpenAsset.style.display = 'block';
|
50087
|
+
dom.addEventListener(btnOpenAsset, 'click', () => {
|
50088
|
+
let img = this.builder.activeImage;
|
50089
|
+
let currentSrc = img ? img.getAttribute('src') : '';
|
50090
|
+
this.builder.openImageSelect(src => {
|
50091
|
+
this.builder.uo.saveForUndo();
|
50092
|
+
let img = this.builder.activeImage;
|
50093
|
+
img.setAttribute('src', src);
|
50094
|
+
setTimeout(() => {
|
50095
|
+
img.click();
|
50096
|
+
let divImageResizer = document.querySelector('#divImageResizer');
|
50097
|
+
if (divImageResizer) divImageResizer.click();
|
50098
|
+
setTimeout(() => {
|
50099
|
+
img.click();
|
50100
|
+
let divImageResizer = document.querySelector('#divImageResizer');
|
50101
|
+
if (divImageResizer) divImageResizer.click();
|
50102
|
+
}, 600);
|
50103
|
+
}, 10);
|
50104
|
+
|
50105
|
+
//Trigger Change event
|
50106
|
+
this.builder.opts.onChange();
|
50107
|
+
|
50108
|
+
//Trigger Render event
|
50109
|
+
this.builder.opts.onRender();
|
50110
|
+
}, currentSrc);
|
50111
|
+
});
|
50112
|
+
} else {
|
50113
|
+
btnOpenAsset.style.display = 'none';
|
50114
|
+
}
|
50070
50115
|
|
50071
50116
|
// Select image (opens Asset Manager plugin or custom dialog)
|
50072
50117
|
let divImageSrc = modalImageLink.querySelector('.image-src');
|
@@ -60069,6 +60114,8 @@ class ColumnTool {
|
|
60069
60114
|
const inpSrc = this.cellSettings.querySelector('.input-src');
|
60070
60115
|
elm = this.divCellClick.querySelector('.input-select');
|
60071
60116
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
60117
|
+
//TODO: Simplify using openAsset
|
60118
|
+
|
60072
60119
|
//---default
|
60073
60120
|
this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
|
60074
60121
|
this.builder.targetCallback = () => {
|
@@ -80895,6 +80942,35 @@ class ContentBuilder {
|
|
80895
80942
|
return this.targetAssetType; // not used yet
|
80896
80943
|
}
|
80897
80944
|
|
80945
|
+
openImageSelect(callback, defaultValue) {
|
80946
|
+
const inpUrl = document.createElement('input');
|
80947
|
+
|
80948
|
+
// dummy button (for the openAsset() method, for the old Asset Manager. Not needed for the new.)
|
80949
|
+
const btn = document.createElement('button');
|
80950
|
+
this.openAsset(inpUrl, 'image', btn, defaultValue);
|
80951
|
+
let out = s => this.util.out(s);
|
80952
|
+
const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
80953
|
+
Object.defineProperty(inpUrl, 'value', {
|
80954
|
+
get: desc.get,
|
80955
|
+
set: function (s) {
|
80956
|
+
// Additional protection if normal selectAsset() is not used in asset dialog.
|
80957
|
+
// This is used if onImageSelectClick or onFileSelectClick are used.
|
80958
|
+
const filename = s.substring(s.lastIndexOf('/') + 1);
|
80959
|
+
let extension = filename.split('.').pop();
|
80960
|
+
extension = extension.toLowerCase();
|
80961
|
+
let ok = false;
|
80962
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
80963
|
+
ok = true;
|
80964
|
+
} else {
|
80965
|
+
alert(out('Please select an image file.'));
|
80966
|
+
}
|
80967
|
+
if (ok) {
|
80968
|
+
if (callback) callback(s);
|
80969
|
+
}
|
80970
|
+
desc.set.call(this, s);
|
80971
|
+
}
|
80972
|
+
});
|
80973
|
+
}
|
80898
80974
|
renderSelectAsset(btn, targetAssetType, callback) {
|
80899
80975
|
const _id = 'inp_' + this.util.makeId();
|
80900
80976
|
btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
|
@@ -80964,7 +81040,9 @@ class ContentBuilder {
|
|
80964
81040
|
this.targetAssetType = targetAssetType;
|
80965
81041
|
}
|
80966
81042
|
}
|
80967
|
-
openAsset(targetInput, targetAssetType, theTrigger) {
|
81043
|
+
openAsset(targetInput, targetAssetType, theTrigger, defaultValue) {
|
81044
|
+
let iframe;
|
81045
|
+
let modal;
|
80968
81046
|
if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
|
80969
81047
|
if (this.opts.onMediaSelectClick) {
|
80970
81048
|
this.opts.onMediaSelectClick({
|
@@ -80998,8 +81076,6 @@ class ContentBuilder {
|
|
80998
81076
|
theTrigger: theTrigger
|
80999
81077
|
});
|
81000
81078
|
} else {
|
81001
|
-
let iframe;
|
81002
|
-
let modal;
|
81003
81079
|
if (targetAssetType === 'media') {
|
81004
81080
|
modal = this.builderStuff.querySelector('.is-modal.mediaselect');
|
81005
81081
|
iframe = modal.querySelector('iframe');
|
@@ -81028,6 +81104,23 @@ class ContentBuilder {
|
|
81028
81104
|
this.targetCallback = null;
|
81029
81105
|
this.targetAssetType = targetAssetType;
|
81030
81106
|
}
|
81107
|
+
if (!defaultValue) defaultValue = '';
|
81108
|
+
if (targetInput && targetInput.value) {
|
81109
|
+
defaultValue = targetInput.value;
|
81110
|
+
}
|
81111
|
+
if (this.onAssetOpen) {
|
81112
|
+
if (iframe) {
|
81113
|
+
if (iframe.contentWindow.document.body.innerHTML !== '') {
|
81114
|
+
this.onAssetOpen(defaultValue, iframe.contentWindow);
|
81115
|
+
} else {
|
81116
|
+
iframe.addEventListener('load', () => {
|
81117
|
+
this.onAssetOpen(defaultValue, iframe.contentWindow);
|
81118
|
+
});
|
81119
|
+
}
|
81120
|
+
} else {
|
81121
|
+
this.onAssetOpen(defaultValue, iframe);
|
81122
|
+
}
|
81123
|
+
}
|
81031
81124
|
}
|
81032
81125
|
|
81033
81126
|
// Grid
|