Unified legend

Legends on boxes and lists are currently added via CSS and as stylesheets cannot be localised, translated strings rely upon an additional inline CSS. This commit inserts localised legends as "data-legend" attributes on proper elements, and then this attribute is shown by stylesheet rule content: attr(data-legend). No need of localisation script and more compact CSS rules.
BH2VXW · Jun 27, 2015 · 92f7cf6 · 92f7cf6
1 parent 9364930
commit 92f7cf6
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 70 deletions.
diff --git a/css/outside.css b/css/outside.css
@@ -22,15 +22,11 @@ div#population {
 div#village:before {
 	position: absolute;
 	background: white;
-	content: "village";
+	content: attr(data-legend);
 	left: 8px;
 	top: -13px;
 }
 
-div#village.noHuts:before {
-	content: "forest";
-}
-
 div#workers {
 	position:absolute;
 	top: -4px;
@@ -61,4 +57,4 @@ div#workers {
 
 div.storeRow div.tooltip {
 	width: 160px;
-}
+}
diff --git a/css/path.css b/css/path.css
@@ -6,9 +6,9 @@
 	padding: 5px 10px;
 }
 
-div#outfitting:before {
+div#outfitting:before ,div#perks:before {
+	content: attr(data-legend);
 	position: absolute;
-	content: "supplies";
 	top: -13px;
 	background-color: white;
 }
@@ -50,17 +50,10 @@ div#perks {
 	width: 200px;
 }
 
-div#perks:before {
-	position: absolute;
-	content: "perks";
-	top: -13px;
-	background-color: white;
-}
-
 div.perkRow {
 	position: relative;
 }
 
 div.perkRow .row_key {
 	float: none;
-}
+}
diff --git a/css/room.css b/css/room.css
@@ -4,8 +4,8 @@ div#buildBtns {
 	left: 0px;
 }
 
-div#buildBtns:before {
-	content: "build:";
+div#buildBtns:before, div#craftBtns:before, div#buyBtns:before {
+	content: attr(data-legend);
 	position: relative;
 	top: -5px;
 }
@@ -16,30 +16,26 @@ div#craftBtns {
 	left: 150px;
 }
 
-div#craftBtns:before {
-	content: "craft:";
-	position: relative;
-	top: -5px;
-}
-
 div#buyBtns {
 	position: absolute;
 	top: 50px;
 	left: 300px;
 }
 
-div#buyBtns:before {
-	content: "buy:";
-	position: relative;
-	top: -5px;
-}
-
 div#storesContainer {
 	position: absolute;
 	top: 0px;
 	right: 0px;
 }
 
+div#stores:before, div#weapons:before {
+	position: absolute;
+	background: white;
+	content: attr(data-legend);
+	left: 8px;
+	top: -13px;
+}
+
 div#stores {
 	position: relative;
 	z-index:10;
@@ -53,14 +49,6 @@ div.storeRow {
 	position: relative;
 }
 
-div#stores:before {
-	position: absolute;
-	background: white;
-	content: "stores";
-	left: 8px;
-	top: -13px;	
-}
-
 div#weapons {
 	margin-top: 15px;
 	position: relative;
@@ -70,11 +58,3 @@ div#weapons {
 	padding: 5px 10px;
 	width: 200px;
 }
-
-div#weapons:before {
-	position: absolute;
-	background: white;
-	content: "weapons";
-	left: 8px;
-	top: -13px;	
-}
diff --git a/script/localization.js b/script/localization.js
@@ -66,19 +66,4 @@
 	]; 
 
 	delete keywords;
-
-	//translate text in css by overriding attributes
-	$("<style>").text('\
-		div#stores:before{ content: \''+ _("stores") + '\'}\
-		div#weapons:before{ content: \''+ _("weapons") + '\'}\
-		div#buildBtns:before{ content: \''+ _("build:") + '\'}\
-		div#craftBtns:before{ content: \''+ _("craft:") + '\'}\
-		div#buyBtns:before{ content: \''+ _("buy:") + '\'}\
-		div#outfitting:before{ content: \''+ _("supplies:") + '\'}\
-		div#perks:before{ content: \''+ _("perks:") + '\'}\
-		div#lootButtons:before { content: \''+ _("take:") + '\'}\
-		div#dropMenu:before { content: \''+ _("drop:") + '\'}\
-		div#village.noHuts:before { content: \'' + _("forest") + '\'}\
-		div#village:before { content: \'' + _("village") + '\'}\
-	').appendTo($('head'));
 })();
diff --git a/script/outside.js b/script/outside.js
@@ -424,10 +424,10 @@ var Outside = {
 		var hasPeeps;
 		if($SM.get('game.buildings["hut"]', true) === 0) {
 			hasPeeps = false;
-			village.addClass('noHuts');
+			village.attr('data-legend', _('forest'));
 		} else {
 			hasPeeps = true;
-			village.removeClass('noHuts');
+			village.attr('data-legend', _('village'));
 		}
 
 		if(needsAppend && village.children().length > 1) {

diff --git a/script/path.js b/script/path.js
@@ -34,7 +34,7 @@ var Path = {
 			.appendTo('div#locationSlider');
 
 		// Add the outfitting area
-		var outfitting = $('<div>').attr('id', 'outfitting').appendTo(this.panel);
+		var outfitting = $('<div>').attr({'id': 'outfitting', 'data-legend': _('supplies:')}).appendTo(this.panel);
 		$('<div>').attr('id', 'bagspace').appendTo(outfitting);
 
 		// Add the embark button
@@ -99,7 +99,7 @@ var Path = {
 			var needsAppend = false;
 			if(perks.length === 0) {
 				needsAppend = true;
-				perks = $('<div>').attr('id', 'perks');
+				perks = $('<div>').attr({'id': 'perks', 'data-legend': _('perks:')});
 			}
 			for(var k in $SM.get('character.perks')) {
 				var id = 'perk_' + k.replace(' ', '-');

diff --git a/script/room.js b/script/room.js
@@ -752,13 +752,15 @@ var Room = {
 		var needsAppend = false, wNeedsAppend = false, newRow = false;
 		if(stores.length === 0) {
 			stores = $('<div>').attr({
-				id: 'stores'
+				'id': 'stores',
+				'data-legend': _('stores')
 			}).css('opacity', 0);
 			needsAppend = true;
 		}
 		if(weapons.length === 0) {
 			weapons = $('<div>').attr({
-				id: 'weapons'
+				'id': 'weapons',
+				'data-legend': _('weapons')
 			}).css('opacity', 0);
 			wNeedsAppend = true;
 		}
@@ -1010,21 +1012,21 @@ var Room = {
 		var buildSection = $('#buildBtns');
 		var needsAppend = false;
 		if(buildSection.length === 0) {
-			buildSection = $('<div>').attr('id', 'buildBtns').css('opacity', 0);
+			buildSection = $('<div>').attr({'id': 'buildBtns', 'data-legend': _('build:')}).css('opacity', 0);
 			needsAppend = true;
 		}
 
 		var craftSection = $('#craftBtns');
 		var cNeedsAppend = false;
 		if(craftSection.length === 0 && $SM.get('game.buildings["workshop"]', true) > 0) {
-			craftSection = $('<div>').attr('id', 'craftBtns').css('opacity', 0);
+			craftSection = $('<div>').attr({'id': 'craftBtns', 'data-legend': _('craft:')}).css('opacity', 0);
 			cNeedsAppend = true;
 		}
 
 		var buySection = $('#buyBtns');
 		var bNeedsAppend = false;
 		if(buySection.length === 0 && $SM.get('game.buildings["trading post"]', true) > 0) {
-			buySection = $('<div>').attr('id', 'buyBtns').css('opacity', 0);
+			buySection = $('<div>').attr({'id': 'buyBtns', 'data-legend': _('buy:')}).css('opacity', 0);
 			bNeedsAppend = true;
 		}