Merge pull request #7 from enyojs/ENYO-662-kevinpschaaf

ENYO-662, ENYO-660: Handle wrap/nowrap with CSS whitespace, and add IE8 ... Reviewed-By: Ben Combee (ben.combee@palm.com)
enyojs · Aug 27, 2012 · 32bd55d · 32bd55d
2 parents b4a1638 + 5db880a
commit 32bd55d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/source/App.css b/source/App.css
@@ -75,7 +75,7 @@ button {
 }
 
 .nowrap {
-	width:2000px;
+	white-space: pre;
 }
 
 .wrap-label {

diff --git a/source/App.js b/source/App.js
@@ -23,10 +23,10 @@ enyo.kind({
 				{kind: "FittableRows", classes:"wide onyx", components: [
 					{kind: "Panels", name:"sourcePanels", fit:true, draggable:false, components: [
 						{kind: "Scroller", classes:"enyo-fit scroller", components: [
-							{name:"sourceContent", classes:"source nowrap enyo-selectable"}
+							{kind:"SourceView", name:"sourceContent"}
 						]},
 						{kind: "Scroller", classes:"enyo-fit scroller", components: [
-							{name:"cssContent", classes:"source nowrap enyo-selectable"}
+							{kind:"SourceView", name:"cssContent"}
 						]}
 					]},
 					{kind:"onyx.Toolbar", layoutKind: "FittableColumnsLayout", classes:"footer-toolbar", noStretch:true, components: [
@@ -290,8 +290,8 @@ enyo.kind({
 		}
 	},
 	wrapChanged: function(inSender, inEvent) {
-		this.$.sourceContent.addRemoveClass("nowrap", !inSender.getValue());
+		this.$.sourceContent.setWrap(inSender.getValue());
-		this.$.cssContent.addRemoveClass("nowrap", !inSender.getValue());
+		this.$.cssContent.setWrap(inSender.getValue());
 	},
 	getHashComponentName: function() {
 		return window.location.hash.slice(1);
@@ -339,6 +339,34 @@ enyo.kind({
 	}
 });
 
+enyo.kind({
+	name: "SourceView",
+	kind: "Control",
+	tag: "pre",
+	classes: "source enyo-selectable",
+	published: {
+		wrap: false
+	},
+	create: function() {
+		this.inherited(arguments);
+		this.wrapChanged();
+	},
+	// IE8 normalizes whitespace when setting innerHTML even in <pre> tags, so appending
+	// text nodes into the pre works around it (http://stackoverflow.com/a/195385)
+	contentChanged: function(inOld) {
+		var node = this.hasNode();
+		if (node) {
+			while(node.hasChildNodes()) { 
+				node.removeChild(node.firstChild);
+			}
+			node.appendChild(document.createTextNode(this.content));
+		}
+	},
+	wrapChanged: function(inOld) {
+		this.addRemoveClass("nowrap", !this.wrap);
+	}
+});
+
 enyo.kind({
 	name: "ViewStack",
 	kind: "Panels",