Skip to content

Commit 5b182ac

Browse files
krazyjakeekrazyjakee
committed
move login to keyframes core
1 parent 958ccfc commit 5b182ac

File tree

5 files changed

+190
-240
lines changed

5 files changed

+190
-240
lines changed

‎dist/jquery.keyframes.js‎

Lines changed: 165 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,182 @@
1-
/* global $ */
2-
var animationPlayState = 'animation-play-state';
3-
var playStateRunning = 'running';
4-
5-
var $createKeyframeStyleTag = function $createKeyframeStyleTag(id, css) {
6-
return $("<style>".concat(css, "</style>")).attr({
7-
class: 'keyframe-style',
8-
id: id,
9-
type: 'text/css'
10-
}).appendTo('head');
11-
};
12-
13-
$.keyframe = {
14-
isSupported: function isSupported() {
15-
return document.body.style.animationName !== undefined;
16-
},
17-
generate: function generate(frameData) {
18-
var _this = this;
19-
20-
var frameName = frameData.name || '';
21-
var css = "@keyframes ".concat(frameName, " {");
22-
23-
for (var key in frameData) {
24-
if (key !== 'name' && key !== 'media' && key !== 'complete') {
25-
css += "".concat(key, " {");
26-
27-
for (var property in frameData[key]) {
28-
css += "".concat(property, ":").concat(frameData[key][property], ";");
29-
}
1+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2+
3+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
4+
5+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
6+
7+
var Keyframes =
8+
/*#__PURE__*/
9+
function () {
10+
// eslint-disable-line
11+
function Keyframes(elem) {
12+
_classCallCheck(this, Keyframes);
13+
14+
this.elem = elem;
15+
}
3016

31-
css += '}';
17+
_createClass(Keyframes, [{
18+
key: "isSupported",
19+
value: function isSupported() {
20+
return document.body.style.animationName !== undefined;
21+
}
22+
}, {
23+
key: "reset",
24+
value: function reset(callback) {
25+
this.elem.style.animationPlayState = 'running';
26+
this.elem.style.animation = 'none';
27+
28+
if (callback) {
29+
setTimeout(callback, 0);
3230
}
3331
}
34-
35-
if (frameData.media) {
36-
css = "@media ".concat(frameData.media, "{").concat(css, "}");
32+
}, {
33+
key: "pause",
34+
value: function pause() {
35+
this.elem.style.animationPlayState = 'paused';
3736
}
38-
39-
var $frameStyle = $("style#".concat(frameData.name));
40-
41-
if ($frameStyle.length > 0) {
42-
$frameStyle.html(css);
43-
var $elems = $('*').filter(function () {
44-
return _this.style.animationName === frameName;
45-
});
46-
$elems.each(function () {
47-
var $el = $(_this);
48-
var options = $el.data('keyframeOptions');
49-
$el.resetKeyframe(function () {
50-
$el.playKeyframe(options);
51-
});
52-
});
53-
} else {
54-
$createKeyframeStyleTag(frameName, css);
37+
}, {
38+
key: "resume",
39+
value: function resume() {
40+
this.elem.style.animationPlayState = 'running';
5541
}
56-
},
57-
define: function define(frameData) {
58-
if (frameData.length) {
59-
for (var i = 0; i < frameData.length; i += 1) {
60-
var frame = frameData[i];
61-
this.generate(frame);
42+
}, {
43+
key: "play",
44+
value: function play(frameOptions, callback) {
45+
var _this = this;
46+
47+
var animObjToStr = function animObjToStr(obj) {
48+
var newObj = Object.assign({}, {
49+
duration: '0s',
50+
timingFunction: 'ease',
51+
delay: '0s',
52+
iterationCount: 1,
53+
direction: 'normal',
54+
fillMode: 'forwards'
55+
}, obj);
56+
return [newObj.name, newObj.duration, newObj.timingFunction, newObj.delay, newObj.iterationCount, newObj.direction, newObj.fillMode].join(' ');
57+
};
58+
59+
var animationcss = '';
60+
61+
if (frameOptions.constructor === Array) {
62+
var frameOptionsStrings = [];
63+
64+
for (var i = 0; i < frameOptions.length; i += 1) {
65+
frameOptionsStrings.push(typeof frameOptions[i] === 'string' ? frameOptions[i] : animObjToStr(frameOptions[i]));
66+
}
67+
68+
animationcss = frameOptionsStrings.join(', ');
69+
} else if (typeof frameOptions === 'string') {
70+
animationcss = frameOptions;
71+
} else {
72+
animationcss = animObjToStr(frameOptions);
6273
}
63-
} else {
64-
this.generate(frameData);
74+
75+
var addEvent = function addEvent(type, eventCallback) {
76+
var listenerName = "".concat(type, "Listener");
77+
78+
_this.elem.removeEventListener(type, _this[listenerName]);
79+
80+
_this[listenerName] = eventCallback;
81+
82+
_this.elem.addEventListener(type, _this[listenerName]);
83+
};
84+
85+
this.elem.style.animationPlayState = 'running';
86+
this.elem.style.animation = animationcss;
87+
this.frameOptions = frameOptions;
88+
addEvent('animationiteration', callback || frameOptions.complete);
89+
addEvent('animationend', callback || frameOptions.complete);
6590
}
66-
}
67-
};
91+
}], [{
92+
key: "createKeyframeTag",
93+
value: function createKeyframeTag(id, css) {
94+
var elem = document.createElement('style');
95+
elem.innerHTML = css;
96+
elem.setAttribute('class', 'keyframe-style');
97+
elem.setAttribute('id', id);
98+
elem.setAttribute('type', 'text/css');
99+
document.getElementsByTagName('head')[0].appendChild(elem);
100+
}
101+
}, {
102+
key: "generate",
103+
value: function generate(frameData) {
104+
var frameName = frameData.name || '';
105+
var css = "@keyframes ".concat(frameName, " {");
68106

69-
$.fn.resetKeyframe = function (callback) {
70-
$(this).css(animationPlayState, playStateRunning).css('animation', 'none');
107+
for (var key in frameData) {
108+
if (key !== 'name' && key !== 'media' && key !== 'complete') {
109+
css += "".concat(key, " {");
71110

72-
if (callback) {
73-
setTimeout(callback, 1);
74-
}
75-
};
76-
77-
$.fn.pauseKeyframe = function () {
78-
$(this).css(animationPlayState, 'paused');
79-
};
80-
81-
$.fn.resumeKeyframe = function () {
82-
$(this).css(animationPlayState, playStateRunning);
83-
};
84-
85-
$.fn.playKeyframe = function (frameOptions, callback) {
86-
var animObjToStr = function animObjToStr(obj) {
87-
var newObj = $.extend({
88-
duration: '0s',
89-
timingFunction: 'ease',
90-
delay: '0s',
91-
iterationCount: 1,
92-
direction: 'normal',
93-
fillMode: 'forwards'
94-
}, obj);
95-
return [newObj.name, newObj.duration, newObj.timingFunction, newObj.delay, newObj.iterationCount, newObj.direction, newObj.fillMode].join(' ');
96-
};
111+
for (var property in frameData[key]) {
112+
css += "".concat(property, ":").concat(frameData[key][property], ";");
113+
}
97114

98-
var animationcss = '';
115+
css += '}';
116+
}
117+
}
118+
119+
if (frameData.media) {
120+
css = "@media ".concat(frameData.media, "{").concat(css, "}");
121+
}
99122

100-
if ($.isArray(frameOptions)) {
101-
var frameOptionsStrings = [];
123+
var frameStyle = document.getElementById(frameName);
102124

103-
for (var i = 0; i < frameOptions.length; i += 1) {
104-
frameOptionsStrings.push(typeof frameOptions[i] === 'string' ? frameOptions[i] : animObjToStr(frameOptions[i]));
125+
if (frameStyle) {
126+
frameStyle.innerHTML = css;
127+
} else {
128+
Keyframes.createKeyframeTag(frameName, css);
129+
}
130+
}
131+
}, {
132+
key: "define",
133+
value: function define(frameData) {
134+
if (frameData.length) {
135+
for (var i = 0; i < frameData.length; i += 1) {
136+
this.generate(frameData[i]);
137+
}
138+
} else {
139+
this.generate(frameData);
140+
}
105141
}
142+
}]);
143+
144+
return Keyframes;
145+
}();(function () {
146+
var doForEach = function doForEach($el, cb) {
147+
$el.each(function (index, elem) {
148+
cb(new Keyframes(elem));
149+
});
150+
};
106151

107-
animationcss = frameOptionsStrings.join(', ');
108-
} else if (typeof frameOptions === 'string') {
109-
animationcss = frameOptions;
110-
} else {
111-
animationcss = animObjToStr(frameOptions);
112-
}
152+
$.keyframe = {
153+
isSupported: Keyframes.isSupported,
154+
generate: Keyframes.generate,
155+
define: Keyframes.define
156+
};
157+
158+
$.fn.resetKeyframe = function (cb) {
159+
doForEach($(this), function (kf) {
160+
return kf.reset(cb);
161+
});
162+
};
163+
164+
$.fn.pauseKeyframe = function () {
165+
doForEach($(this), function (kf) {
166+
return kf.pause();
167+
});
168+
};
169+
170+
$.fn.resumeKeyframe = function () {
171+
doForEach($(this), function (kf) {
172+
return kf.resume();
173+
});
174+
};
113175

114-
var addEvent = function addEvent(element, type, eventCallback) {
115-
element.off(type).on(type.toLowerCase(), eventCallback || frameOptions.complete);
176+
$.fn.playKeyframe = function (frameOptions, callback) {
177+
doForEach($(this), function (kf) {
178+
return kf.play(frameOptions, callback);
179+
});
116180
};
181+
})();
117182

118-
this.each(function () {
119-
var $el = $(this).addClass('boostKeyframe').css({
120-
animationPlayState: playStateRunning,
121-
animation: animationcss
122-
}).data('keyframeOptions', frameOptions);
123-
addEvent($el, 'AnimationIteration', callback);
124-
addEvent($el, 'AnimationEnd', callback);
125-
});
126-
return this;
127-
};
128-
129-
$createKeyframeStyleTag('boost-keyframe', ' .boostKeyframe{transform:scale3d(1,1,1);}');

‎dist/jquery.keyframes.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "jquerykeyframes",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "jQuery-Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness.",
55
"main": "dist/jquery.keyframes.min.js",
66
"scripts": {
7-
"build": "npx babel src -d dist && npm run minify",
7+
"build": "npm run dependency && npx babel src --no-comments >> dist/jquery.keyframes.js && npm run minify",
8+
"dependency": "cat node_modules/@keyframes/core/dist/keyframes.js > dist/jquery.keyframes.js",
89
"minify": "uglifyjs --compress --mangle -- dist/jquery.keyframes.js > dist/jquery.keyframes.min.js"
910
},
1011
"repository": {
@@ -24,6 +25,7 @@
2425
},
2526
"homepage": "https://github.com/Keyframes/jQuery.Keyframes",
2627
"dependencies": {
28+
"@keyframes/core": "^1.0.1",
2729
"jquery": "latest"
2830
},
2931
"devDependencies": {

0 commit comments

Comments
 (0)