[ { "path": ".editorconfig", "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintrc", "content": "{\n \"rules\": {\n \"comma-dangle\": [2, \"always-multiline\"],\n },\n \"extends\": [ \"standard\" ],\n \"globals\": {\n \"define\": true,\n \"describe\": true,\n \"before\": true,\n \"after\": true,\n \"it\": true,\n \"expect\": true\n },\n \"env\": {\n \"es6\": true,\n \"browser\": true,\n \"node\": true\n },\n \"ecmaFeatures\": {\n \"modules\": true\n },\n}\n" }, { "path": ".gitignore", "content": "~*\ngh-pages\nnode_modules\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - 8\nnotifications:\n slack: blivesta:ygWmRLL4fyU0s7FFlVHSsJnS\n email: false\n" }, { "path": "README.md", "content": "# Chaffle\n\n[![npm version](https://img.shields.io/npm/v/chaffle.svg?style=flat-square)](https://www.npmjs.com/package/chaffle)\n[![Build Status](https://img.shields.io/travis/blivesta/chaffle/master.svg?style=flat-square)](https://travis-ci.org/blivesta/chaffle)\n\nShuffle Characters Randomly.\n\n## Demo\n\nhttp://git.blivesta.com/chaffle/\n\n## Install\n\n```html\n\n\n\n```\n\nnpm\n\n```html\n$ npm install chaffle\n```\n\n## Usage\n\n### Markup\n\n```html\n

English

\n

日本語

\n

ひらがな

\n

カタカナ

\n

Українська

\n

中文

\n\n

\n Data options\n

\n```\n\n### Call the Chaffle\n\n```js\nconst elements = document.querySelectorAll(\"[data-chaffle]\");\nArray.prototype.forEach.call(elements, function(el) {\n const chaffle = new Chaffle(el, {\n /* options */\n });\n chaffle.init();\n});\n```\n\ne.g: mouseover\n\n```js\nimport Chaffle from \"chaffle\";\n\nconst elements = document.querySelectorAll(\"[data-chaffle]\");\nArray.prototype.forEach.call(elements, function(el) {\n const chaffle = new Chaffle(el, {\n /* options */\n });\n el.addEventListener(\"mouseover\", function() {\n chaffle.init();\n });\n});\n```\n\n## Options\n\n```html\n

\n Data options\n

\n```\n\nOR\n\n```js\nvar chaffle = new Chaffle(el, {\n lang: \"en\", // default: 'en'\n // 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua' || 'cn'\n speed: 20, // default: 20\n delay: 100 // default: 100\n});\n```\n\n## License\n\nReleased under the MIT license.\n" }, { "path": "docs/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Chaffle | Shuffle Characters Randomly.\n \n \n \n \n\n\n
\n

Chaffle.js

\n

Shuffle Characters Randomly.

\n \n

\n \n

\n
\n\n
\n\n
\n

Example: mouseover

\n\n
\n
\n

English

\n
\n\n
\n

日本語

\n
\n\n
\n

ひらがな

\n
\n\n
\n

カタカナ

\n
\n\n
\n

Українська

\n
\n\n
\n

中文

\n
\n
\n
\n\n\n
\n

Usage

\n\n \n\n
\n
\n

HTML Markup

\n
\n\n
\n \n
\n
\n\n
\n
\n

Call the Chaffle

\n
\n\n
\n \n \n
\n
\n\n
\n
\n

Options

\n
\n\n
\n \n
\n
\n\n
\n\n
\n\n \n\n\n \n\n \n\n \n \n \n \n\n\n\n" }, { "path": "karma.conf.js", "content": "module.exports = function (config) {\n config.set({\n autoWatch: true,\n browsers: ['PhantomJS'],\n frameworks: ['mocha', 'chai'],\n files: [\n 'test/fixtures/fixture.html',\n 'test/index.js',\n ],\n plugins: [\n 'karma-chai',\n 'karma-phantomjs-launcher',\n 'karma-html2js-preprocessor',\n 'karma-mocha',\n 'karma-mocha-reporter',\n 'karma-webpack',\n ],\n preprocessors: {\n 'test/fixtures/fixture.html': ['html2js'],\n 'test/index.js': ['webpack'],\n },\n proxies: {\n '/test/fixtures/': '/base/test/fixtures/',\n },\n reporters: ['mocha'],\n webpack: {\n devtool: 'inline-source-map',\n module: {\n loaders: [\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/,\n query: {\n presets: ['es2015'],\n plugins: ['babel-plugin-espower'],\n },\n },\n ],\n },\n },\n })\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"chaffle\",\n \"version\": \"2.1.0\",\n \"description\": \"Shuffle Characters Randomly.\",\n \"main\": \"src/chaffle.js\",\n \"scripts\": {\n \"dev\": \"karma start\",\n \"lint\": \"eslint ./src/chaffle.js\",\n \"minify\": \"uglifyjs ./src/chaffle.js -o ./docs/chaffle.min.js\",\n \"start\": \"npm run lint && npm run minify && npm run dev\",\n \"serve\": \"browser-sync start --server ./docs --files index.html\",\n \"test\": \"karma start --single-run\"\n },\n \"devDependencies\": {\n \"browser-sync\": \"^2.14.0\",\n \"babel-core\": \"^6.7.4\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-espower\": \"^2.1.2\",\n \"babel-preset-es2015\": \"^6.6.0\",\n \"chai\": \"^4.2.0\",\n \"eslint\": \"^6.8.0\",\n \"eslint-config-standard\": \"^5.1.0\",\n \"eslint-plugin-standard\": \"^1.3.2\",\n \"eslint-plugin-promise\": \"^1.1.0\",\n \"karma\": \"^4.4.1\",\n \"karma-chai\": \"^0.1.0\",\n \"karma-html2js-preprocessor\": \"^1.1.0\",\n \"karma-mocha\": \"^1.3.0\",\n \"karma-mocha-reporter\": \"^2.0.0\",\n \"karma-phantomjs-launcher\": \"^1.0.0\",\n \"karma-webpack\": \"^1.7.0\",\n \"mocha\": \"^7.0.0\",\n \"phantomjs-prebuilt\": \"^2.1.7\",\n \"uglify-js\": \"^3.7.4\",\n \"webpack\": \"^1.12.14\"\n },\n \"repository\": {\n \"url\": \"https://github.com/blivesta/chaffle.git\",\n \"type\": \"git\"\n },\n \"license\": \"MIT\",\n \"keywords\": [\n \"effect\"\n ],\n \"author\": {\n \"name\": \"blivesta\",\n \"url\": \"http://www.blivesta.com\"\n }\n}\n" }, { "path": "src/chaffle.js", "content": "/*!\n * Chaffle\n * Shuffle Characters Randomly.\n * http://blivesta.github.io/chaffle\n * License : MIT\n * Author : blivesta (http://blivesta.com/)\n */\n(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n define([], factory)\n } else if (typeof exports === 'object') {\n module.exports = factory()\n } else {\n root.Chaffle = factory()\n }\n})(this, function () {\n 'use strict'\n\n function extend () {\n var extended = {}\n var deep = false\n\n if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {\n deep = arguments[0]\n i++\n }\n\n function merge (obj) {\n for (var prop in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, prop)) {\n if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {\n extended[prop] = extend(true, extended[prop], obj[prop])\n } else {\n extended[prop] = obj[prop]\n }\n }\n }\n }\n\n for (var i = 0; i < arguments.length; i++) {\n var obj = arguments[i]\n merge(obj)\n }\n\n return extended\n }\n\n function Chaffle (element, options) {\n var data = {}\n var dataLang = element.getAttribute('data-chaffle')\n var dataSpeed = element.getAttribute('data-chaffle-speed')\n var dataDelay = element.getAttribute('data-chaffle-delay')\n\n if (dataLang.length !== 0) data.lang = dataLang\n if (dataSpeed !== null) data.speed = Number(dataSpeed)\n if (dataDelay !== null) data.delay = Number(dataDelay)\n\n this.options = {\n lang: 'en',\n speed: 20,\n delay: 100,\n }\n\n this.options = extend(this.options, options, data)\n this.element = element\n this.text = this.element.textContent\n this.substitution = ''\n this.state = false\n this.shuffleProps = []\n this.reinstateProps = []\n }\n\n Chaffle.prototype = {\n constructor: Chaffle,\n init: function () {\n var self = this\n\n if (self.state) return\n\n self.clearShuffleTimer()\n self.clearReinstateTimer()\n\n self.state = true\n self.substitution = ''\n self.shuffleProps = []\n self.reinstateProps = []\n\n var shuffleTimer = setInterval(function () {\n self.shuffle()\n }, self.options.speed)\n\n var reinstateTimer = setInterval(function () {\n self.reinstate()\n }, self.options.delay)\n\n self.shuffleProps = shuffleTimer\n self.reinstateProps = reinstateTimer\n },\n\n shuffle: function () {\n this.element.textContent = this.substitution\n\n var textLength = this.text.length\n var substitutionLength = this.substitution.length\n\n if ((textLength - substitutionLength) > 0) {\n for (var i = 0; i <= textLength - substitutionLength; i++) {\n this.element.textContent = this.element.textContent + this.randomStr()\n }\n } else {\n this.clearShuffleTimer()\n }\n },\n\n reinstate: function () {\n var textLength = this.text.length\n var substitutionLength = this.substitution.length\n\n if (substitutionLength < textLength) {\n this.element.textContent = this.substitution = this.text.substr(0, substitutionLength + 1)\n } else {\n this.clearReinstateTimer()\n }\n\n this.state = false\n },\n\n clearShuffleTimer: function () {\n return clearInterval(this.shuffleProps)\n },\n\n clearReinstateTimer: function () {\n return clearInterval(this.reinstateProps)\n },\n\n randomStr: function () {\n var str\n switch (this.options.lang) {\n case 'en':\n str = String.fromCharCode(33 + Math.round(Math.random() * 99))\n break\n\n case 'ja':\n str = String.fromCharCode(19968 + Math.round(Math.random() * 80))\n break\n\n case 'ja-hiragana':\n str = String.fromCharCode(12353 + Math.round(Math.random() * 85))\n break\n\n case 'ja-katakana':\n str = String.fromCharCode(12449 + Math.round(Math.random() * 85))\n break\n\n case 'ua':\n str = String.fromCharCode(1040 + Math.round(Math.random() * 55))\n break\n\n case 'cn':\n str = String.fromCharCode(19968 + Math.floor(Math.random() * 20901))\n break\n }\n return str\n },\n }\n\n return Chaffle\n})\n" }, { "path": "test/fixtures/fixture.html", "content": "

Default

\n

Data options

\n" }, { "path": "test/index.js", "content": "import Chaffle from '../src/chaffle'\n\ndescribe('Chaffle', () => {\n before(() => {\n document.body.innerHTML = window.__html__['test/fixtures/fixture.html']\n })\n\n after(() => {\n document.body.innerHTML = ''\n })\n\n describe('type of options', () => {\n it('lang', (done) => {\n const element = document.querySelectorAll('.default')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.lang).to.be.a('string')\n done()\n })\n })\n\n it('speed', (done) => {\n const element = document.querySelectorAll('.default')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.speed).to.be.a('number')\n done()\n })\n })\n\n it('delay', (done) => {\n const element = document.querySelectorAll('.default')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.delay).to.be.a('number')\n done()\n })\n })\n })\n\n describe('data options', () => {\n it('lang', (done) => {\n const element = document.querySelectorAll('.dataOpt')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.lang).to.equal('ja')\n done()\n })\n })\n\n it('speed', (done) => {\n const element = document.querySelectorAll('.dataOpt')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.speed).to.equal(100)\n done()\n })\n })\n\n it('delay', (done) => {\n const element = document.querySelectorAll('.dataOpt')\n Array.prototype.forEach.call(element, function (el) {\n const chaffle = new Chaffle(el)\n expect(chaffle.options.delay).to.equal(200)\n done()\n })\n })\n })\n})\n" } ]