Permalink
Browse files

Moving JS to external

  • Loading branch information...
1 parent 9d5dc40 commit f9e58d2e7a18c54c2a906007e831ba28d309ec34 @tylergaw committed Feb 4, 2012
Showing with 52 additions and 54 deletions.
  1. +1 −54 index.html
  2. +51 −0 play-loop.js
View
@@ -46,59 +46,6 @@
</p>
</footer>
- <script>
-
- // Using JS here for two things.
- // 1. To add and remove a class of "play" to the text container.
- // 2. After the animation plays one time the button text changes and the description is displayed fully.
- (function () {
- var playBtn = document.getElementById('play-btn'),
- loopBtn = document.getElementById('loop-btn'),
- el = document.getElementById('write-on'),
- playedOnce = false,
- playClass = 'play',
- loopClass = 'loop';
-
- playBtn.onclick = function () {
- var hasClass = el.classList.contains(playClass);
-
- el.classList.remove(loopClass);
-
- // classList is really great:
- // https://developer.mozilla.org/en/DOM/element.classList
- if (hasClass) {
- el.classList.remove(playClass);
- setTimeout(function () {
- el.classList.add(playClass);
- }, 200);
- } else {
- el.classList.add(playClass);
- }
-
- if (!playedOnce) {
- // Animation events can be super helpful:
- // https://developer.mozilla.org/en/CSS/CSS_animations#section_8
- el.addEventListener('webkitAnimationEnd', function () {
- playBtn.innerHTML = 'Replay';
- playedOnce = true;
- loopBtn.classList.remove('hide');
- document.querySelector('p').classList.add('show');
- });
- }
- };
-
- loopBtn.onclick = function () {
- el.classList.remove(playClass);
-
- if (!el.classList.contains(loopClass)) {
- setTimeout(function () {
- el.classList.add(loopClass);
- }, 200);
- } else {
- el.classList.remove(loopClass);
- }
- };
- }());
- </script>
+ <script src="play-loop.js"></script>
</body>
</html>
View
@@ -0,0 +1,51 @@
+// Using JS for two things.
+// 1. To add and remove a class of "play" to the text container.
+// 2. After the animation plays one time the button text changes and the description is displayed fully.
+(function () {
+ var playBtn = document.getElementById('play-btn'),
+ loopBtn = document.getElementById('loop-btn'),
+ el = document.getElementById('write-on'),
+ playedOnce = false,
+ playClass = 'play',
+ loopClass = 'loop';
+
+ playBtn.onclick = function () {
+ var hasClass = el.classList.contains(playClass);
+
+ el.classList.remove(loopClass);
+
+ // classList is really great:
+ // https://developer.mozilla.org/en/DOM/element.classList
+ if (hasClass) {
+ el.classList.remove(playClass);
+ setTimeout(function () {
+ el.classList.add(playClass);
+ }, 200);
+ } else {
+ el.classList.add(playClass);
+ }
+
+ if (!playedOnce) {
+ // Animation events can be super helpful:
+ // https://developer.mozilla.org/en/CSS/CSS_animations#section_8
+ el.addEventListener('webkitAnimationEnd', function () {
+ playBtn.innerHTML = 'Replay';
+ playedOnce = true;
+ loopBtn.classList.remove('hide');
+ document.querySelector('p').classList.add('show');
+ });
+ }
+ };
+
+ loopBtn.onclick = function () {
+ el.classList.remove(playClass);
+
+ if (!el.classList.contains(loopClass)) {
+ setTimeout(function () {
+ el.classList.add(loopClass);
+ }, 200);
+ } else {
+ el.classList.remove(loopClass);
+ }
+ };
+}());

0 comments on commit f9e58d2

Please sign in to comment.