Skip to content

Commit

Permalink
modify: Add util object to core
Browse files Browse the repository at this point in the history
  • Loading branch information
@JiHong88
JiHong88 committed Apr 16, 2019
1 parent 33769a1 commit a161a03
Show file tree
Hide file tree
Showing 17 changed files with 159 additions and 160 deletions.
5 changes: 5 additions & 0 deletions src/lib/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ const core = function (context, plugins, lang) {
*/
plugins: {},

/**
* @description Util object
*/
util: util,

/**
* @description Whether the plugin is initialized
*/
Expand Down
60 changes: 31 additions & 29 deletions src/plugins/dialog/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/
'use strict';

import util from '../../lib/util';
import dialog from '../modules/dialog';
import resizing from '../modules/resizing';
import notice from '../modules/notice';
Expand Down Expand Up @@ -43,7 +42,7 @@ export default {
};

/** image dialog */
let image_dialog = eval(this.setDialog(core.context.option, core.lang));
let image_dialog = eval(this.setDialog.call(core));

This comment has been minimized.

Sign in to view

Copy link
@sirlancelot

sirlancelot Jun 26, 2019

I'm curious, why is eval() used in this way? I see eval() usage is strewn about this codebase, but it only ever receives DOM nodes which is unexpected. It seems that if eval() receives a non-string value (in this case, a DOM node), it just returns the value as-is. Is this an artifact of a previous version? It seems all of these could be removed with zero side-effects.

This comment has been minimized.

Sign in to view

Copy link
@JiHong88

JiHong88 Jun 27, 2019

Author Owner

Hi @sirlancelot
Yeah, It's an artifact of a early version.
I've forgotten this code.
Thank you for letting me know about this :)
I fixed it.
It will be applied to the next version.

This comment has been minimized.

Sign in to view

Copy link
@sirlancelot

sirlancelot Jun 27, 2019

Cool! Nice work, overall! I'm considering using this editor for a mid-size project. Still going through some code review. Thanks for sharing this code with the world :)
context.image.modal = image_dialog;
context.image.imgUrlFile = image_dialog.getElementsByClassName('sun-editor-id-image-url')[0];
context.image.imgInputFile = context.image.focusElement = image_dialog.getElementsByClassName('sun-editor-id-image-file')[0];
Expand Down Expand Up @@ -77,8 +76,11 @@ export default {
},

/** dialog */
setDialog: function (option, lang) {
const dialog = util.createElement('DIV');
setDialog: function () {
const option = this.context.option;
const lang = this.lang;
const dialog = this.util.createElement('DIV');

dialog.className = 'modal-content sun-editor-id-dialog-image';
dialog.style.display = 'none';

Expand Down Expand Up @@ -180,12 +182,12 @@ export default {
// Get all elements with class="tablinks" and remove the class "active"
tabLinks = modal.getElementsByClassName('sun-editor-id-tab-link');
for (i = 0; i < tabLinks.length; i++) {
util.removeClass(tabLinks[i], 'active');
this.util.removeClass(tabLinks[i], 'active');
}

// Show the current tab, and add an "active" class to the button that opened the tab
modal.getElementsByClassName(contentClassName + '-' + tabName)[0].style.display = 'block';
util.addClass(targetElement, 'active');
this.util.addClass(targetElement, 'active');

// focus
if (tabName === 'image') {
Expand All @@ -210,7 +212,7 @@ export default {
formData.append('file-' + i, files[i]);
}

this.context.image._xmlHttp = util.getXMLHttpRequest();
this.context.image._xmlHttp = this.util.getXMLHttpRequest();
this.context.image._xmlHttp.onreadystatechange = this.plugins.image.callBack_imgUpload.bind(this, this.context.image._linkValue, this.context.image.imgLinkNewWindowCheck.checked, this.context.image.imageX.value + 'px', this.context.image._align, this.context.dialog.updateModal, this.context.image._element);
this.context.image._xmlHttp.open('post', imageUploadUrl, true);
this.context.image._xmlHttp.send(formData);
Expand Down Expand Up @@ -297,7 +299,7 @@ export default {

onRender_link: function (imgTag, imgLinkValue, newWindowCheck) {
if (imgLinkValue.trim().length > 0) {
const link = util.createElement('A');
const link = this.util.createElement('A');
link.href = /^https?:\/\//.test(imgLinkValue) ? imgLinkValue : 'http://' + imgLinkValue;
link.target = (newWindowCheck ? '_blank' : '');
link.setAttribute('data-image-link', 'image');
Expand Down Expand Up @@ -402,13 +404,13 @@ export default {

const contextImage = this.context.image;

let oImg = util.createElement('IMG');
let oImg = this.util.createElement('IMG');
oImg.addEventListener('load', this.plugins.image._onload_image.bind(this, oImg, file));

oImg.src = src;
oImg.setAttribute('data-align', align);
oImg.alt = contextImage._altText;
oImg = this.plugins.image.onRender_link(oImg, linkValue, linkNewWindow);
oImg = this.plugins.image.onRender_link.call(this, oImg, linkValue, linkNewWindow);
oImg.setAttribute('data-rotate', '0');

if (contextImage._resizing) {
Expand All @@ -433,8 +435,8 @@ export default {
cover.style.margin = '0';
}

util.removeClass(container, contextImage._floatClassRegExp);
util.addClass(container, 'float-' + align);
this.util.removeClass(container, contextImage._floatClassRegExp);
this.util.addClass(container, 'float-' + align);

if (!contextImage._resizing || !/\d+/.test(width)) {
this.context.resizing._resize_plugin = 'image';
Expand All @@ -444,7 +446,7 @@ export default {
this.plugins.image.setAutoSize.call(this);
}

this.insertNode(container, util.getFormatElement(this.getSelectionNode()));
this.insertNode(container, this.util.getFormatElement(this.getSelectionNode()));
this.appendFormatTag(container);
},

Expand Down Expand Up @@ -490,7 +492,7 @@ export default {
}
} else {
if (contextImage._caption) {
util.removeItem(contextImage._caption);
this.util.removeItem(contextImage._caption);
contextImage._caption = null;
}
}
Expand All @@ -502,8 +504,8 @@ export default {
cover.style.margin = '0';
}

util.removeClass(container, this.context.image._floatClassRegExp);
util.addClass(container, 'float-' + contextImage._align);
this.util.removeClass(container, this.context.image._floatClassRegExp);
this.util.addClass(container, 'float-' + contextImage._align);
imageEl.setAttribute('data-align', contextImage._align);

// link
Expand All @@ -513,7 +515,7 @@ export default {
contextImage._linkElement.target = (contextImage.imgLinkNewWindowCheck.checked ? '_blank' : '');
imageEl.setAttribute('data-image-link', linkValue);
} else {
let newEl = this.plugins.image.onRender_link(imageEl, linkValue, this.context.image.imgLinkNewWindowCheck.checked);
let newEl = this.plugins.image.onRender_link.call(this, imageEl, linkValue, this.context.image.imgLinkNewWindowCheck.checked);
cover.insertBefore(newEl, contextImage._caption);
}
}
Expand All @@ -528,9 +530,9 @@ export default {
}

if (isNewContainer) {
const existElement = util.getFormatElement(contextImage._element);
const existElement = this.util.getFormatElement(contextImage._element);
existElement.parentNode.insertBefore(container, existElement);
util.removeItem(contextImage._element);
this.util.removeItem(contextImage._element);
}

// transform
Expand All @@ -551,9 +553,9 @@ export default {
const contextImage = this.context.image;
contextImage._linkElement = /^A$/i.test(element.parentNode.nodeName) ? element.parentNode : null;
contextImage._element = element;
contextImage._cover = util.getParentElement(element, '.sun-editor-figure-cover');
contextImage._container = util.getParentElement(element, '.sun-editor-id-image-container');
contextImage._caption = util.getChildElement(contextImage._cover, 'FIGCAPTION');
contextImage._cover = this.util.getParentElement(element, '.sun-editor-figure-cover');
contextImage._container = this.util.getParentElement(element, '.sun-editor-id-image-container');
contextImage._caption = this.util.getChildElement(contextImage._cover, 'FIGCAPTION');
contextImage._align = element.getAttribute('data-align') || 'none';

contextImage._element_w = size.w;
Expand Down Expand Up @@ -624,8 +626,8 @@ export default {
contextImage._element.style.height = '';

if (/100/.test(w)) {
util.removeClass(contextImage._container, this.context.image._floatClassRegExp);
util.addClass(contextImage._container, 'float-center');
this.util.removeClass(contextImage._container, this.context.image._floatClassRegExp);
this.util.addClass(contextImage._container, 'float-center');
}
},

Expand All @@ -638,8 +640,8 @@ export default {
contextImage._container.style.width = '';
contextImage._container.style.height = '';

util.removeClass(contextImage._container, this.context.image._floatClassRegExp);
util.addClass(contextImage._container, 'float-' + contextImage._align);
this.util.removeClass(contextImage._container, this.context.image._floatClassRegExp);
this.util.addClass(contextImage._container, 'float-' + contextImage._align);
},

resetAlign: function () {
Expand All @@ -648,16 +650,16 @@ export default {
contextImage._element.setAttribute('data-align', '');
contextImage._align = 'none';
contextImage._cover.style.margin = '0';
util.removeClass(contextImage._container, contextImage._floatClassRegExp);
this.util.removeClass(contextImage._container, contextImage._floatClassRegExp);
},

destroy: function (element) {
const imageEl = element || this.context.image._element;
const imageContainer = util.getParentElement(imageEl, '.sun-editor-id-image-container') || imageEl;
const imageContainer = this.util.getParentElement(imageEl, '.sun-editor-id-image-container') || imageEl;

const dataIndex = imageEl.getAttribute('data-index');

util.removeItem(imageContainer);
this.util.removeItem(imageContainer);
this.plugins.image.init.call(this);

this.controllersOff();
Expand Down
21 changes: 11 additions & 10 deletions src/plugins/dialog/link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/
'use strict';

import util from '../../lib/util';
import dialog from '../modules/dialog';

export default {
Expand All @@ -19,14 +18,14 @@ export default {
context.link = {};

/** link dialog */
let link_dialog = eval(this.setDialog(core.lang));
let link_dialog = eval(this.setDialog.call(core));
context.link.modal = link_dialog;
context.link.focusElement = link_dialog.getElementsByClassName('sun-editor-id-link-url')[0];
context.link.linkAnchorText = link_dialog.getElementsByClassName('sun-editor-id-link-text')[0];
context.link.linkNewWindowCheck = link_dialog.getElementsByClassName('sun-editor-id-link-check')[0];

/** link button */
let link_button = eval(this.setController_LinkButton(core.lang));
let link_button = eval(this.setController_LinkButton.call(core));
context.link.linkBtn = link_button;
context.link._linkAnchor = null;
link_button.addEventListener('mousedown', function (e) { e.stopPropagation(); }, false);
Expand All @@ -44,8 +43,9 @@ export default {
},

/** dialog */
setDialog: function (lang) {
const dialog = util.createElement('DIV');
setDialog: function () {
const lang = this.lang;
const dialog = this.util.createElement('DIV');

dialog.className = 'modal-content sun-editor-id-dialog-link';
dialog.style.display = 'none';
Expand Down Expand Up @@ -76,8 +76,9 @@ export default {
},

/** modify controller button */
setController_LinkButton: function (lang) {
const link_btn = util.createElement('DIV');
setController_LinkButton: function () {
const lang = this.lang;
const link_btn = this.util.createElement('DIV');

link_btn.className = 'sun-editor-id-link-btn';
link_btn.style.display = 'none';
Expand Down Expand Up @@ -107,7 +108,7 @@ export default {
const anchorText = anchor.value.length === 0 ? url : anchor.value;

if (!this.context.dialog.updateModal) {
const oA = util.createElement('A');
const oA = this.util.createElement('A');
oA.href = url;
oA.textContent = anchorText;
oA.target = (this.context.link.linkNewWindowCheck.checked ? '_blank' : '');
Expand Down Expand Up @@ -143,7 +144,7 @@ export default {
linkBtn.getElementsByTagName('A')[0].href = selectionATag.href;
linkBtn.getElementsByTagName('A')[0].textContent = selectionATag.textContent;

const offset = util.getOffset(selectionATag);
const offset = this.util.getOffset(selectionATag);
linkBtn.style.left = (offset.left - this.context.element.wysiwyg.scrollLeft) + 'px';
linkBtn.style.top = (offset.top + selectionATag.offsetHeight + 10) + 'px';

Expand All @@ -168,7 +169,7 @@ export default {
}
else {
/** delete */
util.removeItem(this.context.link._linkAnchor);
this.util.removeItem(this.context.link._linkAnchor);
this.context.link._linkAnchor = null;
this.focus();
}
Expand Down
Loading

0 comments on commit a161a03

Please sign in to comment.