Mercurial Hosting > sceditor

comparison src/sceditor.js @ 28:f227fdfebded

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
split onEvent
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 11 Aug 2022 00:04:48 -0600
parents 8165b83907af
children ea32a44b5a6e
comparison
equal deleted inserted replaced
27:8165b83907af 28:f227fdfebded
286 * @param {function(Object)} fn 286 * @param {function(Object)} fn
287 * @param {boolean} [capture=false] 287 * @param {boolean} [capture=false]
288 * @see offEvent() 288 * @see offEvent()
289 */ 289 */
290 // eslint-disable-next-line max-params 290 // eslint-disable-next-line max-params
291 function onEvent(node, events, selector, fn, capture) { 291
292 function onEvent1(node, events, selector, fn, capture) {
292 events.split(' ').forEach(function (event) { 293 events.split(' ').forEach(function (event) {
293 var handler; 294 let handler = fn['_sce-event-' + event + selector] || function (e) {
294 295 var target = e.target;
295 if (isString(selector)) { 296 while (target && target !== node) {
296 handler = fn['_sce-event-' + event + selector] || function (e) { 297 if (is(target, selector)) {
297 var target = e.target; 298 fn(target, e);
298 while (target && target !== node) { 299 return;
299 if (is(target, selector)) {
300 fn(target, e);
301 return;
302 }
303
304 target = target.parentNode;
305 } 300 }
306 }; 301 target = target.parentNode;
307 302 }
308 fn['_sce-event-' + event + selector] = handler; 303 };
309 } else { 304 fn['_sce-event-' + event + selector] = handler;
310 handler = selector; 305 node.addEventListener(event, handler, capture || false);
311 capture = fn; 306 });
312 } 307 }
313 308
309 function onEvent2(node, events, handler, capture) {
310 events.split(' ').forEach(function (event) {
314 node.addEventListener(event, handler, capture || false); 311 node.addEventListener(event, handler, capture || false);
315 }); 312 });
316 } 313 }
317 314
318 /** 315 /**
2041 // START_COMMAND: Font 2038 // START_COMMAND: Font
2042 font: { 2039 font: {
2043 _dropDown: function (editor, caller, callback) { 2040 _dropDown: function (editor, caller, callback) {
2044 var content = createElement('div'); 2041 var content = createElement('div');
2045 2042
2046 onEvent(content, 'click', 'a', function (target, e) { 2043 onEvent1(content, 'click', 'a', function (target, e) {
2047 callback(data(target, 'font')); 2044 callback(data(target, 'font'));
2048 editor.closeDropDown(true); 2045 editor.closeDropDown(true);
2049 e.preventDefault(); 2046 e.preventDefault();
2050 }); 2047 });
2051 2048
2068 // START_COMMAND: Size 2065 // START_COMMAND: Size
2069 size: { 2066 size: {
2070 _dropDown: function (editor, caller, callback) { 2067 _dropDown: function (editor, caller, callback) {
2071 var content = createElement('div'); 2068 var content = createElement('div');
2072 2069
2073 onEvent(content, 'click', 'a', function (target, e) { 2070 onEvent1(content, 'click', 'a', function (target, e) {
2074 callback(data(target, 'size')); 2071 callback(data(target, 'size'));
2075 editor.closeDropDown(true); 2072 editor.closeDropDown(true);
2076 e.preventDefault(); 2073 e.preventDefault();
2077 }); 2074 });
2078 2075
2116 cmd._htmlCache = html; 2113 cmd._htmlCache = html;
2117 } 2114 }
2118 2115
2119 appendChild(content, parseHTML(cmd._htmlCache)); 2116 appendChild(content, parseHTML(cmd._htmlCache));
2120 2117
2121 onEvent(content, 'click', 'a', function (target, e) { 2118 onEvent1(content, 'click', 'a', function (target, e) {
2122 callback(data(target, 'color')); 2119 callback(data(target, 'color'));
2123 editor.closeDropDown(true); 2120 editor.closeDropDown(true);
2124 e.preventDefault(); 2121 e.preventDefault();
2125 }); 2122 });
2126 2123
2176 'Paste your text inside the following box:' 2173 'Paste your text inside the following box:'
2177 ), 2174 ),
2178 insert: editor._('Insert') 2175 insert: editor._('Insert')
2179 }, true)); 2176 }, true));
2180 2177
2181 onEvent(content, 'click', '.button', function (target, e) { 2178 onEvent1(content, 'click', '.button', function (target, e) {
2182 val = find(content, '#txt')[0].value; 2179 val = find(content, '#txt')[0].value;
2183 2180
2184 if (val) { 2181 if (val) {
2185 editor.wysiwygEditorInsertText(val); 2182 editor.wysiwygEditorInsertText(val);
2186 } 2183 }
2288 rows: editor._('Rows:'), 2285 rows: editor._('Rows:'),
2289 cols: editor._('Cols:'), 2286 cols: editor._('Cols:'),
2290 insert: editor._('Insert') 2287 insert: editor._('Insert')
2291 }, true)); 2288 }, true));
2292 2289
2293 onEvent(content, 'click', '.button', function (target, e) { 2290 onEvent1(content, 'click', '.button', function (target, e) {
2294 var rows = Number(find(content, '#rows')[0].value), 2291 var rows = Number(find(content, '#rows')[0].value),
2295 cols = Number(find(content, '#cols')[0].value), 2292 cols = Number(find(content, '#cols')[0].value),
2296 html = '<table>'; 2293 html = '<table>';
2297 2294
2298 if (rows > 0 && cols > 0) { 2295 if (rows > 0 && cols > 0) {
2352 2349
2353 var urlInput = find(content, '#image')[0]; 2350 var urlInput = find(content, '#image')[0];
2354 2351
2355 urlInput.value = selected; 2352 urlInput.value = selected;
2356 2353
2357 onEvent(content, 'click', '.button', function (target, e) { 2354 onEvent1(content, 'click', '.button', function (target, e) {
2358 if (urlInput.value) { 2355 if (urlInput.value) {
2359 cb( 2356 cb(
2360 urlInput.value, 2357 urlInput.value,
2361 find(content, '#width')[0].value, 2358 find(content, '#width')[0].value,
2362 find(content, '#height')[0].value 2359 find(content, '#height')[0].value
2406 label: editor._('E-mail:'), 2403 label: editor._('E-mail:'),
2407 desc: editor._('Description (optional):'), 2404 desc: editor._('Description (optional):'),
2408 insert: editor._('Insert') 2405 insert: editor._('Insert')
2409 }, true)); 2406 }, true));
2410 2407
2411 onEvent(content, 'click', '.button', function (target, e) { 2408 onEvent1(content, 'click', '.button', function (target, e) {
2412 var email = find(content, '#email')[0].value; 2409 var email = find(content, '#email')[0].value;
2413 2410
2414 if (email) { 2411 if (email) {
2415 cb(email, find(content, '#des')[0].value); 2412 cb(email, find(content, '#des')[0].value);
2416 } 2413 }
2463 2460
2464 editor.closeDropDown(true); 2461 editor.closeDropDown(true);
2465 e.preventDefault(); 2462 e.preventDefault();
2466 } 2463 }
2467 2464
2468 onEvent(content, 'click', '.button', insertUrl); 2465 onEvent1(content, 'click', '.button', insertUrl);
2469 onEvent(content, 'keypress', function (e) { 2466 onEvent2(content, 'keypress', function (e) {
2470 // 13 = enter key 2467 // 13 = enter key
2471 if (e.which === 13 && linkInput.value) { 2468 if (e.which === 13 && linkInput.value) {
2472 insertUrl(e); 2469 insertUrl(e);
2473 } 2470 }
2474 }, EVENT_CAPTURE); 2471 }, EVENT_CAPTURE);
2562 2559
2563 appendChild(content, line); 2560 appendChild(content, line);
2564 2561
2565 perLine = Math.sqrt(Object.keys(emoticons).length); 2562 perLine = Math.sqrt(Object.keys(emoticons).length);
2566 2563
2567 onEvent(content, 'click', 'img', function (target, e) { 2564 onEvent1(content, 'click', 'img', function (target, e) {
2568 editor.insert(startSpace + attr(target, 'alt') + endSpace, 2565 editor.insert(startSpace + attr(target, 'alt') + endSpace,
2569 null, false).closeDropDown(true); 2566 null, false).closeDropDown(true);
2570 2567
2571 e.preventDefault(); 2568 e.preventDefault();
2572 }); 2569 });
2590 }); 2587 });
2591 2588
2592 appendChild(moreLink, 2589 appendChild(moreLink,
2593 document.createTextNode(editor._('More'))); 2590 document.createTextNode(editor._('More')));
2594 2591
2595 onEvent(moreLink, 'click', function (e) { 2592 onEvent2(moreLink, 'click', function (e) {
2596 editor.createDropDown( 2593 editor.createDropDown(
2597 caller, 'more-emoticons', createContent(true) 2594 caller, 'more-emoticons', createContent(true)
2598 ); 2595 );
2599 2596
2600 e.preventDefault(); 2597 e.preventDefault();
2623 appendChild(content, _tmpl('youtubeMenu', { 2620 appendChild(content, _tmpl('youtubeMenu', {
2624 label: editor._('Video URL:'), 2621 label: editor._('Video URL:'),
2625 insert: editor._('Insert') 2622 insert: editor._('Insert')
2626 }, true)); 2623 }, true));
2627 2624
2628 onEvent(content, 'click', '.button', function (target, e) { 2625 onEvent1(content, 'click', '.button', function (target, e) {
2629 var val = find(content, '#link')[0].value; 2626 var val = find(content, '#link')[0].value;
2630 var idMatch = val.match(/(?:v=|v\/|embed\/|youtu.be\/)?([a-zA-Z0-9_-]{11})/); 2627 var idMatch = val.match(/(?:v=|v\/|embed\/|youtu.be\/)?([a-zA-Z0-9_-]{11})/);
2631 var timeMatch = val.match(/[&|?](?:star)?t=((\d+[hms]?){1,3})/); 2628 var timeMatch = val.match(/[&|?](?:star)?t=((\d+[hms]?){1,3})/);
2632 var time = 0; 2629 var time = 0;
2633 2630
4539 pluginManager.call('ready'); 4536 pluginManager.call('ready');
4540 if ('onReady' in format) { 4537 if ('onReady' in format) {
4541 format.onReady(base); 4538 format.onReady(base);
4542 } 4539 }
4543 }; 4540 };
4544 onEvent(globalWin, 'load', loaded); 4541 onEvent2(globalWin, 'load', loaded);
4545 if (globalDoc.readyState === 'complete') { 4542 if (globalDoc.readyState === 'complete') {
4546 loaded(); 4543 loaded();
4547 } 4544 }
4548 }; 4545 };
4549 4546
4628 base.readOnly(!!options.readOnly); 4625 base.readOnly(!!options.readOnly);
4629 4626
4630 // iframe overflow fix for iOS 4627 // iframe overflow fix for iOS
4631 if (ios) { 4628 if (ios) {
4632 height(wysiwygBody, '100%'); 4629 height(wysiwygBody, '100%');
4633 onEvent(wysiwygBody, 'touchend', base.focus); 4630 onEvent2(wysiwygBody, 'touchend', base.focus);
4634 } 4631 }
4635 4632
4636 var tabIndex = attr(original, 'tabindex'); 4633 var tabIndex = attr(original, 'tabindex');
4637 attr(sourceEditor, 'tabindex', tabIndex); 4634 attr(sourceEditor, 'tabindex', tabIndex);
4638 attr(wysiwygEditor, 'tabindex', tabIndex); 4635 attr(wysiwygEditor, 'tabindex', tabIndex);
4657 * @private 4654 * @private
4658 */ 4655 */
4659 initOptions = function () { 4656 initOptions = function () {
4660 // auto-update original textbox on blur if option set to true 4657 // auto-update original textbox on blur if option set to true
4661 if (options.autoUpdate) { 4658 if (options.autoUpdate) {
4662 onEvent(wysiwygBody, 'blur', autoUpdate); 4659 onEvent2(wysiwygBody, 'blur', autoUpdate);
4663 onEvent(sourceEditor, 'blur', autoUpdate); 4660 onEvent2(sourceEditor, 'blur', autoUpdate);
4664 } 4661 }
4665 4662
4666 if (options.rtl === null) { 4663 if (options.rtl === null) {
4667 options.rtl = css(sourceEditor, 'direction') === 'rtl'; 4664 options.rtl = css(sourceEditor, 'direction') === 'rtl';
4668 } 4665 }
4669 4666
4670 base.rtl(!!options.rtl); 4667 base.rtl(!!options.rtl);
4671 4668
4672 if (options.autoExpand) { 4669 if (options.autoExpand) {
4673 // Need to update when images (or anything else) loads 4670 // Need to update when images (or anything else) loads
4674 onEvent(wysiwygBody, 'load', autoExpand, EVENT_CAPTURE); 4671 onEvent2(wysiwygBody, 'load', autoExpand, EVENT_CAPTURE);
4675 onEvent(wysiwygBody, 'input keyup', autoExpand); 4672 onEvent2(wysiwygBody, 'input keyup', autoExpand);
4676 } 4673 }
4677 4674
4678 if (options.resizeEnabled) { 4675 if (options.resizeEnabled) {
4679 initResize(); 4676 initResize();
4680 } 4677 }
4694 'keydown keyup keypress focus blur contextmenu input'; 4691 'keydown keyup keypress focus blur contextmenu input';
4695 var checkSelectionEvents = 'onselectionchange' in wysiwygDocument ? 4692 var checkSelectionEvents = 'onselectionchange' in wysiwygDocument ?
4696 'selectionchange' : 4693 'selectionchange' :
4697 'keyup focus blur contextmenu mouseup touchend click'; 4694 'keyup focus blur contextmenu mouseup touchend click';
4698 4695
4699 onEvent(globalDoc, 'click', handleDocumentClick); 4696 onEvent2(globalDoc, 'click', handleDocumentClick);
4700 4697
4701 if (form) { 4698 if (form) {
4702 onEvent(form, 'reset', handleFormReset); 4699 onEvent2(form, 'reset', handleFormReset);
4703 onEvent(form, 'submit', base.updateOriginal, EVENT_CAPTURE); 4700 onEvent2(form, 'submit', base.updateOriginal, EVENT_CAPTURE);
4704 } 4701 }
4705 4702
4706 onEvent(window, 'pagehide', base.updateOriginal); 4703 onEvent2(window, 'pagehide', base.updateOriginal);
4707 onEvent(window, 'pageshow', handleFormReset); 4704 onEvent2(window, 'pageshow', handleFormReset);
4708 onEvent(wysiwygBody, 'keypress', handleKeyPress); 4705 onEvent2(wysiwygBody, 'keypress', handleKeyPress);
4709 onEvent(wysiwygBody, 'keydown', handleKeyDown); 4706 onEvent2(wysiwygBody, 'keydown', handleKeyDown);
4710 onEvent(wysiwygBody, 'keydown', handleBackSpace); 4707 onEvent2(wysiwygBody, 'keydown', handleBackSpace);
4711 onEvent(wysiwygBody, 'keyup', appendNewLine); 4708 onEvent2(wysiwygBody, 'keyup', appendNewLine);
4712 onEvent(wysiwygBody, 'blur', valueChangedBlur); 4709 onEvent2(wysiwygBody, 'blur', valueChangedBlur);
4713 onEvent(wysiwygBody, 'keyup', valueChangedKeyUp); 4710 onEvent2(wysiwygBody, 'keyup', valueChangedKeyUp);
4714 onEvent(wysiwygBody, 'paste', handlePasteEvt); 4711 onEvent2(wysiwygBody, 'paste', handlePasteEvt);
4715 onEvent(wysiwygBody, 'cut copy', handleCutCopyEvt); 4712 onEvent2(wysiwygBody, 'cut copy', handleCutCopyEvt);
4716 onEvent(wysiwygBody, compositionEvents, handleComposition); 4713 onEvent2(wysiwygBody, compositionEvents, handleComposition);
4717 onEvent(wysiwygBody, checkSelectionEvents, checkSelectionChanged); 4714 onEvent2(wysiwygBody, checkSelectionEvents, checkSelectionChanged);
4718 onEvent(wysiwygBody, eventsToForward, handleEvent); 4715 onEvent2(wysiwygBody, eventsToForward, handleEvent);
4719 4716
4720 if (options.emoticonsCompat && globalWin.getSelection) { 4717 if (options.emoticonsCompat && globalWin.getSelection) {
4721 onEvent(wysiwygBody, 'keyup', emoticonsCheckWhitespace); 4718 onEvent2(wysiwygBody, 'keyup', emoticonsCheckWhitespace);
4722 } 4719 }
4723 4720
4724 onEvent(wysiwygBody, 'blur', function () { 4721 onEvent2(wysiwygBody, 'blur', function () {
4725 if (!base.val()) { 4722 if (!base.val()) {
4726 addClass(wysiwygBody, 'placeholder'); 4723 addClass(wysiwygBody, 'placeholder');
4727 } 4724 }
4728 }); 4725 });
4729 4726
4730 onEvent(wysiwygBody, 'focus', function () { 4727 onEvent2(wysiwygBody, 'focus', function () {
4731 removeClass(wysiwygBody, 'placeholder'); 4728 removeClass(wysiwygBody, 'placeholder');
4732 }); 4729 });
4733 4730
4734 onEvent(sourceEditor, 'blur', valueChangedBlur); 4731 onEvent2(sourceEditor, 'blur', valueChangedBlur);
4735 onEvent(sourceEditor, 'keyup', valueChangedKeyUp); 4732 onEvent2(sourceEditor, 'keyup', valueChangedKeyUp);
4736 onEvent(sourceEditor, 'keydown', handleKeyDown); 4733 onEvent2(sourceEditor, 'keydown', handleKeyDown);
4737 onEvent(sourceEditor, compositionEvents, handleComposition); 4734 onEvent2(sourceEditor, compositionEvents, handleComposition);
4738 onEvent(sourceEditor, eventsToForward, handleEvent); 4735 onEvent2(sourceEditor, eventsToForward, handleEvent);
4739 4736
4740 onEvent(wysiwygDocument, 'mousedown', handleMouseDown); 4737 onEvent2(wysiwygDocument, 'mousedown', handleMouseDown);
4741 onEvent(wysiwygDocument, checkSelectionEvents, checkSelectionChanged); 4738 onEvent2(wysiwygDocument, checkSelectionEvents, checkSelectionChanged);
4742 onEvent(wysiwygDocument, 'keyup', appendNewLine); 4739 onEvent2(wysiwygDocument, 'keyup', appendNewLine);
4743 4740
4744 onEvent(editorContainer, 'selectionchanged', checkNodeChanged); 4741 onEvent2(editorContainer, 'selectionchanged', checkNodeChanged);
4745 onEvent(editorContainer, 'selectionchanged', updateActiveButtons); 4742 onEvent2(editorContainer, 'selectionchanged', updateActiveButtons);
4746 // Custom events to forward 4743 // Custom events to forward
4747 onEvent( 4744 onEvent2(
4748 editorContainer, 4745 editorContainer,
4749 'selectionchanged valuechanged nodechanged pasteraw paste', 4746 'selectionchanged valuechanged nodechanged pasteraw paste',
4750 handleEvent 4747 handleEvent
4751 ); 4748 );
4752 }; 4749 };
4797 } 4794 }
4798 4795
4799 button._sceTxtMode = !!command.txtExec; 4796 button._sceTxtMode = !!command.txtExec;
4800 button._sceWysiwygMode = !!command.exec; 4797 button._sceWysiwygMode = !!command.exec;
4801 toggleClass(button, 'disabled', !command.exec); 4798 toggleClass(button, 'disabled', !command.exec);
4802 onEvent(button, 'click', function (e) { 4799 onEvent2(button, 'click', function (e) {
4803 if (!hasClass(button, 'disabled')) { 4800 if (!hasClass(button, 'disabled')) {
4804 handleCommand(button, command); 4801 handleCommand(button, command);
4805 } 4802 }
4806 4803
4807 updateActiveButtons(); 4804 updateActiveButtons();
4808 e.preventDefault(); 4805 e.preventDefault();
4809 }); 4806 });
4810 // Prevent editor losing focus when button clicked 4807 // Prevent editor losing focus when button clicked
4811 onEvent(button, 'mousedown', function (e) { 4808 onEvent2(button, 'mousedown', function (e) {
4812 base.closeDropDown(); 4809 base.closeDropDown();
4813 e.preventDefault(); 4810 e.preventDefault();
4814 }); 4811 });
4815 4812
4816 if (command.tooltip) { 4813 if (command.tooltip) {
4952 4949
4953 appendChild(editorContainer, grip); 4950 appendChild(editorContainer, grip);
4954 appendChild(editorContainer, cover); 4951 appendChild(editorContainer, cover);
4955 hide(cover); 4952 hide(cover);
4956 4953
4957 onEvent(grip, 'touchstart mousedown', function (e) { 4954 onEvent2(grip, 'touchstart mousedown', function (e) {
4958 // iOS uses window.event 4955 // iOS uses window.event
4959 if (e.type === 'touchstart') { 4956 if (e.type === 'touchstart') {
4960 e = globalWin.event; 4957 e = globalWin.event;
4961 startX = e.touches[0].pageX; 4958 startX = e.touches[0].pageX;
4962 startY = e.touches[0].pageY; 4959 startY = e.touches[0].pageY;
4969 startHeight = height(editorContainer); 4966 startHeight = height(editorContainer);
4970 isDragging = true; 4967 isDragging = true;
4971 4968
4972 addClass(editorContainer, 'resizing'); 4969 addClass(editorContainer, 'resizing');
4973 show(cover); 4970 show(cover);
4974 onEvent(globalDoc, moveEvents, mouseMoveFunc); 4971 onEvent2(globalDoc, moveEvents, mouseMoveFunc);
4975 onEvent(globalDoc, endEvents, mouseUpFunc); 4972 onEvent2(globalDoc, endEvents, mouseUpFunc);
4976 4973
4977 e.preventDefault(); 4974 e.preventDefault();
4978 }); 4975 });
4979 }; 4976 };
4980 4977
5491 }); 5488 });
5492 5489
5493 css(dropdown, dropDownCss); 5490 css(dropdown, dropDownCss);
5494 appendChild(dropdown, content); 5491 appendChild(dropdown, content);
5495 appendChild(editorContainer, dropdown); 5492 appendChild(editorContainer, dropdown);
5496 onEvent(dropdown, 'click focusin', function (e) { 5493 onEvent2(dropdown, 'click focusin', function (e) {
5497 // stop clicks within the dropdown from being handled 5494 // stop clicks within the dropdown from being handled
5498 e.stopPropagation(); 5495 e.stopPropagation();
5499 }); 5496 });
5500 5497
5501 if (dropdown) { 5498 if (dropdown) {
7076 } 7073 }
7077 7074
7078 options.emoticonsEnabled = enable; 7075 options.emoticonsEnabled = enable;
7079 7076
7080 if (enable) { 7077 if (enable) {
7081 onEvent(wysiwygBody, 'keypress', emoticonsKeyPress); 7078 onEvent2(wysiwygBody, 'keypress', emoticonsKeyPress);
7082 7079
7083 if (!base.sourceMode()) { 7080 if (!base.sourceMode()) {
7084 rangeHelper.saveRange(); 7081 rangeHelper.saveRange();
7085 7082
7086 replaceEmoticons(); 7083 replaceEmoticons();