zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#process_cancel alert and process_cancel changes

master
Agriya Dev5 2020-12-29 23:21:47 +05:30
parent 36e3c8dd49
commit 816f9fbbb7
11 changed files with 127 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/dialogs/index.js
View File

@ -5,4 +5,5 @@ import './cmenuDialog.js';
import './cmenuLayersDialog.js';
import './seSelectDialog.js';
import './seConfirmDialog.js';
import './sePromptDialog.js';
import './seAlertDialog.js';

107
src/editor/dialogs/seAlertDialog.js
View File

@ -1,104 +1,11 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
/**
* @class SeAlertDialog
*/
export class SeAlertDialog extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog();
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'type', 'close'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
switch (name) {
case 'title':
if (this.dialog.opened) {
this.dialog.close();
}
this.dialog.textContent = newValue;
this.dialog.open();
break;
case 'type':
if (newValue === 'prompt_cancel') {
this.dialog.choices = ['Cancel'];
} else {
this.dialog.choices = ['Ok'];
}
break;
case 'close':
if (this.dialog.opened) {
this.dialog.close();
}
break;
default:
console.error('unkonw attr for:', name, 'newValue =', 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 type () {
return this.getAttribute('type');
}
const dialog = new AlertDialog();
const seAlert = (type, text) => {
dialog.textContent = text;
dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel'];
dialog.open();
};
/**
* @function set
* @returns {void}
*/
set type (value) {
this.setAttribute('type', value);
}
/**
* @function get
* @returns {any}
*/
get close () {
return this.getAttribute('close');
}
/**
* @function set
* @returns {void}
*/
set close (value) {
this.setAttribute('close', value);
}
}
// Register
customElements.define('se-alert-dialog', SeAlertDialog);
window.seAlert = seAlert;

83
src/editor/dialogs/sePromptDialog.js Normal file
View File

@ -0,0 +1,83 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
/**
* @class SePromptDialog
*/
export class SePromptDialog extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog();
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'close'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
switch (name) {
case 'title':
if (this.dialog.opened) {
this.dialog.close();
}
this.dialog.textContent = newValue;
this.dialog.choices = ['Cancel'];
this.dialog.open();
break;
case 'close':
if (this.dialog.opened) {
this.dialog.close();
}
break;
default:
console.error('unkonw attr for:', name, 'newValue =', 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 close () {
return this.getAttribute('close');
}
/**
* @function set
* @returns {void}
*/
set close (value) {
this.setAttribute('close', value);
}
}
// Register
customElements.define('se-prompt-dialog', SePromptDialog);

5
src/editor/extensions/ext-imagelib/index.js
View File

@ -1,4 +1,4 @@
/* globals jQuery */
/* globals jQuery seAlert */
const $ = jQuery;
$('a').click(function () {
const {href} = this;
@ -32,8 +32,7 @@ $('a').click(function () {
data = canvas.toDataURL();
} catch (err) {
// This fails in Firefox with `file:///` URLs :(
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
seAlert('alert', 'Data URL conversion failed: ' + err);
data = '';
}
post({href, data});

4
src/editor/extensions/ext-imagelib/openclipart.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
// eslint-disable-next-line node/no-unpublished-import
import {jml, body, nbsp} from 'jamilih';
// eslint-disable-next-line node/no-unpublished-import
@ -39,8 +40,7 @@ async function processResults (url) {
// console.log('json', json);
if (!json || json.msg !== 'success') {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
seAlert('alert', 'There was a problem downloading the results');
return;
}
const {payload, info: {

6
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@ -1,4 +1,4 @@
/* globals MathJax */
/* globals MathJax seAlert */
/**
* @file ext-mathjax.js
*
@ -202,9 +202,7 @@ export default {
});
} catch (e) {
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
// eslint-disable-next-line max-len
document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
seAlert('alert', 'Failed loading MathJax. You will not be able to change the mathematics.');
}
}
}

4
src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
/**
* @file ext-server_moinsave.js
*
@ -64,8 +65,7 @@ export default {
<input type="hidden" name="contenttype" value="application/x-svgdraw">
`).appendTo('body')
.submit().remove();
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = strings.saved;
seAlert('alert', strings.saved);
top.window.location = '/' + name;
}
});

4
src/editor/extensions/ext-webappfind/ext-webappfind.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
/**
* Depends on Firefox add-on and executables from
* {@link https://github.com/brettz9/webappfind}.
@ -63,8 +64,7 @@ export default {
} */
break;
case 'save-end':
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
seAlert('alert', `save complete for pathID ${pathID}!`);
break;
default:
throw new Error('Unexpected WebAppFind event type');

11
src/editor/panels/LayersPanel.js
View File

@ -1,5 +1,5 @@
/* eslint-disable no-alert */
/* globals $ */
/* globals $ seAlert */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
const SIDEPANEL_MAXWIDTH = 300;
@ -156,8 +156,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
seAlert('alert', this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.createLayer(newName);
@ -191,8 +190,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
seAlert('alert', this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.cloneLayer(newName);
@ -237,8 +235,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
if (!newName) { return; }
if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
seAlert('alert', this.uiStrings.notification.layerHasThatName);
return;
}
this.svgCanvas.renameCurrentLayer(newName);

5
src/editor/panels/TopPanelHandlers.js
View File

@ -1,4 +1,4 @@
/* globals $ */
/* globals $ seAlert */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js';
@ -403,8 +403,7 @@ class TopPanelHandlers {
if (!valid) {
e.target.value = this.selectedElement().getAttribute(attr);
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
seAlert('alert', this.uiStrings.notification.invalidAttrValGiven);
return false;
}

49
src/editor/svgedit.js
View File

@ -1,5 +1,5 @@
/* eslint-disable no-alert */
/* globals jQuery seSelect */
/* globals jQuery seSelect seAlert */
/**
* The main module for the visual SVG Editor.
*
@ -222,10 +222,10 @@ editor.init = () => {
const dialogBox = document.createElement('se-cmenu_canvas-dialog');
dialogBox.setAttribute('id', 'se-cmenu_canvas');
document.body.append(dialogBox);
// alertDialog added to DOM
const alertBox = document.createElement('se-alert-dialog');
alertBox.setAttribute('id', 'se-alert-dialog');
document.body.append(alertBox);
// promptDialog added to DOM
const promptBox = document.createElement('se-prompt-dialog');
promptBox.setAttribute('id', 'se-prompt-dialog');
document.body.append(promptBox);
} catch (err) {}
editor.configObj.load();
@ -456,8 +456,7 @@ editor.init = () => {
editor.pref('save_notice_done', 'all');
}
if (done !== 'part') {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = note;
seAlert('alert', note);
}
}
};
@ -474,8 +473,7 @@ editor.init = () => {
exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
if (!exportWindow || exportWindow.closed) {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
seAlert('alert', uiStrings.notification.popupWindowBlocked);
return;
}
@ -791,7 +789,7 @@ editor.init = () => {
}
if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
}
};
@ -1904,17 +1902,16 @@ editor.init = () => {
const {title, w, h, save} = e.detail;
// set document title
svgCanvas.setDocumentTitle(title);
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
if (w !== 'fit' && !isValidUnit('width', w)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
seAlert('alert', uiStrings.notification.invalidAttrValGiven);
return false;
}
if (h !== 'fit' && !isValidUnit('height', h)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
seAlert('alert', uiStrings.notification.invalidAttrValGiven);
return false;
}
if (!svgCanvas.setResolution(w, h)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo;
seAlert('alert', uiStrings.notification.noContentToFitTo);
return false;
}
// Set image save option
@ -2004,8 +2001,7 @@ editor.init = () => {
});
$('#url_notice').click(() => {
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = this.title;
seAlert('alert', this.title);
});
$('#stroke_width').val(editor.configObj.curConfig.initStroke.width);
@ -2442,14 +2438,13 @@ editor.init = () => {
* @returns {void}
*/
const importImage = function (e) {
document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
e.stopPropagation();
e.preventDefault();
$('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
return;
}
@ -2470,7 +2465,7 @@ editor.init = () => {
svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
svgCanvas.selectOnly([newElement]);
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
@ -2500,7 +2495,7 @@ editor.init = () => {
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
editor.topPanelHandlers.updateContextPanel();
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;
@ -2528,8 +2523,7 @@ editor.init = () => {
if (!ok) { return; }
svgCanvas.clear();
if (this.files.length === 1) {
document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
const reader = new FileReader();
reader.onloadend = async function ({target}) {
await loadSvgString(target.result);
@ -2695,8 +2689,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
dataType: 'text',
cache: Boolean(cache),
beforeSend () {
document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
},
success (str) {
loadSvgString(str, {noAlert});
@ -2710,13 +2703,11 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
reject(new Error('URLLoadFail'));
return;
}
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err);
resolve();
},
complete () {
document.getElementById('se-alert-dialog').setAttribute('close', true);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
}
});
});