From 939dc0cb3d4a62e6960710503f40f4fd4ee6e1c7 Mon Sep 17 00:00:00 2001 From: kelvinsekx Date: Sat, 27 Feb 2021 04:33:03 +0100 Subject: [PATCH] l--update --- .github/CONTRIBUTING.md | 11 +++++++--- README.md | 6 +++--- assets/demo.js | 8 +------- debug.log | 1 + index.html | 10 ++------- library/letterloading.js | 2 +- library/letterloading.js.map | 2 +- public/styles.css | 10 +++++++++ src/defaults.js | 5 +++++ src/letterloading.js | 40 +++++++++++++++++++++--------------- src/loadinitializer.js | 12 ++++------- 11 files changed, 59 insertions(+), 48 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 381a141..335cd3e 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -13,7 +13,7 @@ git clone ... cd letterloading ``` -- Install all required dependencies. But before you do, ensure node is installed on your PC. OK +- Install all required dependencies. But before you do, ensure node is installed on your PC. OK ? ``` npm install @@ -26,8 +26,13 @@ Start breaking the library, npm start ``` -## If you just added some cool stuff, or just deducted some ugly stuff +## If you just added some cool stuff, or deducted some ugly stuff +- check out your stuff on your browser firstly, by using -- Create a repo and add the new letterloading +`npm run build` + +on your terminal. Then try to see the resulting changes on your devserver. + +- If you've done the above, YAY!!! You can now create a repo and add the new letterloading - Tell us you made some cool stuff as clear as possible - We will love your contributions diff --git a/README.md b/README.md index 1062702..df8a25c 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ LetterLoading js is a javascript library for making awesome letter simulations. # Core concepts of LetterLoading. - **flexibility:** -This is because it is intended from ground up to do than just loading letter simulation. It could be extended to achieve even more animation simulation. +This is because it is intended from ground up to do than just loading letter simulation. It could be extended to achieve even more animation simulation (this feature is currently work in progress). - **robustness:** LetterLoading gives you the possibility to break it and achieve even more simulation. @@ -14,7 +14,7 @@ LetterLoading gives you the possibility to break it and achieve even more simula You can use LetterLoading as a - script tag from CDN ``` -https://unpkg.com/letterloading@1.0.2/library/letterloading.js +https://unpkg.com/letterloading@1.0.3/library/letterloading.js ``` - install from NPM @@ -80,7 +80,7 @@ export default LetterLoader; The purpose of LetterLoading Library is to make minimal and yet robust imaginative animations and simulations to letters or strings. -We aim to provide ready to use library to provide all sort of letter animations. Therefore, to achieve this big aims your contribution is always welcomed. We are open source. +We aim to provide ready to use library to provide all sort of letter animations. But this is work in progress and the plan may seem slow for now. However, to achieve these big aims your contribution is always welcomed. We are open source. Read below to learn how you can be a part of improving LetterLoading js. diff --git a/assets/demo.js b/assets/demo.js index 8a43c90..10330eb 100644 --- a/assets/demo.js +++ b/assets/demo.js @@ -1,12 +1,6 @@ document.addEventListener('DOMContentLoaded', function() { //console.log(letter) var letter = new LetterLoading('#main', { - strings: [ - "You're lovely... yes you are", - "This is an example string", - "tell me about what more animation you love", - "Lastly, Hey, if you're Bukunmi, I love you" - ], loadspeed: 5 }); @@ -50,7 +44,7 @@ var letter = new LetterLoading('#main', { var letter5 = new LetterLoading('#main5', { strings: [ "Do this...", - "..with cautions", + "with caution", ], loadspeed: 3, hideChaar: false, diff --git a/debug.log b/debug.log index 0142f06..e996db0 100644 --- a/debug.log +++ b/debug.log @@ -1,3 +1,4 @@ [1026/074911.818:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) [1027/161142.979:ERROR:file_io.cc(135)] WriteFile: The pipe is being closed. (0xE8) [1030/062727.343:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) +[1101/140324.004:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) diff --git a/index.html b/index.html index 717632f..1eb0a01 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,6 @@

Default Letter Loading Simulation (loop is set to true by default )

             var letter = new LetterLoading('#main', {
-              strings: [
-                "You're lovely... yes you are",
-                "This is an example string",
-                "tell me about what more animation you love",
-                "Lastly, Hey, if you're Bukunmi, I love you"
-              ],
               loadspeed: 5
             });
@@ -97,7 +91,7 @@

You can make your char visible even

Check out

-
+ 

             var letter4 = new LetterLoading('#main5', {
@@ -116,7 +110,7 @@ 
 Check out
diff --git a/library/letterloading.js b/library/letterloading.js index 70e2d47..c5f8702 100644 --- a/library/letterloading.js +++ b/library/letterloading.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.LetterLoading=e():t.LetterLoading=e()}(this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o}));var r={loadspeed:9,char:"-",hideChaar:!0,delay:2500,loop:!0,randomizeEl:!0};let i=new class{load(t,e,n){t.el="string"==typeof e?document.querySelector(e):e,t.options={...r,...n},t.initialElContent=t.el.textContent,t.loadSpeed=t.options.loadspeed,t.defaultSpeed=t.options.loadspeed,t.loop=t.options.loop,t.strings=t.options.strings.map(t=>t.trim()),t.currentStrPos=0,t.randomizeEl=t.options.randomizeEl,t._shuffle=!1,t.currentString,t.randomEl,t.char=t.options.char,t.hideChar=t.options.hideChaar,t.ArrayIndex=0,t.delayAnime=500,t.delay=t.options.delay,t.sequence=[];for(let e in t.strings)t.sequence[e]=e;this.appendCsstoHead(t),this.hideCharByForce(t)}hideCharByForce(t){t.hideChar&&(t.char=`${t.char}`)}appendCsstoHead(t){if(!t.hideChar)return;if(document.querySelector("[data-hide]"))return;let e=document.createElement("style");e.type="text/css",e.setAttribute("data-hide",!0);let n="";t.hideChar&&(n+="\n .data-hide{\n opacity: 0;}"),0!==e.length&&(e.innerHTML=n,document.body.appendChild(e))}};class o{constructor(t,e){i.load(this,t,e),this.beginAnimation()}destroy(){this.reset(!1)}reset(t=!0){clearInterval(this.timeout),this.insertText(""),this.currentStrPos=0,this.ArrayIndex=0}beginAnimation(){this.timeout=setTimeout(()=>{this.randomMize(),this.beginAnime(this.currentStrPos,this.strings[this.ArrayIndex])},this.delayAnime)}beginAnime(t,e,n=[]){this.currentString=e,this.random(),this.startFetching(t,e,n)}startFetching(t,e,n){t>=.7*e.length?this.loadSpeed=this.loadSpeed-.5*this.loadSpeed:(t>=.4*e.length||t>=.2*e.length)&&(this.loadSpeed=this.loadSpeed-.2*this.loadSpeed);const r=this.humanize(this.loadSpeed);if(0===Object.keys(n).length&&(n=this.getSudoStringArray(e.length,this.char)),t>e.length-1)if(this.ArrayIndex++,this.currentStrPos=0,this.loadSpeed=this.defaultSpeed,this.ArrayIndex===this.strings.length){if(!this.loop)return;this.ArrayIndex=0,this.timeout=setTimeout(()=>{this.beginAnimation()},this.delay)}else this.timeout=setTimeout(()=>{this.beginAnime(this.currentStrPos,this.strings[this.ArrayIndex])},this.delay);else t++,this.timeout=setTimeout(()=>{this.doAnime(n,t)},r)}doAnime(t,e){t[this.randomEl[e-1]]=this.currentString[this.randomEl[e-1]];let n=t.join("");this.insertText(n),this.startFetching(e,this.currentString,t)}getSudoStringArray(t,e){let n=[];for(let r=0;rMath.random()-.5):this.randomEl=t}humanize(t){return Math.round(Math.random()*(100*t)/2)+100*t}insertText(t){this.el.innerHTML=t}randomMize(){this._shuffle&&(this.sequence=this.sequence.sort(()=>Math.random()-.5))}}}]).default})); +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.LetterLoading=e():t.LetterLoading=e()}(this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o}));var r={strings:["hey lovely,","use your own string...","abi you no go use am"],loadspeed:9,char:"-",hideChaar:!0,delay:2500,loop:!0,randomizeEl:!0};let i=new class{load(t,e,n){t.el=document.querySelector(e)||e,t.options={...r,...n},t.initialElContent=t.el.textContent,t.loadSpeed=t.options.loadspeed,t.defaultSpeed=t.options.loadspeed,t.loop=t.options.loop,t.strings=t.options.strings.map(t=>t.trim()),t.currentStrPos=0,t.randomizeEl=t.options.randomizeEl,t._shuffle=!1,t.currentString,t.randomEl,t.char=t.options.char,t.hideChar=t.options.hideChaar,t.ArrayIndex=0,t.delayAnime=500,t.delay=t.options.delay,t.sequence=[];for(let e in t.strings)t.sequence[e]=e;this.appendCsstoHead(t),this.hideCharByForce(t)}hideCharByForce(t){t.hideChar&&(t.char=`${t.char}`)}appendCsstoHead(t){if(!t.hideChar)return;if(document.querySelector("[data-hide]"))return;let e=document.createElement("style");e.type="text/css",e.setAttribute("data-hide",!0);let n="";t.hideChar&&(n+="\n .data-hide{\n opacity: 0;}"),0!==e.length&&(e.innerHTML=n,document.body.appendChild(e))}};class o{constructor(t,e){i.load(this,t,e),this.beginAnimation()}destroy(){this.reset(!1)}reset(t=!0){clearInterval(this.timeout),this.insertText(""),this.currentStrPos=0,this.ArrayIndex=0}beginAnimation(){this.timeout=setTimeout(()=>{this.randomMize(),this.beginAnime(this.currentStrPos,this.strings[this.ArrayIndex])},this.delayAnime)}beginAnime(t,e,n=[]){this.currentString=e,this.random(),this.startFetching(t,e,n)}startFetching(t,e,n){t>=.7*e.length?this.loadSpeed=this.loadSpeed-.5*this.loadSpeed:(t>=.4*e.length||t>=.2*e.length)&&(this.loadSpeed=this.loadSpeed-.2*this.loadSpeed);const r=this.humanize(this.loadSpeed);if(0===Object.keys(n).length&&(n=this.getSudoStringArray(e.length,this.char)),t>e.length-1)if(this.ArrayIndex++,this.currentStrPos=0,this.loadSpeed=this.defaultSpeed,this.ArrayIndex===this.strings.length){if(!this.loop)return;this.ArrayIndex=0,this.timeout=setTimeout(()=>{this.beginAnimation()},this.delay)}else this.timeout=setTimeout(()=>{this.beginAnime(this.currentStrPos,this.strings[this.ArrayIndex])},this.delay);else t++,this.timeout=setTimeout(()=>{this.doAnime(n,t)},r)}doAnime(t,e){t[this.randomEl[e-1]]=this.currentString[this.randomEl[e-1]];let n=t.join("");this.insertText(n),this.startFetching(e,this.currentString,t)}getSudoStringArray(t,e){let n,r=[];for(n=0;nMath.random()-.5):this.randomEl=t}humanize(t){return Math.round(Math.random()*(100*t)/2)+100*t}insertText(t){this.el.innerHTML=t}randomMize(){this._shuffle&&(this.sequence=this.sequence.sort(()=>Math.random()-.5))}}}]).default})); //# sourceMappingURL=letterloading.js.map \ No newline at end of file diff --git a/library/letterloading.js.map b/library/letterloading.js.map index 2f6893b..c35ee9c 100644 --- a/library/letterloading.js.map +++ b/library/letterloading.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://LetterLoading/webpack/universalModuleDefinition","webpack://LetterLoading/webpack/bootstrap","webpack://LetterLoading/./src/defaults.js","webpack://LetterLoading/./src/loadinitializer.js","webpack://LetterLoading/./src/letterloading.js"],"names":["root","factory","exports","module","define","amd","this","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","defaults","loadspeed","char","hideChaar","delay","loop","randomizeEl","loadinitializer","load","self","el","options","document","querySelector","initialElContent","textContent","loadSpeed","defaultSpeed","strings","map","string","trim","currentStrPos","_shuffle","currentString","randomEl","hideChar","ArrayIndex","delayAnime","sequence","appendCsstoHead","hideCharByForce","css","createElement","type","setAttribute","innerCss","length","innerHTML","body","appendChild","LetterLoading","constructor","beginAnimation","destroy","reset","restart","clearInterval","timeout","insertText","setTimeout","randomMize","beginAnime","curr","str","random","startFetching","humanize","keys","getSudoStringArray","doAnime","newstr","join","initialArrayContent","push","getStringKeysIntoArray","stringlength","sort","Math","speed","round"],"mappings":"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","file":"letterloading.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"LetterLoading\"] = factory();\n\telse\n\t\troot[\"LetterLoading\"] = factory();\n})(this, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const defaults = {\r\n loadspeed: 9,\r\n char: \"-\",\r\n hideChaar: true,\r\n delay: 2500,\r\n loop: true,\r\n randomizeEl: true,\r\n};\r\n\r\nexport default defaults;\r\n","import defaults from \"./defaults.js\";\r\n\r\nexport default class LoadInitializer {\r\n load(self, el, options) {\r\n \r\n if (typeof el === \"string\") {\r\n self.el= document.querySelector(el)\r\n } else {\r\n self.el = el\r\n }\r\n \r\n // make options from default s and the rest\r\n self.options = { ...defaults, ...options };\r\n\r\n self.initialElContent = self.el.textContent;\r\n\r\n //loading speed\r\n self.loadSpeed = self.options.loadspeed;\r\n\r\n // generate default speed\r\n self.defaultSpeed = self.options.loadspeed;\r\n\r\n //loop\r\n self.loop = self.options.loop;\r\n\r\n // strings\r\n // then remove the space infront and back...\r\n // it is needed for us to make better string num \r\n // calculations\r\n self.strings = self.options.strings.map((string)=> string.trim());\r\n\r\n //current string position\r\n self.currentStrPos = 0;\r\n\r\n // tell if to randomize letters or not\r\n self.randomizeEl = self.options.randomizeEl\r\n\r\n //default shuffling\r\n self._shuffle = false;\r\n\r\n // bind currentString\r\n self.currentString;\r\n\r\n // get randomelement\r\n self.randomEl;\r\n\r\n // hidden char to fill space\r\n self.char = self.options.char;\r\n\r\n //if hide char\r\n self.hideChar = self.options.hideChaar;\r\n\r\n // array index\r\n self.ArrayIndex = 0;\r\n\r\n // set time to wait before rendering animation to DOM\r\n self.delayAnime = 500\r\n\r\n // delay before continuing to loop over string\r\n self.delay = self.options.delay;\r\n\r\n // stringlength\r\n // get order in which strings appeared in array\r\n self.sequence = [];\r\n for (let i in self.strings) {\r\n self.sequence[i] = i;\r\n }\r\n this.appendCsstoHead(self);\r\n this.hideCharByForce(self);\r\n }\r\n hideCharByForce(self) {\r\n if (!self.hideChar) return;\r\n self.char = `${self.char}`;\r\n }\r\n\r\n appendCsstoHead(self) {\r\n const cssname = \"data-hide\";\r\n\r\n if (!self.hideChar) {\r\n return;\r\n }\r\n if (document.querySelector(`[${cssname}]`)) {\r\n return;\r\n }\r\n\r\n let css = document.createElement(\"style\");\r\n css.type = \"text/css\";\r\n css.setAttribute(cssname, true);\r\n\r\n let innerCss = \"\";\r\n\r\n if (self.hideChar) {\r\n innerCss += `\r\n .data-hide{\r\n opacity: 0;}`;\r\n }\r\n\r\n if (css.length === 0) {\r\n return;\r\n }\r\n css.innerHTML = innerCss;\r\n document.body.appendChild(css);\r\n }\r\n \r\n \r\n}\r\n\r\nexport let loadinitializer = new LoadInitializer();\r\n","import { loadinitializer } from \"./loadinitializer.js\";\r\n\r\n/**\r\n * Hey, tell me you love to simulate letter loading...\r\n *\r\n * @param {string} el, this can be an HMTL element ID or element\r\n * @param {object} options options is an object that has some of the requirements. Check './defaults.js' to learn more\r\n * @returns {object} a new LetterLoading object\r\n */\r\nexport default class LetterLoading {\r\n // construct --- no construct\r\n constructor(el, options) {\r\n // initial required params --- load methos available in loadinitializer\r\n loadinitializer.load(this, el, options);\r\n\r\n // this methos begins the letter loading simulation\r\n this.beginAnimation();\r\n }\r\n\r\n destroy() {\r\n this.reset(false);\r\n //this.options.onDestroy(this);\r\n }\r\n\r\n reset(restart = true) {\r\n clearInterval(this.timeout);\r\n this.insertText(\"\");\r\n this.currentStrPos = 0;\r\n this.ArrayIndex = 0;\r\n }\r\n\r\n beginAnimation() {\r\n // ....WELCOME, wait for half a sec before starting animation -- wait sec is set as\r\n // @param: delayAnime\r\n this.timeout = setTimeout(() => {\r\n // get a random string from options.STRINGS array if _shuffle is true\r\n this.randomMize();\r\n this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]);\r\n }, this.delayAnime);\r\n }\r\n\r\n beginAnime(i, curr, str = []) {\r\n // set this.currentString to the passed string args\r\n this.currentString = curr;\r\n // creates a randomArray element usable to suff our strings if told to do so\r\n this.random();\r\n // start fetching letters\r\n this.startFetching(i, curr, str);\r\n }\r\n\r\n startFetching(i, curr, str) {\r\n // increase the speed at some point\r\n // if string reaches 20%,40% and 70% decrease speed by 20% consecutively\r\n if(i >= (0.70*curr.length)){\r\n this.loadSpeed = (this.loadSpeed - (0.50*this.loadSpeed));\r\n }else if (i >= (0.40 * curr.length)){\r\n this.loadSpeed = (this.loadSpeed-(0.20*this.loadSpeed));\r\n }else if (i >= (0.20 * curr.length)){\r\n this.loadSpeed = (this.loadSpeed-(0.20*this.loadSpeed));\r\n }\r\n \r\n\r\n // make a simulating speed\r\n const humanize = this.humanize(this.loadSpeed);\r\n // check state if its empty\r\n if (Object.keys(str).length === 0)\r\n str = this.getSudoStringArray(curr.length, this.char);\r\n\r\n // if our letter index is last in the immediate string,\r\n if (i > curr.length - 1) {\r\n this.ArrayIndex++;\r\n this.currentStrPos = 0;\r\n this.loadSpeed = this.defaultSpeed;\r\n // check if the string is the last string\r\n if (this.ArrayIndex === this.strings.length) {\r\n // if loop is set to false, stop animation\r\n if (!this.loop) return;\r\n // else continue\r\n this.ArrayIndex = 0;\r\n this.timeout = setTimeout(() => {\r\n this.beginAnimation();\r\n }, this.delay);\r\n // if it is not the last string, just do the next animation with the next string\r\n } else {\r\n this.timeout = setTimeout(() => {\r\n // begin animation again\r\n this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]);\r\n }, this.delay);\r\n }//if there are other letters, move to the next letter in string\r\n } else {\r\n i++;\r\n\r\n this.timeout = setTimeout(() => {\r\n // add animations\r\n this.doAnime(str, i);\r\n }, humanize);\r\n }\r\n }\r\n\r\n doAnime(str, i) {\r\n str[this.randomEl[i - 1]] = this.currentString[this.randomEl[i - 1]];\r\n let newstr = str.join(\"\");\r\n this.insertText(newstr);\r\n this.startFetching(i, this.currentString, str);\r\n }\r\n\r\n getSudoStringArray(length, char) {\r\n let initialArrayContent = [];\r\n for (let i = 0; i < length; i++) {\r\n initialArrayContent.push(char);\r\n }\r\n return initialArrayContent;\r\n }\r\n\r\n getStringKeysIntoArray(stringlength) {\r\n let strings = [];\r\n for (let i = 0; i < stringlength; i++) {\r\n strings.push(i);\r\n }\r\n return strings;\r\n }\r\n\r\n random() {\r\n const randomEl = this.getStringKeysIntoArray(this.currentString.length);\r\n if(this.randomizeEl){\r\n this.randomEl = randomEl.sort(() => Math.random() - 0.5);\r\n return;\r\n }\r\n this.randomEl = randomEl\r\n }\r\n\r\n humanize(speed) {\r\n return Math.round((Math.random() * (speed * 100)) / 2) + speed * 100;\r\n }\r\n\r\n insertText(str) {\r\n this.el.innerHTML = str;\r\n }\r\n\r\n randomMize() {\r\n if (!this._shuffle) return;\r\n this.sequence = this.sequence.sort(() => Math.random() - 0.5);\r\n }\r\n}\r\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://LetterLoading/webpack/universalModuleDefinition","webpack://LetterLoading/webpack/bootstrap","webpack://LetterLoading/./src/defaults.js","webpack://LetterLoading/./src/loadinitializer.js","webpack://LetterLoading/./src/letterloading.js"],"names":["root","factory","exports","module","define","amd","this","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","defaults","strings","loadspeed","char","hideChaar","delay","loop","randomizeEl","initializer","load","self","el","options","document","querySelector","initialElContent","textContent","loadSpeed","defaultSpeed","map","string","trim","currentStrPos","_shuffle","currentString","randomEl","hideChar","ArrayIndex","delayAnime","sequence","appendCsstoHead","hideCharByForce","css","createElement","type","setAttribute","innerCss","length","innerHTML","body","appendChild","LetterLoading","constructor","beginAnimation","destroy","reset","restart","clearInterval","timeout","insertText","setTimeout","randomMize","beginAnime","curr","str","random","startFetching","humanize","keys","getSudoStringArray","doAnime","newstr","join","sudoContentInArray","push","getStringKeysIntoArray","stringlength","sort","Math","speed","round"],"mappings":"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","file":"letterloading.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"LetterLoading\"] = factory();\n\telse\n\t\troot[\"LetterLoading\"] = factory();\n})(this, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const defaults = {\r\n strings: [\r\n \"hey lovely,\",\r\n \"use your own string...\",\r\n \"abi you no go use am\"\r\n ],\r\n loadspeed: 9,\r\n char: \"-\",\r\n hideChaar: true,\r\n delay: 2500,\r\n loop: true,\r\n randomizeEl: true,\r\n};\r\n\r\nexport default defaults;\r\n","import defaults from \"./defaults.js\";\r\n\r\nexport default class LoadInitializer {\r\n load(self, el, options) {\r\n // node\r\n self.el = (document.querySelector(el) || el)\r\n \r\n // make new options from defaults and the rest\r\n self.options = { ...defaults, ...options };\r\n\r\n self.initialElContent = self.el.textContent;\r\n\r\n //loading speed\r\n self.loadSpeed = self.options.loadspeed;\r\n\r\n // generate default speed\r\n self.defaultSpeed = self.options.loadspeed;\r\n\r\n //loop\r\n self.loop = self.options.loop;\r\n\r\n // strings\r\n // then remove the space infront and back...\r\n // it is needed for us to make better string num \r\n // calculations\r\n self.strings = self.options.strings.map((string)=> string.trim());\r\n\r\n //current string position\r\n self.currentStrPos = 0;\r\n\r\n // tell if to randomize letters or not\r\n self.randomizeEl = self.options.randomizeEl\r\n\r\n //default shuffling\r\n self._shuffle = false;\r\n\r\n // bind currentString\r\n self.currentString;\r\n\r\n // get randomelement\r\n self.randomEl;\r\n\r\n // hidden char to fill space\r\n self.char = self.options.char;\r\n\r\n //if hide char\r\n self.hideChar = self.options.hideChaar;\r\n\r\n // array index\r\n self.ArrayIndex = 0;\r\n\r\n // set time to wait before rendering animation to DOM\r\n self.delayAnime = 500\r\n\r\n // delay before continuing to loop over string\r\n self.delay = self.options.delay;\r\n\r\n // stringlength\r\n // get order in which strings appeared in array\r\n self.sequence = [];\r\n for (let i in self.strings) {\r\n self.sequence[i] = i;\r\n }\r\n this.appendCsstoHead(self);\r\n this.hideCharByForce(self);\r\n }\r\n hideCharByForce(self) {\r\n if (!self.hideChar) return;\r\n self.char = `${self.char}`;\r\n }\r\n\r\n appendCsstoHead(self) {\r\n const cssname = \"data-hide\";\r\n\r\n if (!self.hideChar) {\r\n return;\r\n }\r\n if (document.querySelector(`[${cssname}]`)) {\r\n return;\r\n }\r\n\r\n let css = document.createElement(\"style\");\r\n css.type = \"text/css\";\r\n css.setAttribute(cssname, true);\r\n\r\n let innerCss = \"\";\r\n\r\n if (self.hideChar) {\r\n innerCss += `\r\n .data-hide{\r\n opacity: 0;}`;\r\n }\r\n\r\n if (css.length === 0) {\r\n return;\r\n }\r\n css.innerHTML = innerCss;\r\n document.body.appendChild(css);\r\n }\r\n \r\n \r\n}\r\n\r\nexport let initializer = new LoadInitializer();\r\n","import { initializer } from \"./loadinitializer.js\";\r\n\r\n/**\r\n * Hey, tell me you love to simulate letters loading effects...\r\n *\r\n * @param {string} el, this can be an HMTL element ID attribute or\r\n * all ready called element.\r\n * @param {object} options options is an object that has some \r\n * predefined letterloading attributes. Check './defaults.js' to learn more\r\n * @returns {object} a new LetterLoading object\r\n */\r\nexport default class LetterLoading {\r\n constructor(el, options) {\r\n // initial required params --- load methods available in loadinitializer\r\n initializer.load(this, el, options);\r\n\r\n // this method begins the letter loading simulation\r\n this.beginAnimation();\r\n }\r\n\r\n destroy() {\r\n this.reset(false);\r\n //this.options.onDestroy(this);\r\n }\r\n\r\n reset(restart = true) {\r\n clearInterval(this.timeout);\r\n this.insertText(\"\");\r\n this.currentStrPos = 0;\r\n this.ArrayIndex = 0;\r\n }\r\n\r\n beginAnimation() {\r\n // ....WELCOME, wait for half a sec before starting animation \r\n // wait second is set as delayAnime at `line 53 loadinitializer.js`\r\n this.timeout = setTimeout(() => {\r\n // get a random string from options.STRINGS array if \r\n // this.shuffle is true\r\n this.randomMize();\r\n // currentStrPos is the place of lettter in a string[, this.strings],\r\n // this.strings[, this.ArrayIndex] is the string you want to animate\r\n this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]);\r\n }, this.delayAnime);\r\n }\r\n\r\n beginAnime(i, curr, str = []) {\r\n // set this.currentString to the passed string args\r\n this.currentString = curr;\r\n // creates a randomArray element usable to suff our strings if told to do so\r\n this.random();\r\n // start fetching letters\r\n this.startFetching(i, curr, str);\r\n }\r\n\r\n startFetching(i, curr, str) {\r\n // increase the speed at some point\r\n // if string reaches 20%, 40% and 70% increase speed by 20% consecutively\r\n if(i >= (0.70*curr.length)){\r\n this.loadSpeed = (this.loadSpeed - (0.50*this.loadSpeed));\r\n }else if (i >= (0.40 * curr.length)){\r\n this.loadSpeed = (this.loadSpeed-(0.20*this.loadSpeed));\r\n }else if (i >= (0.20 * curr.length)){\r\n this.loadSpeed = (this.loadSpeed-(0.20*this.loadSpeed));\r\n }\r\n \r\n\r\n // make a simulating speed\r\n const humanize = this.humanize(this.loadSpeed);\r\n // check state if its empty\r\n if (Object.keys(str).length === 0)\r\n str = this.getSudoStringArray(curr.length, this.char);\r\n\r\n /** if our letter index is last in the immediate string,*/\r\n if (i > curr.length - 1) {\r\n this.ArrayIndex++;\r\n this.currentStrPos = 0;\r\n this.loadSpeed = this.defaultSpeed;\r\n // check if the string is the last string\r\n if (this.ArrayIndex === this.strings.length) {\r\n // if loop is set to false, stop animation\r\n if (!this.loop) return;\r\n // else continue\r\n this.ArrayIndex = 0;\r\n this.timeout = setTimeout(() => {\r\n this.beginAnimation();\r\n }, this.delay);\r\n // if it is not the last string, just do the next animation with the next string\r\n } else {\r\n this.timeout = setTimeout(() => {\r\n // begin animation again\r\n this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]);\r\n }, this.delay);\r\n }//if there are other letters, move to the next letter in string\r\n } else {\r\n i++;\r\n\r\n this.timeout = setTimeout(() => {\r\n // add animations\r\n this.doAnime(str, i);\r\n }, humanize);\r\n }\r\n }\r\n\r\n doAnime(str, i) {\r\n str[this.randomEl[i - 1]] = this.currentString[this.randomEl[i - 1]];\r\n let newstr = str.join(\"\");\r\n this.insertText(newstr);\r\n this.startFetching(i, this.currentString, str);\r\n }\r\n\r\n // this method helps us to create a replica number of string character\r\n // but in a sudo form.\r\n getSudoStringArray(length, char) {\r\n let sudoContentInArray = [], i;\r\n for ( i = 0; i < length; i++) {\r\n sudoContentInArray.push(char);\r\n }\r\n return sudoContentInArray;\r\n }\r\n\r\n getStringKeysIntoArray(stringlength) {\r\n let strings = [];\r\n for (let i = 0; i < stringlength; i++) {\r\n strings.push(i);\r\n }\r\n return strings;\r\n }\r\n\r\n random() {\r\n const randomEl = this.getStringKeysIntoArray(this.currentString.length);\r\n if(this.randomizeEl){\r\n this.randomEl = randomEl.sort(() => Math.random() - 0.5);\r\n return;\r\n }\r\n this.randomEl = randomEl\r\n }\r\n\r\n humanize(speed) {\r\n return Math.round((Math.random() * (speed * 100)) / 2) + speed * 100;\r\n }\r\n\r\n insertText(str) {\r\n this.el.innerHTML = str;\r\n }\r\n\r\n randomMize() {\r\n if (!this._shuffle) return;\r\n this.sequence = this.sequence.sort(() => Math.random() - 0.5);\r\n }\r\n}\r\n"],"sourceRoot":""} \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 1b21104..eb0505f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -5,6 +5,7 @@ div { padding: 0; box-sizing: border-box; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 105%; } #container { @@ -39,6 +40,15 @@ section { font-weight: bolder; } +.loadingPalete_spec{ + background-color: rgba(129, 224, 224,0.3); + width: 100%; + min-height: 6rem; + border-radius: 1.2rem; + padding: 0.3em 2rem; + font-weight: bolder; +} + footer>p{ font-size: 0.8em; border-top: 1px solid rgba(107, 102, 102, 0.3); diff --git a/src/defaults.js b/src/defaults.js index ae09d9c..54fd5b1 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -1,4 +1,9 @@ const defaults = { + strings: [ + "hey lovely,", + "use your own string...", + "abi you no go use am" + ], loadspeed: 9, char: "-", hideChaar: true, diff --git a/src/letterloading.js b/src/letterloading.js index ce460cd..dbb3e0b 100644 --- a/src/letterloading.js +++ b/src/letterloading.js @@ -1,19 +1,20 @@ -import { loadinitializer } from "./loadinitializer.js"; +import { initializer } from "./loadinitializer.js"; /** - * Hey, tell me you love to simulate letter loading... + * Hey, tell me you love to simulate letters loading effects... * - * @param {string} el, this can be an HMTL element ID or element - * @param {object} options options is an object that has some of the requirements. Check './defaults.js' to learn more + * @param {string} el, this can be an HMTL element ID attribute or + * all ready called element. + * @param {object} options options is an object that has some + * predefined letterloading attributes. Check './defaults.js' to learn more * @returns {object} a new LetterLoading object */ export default class LetterLoading { - // construct --- no construct constructor(el, options) { - // initial required params --- load methos available in loadinitializer - loadinitializer.load(this, el, options); + // initial required params --- load methods available in loadinitializer + initializer.load(this, el, options); - // this methos begins the letter loading simulation + // this method begins the letter loading simulation this.beginAnimation(); } @@ -30,11 +31,14 @@ export default class LetterLoading { } beginAnimation() { - // ....WELCOME, wait for half a sec before starting animation -- wait sec is set as - // @param: delayAnime + // ....WELCOME, wait for half a sec before starting animation + // wait second is set as delayAnime at `line 53 loadinitializer.js` this.timeout = setTimeout(() => { - // get a random string from options.STRINGS array if _shuffle is true + // get a random string from options.STRINGS array if + // this.shuffle is true this.randomMize(); + // currentStrPos is the place of lettter in a string[, this.strings], + // this.strings[, this.ArrayIndex] is the string you want to animate this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]); }, this.delayAnime); } @@ -50,7 +54,7 @@ export default class LetterLoading { startFetching(i, curr, str) { // increase the speed at some point - // if string reaches 20%,40% and 70% decrease speed by 20% consecutively + // if string reaches 20%, 40% and 70% increase speed by 20% consecutively if(i >= (0.70*curr.length)){ this.loadSpeed = (this.loadSpeed - (0.50*this.loadSpeed)); }else if (i >= (0.40 * curr.length)){ @@ -66,7 +70,7 @@ export default class LetterLoading { if (Object.keys(str).length === 0) str = this.getSudoStringArray(curr.length, this.char); - // if our letter index is last in the immediate string, + /** if our letter index is last in the immediate string,*/ if (i > curr.length - 1) { this.ArrayIndex++; this.currentStrPos = 0; @@ -104,12 +108,14 @@ export default class LetterLoading { this.startFetching(i, this.currentString, str); } + // this method helps us to create a replica number of string character + // but in a sudo form. getSudoStringArray(length, char) { - let initialArrayContent = []; - for (let i = 0; i < length; i++) { - initialArrayContent.push(char); + let sudoContentInArray = [], i; + for ( i = 0; i < length; i++) { + sudoContentInArray.push(char); } - return initialArrayContent; + return sudoContentInArray; } getStringKeysIntoArray(stringlength) { diff --git a/src/loadinitializer.js b/src/loadinitializer.js index 8dc92c7..44ee73f 100644 --- a/src/loadinitializer.js +++ b/src/loadinitializer.js @@ -2,14 +2,10 @@ import defaults from "./defaults.js"; export default class LoadInitializer { load(self, el, options) { - - if (typeof el === "string") { - self.el= document.querySelector(el) - } else { - self.el = el - } + // node + self.el = (document.querySelector(el) || el) - // make options from default s and the rest + // make new options from defaults and the rest self.options = { ...defaults, ...options }; self.initialElContent = self.el.textContent; @@ -105,4 +101,4 @@ export default class LoadInitializer { } -export let loadinitializer = new LoadInitializer(); +export let initializer = new LoadInitializer();