GEEKING

Android/NativeShell/assets/html/main.css

@@ -0,0 +1,98 @@
+body {background:#f2f2f2;}
+
+@font-face {
+    font-family: SourceSansPro-Regular;
+    src: url("fonts/SourceSansPro-Regular.ttf");
+}
+
+.container {
+	display:none;
+	width:36%;
+	width:36vw;
+	margin:0 auto;
+	height: 60vh;
+	/*background-color:rgba(114, 114, 114, .05);*/
+}
+
+.btn {
+	display:inline-block;
+	width:30%;
+	text-align:center;
+	/*border:1px solid black;*/
+	margin:1%;
+	background-color:#fff;
+	height:90%;
+	height:20vh;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	font-size:11pt;
+	box-shadow: 0px 0px 11px 1px rgba(114, 114, 114, 0.35);
+	position:relative;
+}
+
+.btnContainer {  position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 30%;
+    width: 50%;
+    margin: -19% 0 0 -25%;}
+
+.row {display:block; height:36%;}
+
+/*.btn img {width:25%; min-height:28px; display:block; margin: 25% auto 0;vertical-align: middle;}*/
+.btn img {/*width:25%; min-height:28px;*/max-height:56px; width:50%; margin:0 auto;/*margin: 18% auto 0;  margin: 6vh auto 0;*/ display:block;}
+
+a .btn, a .longBtn { -webkit-tap-highlight-color: rgba(0,0,0,0); color:#000;}
+a .btn:active, a .longBtn:active { background-color:#727272; }
+a { text-decoration: none; }
+
+.longRow {
+	display:block;
+	height:9vh;
+	width:99%;
+	margin-bottom:3vh;
+}
+
+/* Events Page */
+#eventsContainer {
+	margin-top:3vh;
+	height:auto;
+}
+
+#eventsContainer h3 {
+	font-size:10pt;
+	color:#AAA;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	margin-left:2vw;
+	margin-left:5%;
+	margin-top: 5vh;
+	margin-bottom: 0vh;
+}
+
+#eventsContainer .longRow {
+	height:55%;
+	height:11vh;
+}
+
+
+.halfBtn {
+	display:inline-block;
+	width:95%;
+	text-align:center;
+	/*border:1px solid black;*/
+	margin:1%;
+	padding:1%;
+	background-color:#fff;
+	height:100%;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	font-size:14pt;
+	box-shadow: 0px 0px 7px 0px rgba(114, 114, 114, 0.35);
+	position:relative;
+}
+
+.halfBtn img {
+	width:auto;
+	height:90%;
+    margin:1% auto 0;
+}
+
+.compatability img { width:97.2%; }

Android/NativeShell/assets/html/main.js

@@ -0,0 +1,150 @@
+$('a').on('tap', function(e){
+	e.preventDefault();
+});
+
+$( function() {
+	// Make sure this runs first, otherwise we can't see the page outside the app
+	$("#moreContainer").fadeIn(500);
+	//$("#eventsContainer").fadeIn(500);
+
+	//interface.LogMessage("inside the more page");
+	var raw = interface.getInitSettings();
+	var settings = JSON.parse(raw);
+	//console.log("raw settings: " + settings);
+
+	interface.fireScreenLoaded()
+	// Make sure the app's action bar is reset only when coming
+	// back to the More page from one of its children
+	if (!settings.isFirstLaunch && !settings.reloadMore)
+		interface.transitionToColor("More", "black");
+
+
+	if (settings.isMobile)
+	{
+		$("#lnkCatalog").attr("href", settings.catalogUrl);
+		$("#lnkCatalog").on('click', function(){
+			interface.transitionToColor("Catalog", "green");
+		});
+	}
+
+	// Updates the action bar as we move between pages
+	$("#lnkProfile").attr("href", settings.profileUrl);
+	$("#btnProfile").on('click', function(){
+		interface.transitionToColor("Profile", "orange");
+	});
+	if (!settings.isMobile)
+	{
+		$("#lnkCharacter").attr("href", settings.characterUrl);
+		$("#btnCharacter").on('click', function(){
+			interface.transitionToColor("Character", "orange");
+		});	
+	}
+	$("#lnkInventory").attr("href", settings.inventoryUrl);
+	$("#btnInventory").on('click', function(){
+		interface.transitionToColor("Inventory", "orange");
+	});
+	if (!settings.isMobile)
+	{
+		$("#lnkTrade").attr("href", settings.tradeUrl);
+		$("#btnTrade").on('click', function(){
+			interface.transitionToColor("Trade", "green");
+		});
+	}
+	$("#lnkGroups").attr("href", settings.groupsUrl);
+	$("#btnGroups").on('click', function(){
+		interface.transitionToColor("Groups", "green");
+	});
+	if (!settings.isMobile)
+	{
+		$("#lnkForum").attr("href", settings.forumUrl);
+		$("#btnForum").on('click', function(){
+			interface.transitionToColor("Forum", "purple");
+		});
+	}
+	$("#lnkBlog").attr("href", settings.blogUrl);
+	$("#btnBlog").on('click', function(){
+		interface.transitionToColor("Blog", "blue");
+	});
+	$("#lnkHelp").attr("href", settings.helpUrl);
+	$("#btnHelp").on('click', function(){
+		interface.transitionToColor("Help", "purple");
+	});
+	$("#lnkSettings").attr("href", "#");
+	$("#btnSettings").on('click', function(){
+		interface.showSettingsDialog();
+	});
+
+    if (settings.isEmailNotificationEnabled)
+        $("#btnSettingsImg").attr("src", "img/icon_settings_notification.png");
+
+	// Set up the events page
+	// We aren't guaranteed to have /any/ events, so we wait to fade in the events div
+	// until we know for sure
+	if ("eventsData" in settings)
+	{
+		var events = JSON.parse(settings.eventsData);
+		//console.log("Num events: " + events.length);
+		//console.log("settings.eventsData = " + events[0]);
+		//console.log("LogoImageURL? = " + events[0].LogoImageURL);
+		//console.log("eventsData is present: " + settings.eventsData);
+		parseEvents(settings.baseUrl, events, settings.isMobile, settings.useCompatibility);
+	}
+	else
+	{
+		$("#eventsContainer").hide();
+		console.log("no eventsData :(");
+	}
+});
+
+function parseEvents(baseUrl, events, isMobile, useCompatibility) {
+	if (isMobile && events.length > 2)
+	{
+		var specClass = "";
+		if (useCompatibility)
+			specClass = " compatibility";
+
+		var cnt = 0;
+		var appendOpening = "<div class=\"longRow\">";
+		var appendClosing = "</div>";
+		var inner = "";
+		var logStr = "";
+		for (var i = 0; i < events.length; i++)
+		{
+			inner += "<a href=\"" + baseUrl + events[i].PageUrl + "\"><div class=\"halfBtn\"><img class=\"" + specClass + "\" src=\"" + events[i].LogoImageURL + "\" /></div></a>";
+			cnt++;
+			if (cnt == 2)
+			{
+				logStr = appendOpening + inner + appendClosing;
+				//console.log("cnt: " + cnt + " | i: " + i + " | logStr: " + logStr);
+				$("#eventsContainer").append(logStr);
+				inner = "";
+				cnt = 0;
+			}
+		}
+		if (cnt == 1)
+			$("#eventsContainer").append(appendOpening + inner + appendClosing);
+
+		//console.log("FINAL: " + logStr);
+		//console.log("innerHTML: " + $("#eventsContainer").innerHTML());
+	}
+	else { // on tablets, we only have 1 button per row
+		var specClass = "";
+		if (useCompatibility)
+			specClass = "halfBtnCompat fullBtnCompat";
+		else
+			specClass = "halfBtn fullBtn";
+
+		for (var i = 0; i < events.length; i++)
+		{
+			var row = "<div class=\"longRow\"><a href=\"" + baseUrl + events[i].PageUrl + "\"><div class=\"" + specClass + "\"><img src=\"" + events[i].LogoImageURL + "\" /></div></div></a>";
+			$("#eventsContainer").append(row);	
+		}
+	}
+
+	// Fade in the events after everything is loaded
+	$("#eventsContainer").fadeIn(500);
+}
+
+function testFunction(obj) {
+	console.log("inside testFunction, param: " + obj);
+}

Android/NativeShell/assets/html/main_phone.css

@@ -0,0 +1,157 @@
+html, body {padding:0px; margin:0px;}
+body {background:#f2f2f2; overflow:hidden; margin:0 auto; width:80%;}
+
+@font-face {
+    font-family: SourceSansPro-Regular;
+    src: url("fonts/SourceSansPro-Regular.ttf");
+}
+
+#moreContainer {
+    margin-top:5%;
+}
+
+.container {
+	width:100%;
+	margin:0 auto;
+	/*height:60%;
+	height: 60vh;*/
+	/*background-color:rgba(114, 114, 114, .05);*/
+}
+
+.centerBtn {
+    margin:0 1%;
+}
+
+.btn {
+	display:inline-block;
+	width:30.5%;
+	text-align:center;
+	/*border:1px solid black;*/
+	/*margin:1%;*/
+	background-color:#fff;
+	height:100%;
+	height:16vh;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	font-size:11pt;
+	box-shadow: 0px 0px 11px 1px rgba(114, 114, 114, 0.35);
+	padding-bottom:5%;
+	padding-bottom:0vh;
+	position:relative;
+	min-height: 50px;
+}
+
+.centerText {
+    margin:0 auto;
+    text-align:center;
+}
+
+.btnContainer {
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 30%;
+    width: 100%;
+    margin: -18% 0 0 -50%;
+}
+
+/*.btn img {width:25%; min-height:28px; margin: 15% auto 0;  margin: 4vh auto 0; display:block;  vertical-align: center;}*/
+.btn img {/*width:25%; min-height:28px;*/max-height:56px; width:25%; margin:0 auto;/*margin: 18% auto 0;  margin: 6vh auto 0;*/ display:block;}
+
+.row {display:block; height:35%; height:15vh; width: 100%; margin-bottom:4%; margin-bottom:2.5vh; text-align:center;}
+
+a .btn, a .longBtn { -webkit-tap-highlight-color: rgba(0,0,0,0); color:#000;}
+a .btn:active, a .longBtn:active,  a .halfBtn:active { background-color:#727272; }
+a { text-decoration: none; }
+
+.longRow {
+	display:block;
+	height:60%;
+	height:9vh;
+	width:98.1%;
+	/*margin-bottom:1.5vh;*/
+	margin: 0 auto 4%;
+	margin: 0 auto 2vh;
+	text-align:center;
+}
+
+.longBtn {
+	margin:1%;
+	height:100%;
+	background-color:#fff;
+	box-shadow: 0px 0px 11px 1px rgba(114, 114, 114, 0.35);
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	font-size:15pt;
+}
+
+.longBtn img {
+	width: 50%;
+	width: 9vw;
+	/*padding-left:10%;
+	padding-right:10%;*/
+	margin-top:2vh;
+	max-height:20%;
+	max-height:6vh;
+	vertical-align: middle;
+}
+
+#rowMessages {width:98.1%;}
+
+#msgImgDiv {display:inline-block; /*margin-left:18%; margin-left:15vw;*/ width:100%;}
+#msgImgDiv img {max-width:10%; margin:3% 0; padding-right:5%;}
+
+.disabled {
+	opacity: 0.3;
+}
+
+/* Events Page */
+#eventsContainer {
+	display:none;
+	margin: 10% auto 0;
+	margin: 10vh auto 0;
+}
+
+#eventsContainer h3 {
+	font-size:10pt;
+	color:#AAA;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	margin-left:.5vw;
+	margin-left:2%;
+	margin-top: 5vh;
+	margin-bottom: 0vh;
+}
+
+#eventsContainer .longRow {
+	height:50%;
+	height:11vh;
+}
+
+.halfBtn, .halfBtnCompat {
+	display:inline-block;
+	width:47.2%;
+	text-align:center;
+	/*border:1px solid black;*/
+	margin:1%;
+	padding-top:1%;
+	background-color:#fff;
+	height:90%;
+	font-family: 'SourceSansPro-Regular', sans-serif;
+	font-size:14pt;
+	box-shadow: 0px 0px 11px 1px rgba(114, 114, 114, 0.35);
+	/*overflow:hidden;*/
+}
+
+.halfBtn img {
+	min-height:77%;
+	max-height:77%;
+	width:auto;
+	padding-top:1%;
+}
+
+.fullBtn img {min-height:84%; max-height: 84%; width:auto;}
+.fullBtn, .fullBtnCompat {
+	width:98.2%;
+	padding-bottom:1%;
+}
+
+.halfBtnCompat img {width:70%;}
+.fullBtnCompat img {width:70%;}

Android/NativeShell/assets/html/more.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="main.css" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="touche.js"></script>
+	<script src="jquery.min.js" type="text/javascript" ></script>
+	<script src="main.js" type="text/javascript" ></script>
+</head>
+<body>
+<div id="moreContainer" class="container">
+	<div id="row1" class="row">
+		<a id="lnkProfile"><div id="btnProfile" class="btn"><div class="btnContainer"><img src="img/icon_profile@2x.png" />Profile</div></div></a>
+		<a id="lnkCharacter"><div id="btnCharacter" class="btn"><div class="btnContainer"><img src="img/icon_character@2x.png" />Character</div></div></a>
+		<a id="lnkInventory"><div id="btnInventory" class="btn"><div class="btnContainer"><img src="img/icon_inventory@2x.png" />Inventory</div></div></a>
+	</div>
+	<div id="row2" class="row">
+		<a id="lnkTrade"><div id="btnTrade" class="btn"><div class="btnContainer"><img src="img/icon_trade@2x.png" />Trade</div></div></a>
+		<a id="lnkGroups"><div id="btnGroups" class="btn"><div class="btnContainer"><img src="img/icon_groups@2x.png" />Groups</div></div></a>
+		<a id="lnkForum"><div id="btnForum" class="btn"><div class="btnContainer"><img src="img/icon_forum@2x.png" />Forum</div></div></a>
+	</div>
+	<div id="row3" class="row">
+		<a id="lnkBlog"><div id="btnBlog" class="btn"><div class="btnContainer"><img src="img/icon_blog@2x.png" />Blog</div></div></a>
+		<a id="lnkHelp"><div id="btnHelp" class="btn"><div class="btnContainer"><img src="img/icon_help@2x.png" />Help</div></div></a>
+		<a id="lnkSettings"><div id="btnSettings" class="btn"><div class="btnContainer"><img id="btnSettingsImg" src="img/icon_settings@2x.png" />Settings</div></div></a>
+	</div>
+</div>
+<div id="eventsContainer" class="container">
+	<h3>Events</h3>
+	<!-- <div id="eventsRow1" class="longRow">
+		<div class="halfBtn"><img src="http://i.imgur.com/eD0bxsH.png" /></div>
+	</div>
+	<div class="longRow">
+		<a href="http://www.google.com"><div class="halfBtn"><img src="http://images.rbxcdn.com/edda8ddc509afee94d3efda39c428da1" /></div></a>
+	</div> -->
+	<!--<div id="eventsRow2" class="longRow">
+		<div class="halfBtn"><img src="http://images.rbxcdn.com/cc2cc48404c43dccd566d7bb932e6575" /></div>
+	</div>
+	<div id="eventsRow3" class="longRow">
+		<div class="halfBtn"><img src="" /><img src="http://images.rbxcdn.com/cc2cc48404c43dccd566d7bb932e6575" /></div>
+	</div>-->
+</div>
+</body>
+</html>

Android/NativeShell/assets/html/more_phone.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=320, initial-scale=1">
+	<link href="main_phone.css" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="touche.js"></script>
+	<script src="jquery.min.js" type="text/javascript" ></script>
+	<script src="main.js" type="text/javascript" ></script>
+</head>
+<body>
+<div id="moreContainer" class="container">
+	<div id="rowMessages" class="longRow">
+		<a id="lnkCatalog"><div id="btnCatalog" class="longBtn"><div id="msgImgDiv"><img src="img/icon_catalog@2x.png" />Open Catalog</div></div></a>
+	</div>
+    <div id="row1" class="row">
+        <a id="lnkProfile"><div id="btnProfile" class="btn"><div class="btnContainer"><img src="img/icon_profile@2x.png" /><span class="centerText">Profile</span></div></div></a>
+        <a id="lnkGroups"><div id="btnGroups" class="btn centerBtn"><div class="btnContainer"><img src="img/icon_groups@2x.png" /><span class="centerText">Groups</span></div></div></a>
+        <a id="lnkInventory"><div id="btnInventory" class="btn"><div class="btnContainer"><img src="img/icon_inventory@2x.png" />Inventory</div></div></a>
+    </div>
+    <div id="row3" class="row">
+        <a id="lnkBlog"><div id="btnBlog" class="btn"><div class="btnContainer"><img src="img/icon_blog@2x.png" /><span class="centerText">Blog</span></div></div></a>
+        <a id="lnkHelp"><div id="btnHelp" class="btn centerBtn"><div class="btnContainer"><img src="img/icon_help@2x.png" /><span class="centerText">Help</span></div></div></a>
+        <a id="lnkSettings"><div id="btnSettings" class="btn"><div class="btnContainer"><img id="btnSettingsImg" src="img/icon_settings@2x.png" /><span class="centerText">Settings</span></div></div></a>
+    </div>
+</div>
+<div id="eventsContainer" class="container">
+    <h3>Events</h3>
+    <!-- <div id="eventsRow1" class="longRow">
+        <div class="halfBtn compatability"><img src="http://i.imgur.com/eD0bxsH.png" /></div>
+        <div class="halfBtn compatability"><img src="http://i.imgur.com/eD0bxsH.png" /></div>
+    </div>
+    <div id="eventsRow1" class="longRow">
+        <div class="halfBtn fullBtn compatability"><img src="http://i.imgur.com/eD0bxsH.png" /></div>
+    </div> -->
+</div>
+</body>
+</html>

Android/NativeShell/assets/html/touche.js

@@ -0,0 +1,94 @@
+/* global jQuery:true */
+(function() {
+  'use strict';
+  var isTouch = 'ontouchstart' in window || 'msmaxtouchpoints' in window.navigator;
+
+  function Touche(nodes) {
+    // Doing this allows the developer to omit the `new` keyword from their calls to Touche
+    if (!(this instanceof Touche)) {
+      return new Touche(nodes);
+    }
+
+    if (!nodes) {
+      throw new Error('No DOM elements passed into Touche');
+    }
+
+    this.nodes = nodes;
+
+    return this;
+  }
+
+  // Our own event handler
+  Touche.prototype.on = function(event, fn) {
+    var touchend, nodes = this.nodes,
+      len = nodes.length,
+      ev;
+
+    if (isTouch && event === 'click') {
+      touchend = true;
+    }
+
+    ev = function(el, event, fn) {
+      var called, once = function() {
+          if (!called && (called = true)) {
+            fn.apply(this, arguments);
+          }
+        };
+
+      el.addEventListener(event, once, false);
+
+      if (touchend) {
+        el.addEventListener('touchend', once, false);
+      }
+    };
+
+    // NodeList or just a Node?
+    if (len) {
+      while (len--) {
+        ev(nodes[len], event, fn);
+      }
+    } else {
+      ev(nodes, event, fn);
+    }
+
+    return this;
+  };
+
+  // Expose Touche
+  window.Touche = Touche;
+
+  // Has the developer used jQuery?
+  if (window.jQuery && isTouch) {
+    var originalOnMethod  = jQuery.fn.on,
+        originalOffMethod = jQuery.fn.off;
+
+    var replaceEventName = function (event) {
+      if (event.slice(0, 5) == 'click') {
+        return event.replace('click', 'touchend');
+      }
+      return event;
+    }
+
+    // Change event type and re-apply .on() method
+    jQuery.fn.on = function() {
+      // arguments[0] is the event name if provided
+      if(typeof arguments[0] === "string"){
+        arguments[0] = replaceEventName(arguments[0]);
+      }
+
+      originalOnMethod.apply(this, arguments);
+      return this;
+    };
+
+    // Change event type and re-apply .off() method
+    jQuery.fn.off = function() {
+      // arguments[0] is the event name if provided
+      if(typeof arguments[0] === "string"){
+        arguments[0] = replaceEventName(arguments[0]);
+      }
+
+      originalOffMethod.apply(this, arguments);
+      return this;
+    };
+  }
+})();