Remove content editable element

Non longer necessary. It works on Safari, Chrome and Firefox
This commit is contained in:
Frédéric Guillot 2023-05-17 21:17:47 -07:00 committed by Frédéric Guillot
parent 26b6eebb78
commit c9c1872067
2 changed files with 5 additions and 74 deletions

16
assets/js/app.min.js vendored
View File

@ -163,17 +163,11 @@ function buildComponentElement(){var roles=[];var container=KB.dom('div');for(va
roles.push(item)}} roles.push(item)}}
container.add(KB.dom('select').attr('aria-label',getAriaLabelValue()).change(onChange).for('option',roles).build());if(isLoading){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-spinner fa-pulse fa-fw').build())}else if(isSuccess){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-check fa-fw icon-fade-out icon-success').build())}else if(isError){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-check fa-fw icon-fade-out icon-error').build())} container.add(KB.dom('select').attr('aria-label',getAriaLabelValue()).change(onChange).for('option',roles).build());if(isLoading){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-spinner fa-pulse fa-fw').build())}else if(isSuccess){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-check fa-fw icon-fade-out icon-success').build())}else if(isError){container.text(' ');container.add(KB.dom('i').attr('class','fa fa-check fa-fw icon-fade-out icon-error').build())}
return container.build()} return container.build()}
this.render=function(){componentElement=buildComponentElement();containerElement.appendChild(componentElement)}});KB.component('screenshot',function(containerElement){var pasteCatcher=null;var inputElement=null;function onFileLoaded(e){createImage(e.target.result)} this.render=function(){componentElement=buildComponentElement();containerElement.appendChild(componentElement)}});KB.component('screenshot',function(containerElement){var inputElement=null;function onFileLoaded(e){createImage(e.target.result)}
function onPaste(e){if(e.clipboardData&&e.clipboardData.items){var items=e.clipboardData.items;if(items){for(var i=0;i<items.length;i++){if(items[i].type.indexOf("image")!==-1){var blob=items[i].getAsFile();var reader=new FileReader();reader.onload=onFileLoaded;reader.readAsDataURL(blob)}}}}else{setTimeout(checkInput,100)}} function onPaste(e){if(e.clipboardData&&e.clipboardData.items){var items=e.clipboardData.items;if(items){for(var i=0;i<items.length;i++){if(items[i].type.indexOf("image")!==-1){var blob=items[i].getAsFile();var reader=new FileReader();reader.onload=onFileLoaded;reader.readAsDataURL(blob)}}}}}
function initialize(){destroy();if(!window.Clipboard){pasteCatcher=document.createElement('template');pasteCatcher.id='screenshot-pastezone';pasteCatcher.contentEditable=!0;pasteCatcher.style.opacity=0;pasteCatcher.style.position='fixed';pasteCatcher.style.top=0;pasteCatcher.style.right=0;pasteCatcher.style.width=0;document.body.insertBefore(pasteCatcher,document.body.firstChild);pasteCatcher.focus();document.addEventListener('click',setFocus);document.getElementById('screenshot-zone').addEventListener('click',setFocus)} function initialize(){window.addEventListener('paste',onPaste,!1)}
window.addEventListener('paste',onPaste,!1)} function createImage(blob){var pastedImage=new Image();pastedImage.src=blob;pastedImage.onload=function(){var sourceSplit=blob.split('base64,');inputElement.value=sourceSplit[1]};var zone=document.getElementById('screenshot-zone');zone.innerHTML='';zone.className='screenshot-pasted';zone.appendChild(pastedImage);initialize()}
function destroy(){if(KB.exists('#screenshot-pastezone')){KB.find('#screenshot-pastezone').remove()} this.render=function(){inputElement=KB.dom('input').attr('type','hidden').attr('name','screenshot').build();containerElement.appendChild(inputElement);initialize()}});KB.component('select-dropdown-autocomplete',function(containerElement,options){var componentElement,inputElement,inputHiddenElement,chevronIconElement,loadingIconElement;function onLoadingStart(){KB.dom(loadingIconElement).show();KB.dom(chevronIconElement).hide()}
document.removeEventListener('click',setFocus);pasteCatcher=null}
function setFocus(){if(pasteCatcher!==null){pasteCatcher.focus()}}
function checkInput(){var child=pasteCatcher.childNodes[0];if(child){if(child.tagName==='IMG'){createImage(child.src)}}
pasteCatcher.innerHTML=''}
function createImage(blob){var pastedImage=new Image();pastedImage.src=blob;pastedImage.onload=function(){var sourceSplit=blob.split('base64,');inputElement.value=sourceSplit[1]};var zone=document.getElementById('screenshot-zone');zone.innerHTML='';zone.className='screenshot-pasted';zone.appendChild(pastedImage);destroy();initialize()}
KB.on('modal.close',function(){destroy()});this.render=function(){inputElement=KB.dom('input').attr('type','hidden').attr('name','screenshot').build();containerElement.appendChild(inputElement);initialize()}});KB.component('select-dropdown-autocomplete',function(containerElement,options){var componentElement,inputElement,inputHiddenElement,chevronIconElement,loadingIconElement;function onLoadingStart(){KB.dom(loadingIconElement).show();KB.dom(chevronIconElement).hide()}
function onLoadingStop(){KB.dom(loadingIconElement).hide();KB.dom(chevronIconElement).show()} function onLoadingStop(){KB.dom(loadingIconElement).hide();KB.dom(chevronIconElement).show()}
function onScroll(){var menuElement=KB.find('#select-dropdown-menu');if(menuElement){var componentPosition=componentElement.getBoundingClientRect();menuElement.style('top',(document.body.scrollTop+componentPosition.bottom)+'px')}} function onScroll(){var menuElement=KB.find('#select-dropdown-menu');if(menuElement){var componentPosition=componentElement.getBoundingClientRect();menuElement.style('top',(document.body.scrollTop+componentPosition.bottom)+'px')}}
function onKeyDown(e){switch(KB.utils.getKey(e)){case 'Escape':inputElement.value='';destroyDropdownMenu();break;case 'ArrowUp':e.preventDefault();e.stopImmediatePropagation();moveUp();break;case 'ArrowDown':e.preventDefault();e.stopImmediatePropagation();moveDown();break;case 'Enter':e.preventDefault();e.stopImmediatePropagation();insertSelectedItem();break}} function onKeyDown(e){switch(KB.utils.getKey(e)){case 'Escape':inputElement.value='';destroyDropdownMenu();break;case 'ArrowUp':e.preventDefault();e.stopImmediatePropagation();moveUp();break;case 'ArrowDown':e.preventDefault();e.stopImmediatePropagation();moveDown();break;case 'Enter':e.preventDefault();e.stopImmediatePropagation();insertSelectedItem();break}}

View File

@ -1,5 +1,4 @@
KB.component('screenshot', function (containerElement) { KB.component('screenshot', function (containerElement) {
var pasteCatcher = null;
var inputElement = null; var inputElement = null;
function onFileLoaded(e) { function onFileLoaded(e) {
@ -7,7 +6,6 @@ KB.component('screenshot', function (containerElement) {
} }
function onPaste(e) { function onPaste(e) {
// Firefox doesn't have the property e.clipboardData.items (only Chrome)
if (e.clipboardData && e.clipboardData.items) { if (e.clipboardData && e.clipboardData.items) {
var items = e.clipboardData.items; var items = e.clipboardData.items;
@ -24,69 +22,13 @@ KB.component('screenshot', function (containerElement) {
} }
} }
} }
} else {
// Handle Firefox
setTimeout(checkInput, 100);
} }
} }
function initialize() { function initialize() {
destroy();
if (! window.Clipboard) {
// Insert the content editable at the top to avoid scrolling down in the board view
pasteCatcher = document.createElement('template');
pasteCatcher.id = 'screenshot-pastezone';
pasteCatcher.contentEditable = true;
pasteCatcher.style.opacity = 0;
pasteCatcher.style.position = 'fixed';
pasteCatcher.style.top = 0;
pasteCatcher.style.right = 0;
pasteCatcher.style.width = 0;
document.body.insertBefore(pasteCatcher, document.body.firstChild);
pasteCatcher.focus();
// Set the focus when clicked anywhere in the document
document.addEventListener('click', setFocus);
// Set the focus when clicked in screenshot dropzone
document.getElementById('screenshot-zone').addEventListener('click', setFocus);
}
window.addEventListener('paste', onPaste, false); window.addEventListener('paste', onPaste, false);
} }
function destroy() {
if (KB.exists('#screenshot-pastezone')) {
KB.find('#screenshot-pastezone').remove();
}
document.removeEventListener('click', setFocus);
pasteCatcher = null;
}
function setFocus() {
if (pasteCatcher !== null) {
pasteCatcher.focus();
}
}
function checkInput() {
var child = pasteCatcher.childNodes[0];
if (child) {
// If the user pastes an image, the src attribute
// will represent the image as a base64 encoded string.
if (child.tagName === 'IMG') {
createImage(child.src);
}
}
pasteCatcher.innerHTML = '';
}
function createImage(blob) { function createImage(blob) {
var pastedImage = new Image(); var pastedImage = new Image();
pastedImage.src = blob; pastedImage.src = blob;
@ -102,14 +44,9 @@ KB.component('screenshot', function (containerElement) {
zone.className = 'screenshot-pasted'; zone.className = 'screenshot-pasted';
zone.appendChild(pastedImage); zone.appendChild(pastedImage);
destroy();
initialize(); initialize();
} }
KB.on('modal.close', function () {
destroy();
});
this.render = function () { this.render = function () {
inputElement = KB.dom('input') inputElement = KB.dom('input')
.attr('type', 'hidden') .attr('type', 'hidden')