Merge branch 'master' of github.com:okfocus/vvalls

10 files changed, 117 insertions, 12 deletions

diff --git a/package.json b/package.json
index b4ac400..adefb82 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "multer": "~0.1.0",
     "body-parser": "1.3.0",
     "marked": "~0.3.2",
-    "emailjs": "~0.3.6"
+    "emailjs": "~0.3.6",
+    "intro.js": "^0.9.0"
   },
   "devDependencies": {
     "grunt": "~0.4.1",
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/app.css b/public/assets/stylesheets/app.css
index 57ca3c6..3edad4f 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -758,7 +758,7 @@ iframe.embed {
 #minotaur {
 	position: absolute;
 	top: 0px;
-	right: 0px;
+	left: 150px;
 	opacity: 0;
 }
 #minotaur .label:after {
@@ -2087,14 +2087,22 @@ a[data-role="forgot-password"] {
 
 /* COLLABORATORS */
 
-.collaborators > div {
-  width: 600px;
+.collaborators .rap {
+	display: table;
+	width: 100%;
+	height: 100%;
+}
+
+.collaborators .rap .holder .inner {
+  width: 480px;
   margin: 0 auto;
   text-align: left;
   background: white;
   padding: 10px;
   margin: 20px auto;
+position: relative;
 }
+
 .collaborators button {
   width: auto;
   position: relative;
@@ -2121,14 +2129,15 @@ a[data-role="forgot-password"] {
   border-color: black;
 }
 .collaborators p {
-  margin: 20px 0;
+	margin: 10px 0 20px;
+	font-weight: 300;
 }
 .collaborators form input[type=text] {
   font-size: 16px;
   width: 300px;
 }
 .collaborators h2 {
-  margin: 20px auto 10px;
+  margin: 20px auto 0;
 }
 #collaborator-list {
   margin-top: 20px;
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/collaborators.ejs b/views/controls/editor/collaborators.ejs
index 69e5b64..b658bf6 100644
--- a/views/controls/editor/collaborators.ejs
+++ b/views/controls/editor/collaborators.ejs
@@ -1,7 +1,9 @@
 <div class="collaborators fixed mediaDrawer animate">
 	<span class="close">X</span>
-	
-  <div>
+
+  <div class="rap">
+		<div class="holder">
+			<div class="inner vvbox">
     <h2>Collaborators</h2>
 
     <p>
@@ -21,9 +23,9 @@
 
     <ul id="collaborator-list">
     </ul>
-
   </div>
-
+  </div>
+</div>
 </div>
 
 <script type="text/html" id="collaborator-template">
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>