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
[](https://www.npmjs.com/package/chaffle)
[](https://travis-ci.org/blivesta/chaffle)
Shuffle Characters Randomly.
## Demo
http://git.blivesta.com/chaffle/
## Install
```html
<script src="YOUR-PROJECT/chaffle.min.js"></script>
<!-- OR CDN -->
<script src="https://unpkg.com/chaffle/chaffle.min.js"></script>
```
npm
```html
$ npm install chaffle
```
## Usage
### Markup
```html
<p data-chaffle="en">English</p>
<p data-chaffle="ja">日本語</p>
<p data-chaffle="ja-hiragana">ひらがな</p>
<p data-chaffle="ja-katakana">カタカナ</p>
<p data-chaffle="ua">Українська</p>
<p data-chaffle="cn">中文</p>
<!-- data options -->
<p data-chaffle="en" data-chaffle-speed="100" data-chaffle-delay="200">
Data options
</p>
```
### 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
<p data-chaffle="en" data-chaffle-speed="100" data-chaffle-delay="200">
Data options
</p>
```
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Shuffle Characters Randomly.">
<meta property="og:title" content="Chaffle">
<meta property="og:type" content="website">
<meta property="og:url" content="http://git.blivesta.com/chaffle/">
<meta property="og:image" content="http://www.blivesta.com/ico/blivesta-300.png">
<meta property="og:site_name" content="Chaffle">
<meta property="og:description" content="Shuffle Characters Randomly.">
<meta property="fb:app_id" content="1001771893195804">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@blivesta">
<meta name="twitter:creator" content="@blivesta">
<title>Chaffle | Shuffle Characters Randomly.</title>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//www.blivesta.com/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="//www.blivesta.com/ico/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/sircus@3.0.0/css/sircus.min.css" charset="utf-8" />
<style>
#carbonads .carbon-wrap .carbon-text {
padding-top: 10px;
display: block;
}
#carbonads a {
color: #999;
}
</style>
</head>
<body>
<header class="Container t-gutter t-ptGt t-pbGt">
<h1 class="js-loaded t-fontGt t-ptGt" data-chaffle data-chaffle-onLoad>Chaffle.js</h1>
<h2 class="t-mbXl" data-chaffle="en">Shuffle Characters Randomly.</h2>
<ul class="ListInline t-mbGt t-alignMiddle">
<li>
<a class="Button" href="https://github.com/blivesta/chaffle" target="_blank">Download on GitHub</a>
</li>
<li class="t-mbXs">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=blivesta&repo=chaffle&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</li>
<li class="t-mbXs">
<iframe id="twitter-widget-2" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="http://platform.twitter.com/widgets/tweet_button.a9003d9964444592507bbb36b98c709b.en.html#dnt=false&id=twitter-widget-2&lang=en&original_referer=http%3A%2F%2Fgit.blivesta.com%2Fchaffle%2F&size=m&text=Chaffle: Shuffle Characters Randomly" style="position: static; visibility: visible; width: 61px; height: 20px;" data-url="http://git.blivesta.com/chaffle/"></iframe>
</li>
</ul>
<p class="carbonAds t-none t-sm-block t-fixed t-top0 t-right0 t-fontXs t-paSm t-mb0" style="width: 130px; z-index: 1000;">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=blivesta" id="_carbonads_js"></script>
</p>
</header>
<main role="main">
<section class="Container t-gutter t-ptLg t-mbGt">
<h2 class="t-pbSm t-mbXl t-borderBlack t-borderBottom2x ">Example: mouseover</h2>
<div class="Grid t-borderBlack t-borderBottom t-pbLg">
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="en">English</p>
</div>
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="ja">日本語</p>
</div>
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="ja-hiragana">ひらがな</p>
</div>
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="ja-katakana">カタカナ</p>
</div>
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="ua">Українська</p>
</div>
<div class="Grid-col t-sm-width4of12">
<p data-chaffle="cn">中文</p>
</div>
</div>
</section>
<section class="Container t-gutter t-ptHg">
<h2 class="t-pbSm t-mbXl t-borderBlack t-borderBottom2x ">Usage</h2>
<article class="Grid t-gutterReset">
<div class="Grid-col t-sm-width4of12">
<h3 class="t-mt0 t-mbSm">Link required files</h3>
<ul class="ListReset">
<li><a href="https://github.com/blivesta/chaffle" target="_blank">Download on GitHub</a></li>
<li><a href="https://www.npmjs.com/package/chaffle" target="_blank">npm</a>: <code class="t-colorGray40">$npm install chaffle</code></li>
</ul>
</div>
<div class="Grid-col t-sm-width8of12 t-mbHg">
<script src="https://gist.github.com/blivesta/2c7f7c82d35b0fa2a0e1ac11af2b4965.js"></script>
</div>
</article>
<article class="Grid t-gutterReset">
<div class="Grid-col t-sm-width4of12">
<h3 class="t-mt0">HTML Markup</h3>
</div>
<div class="Grid-col t-sm-width8of12 t-mbHg">
<script src="https://gist.github.com/blivesta/c24393e10c4ae3a5949ca8587922722d.js"></script>
</div>
</article>
<article class="Grid t-gutterReset">
<div class="Grid-col t-sm-width4of12">
<h3 class="t-mt0 ">Call the Chaffle</h3>
</div>
<div class="Grid-col t-sm-width8of12 t-mbHg">
<script src="https://gist.github.com/blivesta/3ad4c355b3135bef7dc28943998f96eb.js"></script>
<script src="https://gist.github.com/blivesta/5314944693cb8c1756c105b2b9b337e1.js"></script>
</div>
</article>
<article class="Grid t-gutterReset">
<div class="Grid-col t-sm-width4of12">
<h3 class="t-mt0">Options</h3>
</div>
<div class="Grid-col t-sm-width8of12">
<script src="https://gist.github.com/blivesta/71f819c7a2c1b1e743acc85b1f9534d4.js"></script>
</div>
</article>
</section>
</main>
<footer class="Container t-gutter t-ptHg">
<div class=" t-borderBlack t-borderTop2x t-ptXl t-pbMd">
<div class="Grid t-gutterReset">
<div class="Grid-col t-sm-widthHalf">
<h3 class="t-mt0">OTHER PROJECTS</h3>
<ul class="ListInline">
<li><a href="http://sircus.blivesta.com/" target="_blank">Sircus</a></li>
<li><a href="http://git.blivesta.com/animsition/" target="_blank">Animsition</a></li>
<li><a href="http://git.blivesta.com/drawer/">Drawer</a></li>
<li><a href="http://git.blivesta.com/crosscover/">Crosscover</a></li>
<li><a href="https://github.com/blivesta/svgpack">SVGPack</a></li>
</ul>
</div>
<div class="Grid-col t-sm-widthHalf t-sm-alignRight">
<p class="t-mb0">
<small>Released under the MIT license.</small>
</p>
<p>
<small>Create by <a href="http://blivesta.com" target="_blank">blivesta</a></small>
</p>
</div>
</div>
</div>
</footer>
<script src="chaffle.min.js" charset="utf-8"></script>
<script>
var elements = document.querySelectorAll('[data-chaffle]');
var elm = document.querySelectorAll('[data-chaffle-onLoad]');
Array.prototype.forEach.call(elements, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array.prototype.forEach.call(elm, function (el) {
var chaffle = new Chaffle(el, {
delay: 200
})
setInterval(function(){
chaffle.init();
}, 8000)
});
</script>
<!-- Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-50883754-1', 'blivesta.com');ga('require', 'displayfeatures');ga('send', 'pageview');
</script>
<!-- Twitter -->
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</body>
</html>
================================================
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
================================================
<h1 class="default" data-chaffle="en">Default</h1>
<h2 class="dataOpt" data-chaffle="ja" data-chaffle-speed="100" data-chaffle-delay="200">Data options</h2>
================================================
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()
})
})
})
})
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
SYMBOL INDEX (2 symbols across 1 files)
FILE: src/chaffle.js
function extend (line 19) | function extend () {
function Chaffle (line 48) | function Chaffle (element, options) {
Condensed preview — 11 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (21K chars).
[
{
"path": ".editorconfig",
"chars": 207,
"preview": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_"
},
{
"path": ".eslintrc",
"chars": 348,
"preview": "{\n \"rules\": {\n \"comma-dangle\": [2, \"always-multiline\"],\n },\n \"extends\": [ \"standard\" ],\n \"globals\": {\n \"define"
},
{
"path": ".gitignore",
"chars": 25,
"preview": "~*\ngh-pages\nnode_modules\n"
},
{
"path": ".travis.yml",
"chars": 106,
"preview": "language: node_js\nnode_js:\n - 8\nnotifications:\n slack: blivesta:ygWmRLL4fyU0s7FFlVHSsJnS\n email: false\n"
},
{
"path": "README.md",
"chars": 1799,
"preview": "# Chaffle\n\n[](https://www.npmjs.com/package/ch"
},
{
"path": "docs/index.html",
"chars": 8279,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "karma.conf.js",
"chars": 977,
"preview": "module.exports = function (config) {\n config.set({\n autoWatch: true,\n browsers: ['PhantomJS'],\n frameworks: ['"
},
{
"path": "package.json",
"chars": 1380,
"preview": "{\n \"name\": \"chaffle\",\n \"version\": \"2.1.0\",\n \"description\": \"Shuffle Characters Randomly.\",\n \"main\": \"src/chaffle.js\""
},
{
"path": "src/chaffle.js",
"chars": 4257,
"preview": "/*!\n * Chaffle\n * Shuffle Characters Randomly.\n * http://blivesta.github.io/chaffle\n * License : MIT\n * Author : blivest"
},
{
"path": "test/fixtures/fixture.html",
"chars": 161,
"preview": " <h1 class=\"default\" data-chaffle=\"en\">Default</h1>\n <h2 class=\"dataOpt\" data-chaffle=\"ja\" data-chaffle-speed=\"100\" da"
},
{
"path": "test/index.js",
"chars": 1946,
"preview": "import Chaffle from '../src/chaffle'\n\ndescribe('Chaffle', () => {\n before(() => {\n document.body.innerHTML = window."
}
]
About this extraction
This page contains the full source code of the blivesta/chaffle GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 11 files (19.0 KB), approximately 5.8k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.