//author-sample txt $( ()=>{ var introtxt = $("

"), cont = $("

"), delay = 0, w = window.innerWidth, touchIsDone = false, isLoading = false, langSelector = 0, langSelector1 = 0, touchCnt = 0, //if we wanna check inputs out, we have to define array of strings with allowed symbols alph = [["abcdefghijklmnopqrstuvwxyz", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"], ["абвгґдеєжзиіїйклмнопрстуфхцчшщьюя", "АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ"], ["абвгдеёжзийклмнопрстуфхцчшщьъыэюя", "АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЪЫЭЮЯ"] ], nums = "1234567890", syms = " @#$_&-—+()/* \"\',:;!?~`|•√π÷×¶∆£¢€¥^°={}\\%©®™✓[]" introtxt.css({"position":"fixed", "font-family":"monospace", "margin":`63% ${w/2-107}px`, "font-size":"40px", "color":"#dddddd"}) cont.css({"position":"fixed", "font-family":"monospace", "margin":`78% ${w/2-160}px`, "font-size":"22px", "color":"#aaaaaa"}) $(introtxt).addClass("textGlow") $(cont).addClass("textGlow") $("body").after(introtxt, cont) //this function periodically adds "|" to elements html and returns previous value of it. to stop its executing, here is an touchend Event Listener which counts touches.if touchCnt == 2, functions of function printLine() stop their work function printVertLine(elem) { window.addEventListener("touchend", function stop() { touchIsDone = true touchCnt++ }) window.addEventListener("clickup", stop) if(touchIsDone) { window.removeEventListener("touchend", stop) window.removeEventListener("clickup", stop) } var text = elem.html() setTimeout(function signal() { if(touchCnt < 2) { elem.html(text + "|") setTimeout(signal, 800) } }, 0) setTimeout(function clSignal() { if(touchCnt < 2) { elem.html(text) setTimeout(clSignal, 800) } }, 400) } //next function a part of Typed method(s) feautures. dunno if Typed class objects can print letters of alphabet before each letter of a text given to Typed class object constructor function type(elem, notTextBox, langNum, txt, delay, typePrevAlphLett = false, reverse = false) { var sym = "", pos = 0, step = 0, bound = 0, cache = "", symbuff = "", lettOrNum = undefined, lettOrNumPos = 0 if(reverse) { pos = txt.length bound = 0 step = -1 } else { pos = 0 bound = txt.length step = 1 } setTimeout( function printSym() { if(typePrevAlphLett && symbuff != txt[pos]) { for(let caseSel = 0; caseSel < 2; caseSel++) { for(letter of alph[langNum][caseSel]) { if(txt[pos] == letter) { sym=alph[langNum][caseSel][lettOrNumPos++] lettOrNum=true break } } } for(let numpos = 0;numpos < nums.length; numpos++) { if(numpos == txt[pos]){ sym = nums[lettOrNumPos++] lettOrNum = true break } } for(symbol of syms) { if(symbol == txt[pos]) { sym = symbol lettOrNum = false break } } symbuff = sym } if(!typePrevAlphLett || (typePrevAlphLett && symbuff == txt[pos])) { pos += step cache = txt.substring(0, pos) if(sym != "" && lettOrNumPos > 0) { sym = "" lettOrNumPos = 0 } notTextBox ? elem.html(cache) : elem.attr("placeholder", cache) } if(pos != bound) { var text = (lettOrNum && sym == "") ? (cache + "|") : (cache + symbuff + "|") notTextBox ? elem.html(text) : elem.attr("placeholder", text) setTimeout(printSym, delay) } }, delay) } type(introtxt, true, 0, "encrypter", 15, true) setTimeout( () => { type(cont, true, 0, "touch twice to continue" ,50) }, 2600) setTimeout( () => { printVertLine(cont) }, 3800) //by using next function we create and place on document an element using array with strings of html elements , their x & y coordinates, indexes (width & height, width values (if element has them) ) function addElem(target, elements, elementsNames, elemPos, elemsXYcoord, elemsIdxFixedSize,fixedSizeCnt, sizeValue) { var elem=$(elements[elemPos]), posX=elemsXYcoord[elemPos][0],//distance from left side in px posY=elemsXYcoord[elemPos][1],//distance from top in px elemHeight = (elemPos == 3 || elemPos == 8 || elemPos == 9) ? 44 : (elemPos == 1 || elemPos == 5 || elemPos == 8 ) ? 21 : 30 elem.css({ "position":"absolute", "font-family":"monospace", "height":`${elemHeight}px`, "font-size":"18px", "margin":`${posY}% ${posX}px`, "padding":"3px 6px", "color":"#aaaaaa", "background-color":"#111111", "border":"1px solid #aaaaaa", "border-radius":"15px" }) $(target).append(elem) //adding index checking to define is element a textbox or not (element with index 3 - first input field; with index 8-input field 2) var ntb = (elemPos == 3 || elemPos == 8) ? false : true, delay = 15 * elementsNames[elemPos].length type(elem, ntb, langSelector, elementsNames[elemPos], 15) if(fixedSizeCnt < sizeValue.length & elemPos++ == elemsIdxFixedSize[fixedSizeCnt]) { elem.animate({"width":`${sizeValue[fixedSizeCnt++]}%`}, delay / 3 * 2) } if(elemPos < elements.length) { setTimeout( () => { addElem(target, elements, elementsNames, elemPos, elemsXYcoord, elemsIdxFixedSize, fixedSizeCnt, sizeValue) }, delay) } } //removeNReloadElems() is for smooth 1-by-1 element removing & their reloading function removeNReloadElems(elementsId, elemPos) { var delay1 = 0, ntb=(elemPos == 3 || elemPos == 8) ? false : true if(!ntb) $(elementsId[elemPos]).html("") var content = (ntb) ? $(elementsId[elemPos]).text() : $(elementsId[elemPos]).attr("placeholder") delay1 = 15 * content.length delay += delay1 type( $(elementsId[elemPos]), ntb, langSelector, content, 10, false, true) $(elementsId[elemPos]).animate({"width":"0px", "height":"24px"}, delay1) setTimeout( () => { $(elementsId[elemPos]).remove() //if all elements have been removed, reload them with updated language index if(elemPos == 0) { isLoading = true setTimeout(setup, delay) } else if(elemPos > 0) { removeNReloadElems(elementsId, --elemPos) } }, delay1) } //function checkInput() analyzes input(does input fully consists of letters of chosen language?does input 2 corresponds all characteristics for chosen cypher parameter?)it returns true if yes, if not-message that depends both on chosen language & cypher function checkInput(target, alph, nums, syms, pos) { var allowedSym = 0, plaintext = $(target).val() //console.log(plaintext.length) for(let symbol of plaintext) { if( (target == "#shift" && pos == 2) || target == "#i" ) { for(let smallLett of alph[0]) if(symbol == smallLett) allowedSym++ for(let BigLett of alph[1]) if(symbol == BigLett) allowedSym++ } if(target == "#i") { for(let symb of syms) if(symbol == symb) allowedSym++ } if( (target == "#shift" && pos==1) || target == "#i" ) { for(let number of nums) if(number == symbol) allowedSym++ } } if(allowedSym < plaintext.length || (target=="#i" && plaintext == "") ) { $(target).val("") $(target).attr("placeholder", "") var placeholderVal = "" if(target == "#i") placeholderVal = appdata.input1txt[langSelector][langSelector1] else placeholderVal = appdata.input2txt[langSelector][pos] type($(target), false, langSelector, placeholderVal, 15) return false } else return true } //function addSym() seeks a particular symbol in 2 strings.if symbol has found, it'll be returned.if not, "" will be returned function addSym(nums, symbols, sym) { for(let number of nums) { if(sym == number) return sym } for(let symb of symbols) { if(sym == symb) return sym } return "" } /*function calcNewPos() calculates new index for letter using next logic: is encrypting mode a decrypting & absolute value of shift value is greater than current letter position? if yes, new letter position equals to set alphabet's length+shift value+current letter position. if not, new letter position equals to current letter position+shift value */ function calcNewPos(encrypt, lett, shiftVal, length) { var newPos = ( !encrypt && ( lett < Math.abs(shiftVal) ) ) ? (length + shiftVal + lett) : ( (lett + shiftVal) % length ) return newPos } //Process() function processes text using parameters you've chosen function Process(algNum, encrypt, shift, alph, nums, symbols, plaintext) { var processedTxt="", shiftVal, newPos switch(algNum) { case 0: { newPos = 0 for(let sym of plaintext) { for(let lettPos = 0; lettPos < alph[0].length; lettPos++) { newPos = alph[0].length - 1 - lettPos switch(sym) { case alph[0][lettPos]: { processedTxt += alph[0][newPos] break } case alph[1][lettPos]: { processedTxt += alph[1][newPos] break } } } processedTxt += addSym(nums, symbols, sym) } break } case 1: { shiftVal = Number(shift) % alph[0].length shiftVal = (encrypt) ? shiftVal : -shiftVal for(sym of plaintext) { for(let lett = 0; lett < alph[0].length; lett++) { switch(sym) { case alph[0][lett]: { newPos = calcNewPos(encrypt, lett, shiftVal, alph[0].length) processedTxt += alph[0][newPos] break } case alph[1][lett]: { newPos = calcNewPos(encrypt, lett, shiftVal, alph[1].length) processedTxt += alph[1][newPos] break } } } processedTxt += addSym(nums, symbols, sym) } break } case 2: { shiftVals = [] var pos = 0 for(let lett = 0; lett < alph[0].length; lett++) { shiftVal = shift[pos] if(alph[0][lett] == shiftVal || alph[1][lett] == shiftVal) { shiftVals[pos++] = (encrypt) ? lett : -lett lett = -1 } } for(let sym=0; sym < plaintext.length; sym++) { for(let lett=0; lett < alph[0].length; lett++) { switch(plaintext[sym]) { case alph[0][lett]: { shiftVal1 = shiftVals[sym % shift.length] newPos = calcNewPos(encrypt, lett, shiftVal1, alph[0].length) processedTxt += alph[0][newPos] break } case alph[1][lett]: { shiftVal1 = shiftVals[sym % shift.length] newPos = calcNewPos(encrypt, lett, shiftVal1, alph[1].length) processedTxt += alph[1][newPos] break } } } processedTxt += addSym(nums, symbols, plaintext[sym]) } break } case 3: { var symCnt = 0 for(let sym of plaintext) { for(let lett = 0; lett < alph[0].length; lett++) { if(sym == alph[0][lett] || sym == alph[1][lett]) processedTxt += (++symCnt < plaintext.length) ? (lett + 1 + "—") : (lett + 1) } } } } return processedTxt } //define clearName() function to eraze html value of particular element using type() function.it return delay value in order to call setName() function only when text of chosen element has been fully cleared function clearName(target, ntb, pos, elementsNames) { type($(target), ntb, langSelector, elementsNames[pos], 15, false, true) return 15 * elementsNames[pos].length } function setName(target, ntb, pos, elementsNames, delay) { setTimeout( ()=>{ type($(target), ntb, langSelector, elementsNames[pos], 15) },delay) } //app's data: strings of html elements, their names, names of cyphers, names for encrypting switch button, texts of about section, requirments for input for input fields 1 & 2, names of accepted languages on 3 languages: english, ukrainian, russian var appdata = { elements: ["", "", "", "", "", "

", "", "", "", "", ""], elementsNames: [ ["<<", "english", ">>", "enter plaintext in english", "<<", " Atbash cypher ", ">>", "decrypt", "don\'t enter anything", "processed text will be shown here", "about encrypter"], ["<<", "українська", ">>", "введіть початковий текст українською", "<<", "шифр Атбаша", ">>", "дешифрування", "нічого не вводьте", "оброблений текст", "про encrypter"], ["<<", "русский", ">>", "введите исходный текст на русском", "<<", " шифр Атбаша", ">>","дешифровка", "ничего не вводите", "обработанный текст", "об encrypter"] ], CypherAlgNames: [ ["Atbash cypher", "Ceasar cypher", "Vigenere cypher", "A1Z26 Cypher"], ["шифр Атбаша", "шифр Цезаря", "шифр Віженера", "шифр А1Я33"], ["шифр Атбаша", "шифр Цезаря", "шифр Виженера", "шифр А1Я33"] ], invertorModeNames: [ [" decrypt"," encrypt"], ["дешифрування"," шифрування"], ["дешифровка"," шифровка"] ], msgText: [ "how to use encrypter\n\t1.input your text in input field 1 \n\t2.set encrypting algorith\n\t3.set encrypting mode\n\t4.enter text in input field 2\n\t5.double tap on encrypting algorithm name\n\t6.use\n\t!use 1st pair of arrows to change plaintext language & 2nd pair to switch between encrypting algorithms.double tap on element that displays current language to change app\'s language.\nSPECIALL THANKS:\nBroFar(inspired me to make this app), SAN(tested an app), my subscribers(waited 'til this app has been published), you(used this app & read its code).", "як користуватись encrypter?\n\t1.введіть текст у поле вводу 1\n\t2.виберіть алгоритм шифрування\n\t3.оберіть режим роботи;\n\t4.введіть текст у поле вводу 2\n\t5.двічі натисніть на назву алгоритму шифрування\n\t6.користуйтесь\n!для зміни мови шифрування торкніться 1шої пари стрілок, для зміни алгоритму шифрування-2гої пари стрілок.ддя зміни мови додатку двічі торкніться елементу, що відображає поточну мову шифрування.\nПОДЯКИ:\n\tBroFar(надихнув мене на створення цього застосунку), SAN(тестував цей застосунок), мої підписники(чекали, доки цей застосунок буде опублікований), ви(користувались застосунком і читали його код)", "как пользоваться encrypter\n\t1.введите текст в поле ввода 1\n\t2.выберите алгоритм шифрования\n\t3.выберите его режим работы\n\t4.введите текст в поле ввода 2\n\t5.дважды нажмите на название алгоритм шифрования\n\t6.пользуйтесь.\n!коснитесь 2ой пары стрелок для смены алгоритма шифрования\nдля смены языка шифрования используйте 1ю пару стрелок, для смены языка приложения дважды коснитесь элемента, отображающего текущий язык.\n БЛАГОДАРНОСТИ\n\tBroFar(вдохновил меня на создания приложения), SAN(тестировал приложение), мои подписчики(ждали момента выхода приложения), вы(пользовались приложением и читали его код)" ], input1txt: [ ["enter plaintext in english", "enter plaintext in ukrainian", "enter plaintext in russian"], ["введіть початковий текст англійською", "введіть початковий текст українською", "введіть початковий текст російською"], ["введите исходный текст на английском", "введите исходный текст на украинском", "введите исходный текст на русском"] ], input2txt: [ ["don\'t enter anything", "enter integer greater or equal 0", "enter set of english letters", "don\'t enter anything"], ["нічого не вводьте", "введіть ціле число більше чи рівне 0", "введіть набір українських літер", "нічого не вводьте"], ["ничего не вводите", "введите целое число большее или равное 0", "введите набор русских букв", "ничего не вводите"] ], LangNames: [ ["english", "ukrainian", "russian"], ["англійська", "українська", "російська"], ["английский", "украинский", "русский"] ] } function clearGreeting() { if(touchCnt < 2) touchCnt++ if(touchCnt == 2) { if(cont.html() == "touch twice to continue" || cont.html() == "touch twice to continue|") { type(cont, true, 0, "touch twice to continue", 20, false, true) setTimeout( () => { type(introtxt, true, 0, "encrypter", 20, false, true) }, 360) isLoading = true//turn isLoading flag to true in order to begin adding elements and its properties(texts, event listeners) setup() } } } function setup() { if(isLoading) { //turn isLoading flag to false in order to prevent calling fuction printElems() when elements are appearing or have appeared isLoading = false delay = 585 var elemPos = 0 //6=padding left, setTimeout( () => { addElem("body", appdata.elements, appdata.elementsNames[langSelector], 0, /*array 1 has: x & y coordinates of elements(x measured in px, y - in % from window height; names length of cypher algorithms (CypherAlgNames[][]) to center elements that placed by appropriate index. used: w/100*value1 to convert x value from px to % from window width, (w-text[langSelector][position]-value2)/2 to center element on axis x according to element's content, padding amount, border width, spaces between symbols of element's content*/ [ [7*w/100, 8], [ (w*96/100-12*appdata.LangNames[langSelector][1].length-6)/2, 8], [93*w/100-54, 8],//54=button's ">>" width [7*w/100, 19], [7*w/100, 36], [ (w*96/100-12*appdata.CypherAlgNames[langSelector][2].length-2)/2, 36], [93*w/100-54, 36], [ (w*96/100-12*appdata.invertorModeNames[langSelector][0].length)/2 , 47], [7*w/100, 58], [7*w/100, 75], [7*w/100, 92] ], //array 2 has indexes of elements with pre-set width, array 3 - values of width of element that placed by appropriate index [1, 3, 5, 7, 8, 9, 10], 0, [ (11.4*appdata.LangNames[langSelector][1].length)/w*96, 78, (11.4*appdata.CypherAlgNames[langSelector][2].length)/w*96, (12*appdata.invertorModeNames[langSelector][0].length)/w*96, 78, 78, 81 ]) }, delay) for(let w of appdata.elementsNames[langSelector]) delay += w.length * 15 setTimeout(addControls, delay) } } //adding event listeners for interactive using jquery selector function addControls() { var pos = 0, invState = 0, msgOCnt = 0 $("#prev").on("touchend", () => { var delay1 = clearName ("#shift", false, pos, appdata.input2txt[langSelector]) delay = clearName ("#setAlgorithm", true, pos, appdata.CypherAlgNames[langSelector]) pos=(pos-- > 0) ? pos : 3 setName("#setAlgorithm", true, pos, appdata.CypherAlgNames[langSelector], delay) setName("#shift", false, pos, appdata.input2txt[langSelector], delay1) addGlow("#prev") }) $("#next").on("touchend", () =>{ var delay1 = clearName ("#shift", false, pos, appdata.input2txt[langSelector]) delay = clearName ("#setAlgorithm", true, pos, appdata.CypherAlgNames[langSelector]) pos = (++pos) % 4 setName("#setAlgorithm", true, pos, appdata.CypherAlgNames[langSelector], delay) setName("#shift", false, pos, appdata.input2txt[langSelector], delay1) addGlow("#next") }) $("#prevLang").on("touchend", () =>{ var delay1 = clearName ("#i", false, langSelector1, appdata.input1txt[langSelector]) delay=clearName ("#setLang", true, langSelector1, appdata.LangNames[langSelector]) langSelector1 = (langSelector1-- > 0) ? langSelector1 : 2 setName("#setLang", true, langSelector1, appdata.LangNames[langSelector], delay) setName("#i", false, langSelector1, appdata.input1txt[langSelector], delay1) addGlow("#prevLang") }) $("#nextLang").on("touchend", ()=>{ var delay1=clearName ("#i", false, langSelector1, appdata.input1txt[langSelector]) delay=clearName ("#setLang", true, langSelector1, appdata.LangNames[langSelector]) langSelector1=(++langSelector1) % 3 setName("#setLang", true, langSelector1, appdata.LangNames[langSelector], delay) setName("#i", false, langSelector1, appdata.input1txt[langSelector], delay1) addGlow("#nextLang") }) $("#invertor").on("touchend", () =>{ delay = clearName ("#invertor", true, invState, appdata.invertorModeNames[langSelector]) invState = (invState == 0) ? 1 : 0 setName("#invertor", true, invState, appdata.invertorModeNames[langSelector], delay) addGlow("#invertor") }) $("#additInfo").on("touchend", () =>{ alert(appdata.msgText[langSelector]) }) $("#setAlgorithm").on("dblclick", function acceptEncAlg() { //if both inputs passed checkout, call Process() function(cause output isn't a textarea, set notTextBox flag to true) if( checkInput("#i", alph[langSelector1], nums, syms, pos) && checkInput("#shift", alph[langSelector1], nums, syms, pos) ) { type($("#o"), true, langSelector1, Process(pos, invState, $("#shift").val(), alph[langSelector1], nums, syms, $("#i").val() ), 15, true, false) } addGlow("#setAlgorithm") }) $("#i").focus( () => { $("#i").addClass("taGlow") }) $("#i").blur( () => { $("#i").removeClass("taGlow") }) $("#shift").focus( () => { $("#shift").addClass("taGlow") }) $("#shift").blur( () => { $("#shift").removeClass("taGlow") }) //adding class glowBox to buttons. class triggers by click, & deletes within 0.25 ms in order to call it every time if any of buttons has been pressed function addGlow(id) { $(id).addClass("boxGlow") setTimeout( () => { $(id).removeClass("boxGlow") }, 500) } //off all event listeners, set delay=0, call function removeNReload() that deletes & refreshes elements $("#setLang").on("dblclick", function controlsOff() { $("#additInfo").off("touchend") $("#invertor").off("touchend") $("#next").off("touchend") $("#setAlgorithm").off("dblclick") $("#prev").off("touchend") $("#nextLang").off("touchend") $("#setLang").off("dblclick") $("#prevLang").off("touchend") addGlow("#setLang") langSelector = langSelector1 delay = 0 removeNReloadElems( ["#prevLang", "#setLang", "#nextLang", "#i", "#prev", "#setAlgorithm", "#next", "#invertor" ,"#shift", "#o","#additInfo"], 10) }) } //set function clearGreeting() as click event listener(to start setting elements by click/touch on screen) window.ontouchend = window.onclickup = clearGreeting })

APP | encrypter 1.1