From 6e5dbdeb78b72bf9775ed2ea233db0b2ad8b5e41 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 13:03:24 -0400 Subject: get coordinates for point --- .../assets/javascripts/rectangles/models/wall.js | 8 ++++++ .../assets/javascripts/rectangles/util/coords.js | 33 ++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 public/assets/javascripts/rectangles/util/coords.js (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 1b37aa0..07c3971 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -51,6 +51,14 @@ }) }, mousemove: function(e){ + var offset = offsetFromPoint(e, mx.el) + if (offset) { + console.log([offset.left * mx.width + mx.face.x.a, (1-offset.top) * mx.height + mx.face.y.a].map(Math.round)) +// console.log(mx) + } + else { + console.log("NONE") + } }, mousedown: function(e){ if (Scenery.nextMedia) { diff --git a/public/assets/javascripts/rectangles/util/coords.js b/public/assets/javascripts/rectangles/util/coords.js new file mode 100644 index 0000000..74b7fda --- /dev/null +++ b/public/assets/javascripts/rectangles/util/coords.js @@ -0,0 +1,33 @@ +function offsetFromPoint(event, element) { + function a(width) { + var l = 0, r = 200; + while (r - l > 0.0001) { + var mid = (r + l) / 2; + var a = document.createElement('div'); + a.style.cssText = 'position: absolute;left:0;top:0;background: red;z-index: 1000;'; + a.style[width ? 'width' : 'height'] = mid.toFixed(3) + '%'; + a.style[width ? 'height' : 'width'] = '100%'; + element.appendChild(a); + var x = document.elementFromPoint(event.clientX, event.clientY); + element.removeChild(a); + if (x === a) { + r = mid; + } else { + if (r === 200) { + return null; + } + l = mid; + } + } + return mid; + } + var l = a(1), + t = a(0); + return l && t ? { + left: l / 100, + top: t / 100, + toString: function () { + return 'left: ' + l + '%, top: ' + t + '%'; + } + } : null; +} -- cgit v1.2.3-70-g09d2 From b512bcdfe49e0bce336f848dcf620c3c533e1f8c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 13:12:40 -0400 Subject: saving icon --- public/assets/javascripts/rectangles/engine/scenery/move.js | 1 + public/assets/javascripts/rectangles/util/minotaur.js | 2 +- public/assets/stylesheets/app.css | 6 +++--- 3 files changed, 5 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 55d6ef1..e7ca4ef 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -88,6 +88,7 @@ Scenery.move = function(base){ } function up (e, cursor){ + console.log(dragging, oldState) if (! dragging || ! oldState) return dragging = false diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 4d9a795..d165ccc 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 5000 + base.delay = 2500 base.objects = {} base.init = function () { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e278fab..57ca3c6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -757,8 +757,8 @@ iframe.embed { #minotaur { position: absolute; - top: 0; - right: 230px; + top: 0px; + right: 0px; opacity: 0; } #minotaur .label:after { @@ -771,9 +771,9 @@ iframe.embed { color: white; background: black; font-weight: 300; - float: right; text-decoration: none; z-index: 33; + opacity: 1; } #minotaur.saving .label:after { content: 'SAVING'; -- cgit v1.2.3-70-g09d2 From 110097063ab30187a6fd6536111312b021c3e653 Mon Sep 17 00:00:00 2001 From: ryderr Date: Thu, 2 Oct 2014 14:30:12 -0400 Subject: beginning of tutorial overlay --- public/assets/javascripts/app.js | 5 ++ public/assets/javascripts/vendor/chardinjs.min.js | 2 + public/assets/stylesheets/chardinjs.css | 83 +++++++++++++++++++++++ views/controls/editor/toolbar.ejs | 3 +- views/editor.ejs | 2 +- views/partials/meta.ejs | 1 + views/partials/scripts.ejs | 1 + 7 files changed, 95 insertions(+), 2 deletions(-) create mode 100755 public/assets/javascripts/vendor/chardinjs.min.js create mode 100755 public/assets/stylesheets/chardinjs.css (limited to 'public/assets/javascripts') 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",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 @@ -