Repository: blivesta/chaffle Branch: master Commit: 08725131476b Files: 11 Total size: 19.0 KB Directory structure: gitextract_01y5v6o5/ ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .travis.yml ├── README.md ├── docs/ │ └── index.html ├── karma.conf.js ├── package.json ├── src/ │ └── chaffle.js └── test/ ├── fixtures/ │ └── fixture.html └── index.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ================================================ FILE: .eslintrc ================================================ { "rules": { "comma-dangle": [2, "always-multiline"], }, "extends": [ "standard" ], "globals": { "define": true, "describe": true, "before": true, "after": true, "it": true, "expect": true }, "env": { "es6": true, "browser": true, "node": true }, "ecmaFeatures": { "modules": true }, } ================================================ FILE: .gitignore ================================================ ~* gh-pages node_modules ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - 8 notifications: slack: blivesta:ygWmRLL4fyU0s7FFlVHSsJnS email: false ================================================ FILE: README.md ================================================ # Chaffle [![npm version](https://img.shields.io/npm/v/chaffle.svg?style=flat-square)](https://www.npmjs.com/package/chaffle) [![Build Status](https://img.shields.io/travis/blivesta/chaffle/master.svg?style=flat-square)](https://travis-ci.org/blivesta/chaffle) Shuffle Characters Randomly. ## Demo http://git.blivesta.com/chaffle/ ## Install ```html ``` npm ```html $ npm install chaffle ``` ## Usage ### Markup ```html

English

日本語

ひらがな

カタカナ

Українська

中文

Data options

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

Data options

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

Chaffle.js

Shuffle Characters Randomly.

Download on GitHub

Example: mouseover

English

日本語

ひらがな

カタカナ

Українська

中文

Usage

Link required files

Download on GitHub
npm: $npm install chaffle

HTML Markup

Call the Chaffle

Options

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

Default

Data options

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