From 92f7cf683e8a268ed577ef3fb865f792422d6ac5 Mon Sep 17 00:00:00 2001
From: Andrea Rendine <master.skywalker.88@gmail.com>
Date: Mon, 18 May 2015 16:57:17 +0200
Subject: [PATCH] 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        |  8 ++------
 css/path.css           | 13 +++----------
 css/room.css           | 40 ++++++++++------------------------------
 script/localization.js | 15 ---------------
 script/outside.js      |  4 ++--
 script/path.js         |  4 ++--
 script/room.js         | 12 +++++++-----
 7 files changed, 26 insertions(+), 70 deletions(-)

diff --git a/css/outside.css b/css/outside.css
index 1e56a79..59c3cbd 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/css/path.css b/css/path.css
index 9550492..7918738 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/css/room.css b/css/room.css
index 583ed78..ac256c2 100644
--- 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
index 81c07c7..dd1aa9d 100644
--- 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
index 1d45d69..8fa2ee5 100644
--- 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
index 45d00d9..be5be51 100644
--- 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
index b75e3cd..3fc4eb2 100644
--- 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;
 		}