Merge pull request #21 from OptimistikSAS/se-img-prop-dialog
#se-img-prop-dialog imagePropertiesDialog move separate filemaster
JFH
GitHub
commit
c28461b974
|
|
@ -0,0 +1,377 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import 'elix/define/Dialog.js';
|
||||
import {isValidUnit} from '../../common/units.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Force the scroll bar to appear so we see it hide when overlay opens. */
|
||||
body::-webkit-scrollbar {
|
||||
background: lightgray;
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: darkgray;
|
||||
}
|
||||
#svg_docprops #svg_docprops_container {
|
||||
padding: 10px;
|
||||
background-color: #B0B0B0;
|
||||
border: 1px outset #777;
|
||||
opacity: 1.0;
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-size: .8em;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
#svg_docprops .error {
|
||||
border: 1px solid red;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#svg_docprops #resolution {
|
||||
max-width: 14em;
|
||||
}
|
||||
|
||||
#tool_docprops_back {
|
||||
margin-left: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#svg_docprops_container #svg_docprops_docprops {
|
||||
float: left;
|
||||
width: 221px;
|
||||
margin: 5px .7em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#svg_docprops legend {
|
||||
max-width: 195px;
|
||||
}
|
||||
|
||||
#svg_docprops_docprops > legend {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#svg_docprops_container fieldset {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#svg_docprops_container label {
|
||||
display: block;
|
||||
margin: .5em;
|
||||
}
|
||||
</style>
|
||||
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
|
||||
<div id="svg_docprops_container">
|
||||
<div id="tool_docprops_back" class="toolbar_button">
|
||||
<button id="tool_docprops_save">OK</button>
|
||||
<button id="tool_docprops_cancel">Cancel</button>
|
||||
</div>
|
||||
<fieldset id="svg_docprops_docprops">
|
||||
<legend id="svginfo_image_props">Image Properties</legend>
|
||||
<label>
|
||||
<span id="svginfo_title">Title:</span>
|
||||
<input type="text" id="canvas_title" />
|
||||
</label>
|
||||
<fieldset id="change_resolution">
|
||||
<legend id="svginfo_dim">Canvas Dimensions</legend>
|
||||
<label>
|
||||
<span id="svginfo_width">width:</span>
|
||||
<input type="text" id="canvas_width" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_height">height:</span>
|
||||
<input type="text" id="canvas_height" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<select id="resolution">
|
||||
<option id="selectedPredefined" selected="selected">Select predefined:</option>
|
||||
<option>640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option id="fitToContent" value="content">Fit to Content</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="image_save_opts">
|
||||
<legend id="includedImages">Included Images</legend>
|
||||
<label>
|
||||
<input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
|
||||
<span id="image_opt_embed">Embed data (local files)</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" id="image_ref" name="image_opt" value="ref" />
|
||||
<span id="image_opt_ref">Use file reference</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</elix-dialog>
|
||||
|
||||
`;
|
||||
/**
|
||||
* @class SeImgPropDialog
|
||||
*/
|
||||
export class SeImgPropDialog extends HTMLElement {
|
||||
/**
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this.eventlisten = false;
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save');
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel');
|
||||
this.$resolution = this._shadowRoot.querySelector('#resolution');
|
||||
this.$canvasTitle = this._shadowRoot.querySelector('#canvas_title');
|
||||
this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width');
|
||||
this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height');
|
||||
this.$imageOptEmbed = this._shadowRoot.querySelector('#image_embed');
|
||||
this.$imageOptRef = this._shadowRoot.querySelector('#image_ref');
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_docprops');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'width', 'height', 'save', 'dialog', 'embed'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'title':
|
||||
this.$canvasTitle.value = newValue;
|
||||
break;
|
||||
case 'width':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
} else {
|
||||
this.$canvasWidth.value = newValue;
|
||||
}
|
||||
break;
|
||||
case 'height':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
} else {
|
||||
this.$canvasHeight.value = newValue;
|
||||
}
|
||||
break;
|
||||
case 'dialog':
|
||||
if (this.eventlisten) {
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open();
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'save':
|
||||
if (newValue === 'ref') {
|
||||
this.$imageOptEmbed.setAttribute('checked', false);
|
||||
this.$imageOptRef.setAttribute('checked', true);
|
||||
} else {
|
||||
this.$imageOptEmbed.setAttribute('checked', true);
|
||||
this.$imageOptRef.setAttribute('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'embed':
|
||||
if (newValue.includes('one')) {
|
||||
const data = newValue.split('|');
|
||||
if (data.length > 1) {
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('title', data[1]);
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('disabled', 'disabled');
|
||||
this._shadowRoot.querySelector('#image_opt_embed').style.color = '#666';
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get title () {
|
||||
return this.getAttribute('title');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set title (value) {
|
||||
this.setAttribute('title', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get width () {
|
||||
return this.hasAttribute('width');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set width (value) {
|
||||
this.setAttribute('width', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get height () {
|
||||
return this.hasAttribute('height');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set height (value) {
|
||||
this.setAttribute('height', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get save () {
|
||||
return this.hasAttribute('save');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set save (value) {
|
||||
this.setAttribute('save', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.hasAttribute('dialog');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get embed () {
|
||||
return this.hasAttribute('embed');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set embed (value) {
|
||||
this.setAttribute('embed', value);
|
||||
}
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const onChangeHandler = (ev) => {
|
||||
if (!ev.target.selectedIndex) {
|
||||
if (this.$canvasWidth.getAttribute('value') === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
}
|
||||
} else if (ev.target.value === 'content') {
|
||||
this.$canvasWidth.setAttribute('disabled', 'disabled');
|
||||
this.$canvasWidth.value = 'fit';
|
||||
this.$canvasHeight.setAttribute('disabled', 'disabled');
|
||||
this.$canvasHeight.value = 'fit';
|
||||
} else {
|
||||
const dims = ev.target.value.split('x');
|
||||
this.$canvasWidth.value = dims[0];
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = dims[1];
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
}
|
||||
};
|
||||
const onSaveHandler = (ev) => {
|
||||
let saveOpt = '';
|
||||
const w = this.$canvasWidth.value;
|
||||
const h = this.$canvasHeight.value;
|
||||
if (w !== 'fit' && !isValidUnit('width', w)) {
|
||||
this.$canvasWidth.parentElement.classList.add('error');
|
||||
} else {
|
||||
this.$canvasWidth.parentElement.classList.remove('error');
|
||||
}
|
||||
if (h !== 'fit' && !isValidUnit('height', w)) {
|
||||
this.$canvasHeight.parentElement.classList.add('error');
|
||||
} else {
|
||||
this.$canvasHeight.parentElement.classList.remove('error');
|
||||
}
|
||||
if (this.$imageOptEmbed.getAttribute('checked') === 'true') {
|
||||
saveOpt = 'embed';
|
||||
}
|
||||
if (this.$imageOptRef.getAttribute('checked') === 'true') {
|
||||
saveOpt = 'ref';
|
||||
}
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
title: this.$canvasTitle.value,
|
||||
w: this.$canvasWidth.value,
|
||||
h: this.$canvasHeight.value,
|
||||
save: saveOpt,
|
||||
dialog: 'close'
|
||||
}});
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$resolution.selectedIndex = 0;
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
const onCancelHandler = (ev) => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
dialog: 'closed'
|
||||
}});
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$resolution.selectedIndex = 0;
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
this.$resolution.addEventListener('change', onChangeHandler);
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler);
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler);
|
||||
this.$dialog.addEventListener('close', onCancelHandler);
|
||||
this.eventlisten = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-img-prop-dialog', SeImgPropDialog);
|
||||
|
|
@ -0,0 +1 @@
|
|||
import './imagePropertiesDialog.js';
|
||||
|
|
@ -91,7 +91,6 @@
|
|||
</a>
|
||||
</div>
|
||||
</se-menu>
|
||||
|
||||
<div id="tools_top">
|
||||
<div id="editor_panel">
|
||||
<div class="tool_sep"></div>
|
||||
|
|
@ -441,55 +440,6 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="svg_docprops">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_docprops_container">
|
||||
<div id="tool_docprops_back" class="toolbar_button">
|
||||
<button id="tool_docprops_save">OK</button>
|
||||
<button id="tool_docprops_cancel">Cancel</button>
|
||||
</div>
|
||||
<fieldset id="svg_docprops_docprops">
|
||||
<legend id="svginfo_image_props">Image Properties</legend>
|
||||
<label>
|
||||
<span id="svginfo_title">Title:</span>
|
||||
<input type="text" id="canvas_title" />
|
||||
</label>
|
||||
<fieldset id="change_resolution">
|
||||
<legend id="svginfo_dim">Canvas Dimensions</legend>
|
||||
<label>
|
||||
<span id="svginfo_width">width:</span>
|
||||
<input type="text" id="canvas_width" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_height">height:</span>
|
||||
<input type="text" id="canvas_height" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<select id="resolution">
|
||||
<option id="selectedPredefined" selected="selected">Select predefined:</option>
|
||||
<option>640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option id="fitToContent" value="content">Fit to Content</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="image_save_opts">
|
||||
<legend id="includedImages">Included Images</legend>
|
||||
<label>
|
||||
<input type="radio" name="image_opt" value="embed" checked="checked" />
|
||||
<span id="image_opt_embed">Embed data (local files)</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="image_opt" value="ref" />
|
||||
<span id="image_opt_ref">Use file reference</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="svg_prefs">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_prefs_container">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ For default config and extensions (and available options) available to
|
|||
import './jquery.min.js';
|
||||
import './jquery-ui/jquery-ui-1.8.17.custom.min.js';
|
||||
import './components/index.js';
|
||||
import './dialogs/index.js';
|
||||
import svgEditor from './svgedit.js';
|
||||
|
||||
// URL OVERRIDE CONFIG
|
||||
|
|
|
|||
|
|
@ -610,6 +610,10 @@ editor.init = () => {
|
|||
*/
|
||||
editor.storage = localStorage;
|
||||
}
|
||||
// Image props dialog added to DOM
|
||||
const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
|
||||
newSeImgPropDialog.setAttribute('id', 'se-img-prop');
|
||||
document.body.append(newSeImgPropDialog);
|
||||
} catch (err) {}
|
||||
|
||||
// get list of languages from options in the HTML
|
||||
|
|
@ -2702,8 +2706,17 @@ editor.init = () => {
|
|||
|
||||
setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url'));
|
||||
|
||||
$('#image_save_opts input').val([editor.pref('img_save')]);
|
||||
|
||||
// update resolution option with actual resolution
|
||||
const res = svgCanvas.getResolution();
|
||||
if (curConfig.baseUnit !== 'px') {
|
||||
res.w = convertUnit(res.w) + curConfig.baseUnit;
|
||||
res.h = convertUnit(res.h) + curConfig.baseUnit;
|
||||
}
|
||||
$('#se-img-prop').attr('dialog', 'close');
|
||||
$('#se-img-prop').attr('title', svgCanvas.getDocumentTitle());
|
||||
$('#se-img-prop').attr('width', res.w);
|
||||
$('#se-img-prop').attr('height', res.h);
|
||||
$('#se-img-prop').attr('save', editor.pref('img_save'));
|
||||
/**
|
||||
* @type {module}
|
||||
*/
|
||||
|
|
@ -3775,7 +3788,7 @@ editor.init = () => {
|
|||
updateToolButtonState();
|
||||
};
|
||||
|
||||
$('#svg_docprops_container, #svg_prefs_container').draggable({
|
||||
$('#svg_prefs_container').draggable({
|
||||
cancel: 'button,fieldset',
|
||||
containment: 'window'
|
||||
}).css('position', 'absolute');
|
||||
|
|
@ -3790,9 +3803,7 @@ editor.init = () => {
|
|||
const showDocProperties = function () {
|
||||
if (docprops) { return; }
|
||||
docprops = true;
|
||||
|
||||
// This selects the correct radio button by using the array notation
|
||||
$('#image_save_opts input').val([editor.pref('img_save')]);
|
||||
const $imgDialog = document.getElementById('se-img-prop');
|
||||
|
||||
// update resolution option with actual resolution
|
||||
const res = svgCanvas.getResolution();
|
||||
|
|
@ -3800,12 +3811,11 @@ editor.init = () => {
|
|||
res.w = convertUnit(res.w) + curConfig.baseUnit;
|
||||
res.h = convertUnit(res.h) + curConfig.baseUnit;
|
||||
}
|
||||
|
||||
$('#canvas_width').val(res.w);
|
||||
$('#canvas_height').val(res.h);
|
||||
$('#canvas_title').val(svgCanvas.getDocumentTitle());
|
||||
|
||||
$('#svg_docprops').show();
|
||||
$imgDialog.setAttribute('save', editor.pref('img_save'));
|
||||
$imgDialog.setAttribute('width', res.w);
|
||||
$imgDialog.setAttribute('height', res.h);
|
||||
$imgDialog.setAttribute('title', svgCanvas.getDocumentTitle());
|
||||
$imgDialog.setAttribute('dialog', 'open');
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -3887,10 +3897,9 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const hideDocProperties = function () {
|
||||
$('#svg_docprops').hide();
|
||||
$('#canvas_width,#canvas_height').removeAttr('disabled');
|
||||
$('#resolution')[0].selectedIndex = 0;
|
||||
$('#image_save_opts input').val([editor.pref('img_save')]);
|
||||
const $imgDialog = document.getElementById('se-img-prop');
|
||||
$imgDialog.setAttribute('dialog', 'close');
|
||||
$imgDialog.setAttribute('save', editor.pref('img_save'));
|
||||
docprops = false;
|
||||
};
|
||||
|
||||
|
|
@ -3907,39 +3916,26 @@ editor.init = () => {
|
|||
*
|
||||
* @returns {boolean} Whether there were problems saving the document properties
|
||||
*/
|
||||
const saveDocProperties = function () {
|
||||
const saveDocProperties = function (e) {
|
||||
// set title
|
||||
const newTitle = $('#canvas_title').val();
|
||||
updateTitle(newTitle);
|
||||
svgCanvas.setDocumentTitle(newTitle);
|
||||
|
||||
// update resolution
|
||||
const width = $('#canvas_width'), w = width.val();
|
||||
const height = $('#canvas_height'), h = height.val();
|
||||
const {title, w, h, save} = e.detail;
|
||||
// set document title
|
||||
svgCanvas.setDocumentTitle(title);
|
||||
|
||||
if (w !== 'fit' && !isValidUnit('width', w)) {
|
||||
width.parent().addClass('error');
|
||||
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
|
||||
return false;
|
||||
}
|
||||
|
||||
width.parent().removeClass('error');
|
||||
|
||||
if (h !== 'fit' && !isValidUnit('height', h)) {
|
||||
height.parent().addClass('error');
|
||||
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
|
||||
return false;
|
||||
}
|
||||
|
||||
height.parent().removeClass('error');
|
||||
|
||||
if (!svgCanvas.setResolution(w, h)) {
|
||||
/* await */ $.alert(uiStrings.notification.noContentToFitTo);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set image save option
|
||||
editor.pref('img_save', $('#image_save_opts :checked').val());
|
||||
editor.pref('img_save', save);
|
||||
updateCanvas();
|
||||
hideDocProperties();
|
||||
return true;
|
||||
|
|
@ -4259,13 +4255,10 @@ editor.init = () => {
|
|||
svgCanvas.embedImage('images/logo.svg', function (datauri) {
|
||||
if (!datauri) {
|
||||
// Disable option
|
||||
$('#image_save_opts [value=embed]').attr('disabled', 'disabled');
|
||||
$('#image_save_opts input').val(['ref']);
|
||||
const $imgDialog = document.getElementById('se-img-prop');
|
||||
editor.pref('img_save', 'ref');
|
||||
$('#image_opt_embed').css('color', '#666').attr(
|
||||
'title',
|
||||
uiStrings.notification.featNotSupported
|
||||
);
|
||||
$imgDialog.setAttribute('save', 'ref');
|
||||
$imgDialog.setAttribute('embed', 'one|' + uiStrings.notification.featNotSupported);
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
|
|
@ -4491,27 +4484,10 @@ editor.init = () => {
|
|||
// // }
|
||||
// }
|
||||
|
||||
$('#resolution').change(function () {
|
||||
const wh = $('#canvas_width,#canvas_height');
|
||||
if (!this.selectedIndex) {
|
||||
if ($('#canvas_width').val() === 'fit') {
|
||||
wh.removeAttr('disabled').val(100);
|
||||
}
|
||||
} else if (this.value === 'content') {
|
||||
wh.val('fit').attr('disabled', 'disabled');
|
||||
} else {
|
||||
const dims = this.value.split('x');
|
||||
$('#canvas_width').val(dims[0]);
|
||||
$('#canvas_height').val(dims[1]);
|
||||
wh.removeAttr('disabled');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent browser from erroneously repopulating fields
|
||||
$('input,select').attr('autocomplete', 'off');
|
||||
|
||||
const dialogSelectors = [
|
||||
'#tool_source_cancel', '#tool_docprops_cancel',
|
||||
'#tool_prefs_cancel', '.overlay'
|
||||
];
|
||||
/* eslint-disable jsdoc/require-property */
|
||||
|
|
@ -4640,6 +4616,13 @@ editor.init = () => {
|
|||
$id('tool_docprops').addEventListener('click', showDocProperties);
|
||||
$id('tool_editor_prefs').addEventListener('click', showPreferences);
|
||||
$id('tool_editor_homepage').addEventListener('click', openHomePage);
|
||||
$id('se-img-prop').addEventListener('change', function (e) {
|
||||
if (e.detail.dialog === 'closed') {
|
||||
hideDocProperties();
|
||||
} else {
|
||||
saveDocProperties(e);
|
||||
}
|
||||
});
|
||||
|
||||
const toolButtons = [
|
||||
{
|
||||
|
|
@ -4656,7 +4639,6 @@ editor.init = () => {
|
|||
{sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click',
|
||||
key: ['esc', false, false], hidekey: true},
|
||||
{sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
|
||||
{sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
|
||||
{sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
|
||||
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
|
||||
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
|
||||
|
|
|
|||
Loading…
Reference in New Issue