completed blink example

zinas · May 11, 2014 · bdf57be · bdf57be
1 parent a64bfaf
commit bdf57be
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/nineties-blink/index.html b/nineties-blink/index.html
@@ -5,32 +5,12 @@
  <title>90s Blink</title>
 
  <!-- Importing Custom Elements -->
- <!-- <link rel="import" href="nineties-blink.html"> -->
-
- <script>
- var Blink = Object.create(HTMLElement.prototype);
-
- Blink.blink = function() {
- if (this.style.visibility === 'hidden') {
- this.style.visibility = '';
- } else {
- this.style.visibility = 'hidden';
- }
- }
-
- Blink.attachedCallback = function () {
- var self = this;
- setInterval(function () {self.blink();},this.dataset.duration/2);
- }
-
- document.registerElement('nineties-blink', {prototype: Blink});
- </script>
-
+ <link rel="import" href="nineties-blink.html">
 </head>
 <body>
 
  <!-- Using Custom Elements -->
- <nineties-blink data-duration="5000">Hello there!</nineties-blink>
+ <nineties-blink data-duration="500">Hello there!</nineties-blink>
 
 </body>
 </html>
diff --git a/nineties-blink/nineties-blink.html b/nineties-blink/nineties-blink.html
@@ -0,0 +1,24 @@
+ <script>
+ var Blink = Object.create(HTMLElement.prototype);
+
+ Blink.blink = function() {
+ if (this.style.visibility === 'hidden') {
+ this.style.visibility = '';
+ } else {
+ this.style.visibility = 'hidden';
+ }
+ }
+
+ Blink.attachedCallback = function () {
+ this.interval = setInterval(this.blink.bind(this),this.dataset.duration/2);
+ }
+
+ Blink.attributeChangedCallback = function (attribute, oldValue, newValue) {
+ if (attribute === 'data-duration') {
+ clearInterval(this.interval);
+ this.interval = setInterval(this.blink.bind(this),this.dataset.duration/2);
+ }
+ }
+
+ document.registerElement('nineties-blink', {prototype: Blink});
+</script>