first commit

This commit is contained in:
aschwarz
2023-03-14 14:47:50 +01:00
commit 062b2dfae8
4752 changed files with 505842 additions and 0 deletions

View File

@ -0,0 +1,3 @@
node_modules
components
build

View File

11
bootstrap/node_modules/css-emitter-component/Makefile generated vendored Normal file
View File

@ -0,0 +1,11 @@
build: components index.js
@component build --dev
components: component.json
@component install --dev
clean:
rm -fr build components template.js
.PHONY: clean

65
bootstrap/node_modules/css-emitter-component/Readme.md generated vendored Normal file
View File

@ -0,0 +1,65 @@
# css-emitter
Bind functions to `transition` and `animation` events.
## Installation
$ component install ecarter/css-emitter
## Example
var css = require('css-emitter');
var el = document.querySelector('#box');
var animate = css(el);
// Bind
animate.bind(function(e){
console.log('%s property changed on %s event', e.propertyName, e.type);
});
// Change height and width
setTimeout(function(){
el.className = 'in';
}, 1000);
### Example CSS
#box {
width: 100px;
height: 100px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
background: black;
display: block;
}
#box.in {
width: 200px;
height: 200px;
}
## API
### CssEmitter(target:Element)
Initialize an `CssEmitter` with given `target` element.
### CssEmitter.bind(fn:Function)
Register bind function.
### CssEmitter.unbind([fn]:Function)
Unregister bind function.
### CssEmitter.once(fn:Function)
Register a function that will fire once then unbind automatically
## License
MIT

View File

@ -0,0 +1,15 @@
{
"name": "css-emitter",
"repo": "anthonyshort/css-emitter",
"description": "fire events on css transition and animation completion",
"version": "0.1.1",
"keywords": ["css", "emitter", "events", "transition", "animation"],
"dependencies": {
"component/emitter": "*",
"component/event": "*"
},
"license": "MIT",
"scripts": [
"index.js"
]
}

77
bootstrap/node_modules/css-emitter-component/index.js generated vendored Normal file
View File

@ -0,0 +1,77 @@
/**
* Module Dependencies
*/
var events = require('event');
// CSS events
var watch = [
'transitionend'
, 'webkitTransitionEnd'
, 'oTransitionEnd'
, 'MSTransitionEnd'
, 'animationend'
, 'webkitAnimationEnd'
, 'oAnimationEnd'
, 'MSAnimationEnd'
];
/**
* Expose `CSSnext`
*/
module.exports = CssEmitter;
/**
* Initialize a new `CssEmitter`
*
*/
function CssEmitter(element){
if (!(this instanceof CssEmitter)) return new CssEmitter(element);
this.el = element;
}
/**
* Bind CSS events.
*
* @api public
*/
CssEmitter.prototype.bind = function(fn){
for (var i=0; i < watch.length; i++) {
events.bind(this.el, watch[i], fn);
}
return this;
};
/**
* Unbind CSS events
*
* @api public
*/
CssEmitter.prototype.unbind = function(fn){
for (var i=0; i < watch.length; i++) {
events.unbind(this.el, watch[i], fn);
}
return this;
};
/**
* Fire callback only once
*
* @api public
*/
CssEmitter.prototype.once = function(fn){
var self = this;
function on(){
self.unbind(on);
fn.apply(self.el, arguments);
}
self.bind(on);
return this;
};

View File

@ -0,0 +1,31 @@
{
"name": "css-emitter-component",
"version": "0.1.1",
"description": "fire events on css transition and animation completion",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "mocha test"
},
"repository": {
"type": "git",
"url": "https://github.com/anthonyshort/css-emitter.git"
},
"keywords": [
"component",
"css",
"browserify"
],
"author": "Anthony Short",
"license": "BSD",
"readmeFilename": "Readme.md",
"gitHead": "46dd02ee19f68e027d48952f161e1035fbe3ae50",
"browser": {
"event": "event-component"
},
"dependencies": {
"event-component": "~0.1.0"
}
}

View File

@ -0,0 +1,41 @@
<!DOCTYPE 5>
<html>
<head>
<title>CSS Emitter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#box {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
width: 100px;
height: 100px;
background: black;
display: block;
}
#box.in {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="../build/build.js"></script>
<script>
var cssEvent = require('css-emitter');
var element = document.querySelector('#box');
css = cssEvent(element);
css.bind(function(e){
console.log('%s property changed on %s event', e.propertyName, e.type);
});
setTimeout(function(){
element.className = 'in';
}, 1000);
</script>
</body>
</html>