Generates the names with the corresponding span on the chemical symbol.

Basic styling.
eliseosoto · Aug 2, 2012 · 36f8937 · 36f8937
1 parent 5244a4c
commit 36f8937
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/breaking-bad-credits.js b/breaking-bad-credits.js
@@ -20,8 +20,9 @@ exports.BreakingBadCredits = Montage.create(Montage, {
 
     handleAction: {
         value: function(event) {
-
+            this.generatedNames = [];
             this.generatedNames = this.generateNames(this.name);
+            this.needsDraw = true;
         }
     },
 
@@ -54,7 +55,7 @@ exports.BreakingBadCredits = Montage.create(Montage, {
                 elementToLookup = elementToLookup.toLowerCase();
 
                 if (this.elements.hasOwnProperty(elementToLookup)) {
-                    bbName = bbName + '[' + this.elements[elementToLookup].symbol + ']' + str.substring(currentIndex + (elementToLookup.length));
+                    bbName = bbName + '<span class="chemElem">' + this.elements[elementToLookup].symbol + '</span>' + str.substring(currentIndex + (elementToLookup.length));
                     bbNames.push(bbName);
                 }
 

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 		<link rel="stylesheet" type="text/css" href="//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css">
 		<script src="../node_modules/montage/montage.js"></script>
+        <link rel="stylesheet" href="style.css" />
 
         <script type="text/montage-serialization">{
             "owner": {
@@ -52,12 +53,14 @@
             },
 
             "generatedName": {
-                "prototype": "montage/ui/dynamic-text.reel",
+                "prototype": "montage/ui/dynamic-element.reel",
                 "properties": {
-                    "element": {"#": "generatedName"}
+                    "element": {"#": "generatedName"},
+                    "allowedTagNames": ["strong", "span"],
+                    "class": "generatedName"
                 },
                 "bindings": {
-                    "value": {"<-": "@generatedNames.objectAtCurrentIteration"}
+                    "innerHTML": {"<-": "@generatedNames.objectAtCurrentIteration"}
                 }
             }
         }</script>
@@ -70,8 +73,8 @@
 			<p>This will generate credit names like the ones seen on Breaking Bad</p>
             <input type="text" data-montage-id="name" placeholder="Enter name" />
 			<button data-montage-id="generate">Generate!</button>
-			<ul data-montage-id="generatedNames">
-				<li data-montage-id="generatedName">Item 1</li>
+			<ul data-montage-id="generatedNames" class="generatedNames">
+                <li data-montage-id="generatedName" class="generatedName"></li>
 			</ul>
 		</div>
 	</div>

diff --git a/style.css b/style.css
@@ -0,0 +1,18 @@
+.generatedNames {
+    color: white;
+    text-shadow: black 0.1em 0.1em 0.2em;
+    font-size: 3em;
+}
+
+li {
+    line-height: 100%;
+}
+
+.generatedName {
+    color: #0000ff;
+}
+
+.chemElem {
+    font-weight: bolder;
+    color: green;
+}