beginning of tutorial overlay

7 files changed, 95 insertions, 2 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index a6b6088..98e1820 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -17,6 +17,11 @@ else {
 
 new WOW().init();
 
+
+$('#help-button').click( function(){
+   $('body').chardinJs('start')
+});
+
 var scene, cam, map;
 
 var app = new function(){}
diff --git a/public/assets/javascripts/vendor/chardinjs.min.js b/public/assets/javascripts/vendor/chardinjs.min.js
new file mode 100755
index 0000000..56cd7b7
--- /dev/null
+++ b/public/assets/javascripts/vendor/chardinjs.min.js
@@ -0,0 +1,2 @@
+// Generated by CoffeeScript 1.6.2
+(function(){var e=[].slice;(function(t,n){var r;return r=function(){function e(e){var r=this;this.$el=t(e),t(n).resize(function(){return r.refresh()})}return e.prototype.start=function(){var e,t,n,r;if(this._overlay_visible())return!1;this._add_overlay_layer(),r=this.$el.find("*[data-intro]:visible");for(t=0,n=r.length;t<n;t++)e=r[t],this._show_element(e);return this.$el.trigger("chardinJs:start")},e.prototype.toggle=function(){return this._overlay_visible()?this.stop():this.start()},e.prototype.refresh=function(){var e,t,n,r,i;if(this._overlay_visible()){r=this.$el.find("*[data-intro]:visible"),i=[];for(t=0,n=r.length;t<n;t++)e=r[t],i.push(this._position_helper_layer(e));return i}return this},e.prototype.stop=function(){return this.$el.find(".chardinjs-overlay").fadeOut(function(){return t(this).remove()}),this.$el.find(".chardinjs-helper-layer").remove(),this.$el.find(".chardinjs-show-element").removeClass("chardinjs-show-element"),this.$el.find(".chardinjs-relative-position").removeClass("chardinjs-relative-position"),n.removeEventListener?n.removeEventListener("keydown",this._onKeyDown,!0):document.detachEvent&&document.detachEvent("onkeydown",this._onKeyDown),this.$el.trigger("chardinJs:stop")},e.prototype._overlay_visible=function(){return this.$el.find(".chardinjs-overlay").length!==0},e.prototype._add_overlay_layer=function(){var e,t,n,r=this;return this._overlay_visible()?!1:(t=document.createElement("div"),n="",t.className="chardinjs-overlay",this.$el.prop("tagName")==="BODY"?(n+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",t.setAttribute("style",n)):(e=this._get_offset(this.$el.get()[0]),e&&(n+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",t.setAttribute("style",n))),this.$el.get()[0].appendChild(t),t.onclick=function(){return r.stop()},setTimeout(function(){return n+="opacity: .8;opacity: .8;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';filter: alpha(opacity=80);",t.setAttribute("style",n)},10))},e.prototype._get_position=function(e){return e.getAttribute("data-position")||"bottom"},e.prototype._place_tooltip=function(e){var n,r,i,s,o,u,a;u=t(e).data("tooltip_layer"),a=this._get_offset(u),u.style.top=null,u.style.right=null,u.style.bottom=null,u.style.left=null;switch(this._get_position(e)){case"top":case"bottom":i=this._get_offset(e),o=i.width,r=t(u).width(),u.style.left=""+(o/2-a.width/2)+"px";break;case"left":case"right":i=this._get_offset(e),s=i.height,n=t(u).height(),u.style.top=""+(s/2-a.height/2)+"px"}switch(this._get_position(e)){case"left":return u.style.left="-"+(a.width-34)+"px";case"right":return u.style.right="-"+(a.width-34)+"px";case"bottom":return u.style.bottom="-"+a.height+"px";case"top":return u.style.top="-"+a.height+"px"}},e.prototype._position_helper_layer=function(e){var n,r;return r=t(e).data("helper_layer"),n=this._get_offset(e),r.setAttribute("style","width: "+n.width+"px; height:"+n.height+"px; top:"+n.top+"px; left: "+n.left+"px;")},e.prototype._show_element=function(e){var n,r,i,s;r=this._get_offset(e),i=document.createElement("div"),s=document.createElement("div"),t(e).data("helper_layer",i).data("tooltip_layer",s),e.id&&i.setAttribute("data-id",e.id),i.className="chardinjs-helper-layer chardinjs-"+this._get_position(e),this._position_helper_layer(e),this.$el.get()[0].appendChild(i),s.className="chardinjs-tooltip chardinjs-"+this._get_position(e),s.innerHTML="<div class='chardinjs-tooltiptext'>"+e.getAttribute("data-intro")+"</div>",i.appendChild(s),this._place_tooltip(e),e.className+=" chardinjs-show-element",n="",e.currentStyle?n=e.currentStyle.position:document.defaultView&&document.defaultView.getComputedStyle&&(n=document.defaultView.getComputedStyle(e,null).getPropertyValue("position")),n=n.toLowerCase();if(n!=="absolute"&&n!=="relative")return e.className+=" chardinjs-relative-position"},e.prototype._get_offset=function(e){var t,n,r;t={width:e.offsetWidth,height:e.offsetHeight},n=0,r=0;while(e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop))n+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return t.top=r,t.left=n,t},e}(),t.fn.extend({chardinJs:function(){var n,i,s,o;return o=arguments[0],i=2<=arguments.length?e.call(arguments,1):[],n=t(this[0]),s=n.data("chardinJs"),s||n.data("chardinJs",s=new r(this,o)),typeof o=="string"&&s[o].apply(s,i),s}})})(window.jQuery,window)}).call(this);
\ No newline at end of file
diff --git a/public/assets/stylesheets/chardinjs.css b/public/assets/stylesheets/chardinjs.css
new file mode 100755
index 0000000..15334cf
--- /dev/null
+++ b/public/assets/stylesheets/chardinjs.css
@@ -0,0 +1,83 @@
+.chardinjs-overlay {
+  position: absolute;
+  z-index: 999999;
+  background-color: #000;
+  opacity: 0;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; }
+
+.chardinjs-helper-layer {
+  position: absolute;
+  z-index: 9999998;
+  color: white;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; }
+  .chardinjs-helper-layer.chardinjs-left {
+    border-left: solid white 1px;
+    margin-left: -10px; }
+  .chardinjs-helper-layer.chardinjs-right {
+    border-right: solid white 1px;
+    padding-right: 10px; }
+  .chardinjs-helper-layer.chardinjs-bottom {
+    border-bottom: solid white 1px;
+    padding-bottom: 10px; }
+  .chardinjs-helper-layer.chardinjs-top {
+    border-top: solid white 1px;
+    padding-top: 10px; }
+
+.chardinjs-tooltip {
+  position: absolute;
+  -webkit-transition: opacity 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out;
+  -ms-transition: opacity 0.1s ease-out;
+  -o-transition: opacity 0.1s ease-out;
+  transition: opacity 0.1s ease-out;
+  max-width: 200px; }
+  .chardinjs-tooltip.chardinjs-left {
+    margin-left: -135px;
+    padding-right: 10px; }
+  .chardinjs-tooltip.chardinjs-right {
+    margin-right: -135px;
+    padding-left: 10px; }
+  .chardinjs-tooltip.chardinjs-bottom {
+    margin-bottom: -50px;
+    padding-top: 10px; }
+  .chardinjs-tooltip.chardinjs-top {
+    margin-top: -50px;
+    padding-bottom: 10px; }
+  .chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
+    content: ".";
+    display: inline-block;
+    background-color: white;
+    height: 1px;
+    overflow: hidden;
+    position: absolute; }
+  .chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after {
+    width: 100px;
+    top: 50%; }
+  .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
+    width: 1px;
+    height: 50px;
+    left: 50%; }
+  .chardinjs-tooltip.chardinjs-bottom:before {
+    top: -50px; }
+  .chardinjs-tooltip.chardinjs-top:after {
+    bottom: -50px; }
+  .chardinjs-tooltip.chardinjs-right:before {
+    left: -100px; }
+  .chardinjs-tooltip.chardinjs-left:after {
+    right: -100px; }
+
+.chardinjs-show-element {
+  z-index: 9999999;
+  opacity: 0.8; }
+/*
+.chardinjs-relative-position {
+  position: relative; }
+*/
\ No newline at end of file
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 92807e1..586194b 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,4 +1,5 @@
-<div class="edit menu vvbox" id="editorToolbar">
+
+<div class="edit menu vvbox" id="editorToolbar" data-intro="This is the main toolbar. Add and select media, Apply wallpaper, change room name etc." data-position="left">
 	<span
 		data-role='open-media-viewer'
 		data-info="add media"
diff --git a/views/editor.ejs b/views/editor.ejs
index e029225..3c4caf1 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -22,7 +22,7 @@
 			[[ include controls/editor/settings ]]
 		</div>
 
-		<div id="minimap" class="vvbox">
+		<div id="minimap" class="vvbox" data-intro="Mini-map shows your position and orientation in a room. Navigate with WASD keys or drag here." data-position="top">
 			<span class="el"></span>
 		</div>
 
diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs
index 4e94a5e..6ff45cb 100644
--- a/views/partials/meta.ejs
+++ b/views/partials/meta.ejs
@@ -33,6 +33,7 @@
 	<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 	<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
 	<link href='/assets/stylesheets/animate.css' rel='stylesheet' type='text/css'>
+	<link href='/assets/stylesheets/chardinjs.css' rel='stylesheet' type='text/css'>
 	<!--[if lt IE 9]>
 	<style>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 5ddab2a..4af9938 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -7,6 +7,7 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/wow.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/chardinjs.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/dataUriToBlob.js"></script>
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>