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.

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;

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,13 +50,6 @@ div#perks {
 	width: 200px;
 }
 
-div#perks:before {
-	position: absolute;
-	content: "perks";
-	top: -13px;
-	background-color: white;
-}
-
 div.perkRow {
 	position: relative;
 }

css/room.css

@@ -4,8 +4,8 @@ div#buildBtns {
 	left: 0px;
 }
 
-div#buildBtns:before {
+div#buildBtns:before, div#craftBtns:before, div#buyBtns:before {
-	content: "build:";
+	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;	
-}

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'));
 })();

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) {

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(' ', '-');

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;
 		}