first commit

This commit is contained in:
Senad Uka
2018-05-07 16:07:00 +02:00
commit 8b4f09f9d5
3368 changed files with 852614 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
{
"name": "transitionize",
"main": "dist/transitionize.js",
"version": "0.0.3",
"homepage": "https://github.com/abpetkov/transitionize",
"authors": [
"Alexander Petkov <abpetkov@gmail.com>"
],
"description": "Create CSS3 transitions dynamically",
"keywords": [
"css3",
"transition",
"dynamic"
],
"license": "MIT",
"ignore": [
"build",
"components",
"node_modules",
"bower_components",
"component.json",
"index.html",
"Makefile",
"README.md",
".*"
],
"dependencies": {},
"devDependencies": {},
"_release": "0.0.3",
"_resolution": {
"type": "version",
"tag": "0.0.3",
"commit": "13e53272b838a20c8551784a81de57b45dbe662f"
},
"_source": "https://github.com/abpetkov/transitionize.git",
"_target": "*",
"_originalSource": "transitionize"
}

View File

@@ -0,0 +1,29 @@
{
"name": "transitionize"
, "main": "dist/transitionize.js"
, "version": "0.0.3"
, "homepage": "https://github.com/abpetkov/transitionize"
, "authors": [
"Alexander Petkov <abpetkov@gmail.com>"
]
, "description": "Create CSS3 transitions dynamically"
, "keywords": [
"css3"
, "transition"
, "dynamic"
]
, "license": "MIT"
, "ignore": [
"build"
, "components"
, "node_modules"
, "bower_components"
, "component.json"
, "index.html"
, "Makefile"
, "README.md"
, ".*"
]
, "dependencies": {}
, "devDependencies": {}
}

View File

@@ -0,0 +1,46 @@
/**
* Transitionize example.
*
* Shows how to change dynamically the transitions of an element.
*
* In this case, the `elem` background color and left properties are given different transition duration,
* according to it's current position. If the circle is in it's initial position, it goes right and
* changes background color faster. If it's already been moved - gets back left and changes background
* color slower.
*
* In order for this to work, with Browserify(http://browserify.org/) already installed, execute the following command:
*
* browserify examples/browserify.js -o examples/bundle.js
*
*/
var transitionize = require('../transitionize');
window.onload = function() {
var elem = document.querySelector('.js-elem')
, prop = {};
elem.addEventListener('click', function() {
var position = parseInt(elem.style.left) || 0;
if (position == 0) {
this.style.left = this.parentNode.offsetWidth - this.offsetWidth + 'px';
this.style.backgroundColor = '#53e7d0';
prop = {
'background-color': '0.3s'
, 'left': '0.3s'
};
} else {
this.style.left = 0;
this.style.backgroundColor = '#febf04';
prop = {
'background-color': '1s'
, 'left': '1s'
};
}
transitionize(elem, prop);
});
};

View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Transitionize Example Page</title>
<style type="text/css">
.wrap {
height: 75px;
margin: 100px auto 0;
position: relative;
width: 300px;
}
.elem {
background-color: #febf04;
border-radius: 100%;
bottom: 0;
display: block;
height: 75px;
left: 0;
position: absolute;
width: 75px;
}
</style>
<script src="bundle.js"></script>
</head>
<body>
<div class="wrap">
<span class="elem js-elem"></span>
</div>
</body>
</html>

View File

@@ -0,0 +1,19 @@
{
"name": "transitionize",
"version": "0.0.3",
"description": "Create CSS3 transitions dynamically",
"main": "transitionize.js",
"repository": {
"type": "git",
"url": "git://github.com/abpetkov/transitionize.git"
},
"author": "Alexander Petkov",
"license": "MIT",
"bugs": {
"url": "https://github.com/abpetkov/transitionize/issues"
},
"devDependencies": {
"uglify-js": "~2.4.8",
"component": "~0.18.0"
}
}

View File

@@ -0,0 +1,64 @@
/**
* Transitionize 0.0.3
* https://github.com/abpetkov/transitionize
*
* Authored by Alexander Petkov
* https://github.com/abpetkov
*
* Copyright 2013, Alexander Petkov
* License: The MIT License (MIT)
* http://opensource.org/licenses/MIT
*
*/
/**
* Expose `Transitionize`.
*/
module.exports = Transitionize;
/**
* Initialize new Transitionize.
*
* @param {Object} element
* @param {Object} props
* @api public
*/
function Transitionize(element, props) {
if (!(this instanceof Transitionize)) return new Transitionize(element, props);
this.element = element;
this.props = props || {};
this.init();
}
/**
* Detect if Safari.
*
* @returns {Boolean}
* @api private
*/
Transitionize.prototype.isSafari = function() {
return (/Safari/).test(navigator.userAgent) && (/Apple Computer/).test(navigator.vendor);
};
/**
* Loop though the object and push the keys and values in an array.
* Apply the CSS3 transition to the element and prefix with -webkit- for Safari.
*
* @api private
*/
Transitionize.prototype.init = function() {
var transitions = [];
for (var key in this.props) {
transitions.push(key + ' ' + this.props[key]);
}
this.element.style.transition = transitions.join(', ');
if (this.isSafari()) this.element.style.webkitTransition = transitions.join(', ');
};