From 42ed7b20f6f79d3240fdd73f1258affda92d2f7c Mon Sep 17 00:00:00 2001 From: Banana Date: Mon, 10 Feb 2020 17:31:47 +0100 Subject: [PATCH] plain old js. --- webroot/asset/js/editlink.js | 133 ++++++++++++++++++++ webroot/asset/js/jquery.flexdatalist.min.js | 2 - webroot/asset/js/jquery.min.js | 4 - webroot/view/editlink.inc.php | 19 +-- webroot/view/editlink.php | 98 ++++++++++----- 5 files changed, 203 insertions(+), 53 deletions(-) create mode 100644 webroot/asset/js/editlink.js delete mode 100644 webroot/asset/js/jquery.flexdatalist.min.js delete mode 100644 webroot/asset/js/jquery.min.js diff --git a/webroot/asset/js/editlink.js b/webroot/asset/js/editlink.js new file mode 100644 index 0000000..49cb769 --- /dev/null +++ b/webroot/asset/js/editlink.js @@ -0,0 +1,133 @@ +/** + * remove a tag from the tag "cloud" + * @param String tagString + * @param String targetStartString + */ +function removeTag(tagString,targetStartString) { + let toRemove = document.getElementById(targetStartString + '-' + tagString); + let saveInput = document.getElementById(targetStartString + '-save'); + + if(toRemove && saveInput) { + let newSaveValue = _removeFromCommaString(saveInput.value,tagString); + saveInput.value = newSaveValue; + toRemove.remove(); + } + else { + console.log("Delete element not found"); + } +} + +/** + * add a tag to the visible tag "cloud" and hidden form input + * used in the form for saving + * @param Object e + * @param String targetStartString + */ +function addTag(e,targetStartString) { + e = e || window.event; + + if(e.keyCode === 13) { + let elem = e.srcElement || e.target; + let saveInput = document.getElementById(targetStartString + '-save'); + let listBox = document.getElementById(targetStartString + '-listbox'); + let newTagTemplate = document.getElementById(targetStartString + '-template'); + + if(saveInput && listBox && elem && newTagTemplate) { + let toAdd = elem.value; + let newSaveValue = _appendToCommaString(saveInput.value,toAdd); + + let newT = newTagTemplate.cloneNode(true); + newT = _fillTagTemplate(newT,toAdd,targetStartString); + listBox.appendChild(newT); + + saveInput.value = newSaveValue; + } + + elem.value = ''; + e.preventDefault(); + } +} + +/** + * add given string to given existing string seperated with a comma + * @param String theString + * @param String toAdd + * @returns {string} + * @private + */ +function _appendToCommaString(theString,toAdd) { + if(theString.length > 0 && toAdd.length > 0) { + let theArray = theString.split(','); + if(!theArray.includes(toAdd)) { + theString = theString + "," + toAdd + } + } + else if (toAdd.length > 0) { + theString = toAdd; + } + + return theString; +} + +/** + * add given string to given existing string seperated with a comma + * @param String theString + * @param String toAdd + * @returns {string} + * @private + */ +function _removeFromCommaString(theString,toRemove) { + if(theString.length > 0 && toRemove.length > 0) { + let theArray = theString.split(','); + + if(theArray.includes(toRemove)) { + for( let i = theArray.length-1; i >= 0; i--){ + if ( theArray[i] === toRemove) theArray.splice(i, 1); + } + + theString = theArray.join(","); + } + } + + return theString; +} + +/** + * remove from given list the given value if it exists + * @param Object list + * @param String value + * @private + */ +function _removeFromDatalist(list, value) { + if(list.options.length > 0 && value && value.length > 0) { + for (i = 0; i < list.options.length; i++) { + if(list.options[i].value == value) { + list.options[i].remove(); + } + } + } +} + +/** + * fill the tag template with the right data and js calls + * depends on the html template created in the html code + * @param Object el The already cloned node + * @param String newTagString The new tag name + * @param String targetStartString + * @returns Object the cloned el + * @private + */ +function _fillTagTemplate(el,newTagString,targetStartString) { + el.removeAttribute('style'); + el.setAttribute('id',targetStartString + '-' + newTagString); + + let spanEl = el.querySelector('span'); + spanEl.innerHTML = newTagString; + + let aEl = el.querySelector('a'); + aEl.setAttribute('onclick', "removeTag('"+newTagString+"','"+targetStartString+"');"); + + + + return el; +} \ No newline at end of file diff --git a/webroot/asset/js/jquery.flexdatalist.min.js b/webroot/asset/js/jquery.flexdatalist.min.js deleted file mode 100644 index 4ed6c65..0000000 --- a/webroot/asset/js/jquery.flexdatalist.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/** jQuery.Flexdatalist 2.2.4 */ -jQuery.fn.flexdatalist=function(e,t){"use strict";var i=function(e,t){e.each(function(){var e=$(this),i=e.data(),a=i.flexdatalist,r=i.aliascontainer;r&&(e.removeClass("flexdatalist-set").attr({style:null,tabindex:null}).val(a&&a.originalValue&&!t?a.originalValue:"").removeData("flexdatalist").removeData("aliascontainer").off(),r.remove())})};if("string"==typeof e&&"reset"!==e){if("undefined"!=typeof this[0].fvalue){var a=this[0];if("destroy"===e)i(this,t);else if("value"===e){if("undefined"==typeof t)return a.fvalue.get();a.fvalue.set(t)}else if("add"===e){if("undefined"==typeof t)return a.debug("Missing value to add!");a.fvalue.add(t)}else if("toggle"===e){if("undefined"==typeof t)return a.debug("Missing value to toggle!");a.fvalue.toggle(t)}else if("remove"===e){if("undefined"==typeof t)return a.debug("Missing value to remove!");a.fvalue.remove(t)}else if("disabled"===e){if("undefined"==typeof t)return a.fdisabled();a.fdisabled(t)}else if("string"==typeof e){if("undefined"==typeof t)return a.options.get(e);a.options.set(e,t)}return this}e={_option:t}}this.length>0&&"undefined"!=typeof this[0].fvalue&&i(this);var r=$.extend({url:null,data:[],params:{},relatives:null,chainedRelatives:!1,cache:!0,cacheLifetime:60,minLength:2,groupBy:!1,selectionRequired:!1,focusFirstResult:!1,textProperty:null,valueProperty:null,visibleProperties:[],iconProperty:"thumb",searchIn:["label"],searchContain:!1,searchEqual:!1,searchByWord:!1,searchDisabled:!1,searchDelay:300,normalizeString:null,multiple:null,disabled:null,maxShownResults:100,removeOnBackspace:!0,noResultsText:'No results found for "{keyword}"',toggleSelected:!1,allowDuplicateValues:!1,redoSearchOnFocus:!0,requestType:"get",requestContentType:"x-www-form-urlencoded",resultsProperty:"results",keywordParamName:"keyword",limitOfValues:0,valuesSeparator:",",debug:!0},e);return this.each(function(e){var t=$(this),i=this,a=null,n=[],s="flex"+e,l=null,o=null;this.init=function(){var e=this.options.init();this.set.up(),l.on("focusin",function(e){i.action.redoSearchFocus(e),i.action.showAllResults(e),o&&o.addClass("focus")}).on("input keydown",function(e){9===i.keyNum(e)&&i.results.remove(),i.action.keypressValue(e,188),i.action.backSpaceKeyRemove(e)}).on("input keyup",function(e){i.action.keypressValue(e,13),i.action.keypressSearch(e),i.action.copyValue(e),i.action.backSpaceKeyRemove(e),i.action.showAllResults(e),i.action.clearValue(e),i.action.removeResults(e),i.action.inputWidth(e)}).on("focusout",function(e){o&&o.removeClass("focus"),i.action.clearText(e),i.action.clearValue(e)}),window.onresize=function(){i.position()},this.cache.gc(),e.selectionRequired&&i.fvalue.clear(!0,!0),this.fvalue._load(e.originalValue,function(){i.fdisabled(e.disabled),t.trigger("init:flexdatalist",[e])},!0)},this.action={keypressValue:function(e,t){var a=i.keyNum(e),r=l[0].value,n=i.options.get();if(r.length>0&&a===t&&!n.selectionRequired&&n.multiple){var r=l[0].value;e.preventDefault(),i.fvalue.extract(r),i.results.remove()}},keypressSearch:function(e){var t=i.keyNum(e),r=l.val(),n=r.length,s=i.options.get();clearTimeout(a),(!t||13!==t&&(37>t||t>40))&&(a=setTimeout(function(){(0===s.minLength&&n>0||s.minLength>0&&n>=s.minLength)&&i.data.load(function(e){i.search.get(r,e,function(e){i.results.show(e)})})},s.searchDelay))},redoSearchFocus:function(e){var t=i.fvalue.get(),a=i.options.get(),r=l.val();a.redoSearchOnFocus&&(r.length>0&&a.multiple||r.length>0&&0===t.length)&&this.keypressSearch(e)},copyValue:function(e){if(13!==i.keyNum(e)){var t=l.val(),a=i.fvalue.get(!0),r=i.options.get();r.multiple||r.selectionRequired||t.length===a.length||i.fvalue.extract(t)}},backSpaceKeyRemove:function(e){var t=i.options.get();if(t.removeOnBackspace&&t.multiple){var a=l.val(),r=l.data("_remove");8===i.keyNum(e)&&(0===a.length?r?(i.fvalue.remove(r),l.data("_remove",null)):(console.log("remove!"),l.data("_remove",l.parents("li:eq(0)").prev())):l.data("_remove",null))}},showAllResults:function(){var e=l.val();e=$.trim(e),""===e&&0===i.options.get("minLength")&&i.data.load(function(e){i.results.show(e)})},inputWidth:function(){var e=i.options.get();if(e.multiple){var a=l.val(),r=parseInt(l.css("fontSize").replace("px","")),n=40,s=t.innerWidth(),o=(a.length+1)*r;o>=n&&s>=o&&(l[0].style.width=o+"px")}},clearText:function(){var e=i.fvalue.get(),t=i.options.get();!t.multiple&&t.selectionRequired&&0===e.length&&(l[0].value="")},clearValue:function(){var e=(i.fvalue.get(),l.val()),t=i.options.get();!t.multiple&&t.selectionRequired&&e.length<=t.minLength&&i.fvalue.clear()},removeResults:function(){var e=(i.fvalue.get(),l.val()),t=i.options.get();t.minLength>0&&e.length').attr({"class":t.attr("class"),name:t.attr("name")?"flexdatalist-"+t.attr("name"):null,id:e,placeholder:t.attr("placeholder")}).addClass("flexdatalist-alias "+e).removeClass("flexdatalist").attr("autocomplete","off");return i},multipleInput:function(e){return o=$('