Nineties-nbsp

zinas · May 12, 2014 · c96d363 · c96d363
1 parent 61df9d0
commit c96d363
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,19 @@ Show an "Under Construction" animated icon, along with some custom text.
 <nineties-under-construction>This page is under construction!</nineties-under-construction>
 ```
 
+### 90s `&nbsp`
+Places as many `&nbsp`s as you need.
+
+#####Things that you can learn by reading the code
+- Everything included in the 90s Welcome element
+- How to create Shadow DOM
+- How to read custom attributes
+
+#####Usage
+```html
+<nineties-nbsp length="10"></nineties-nbsp>
+```
+
 ### 90s Blink
 Makes the contents inside this element blink
 

diff --git a/nineties-nbsp/index.html b/nineties-nbsp/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>90s Nbsp</title>
+
+ <!-- Importing Custom Elements -->
+ <link rel="import" href="nineties-nbsp.html">
+
+ <style>
+ :unresolved {
+ display: none !important;
+ }
+ </style>
+</head>
+<body>
+ Here you have
+ <!-- Using Custom Elements -->
+ <nineties-nbsp length="10"></nineties-nbsp>
+ text indented by 10 <code>&amp;nbsp;</code>
+
+</body>
+</html>
diff --git a/nineties-nbsp/nineties-nbsp.html b/nineties-nbsp/nineties-nbsp.html
@@ -0,0 +1,18 @@
+ <script>
+ var Nbsp = Object.create(HTMLImageElement.prototype);
+
+ Nbsp.createdCallback = function () {
+ // build &nbsp;.. string
+ var nbsps = "",
+ howMany = parseInt(this.getAttribute("length"), 10) || 1;
+ while(howMany--){
+ nbsps += "&nbsp;"
+ }
+
+ // Add it into element's shadowRoot
+ var shadowRoot = this.createShadowRoot();
+ shadowRoot.innerHTML = nbsps;
+ }
+
+ document.registerElement('nineties-nbsp', {prototype: Nbsp});
+</script>