From 7003aefe66d8398b2b1bdc6eaad59f5c6256dd42 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Tue, 29 Oct 2013 14:43:48 +0100 Subject: [PATCH 1/3] - change Message z-index to overlap over Doodle3D logo - change Message position in DOM so that the Message box is fully visible in the mobile view --- less/message.less | 58 ++++++++++++++++++++++++----------------------- www/index.html | 3 ++- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/less/message.less b/less/message.less index 0cccc60..0076c1b 100644 --- a/less/message.less +++ b/less/message.less @@ -1,31 +1,33 @@ #message { - position: absolute; - top: 0; - right: 0; + position: absolute; + top: 0; + right: 0; + + padding: 0.4em 0.5em; + border-radius: 0 0 0 10px; + border: 2px solid #333; + border-width: 0 0 2px 2px; + font-weight: bold; + box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + + color: #333; + white-space:nowrap; + + z-index: 5; - padding: 0.4em 0.5em; - border-radius: 0 0 0 10px; - border: 2px solid #333; - border-width: 0 0 2px 2px; - font-weight: bold; - box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); - - color: #333; - white-space:nowrap; - - display:none; - - &.error { - background: #EB313C; - color: #fff; - } - &.warning { - background: #E9A86E; - } - &.notice { - background: #93CAF4; - } - &.info { - background: #97DD8A; - } + display:none; + + &.error { + background: #EB313C; + color: #fff; + } + &.warning { + background: #E9A86E; + } + &.notice { + background: #93CAF4; + } + &.info { + background: #97DD8A; + } } \ No newline at end of file diff --git a/www/index.html b/www/index.html index e4367ee..b2bc476 100644 --- a/www/index.html +++ b/www/index.html @@ -60,8 +60,9 @@ -
+ +
From 09f60b8f4b311d5ad718ffcaacfba4b9100fae11 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Tue, 29 Oct 2013 21:27:17 +0100 Subject: [PATCH 2/3] many small UI (css) improvements --- js_src/buttonbehaviors.js | 15 ++++--- js_src/canvasDrawing.js | 2 +- js_src/init_layout.js | 2 +- js_src/libs/jquery-joyride-2-1.js | 2 + js_src/previewRendering.js | 2 +- less/base.less | 9 ++++ less/base_rightpanel.less | 4 +- less/help_joyride-2.1.less | 62 +++++++++++++++++---------- less/mobile.less | 11 +++-- less/portrait.less | 4 +- less/settingsPopup.less | 1 + www/js/libs/jquery-joyride-2-1.min.js | 2 +- 12 files changed, 76 insertions(+), 40 deletions(-) diff --git a/js_src/buttonbehaviors.js b/js_src/buttonbehaviors.js index 816b899..2674a80 100644 --- a/js_src/buttonbehaviors.js +++ b/js_src/buttonbehaviors.js @@ -169,11 +169,16 @@ function initButtonBehavior() { // console.log("btnSettings touchend"); // }); - btnInfo.mouseup(function(e) { - e.preventDefault(); - console.log("btnInfo mouse up"); - if (!clientInfo.isSmartphone) helpTours.startTour(helpTours.WELCOMETOUR); - }); + // 29-okt-2013 - we're not doing help for smartphones at the moment + if (clientInfo.isSmartphone) { + btnInfo.addClass("disabled"); + } else { + btnInfo.mouseup(function(e) { + e.preventDefault(); + console.log("btnInfo mouse up"); + helpTours.startTour(helpTours.WELCOMETOUR); + }); + } // DEBUG /* diff --git a/js_src/canvasDrawing.js b/js_src/canvasDrawing.js index 9aceffc..593542c 100644 --- a/js_src/canvasDrawing.js +++ b/js_src/canvasDrawing.js @@ -166,7 +166,7 @@ function clearDoodle() { function redrawDoodle(recalcBoundsAndTransforms) { if (recalcBoundsAndTransforms == undefined) recalcBoundsAndTransforms = false; - console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms); +// console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms); if (recalcBoundsAndTransforms == true) { doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom diff --git a/js_src/init_layout.js b/js_src/init_layout.js index 4191375..907aa30 100644 --- a/js_src/init_layout.js +++ b/js_src/init_layout.js @@ -13,7 +13,7 @@ function doOnResize() { canvasWidth = canvas.width; canvasHeight = canvas.height; - console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width()); +// console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width()); calcPreviewCanvasProperties(); diff --git a/js_src/libs/jquery-joyride-2-1.js b/js_src/libs/jquery-joyride-2-1.js index 886494b..5029448 100755 --- a/js_src/libs/jquery-joyride-2-1.js +++ b/js_src/libs/jquery-joyride-2-1.js @@ -353,6 +353,8 @@ // detect phones with media queries if supported. is_phone : function () { + return false; // 2013-10-29 Adriaan Wormgoor - hard-falsed this + if (Modernizr) { return Modernizr.mq('only screen and (max-width: 767px)'); } diff --git a/js_src/previewRendering.js b/js_src/previewRendering.js index 7cf064f..32a7383 100644 --- a/js_src/previewRendering.js +++ b/js_src/previewRendering.js @@ -38,7 +38,7 @@ function initPreviewRendering() { } function calcPreviewCanvasProperties() { - console.log("f:calcPreviewCanvasProperties()"); +// console.log("f:calcPreviewCanvasProperties()"); globalScale = preview.width / canvasWidth; layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js diff --git a/less/base.less b/less/base.less index 34d7772..2fb5ae9 100644 --- a/less/base.less +++ b/less/base.less @@ -3,6 +3,8 @@ GLOBAL CONTAINER */ + + body { background-color: #fcfcfc; user-select: none; /* disable cut copy paste */ @@ -110,6 +112,13 @@ img { } +// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx +//a, input, button { +// -ms-touch-action: none !important; +//} + + + /* diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less index debc503..a9e7d4d 100644 --- a/less/base_rightpanel.less +++ b/less/base_rightpanel.less @@ -80,7 +80,7 @@ box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55); - right: -60%; + right: -70%; margin: 5% 0%; } @@ -126,7 +126,7 @@ box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55); - right: -55%; + right: -65%; } #thermometerCanvas { diff --git a/less/help_joyride-2.1.less b/less/help_joyride-2.1.less index c3dc3da..582a0c1 100644 --- a/less/help_joyride-2.1.less +++ b/less/help_joyride-2.1.less @@ -31,20 +31,6 @@ padding: 10px 10px 15px 15px; } -// Mobile -//@media only screen and (max-width: 767px) { -// .joyride-tip-guide { -// width: 95% !important; -// -moz-border-radius: 0; -// -webkit-border-radius: 0; -// border-radius: 0; -// left: 2.5% !important; -// } -// .joyride-tip-guide-wrapper { -// width: 100%; -// } -//} - /* Add a little css triangle pip, older browser just miss out on the fanciness of it */ .joyride-tip-guide span.joyride-nub { @@ -144,7 +130,7 @@ .joyride-tip-guide { h1, h2, h3, h4, h5, h6 { - line-height: 1.25; + line-height: 1.25em; margin: 0; font-weight: bold; // color: #2DDF34; @@ -153,20 +139,20 @@ } } -.joyride-tip-guide h1 { font-size: 30px; } -.joyride-tip-guide h2 { font-size: 26px; } -.joyride-tip-guide h3 { font-size: 22px; } -.joyride-tip-guide h4 { font-size: 18px; } -.joyride-tip-guide h5 { font-size: 16px; } -.joyride-tip-guide h6 { font-size: 14px; } +.joyride-tip-guide h1 { font-size: 1.85em; } +.joyride-tip-guide h2 { font-size: 1.7em; } +.joyride-tip-guide h3 { font-size: 1.55em; } +.joyride-tip-guide h4 { font-size: 1.4em; } +.joyride-tip-guide h5 { font-size: 1.25em; } +.joyride-tip-guide h6 { font-size: 1.1em; } .joyride-tip-guide { p { // margin: 0 0 18px 0; margin: 5px 0 25px; - font-size: 14px; - line-height: 18px; + font-size: 1.1em; + line-height: 1.3em; } a { @@ -318,3 +304,33 @@ left: 0; border-radius: 5px; } + +// Mobile +@media only screen and (max-width: 767px) { + .joyride-tip-guide { + // width: 75% !important; +// border-radius: 0; + p { + margin: 5px 0 18px; + font-size: 1.0em; + } + + .joyride-next-tip { +// width: auto; +// padding: 6px 18px 4px; + font-size: 1.0em; + } + + h1 { font-size: 1.60em; } + h2 { font-size: 1.48em; } + h3 { font-size: 1.36em; } + h4 { font-size: 1.24em; } + h5 { font-size: 1.12em; } + h6 { font-size: 1.0em; } + + } + .joyride-tip-guide-wrapper { + width: 80%; + } +} + diff --git a/less/mobile.less b/less/mobile.less index 7d0e952..47c15f8 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -32,17 +32,20 @@ } } +// sets width for both right and left panel +@mobilePanelsWidth: 92px; + /* LEFT */ .leftpanel { - width: 100px; + width: @mobilePanelsWidth; background-color: #fff; z-index: 50; transition: left .3s ease-out; } .hideleft { - left: -101px; + left: -(@mobilePanelsWidth+1); } .shadowright { box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); @@ -64,13 +67,13 @@ RIGHT */ .rightpanel { - width: 100px; + width: @mobilePanelsWidth; background-color: #fff; z-index: 50; transition: right .3s ease-out; } .hideright { - right: -101px; + right: -(@mobilePanelsWidth+1); } .shadowleft { box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); diff --git a/less/portrait.less b/less/portrait.less index 728c21b..78c8356 100644 --- a/less/portrait.less +++ b/less/portrait.less @@ -7,8 +7,8 @@ } .vertImage { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; /*border: 2px solid #f0f;*/ max-width: 100%; height: auto; diff --git a/less/settingsPopup.less b/less/settingsPopup.less index cb6ae90..7c93ca8 100644 --- a/less/settingsPopup.less +++ b/less/settingsPopup.less @@ -60,6 +60,7 @@ margin: .5%; overflow-y: scroll; overflow-x: hidden; + -webkit-overflow-scrolling: touch; border: 1px solid rgb(187, 187, 187); border-radius: 5px; } diff --git a/www/js/libs/jquery-joyride-2-1.min.js b/www/js/libs/jquery-joyride-2-1.min.js index 47d08f8..7179e8b 100644 --- a/www/js/libs/jquery-joyride-2-1.min.js +++ b/www/js/libs/jquery-joyride-2-1.min.js @@ -1 +1 @@ -!function(a,b,c){"use strict";var d={version:"2.1",tipLocation:"bottom",nubPosition:"auto",scroll:!0,scrollSpeed:300,timer:0,autoStart:!1,startTimerOnClick:!0,startOffset:0,nextButton:!0,tipAnimation:"fade",pauseAfter:[],tipAnimationFadeSpeed:300,cookieMonster:!1,cookieName:"joyride",cookieDomain:!1,cookiePath:!1,localStorage:!1,localStorageKey:"joyride",tipContainer:"body",modal:!1,expose:!1,postExposeCallback:a.noop,preRideCallback:a.noop,postRideCallback:a.noop,preStepCallback:a.noop,postStepCallback:a.noop,template:{link:'X',timer:'
',tip:'
',wrapper:'',button:'',modal:'
',expose:'
',exposeCover:'
'}},e=e||!1,f={},g={init:function(c){return this.each(function(){a.isEmptyObject(f)?(f=a.extend(!0,d,c),f.document=b.document,f.$document=a(f.document),f.$window=a(b),f.$content_el=a(this),f.$body=a(f.tipContainer),f.body_offset=a(f.tipContainer).position(),f.$tip_content=a("> li",f.$content_el),f.paused=!1,f.attempts=0,f.tipLocationPatterns={top:["bottom"],bottom:[],left:["right","top","bottom"],right:["left","top","bottom"]},g.jquery_check(),a.isFunction(a.cookie)||(f.cookieMonster=!1),f.cookieMonster&&a.cookie(f.cookieName)||f.localStorage&&g.support_localstorage()&&localStorage.getItem(f.localStorageKey)||(f.$tip_content.each(function(b){g.create({$li:a(this),index:b})}),f.autoStart&&(!f.startTimerOnClick&&f.timer>0?(g.show("init"),g.startTimer()):g.show("init"))),f.$document.on("click.joyride",".joyride-next-tip, .joyride-modal-bg",function(a){a.preventDefault(),f.$li.next().length<1?g.end():f.timer>0?(clearTimeout(f.automate),g.hide(),g.show(),g.startTimer()):(g.hide(),g.show())}),f.$document.on("click.joyride",".joyride-close-tip",function(a){a.preventDefault(),g.end()}),f.$window.bind("resize.joyride",function(){if(f.$li){if(f.exposed&&f.exposed.length>0){var b=a(f.exposed);b.each(function(){var b=a(this);g.un_expose(b),g.expose(b)})}g.is_phone()?g.pos_phone():g.pos_default()}})):g.restart()})},resume:function(){g.set_li(),g.show()},nextTip:function(){f.$li.next().length<1?g.end():f.timer>0?(clearTimeout(f.automate),g.hide(),g.show(),g.startTimer()):(g.hide(),g.show())},tip_template:function(b){var c,d,e;return b.tip_class=b.tip_class||"",c=a(f.template.tip).addClass(b.tip_class),d=a.trim(a(b.li).html())+g.button_text(b.button_text)+f.template.link+g.timer_instance(b.index),e=a(f.template.wrapper),b.li.attr("data-aria-labelledby")&&e.attr("aria-labelledby",b.li.attr("data-aria-labelledby")),b.li.attr("data-aria-describedby")&&e.attr("aria-describedby",b.li.attr("data-aria-describedby")),c.append(e),c.first().attr("data-index",b.index),a(".joyride-content-wrapper",c).append(d),c[0]},timer_instance:function(b){var c;return c=0===b&&f.startTimerOnClick&&f.timer>0||0===f.timer?"":g.outerHTML(a(f.template.timer)[0])},button_text:function(b){return f.nextButton?(b=a.trim(b)||"Next",b=g.outerHTML(a(f.template.button).append(b)[0])):b="",b},create:function(b){var c=b.$li.attr("data-button")||b.$li.attr("data-text"),d=b.$li.attr("class"),e=a(g.tip_template({tip_class:d,index:b.index,button_text:c,li:b.$li}));a(f.tipContainer).append(e)},show:function(b){var d,e,h={},i=[],j=0,k=null;if(f.$li===c||-1===a.inArray(f.$li.index(),f.pauseAfter))if(f.paused?f.paused=!1:g.set_li(b),f.attempts=0,f.$li.length&&f.$target.length>0){for(b&&(f.preRideCallback(f.$li.index(),f.$next_tip),f.modal&&g.show_modal()),f.preStepCallback(f.$li.index(),f.$next_tip),i=(f.$li.data("options")||":").split(";"),j=i.length,d=j-1;d>=0;d--)e=i[d].split(":"),2===e.length&&(h[a.trim(e[0])]=a.trim(e[1]));f.tipSettings=a.extend({},f,h),f.tipSettings.tipLocationPattern=f.tipLocationPatterns[f.tipSettings.tipLocation],f.modal&&f.expose&&g.expose(),!/body/i.test(f.$target.selector)&&f.scroll&&g.scroll_to(),g.is_phone()?g.pos_phone(!0):g.pos_default(!0),k=a(".joyride-timer-indicator",f.$next_tip),/pop/i.test(f.tipAnimation)?(k.outerWidth(0),f.timer>0?(f.$next_tip.show(),k.animate({width:a(".joyride-timer-indicator-wrap",f.$next_tip).outerWidth()},f.timer)):f.$next_tip.show()):/fade/i.test(f.tipAnimation)&&(k.outerWidth(0),f.timer>0?(f.$next_tip.fadeIn(f.tipAnimationFadeSpeed),f.$next_tip.show(),k.animate({width:a(".joyride-timer-indicator-wrap",f.$next_tip).outerWidth()},f.timer)):f.$next_tip.fadeIn(f.tipAnimationFadeSpeed)),f.$current_tip=f.$next_tip,a(".joyride-next-tip",f.$current_tip).focus(),g.tabbable(f.$current_tip)}else f.$li&&f.$target.length<1?g.show():g.end();else f.paused=!0},is_phone:function(){return e?e.mq("only screen and (max-width: 767px)"):f.$window.width()<767?!0:!1},support_localstorage:function(){return e?e.localstorage:!!b.localStorage},hide:function(){f.modal&&f.expose&&g.un_expose(),f.modal||a(".joyride-modal-bg").hide(),f.$current_tip.hide(),f.postStepCallback(f.$li.index(),f.$current_tip)},set_li:function(a){a?(f.$li=f.$tip_content.eq(f.startOffset),g.set_next_tip(),f.$current_tip=f.$next_tip):(f.$li=f.$li.next(),g.set_next_tip()),g.set_target()},set_next_tip:function(){f.$next_tip=a(".joyride-tip-guide[data-index="+f.$li.index()+"]")},set_target:function(){var b=f.$li.attr("data-class"),c=f.$li.attr("data-id"),d=function(){return c?a(f.document.getElementById(c)):b?a("."+b).filter(":visible").first():a("body")};f.$target=d()},scroll_to:function(){var b,c;b=f.$window.height()/2,c=Math.ceil(f.$target.offset().top-b+f.$next_tip.outerHeight()),a("html, body").stop().animate({scrollTop:c},f.scrollSpeed)},paused:function(){return-1===a.inArray(f.$li.index()+1,f.pauseAfter)?!0:!1},destroy:function(){a.isEmptyObject(f)||f.$document.off(".joyride"),a(b).off(".joyride"),a(".joyride-close-tip, .joyride-next-tip, .joyride-modal-bg").off(".joyride"),a(".joyride-tip-guide, .joyride-modal-bg").remove(),clearTimeout(f.automate),f={}},restart:function(){f.autoStart?(g.hide(),f.$li=c,g.show("init")):(!f.startTimerOnClick&&f.timer>0?(g.show("init"),g.startTimer()):g.show("init"),f.autoStart=!0)},pos_default:function(b){var c=(Math.ceil(f.$window.height()/2),f.$next_tip.offset(),a(".joyride-nub",f.$next_tip)),d=Math.ceil(c.outerWidth()/2),e=Math.ceil(c.outerHeight()/2),h=b||!1;if(h&&(f.$next_tip.css("visibility","hidden"),f.$next_tip.show()),/body/i.test(f.$target.selector))f.$li.length&&g.pos_modal(c);else{var i=f.tipSettings.tipAdjustmentY?parseInt(f.tipSettings.tipAdjustmentY):0,j=f.tipSettings.tipAdjustmentX?parseInt(f.tipSettings.tipAdjustmentX):0;g.bottom()?(f.$next_tip.css({top:f.$target.offset().top+e+f.$target.outerHeight()+i,left:f.$target.offset().left-.7*f.$next_tip.outerWidth()+j}),/right/i.test(f.tipSettings.nubPosition)&&f.$next_tip.css("left",f.$target.offset().left+f.$target.outerWidth()),g.nub_position(c,f.tipSettings.nubPosition,"top")):g.top()?(f.$next_tip.css({top:f.$target.offset().top-f.$next_tip.outerHeight()-e-i,left:f.$target.offset().left-.8*f.$next_tip.outerWidth()+j}),g.nub_position(c,f.tipSettings.nubPosition,"bottom")):g.right()?(f.$next_tip.css({top:f.$target.offset().top+.5*i,left:f.$target.outerWidth()+f.$target.offset().left+d+j}),g.nub_position(c,f.tipSettings.nubPosition,"left")):g.left()&&(f.$next_tip.css({top:f.$target.offset().top+.5*i,left:f.$target.offset().left-f.$next_tip.outerWidth()-d-j}),g.nub_position(c,f.tipSettings.nubPosition,"right")),!g.visible(g.corners(f.$next_tip))&&f.attempts0&&arguments[0]instanceof a)e=arguments[0];else{if(!f.$target||/body/i.test(f.$target.selector))return!1;e=f.$target}return e.length<1?(b.console&&console.error("element not valid",e),!1):(c=a(f.template.expose),f.$body.append(c),c.css({top:e.offset().top-2,left:e.offset().left-2,width:e[0].clientWidth+4,height:e[0].clientHeight+4}),d=a(f.template.exposeCover),h={zIndex:e.css("z-index"),position:e.css("position")},e.css("z-index",1*c.css("z-index")+1),"static"==h.position&&e.css("position","relative"),e.data("expose-css",h),d.css({top:e.offset().top-2,left:e.offset().left-2,width:e[0].clientWidth+4,height:e[0].clientHeight+4}),f.$body.append(d),c.addClass(i),d.addClass(i),f.tipSettings.exposeClass&&(c.addClass(f.tipSettings.exposeClass),d.addClass(f.tipSettings.exposeClass)),e.data("expose",i),f.postExposeCallback(f.$li.index(),f.$next_tip,e),g.add_exposed(e),void 0)},un_expose:function(){var c,d,e,h,i=!1;if(arguments.length>0&&arguments[0]instanceof a)d=arguments[0];else{if(!f.$target||/body/i.test(f.$target.selector))return!1;d=f.$target}return d.length<1?(b.console&&console.error("element not valid",d),!1):(c=d.data("expose"),e=a("."+c),arguments.length>1&&(i=arguments[1]),i===!0?a(".joyride-expose-wrapper,.joyride-expose-cover").remove():e.remove(),h=d.data("expose-css"),"auto"==h.zIndex?d.css("z-index",""):d.css("z-index",h.zIndex),h.position!=d.css("position")&&("static"==h.position?d.css("position",""):d.css("position",h.position)),d.removeData("expose"),d.removeData("expose-z-index"),g.remove_exposed(d),void 0)},add_exposed:function(b){f.exposed=f.exposed||[],b instanceof a?f.exposed.push(b[0]):"string"==typeof b&&f.exposed.push(b)},remove_exposed:function(b){var c;b instanceof a?c=b[0]:"string"==typeof b&&(c=b),f.exposed=f.exposed||[];for(var d=0;dd&&(i=0>d?0:d),g>h&&(h=g),[a.offset().topa.offset().left]},visible:function(a){for(var b=a.length;b--;)if(a[b])return!1;return!0},nub_position:function(a,b,c){"auto"===b?a.addClass(c):a.addClass(b)},startTimer:function(){f.$li.length?f.automate=setTimeout(function(){g.hide(),g.show(),g.startTimer()},f.timer):clearTimeout(f.automate)},end:function(){f.cookieMonster&&a.cookie(f.cookieName,"ridden",{expires:365,domain:f.cookieDomain,path:f.cookiePath}),f.localStorage&&localStorage.setItem(f.localStorageKey,!0),f.timer>0&&clearTimeout(f.automate),f.modal&&f.expose&&g.un_expose(),f.$current_tip&&f.$current_tip.hide(),f.$li&&(f.postStepCallback(f.$li.index(),f.$current_tip),f.postRideCallback(f.$li.index(),f.$current_tip)),a(".joyride-modal-bg").hide()},jquery_check:function(){return a.isFunction(a.fn.on)?!0:(a.fn.on=function(a,b,c){return this.delegate(b,a,c)},a.fn.off=function(a,b,c){return this.undelegate(b,a,c)},!1)},outerHTML:function(a){return a.outerHTML||(new XMLSerializer).serializeToString(a)},version:function(){return f.version},tabbable:function(b){a(b).on("keydown",function(c){if(!c.isDefaultPrevented()&&c.keyCode&&27===c.keyCode)return c.preventDefault(),g.end(),void 0;if(9===c.keyCode){var d=a(b).find(":tabbable"),e=d.filter(":first"),f=d.filter(":last");c.target!==f[0]||c.shiftKey?c.target===e[0]&&c.shiftKey&&(f.focus(1),c.preventDefault()):(e.focus(1),c.preventDefault())}})}};a.fn.joyride=function(b){return g[b]?g[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+" does not exist on jQuery.joyride"),void 0):g.init.apply(this,arguments)}}(jQuery,this); \ No newline at end of file +!function(a,b,c){"use strict";var d={version:"2.1",tipLocation:"bottom",nubPosition:"auto",scroll:!0,scrollSpeed:300,timer:0,autoStart:!1,startTimerOnClick:!0,startOffset:0,nextButton:!0,tipAnimation:"fade",pauseAfter:[],tipAnimationFadeSpeed:300,cookieMonster:!1,cookieName:"joyride",cookieDomain:!1,cookiePath:!1,localStorage:!1,localStorageKey:"joyride",tipContainer:"body",modal:!1,expose:!1,postExposeCallback:a.noop,preRideCallback:a.noop,postRideCallback:a.noop,preStepCallback:a.noop,postStepCallback:a.noop,template:{link:'X',timer:'
',tip:'
',wrapper:'',button:'',modal:'
',expose:'
',exposeCover:'
'}},e=e||!1,f={},g={init:function(c){return this.each(function(){a.isEmptyObject(f)?(f=a.extend(!0,d,c),f.document=b.document,f.$document=a(f.document),f.$window=a(b),f.$content_el=a(this),f.$body=a(f.tipContainer),f.body_offset=a(f.tipContainer).position(),f.$tip_content=a("> li",f.$content_el),f.paused=!1,f.attempts=0,f.tipLocationPatterns={top:["bottom"],bottom:[],left:["right","top","bottom"],right:["left","top","bottom"]},g.jquery_check(),a.isFunction(a.cookie)||(f.cookieMonster=!1),f.cookieMonster&&a.cookie(f.cookieName)||f.localStorage&&g.support_localstorage()&&localStorage.getItem(f.localStorageKey)||(f.$tip_content.each(function(b){g.create({$li:a(this),index:b})}),f.autoStart&&(!f.startTimerOnClick&&f.timer>0?(g.show("init"),g.startTimer()):g.show("init"))),f.$document.on("click.joyride",".joyride-next-tip, .joyride-modal-bg",function(a){a.preventDefault(),f.$li.next().length<1?g.end():f.timer>0?(clearTimeout(f.automate),g.hide(),g.show(),g.startTimer()):(g.hide(),g.show())}),f.$document.on("click.joyride",".joyride-close-tip",function(a){a.preventDefault(),g.end()}),f.$window.bind("resize.joyride",function(){if(f.$li){if(f.exposed&&f.exposed.length>0){var b=a(f.exposed);b.each(function(){var b=a(this);g.un_expose(b),g.expose(b)})}g.is_phone()?g.pos_phone():g.pos_default()}})):g.restart()})},resume:function(){g.set_li(),g.show()},nextTip:function(){f.$li.next().length<1?g.end():f.timer>0?(clearTimeout(f.automate),g.hide(),g.show(),g.startTimer()):(g.hide(),g.show())},tip_template:function(b){var c,d,e;return b.tip_class=b.tip_class||"",c=a(f.template.tip).addClass(b.tip_class),d=a.trim(a(b.li).html())+g.button_text(b.button_text)+f.template.link+g.timer_instance(b.index),e=a(f.template.wrapper),b.li.attr("data-aria-labelledby")&&e.attr("aria-labelledby",b.li.attr("data-aria-labelledby")),b.li.attr("data-aria-describedby")&&e.attr("aria-describedby",b.li.attr("data-aria-describedby")),c.append(e),c.first().attr("data-index",b.index),a(".joyride-content-wrapper",c).append(d),c[0]},timer_instance:function(b){var c;return c=0===b&&f.startTimerOnClick&&f.timer>0||0===f.timer?"":g.outerHTML(a(f.template.timer)[0])},button_text:function(b){return f.nextButton?(b=a.trim(b)||"Next",b=g.outerHTML(a(f.template.button).append(b)[0])):b="",b},create:function(b){var c=b.$li.attr("data-button")||b.$li.attr("data-text"),d=b.$li.attr("class"),e=a(g.tip_template({tip_class:d,index:b.index,button_text:c,li:b.$li}));a(f.tipContainer).append(e)},show:function(b){var d,e,h={},i=[],j=0,k=null;if(f.$li===c||-1===a.inArray(f.$li.index(),f.pauseAfter))if(f.paused?f.paused=!1:g.set_li(b),f.attempts=0,f.$li.length&&f.$target.length>0){for(b&&(f.preRideCallback(f.$li.index(),f.$next_tip),f.modal&&g.show_modal()),f.preStepCallback(f.$li.index(),f.$next_tip),i=(f.$li.data("options")||":").split(";"),j=i.length,d=j-1;d>=0;d--)e=i[d].split(":"),2===e.length&&(h[a.trim(e[0])]=a.trim(e[1]));f.tipSettings=a.extend({},f,h),f.tipSettings.tipLocationPattern=f.tipLocationPatterns[f.tipSettings.tipLocation],f.modal&&f.expose&&g.expose(),!/body/i.test(f.$target.selector)&&f.scroll&&g.scroll_to(),g.is_phone()?g.pos_phone(!0):g.pos_default(!0),k=a(".joyride-timer-indicator",f.$next_tip),/pop/i.test(f.tipAnimation)?(k.outerWidth(0),f.timer>0?(f.$next_tip.show(),k.animate({width:a(".joyride-timer-indicator-wrap",f.$next_tip).outerWidth()},f.timer)):f.$next_tip.show()):/fade/i.test(f.tipAnimation)&&(k.outerWidth(0),f.timer>0?(f.$next_tip.fadeIn(f.tipAnimationFadeSpeed),f.$next_tip.show(),k.animate({width:a(".joyride-timer-indicator-wrap",f.$next_tip).outerWidth()},f.timer)):f.$next_tip.fadeIn(f.tipAnimationFadeSpeed)),f.$current_tip=f.$next_tip,a(".joyride-next-tip",f.$current_tip).focus(),g.tabbable(f.$current_tip)}else f.$li&&f.$target.length<1?g.show():g.end();else f.paused=!0},is_phone:function(){return!1},support_localstorage:function(){return e?e.localstorage:!!b.localStorage},hide:function(){f.modal&&f.expose&&g.un_expose(),f.modal||a(".joyride-modal-bg").hide(),f.$current_tip.hide(),f.postStepCallback(f.$li.index(),f.$current_tip)},set_li:function(a){a?(f.$li=f.$tip_content.eq(f.startOffset),g.set_next_tip(),f.$current_tip=f.$next_tip):(f.$li=f.$li.next(),g.set_next_tip()),g.set_target()},set_next_tip:function(){f.$next_tip=a(".joyride-tip-guide[data-index="+f.$li.index()+"]")},set_target:function(){var b=f.$li.attr("data-class"),c=f.$li.attr("data-id"),d=function(){return c?a(f.document.getElementById(c)):b?a("."+b).filter(":visible").first():a("body")};f.$target=d()},scroll_to:function(){var b,c;b=f.$window.height()/2,c=Math.ceil(f.$target.offset().top-b+f.$next_tip.outerHeight()),a("html, body").stop().animate({scrollTop:c},f.scrollSpeed)},paused:function(){return-1===a.inArray(f.$li.index()+1,f.pauseAfter)?!0:!1},destroy:function(){a.isEmptyObject(f)||f.$document.off(".joyride"),a(b).off(".joyride"),a(".joyride-close-tip, .joyride-next-tip, .joyride-modal-bg").off(".joyride"),a(".joyride-tip-guide, .joyride-modal-bg").remove(),clearTimeout(f.automate),f={}},restart:function(){f.autoStart?(g.hide(),f.$li=c,g.show("init")):(!f.startTimerOnClick&&f.timer>0?(g.show("init"),g.startTimer()):g.show("init"),f.autoStart=!0)},pos_default:function(b){var c=(Math.ceil(f.$window.height()/2),f.$next_tip.offset(),a(".joyride-nub",f.$next_tip)),d=Math.ceil(c.outerWidth()/2),e=Math.ceil(c.outerHeight()/2),h=b||!1;if(h&&(f.$next_tip.css("visibility","hidden"),f.$next_tip.show()),/body/i.test(f.$target.selector))f.$li.length&&g.pos_modal(c);else{var i=f.tipSettings.tipAdjustmentY?parseInt(f.tipSettings.tipAdjustmentY):0,j=f.tipSettings.tipAdjustmentX?parseInt(f.tipSettings.tipAdjustmentX):0;g.bottom()?(f.$next_tip.css({top:f.$target.offset().top+e+f.$target.outerHeight()+i,left:f.$target.offset().left-.7*f.$next_tip.outerWidth()+j}),/right/i.test(f.tipSettings.nubPosition)&&f.$next_tip.css("left",f.$target.offset().left+f.$target.outerWidth()),g.nub_position(c,f.tipSettings.nubPosition,"top")):g.top()?(f.$next_tip.css({top:f.$target.offset().top-f.$next_tip.outerHeight()-e-i,left:f.$target.offset().left-.8*f.$next_tip.outerWidth()+j}),g.nub_position(c,f.tipSettings.nubPosition,"bottom")):g.right()?(f.$next_tip.css({top:f.$target.offset().top+.5*i,left:f.$target.outerWidth()+f.$target.offset().left+d+j}),g.nub_position(c,f.tipSettings.nubPosition,"left")):g.left()&&(f.$next_tip.css({top:f.$target.offset().top+.5*i,left:f.$target.offset().left-f.$next_tip.outerWidth()-d-j}),g.nub_position(c,f.tipSettings.nubPosition,"right")),!g.visible(g.corners(f.$next_tip))&&f.attempts0&&arguments[0]instanceof a)e=arguments[0];else{if(!f.$target||/body/i.test(f.$target.selector))return!1;e=f.$target}return e.length<1?(b.console&&console.error("element not valid",e),!1):(c=a(f.template.expose),f.$body.append(c),c.css({top:e.offset().top-2,left:e.offset().left-2,width:e[0].clientWidth+4,height:e[0].clientHeight+4}),d=a(f.template.exposeCover),h={zIndex:e.css("z-index"),position:e.css("position")},e.css("z-index",1*c.css("z-index")+1),"static"==h.position&&e.css("position","relative"),e.data("expose-css",h),d.css({top:e.offset().top-2,left:e.offset().left-2,width:e[0].clientWidth+4,height:e[0].clientHeight+4}),f.$body.append(d),c.addClass(i),d.addClass(i),f.tipSettings.exposeClass&&(c.addClass(f.tipSettings.exposeClass),d.addClass(f.tipSettings.exposeClass)),e.data("expose",i),f.postExposeCallback(f.$li.index(),f.$next_tip,e),g.add_exposed(e),void 0)},un_expose:function(){var c,d,e,h,i=!1;if(arguments.length>0&&arguments[0]instanceof a)d=arguments[0];else{if(!f.$target||/body/i.test(f.$target.selector))return!1;d=f.$target}return d.length<1?(b.console&&console.error("element not valid",d),!1):(c=d.data("expose"),e=a("."+c),arguments.length>1&&(i=arguments[1]),i===!0?a(".joyride-expose-wrapper,.joyride-expose-cover").remove():e.remove(),h=d.data("expose-css"),"auto"==h.zIndex?d.css("z-index",""):d.css("z-index",h.zIndex),h.position!=d.css("position")&&("static"==h.position?d.css("position",""):d.css("position",h.position)),d.removeData("expose"),d.removeData("expose-z-index"),g.remove_exposed(d),void 0)},add_exposed:function(b){f.exposed=f.exposed||[],b instanceof a?f.exposed.push(b[0]):"string"==typeof b&&f.exposed.push(b)},remove_exposed:function(b){var c;b instanceof a?c=b[0]:"string"==typeof b&&(c=b),f.exposed=f.exposed||[];for(var d=0;dd&&(i=0>d?0:d),g>h&&(h=g),[a.offset().topa.offset().left]},visible:function(a){for(var b=a.length;b--;)if(a[b])return!1;return!0},nub_position:function(a,b,c){"auto"===b?a.addClass(c):a.addClass(b)},startTimer:function(){f.$li.length?f.automate=setTimeout(function(){g.hide(),g.show(),g.startTimer()},f.timer):clearTimeout(f.automate)},end:function(){f.cookieMonster&&a.cookie(f.cookieName,"ridden",{expires:365,domain:f.cookieDomain,path:f.cookiePath}),f.localStorage&&localStorage.setItem(f.localStorageKey,!0),f.timer>0&&clearTimeout(f.automate),f.modal&&f.expose&&g.un_expose(),f.$current_tip&&f.$current_tip.hide(),f.$li&&(f.postStepCallback(f.$li.index(),f.$current_tip),f.postRideCallback(f.$li.index(),f.$current_tip)),a(".joyride-modal-bg").hide()},jquery_check:function(){return a.isFunction(a.fn.on)?!0:(a.fn.on=function(a,b,c){return this.delegate(b,a,c)},a.fn.off=function(a,b,c){return this.undelegate(b,a,c)},!1)},outerHTML:function(a){return a.outerHTML||(new XMLSerializer).serializeToString(a)},version:function(){return f.version},tabbable:function(b){a(b).on("keydown",function(c){if(!c.isDefaultPrevented()&&c.keyCode&&27===c.keyCode)return c.preventDefault(),g.end(),void 0;if(9===c.keyCode){var d=a(b).find(":tabbable"),e=d.filter(":first"),f=d.filter(":last");c.target!==f[0]||c.shiftKey?c.target===e[0]&&c.shiftKey&&(f.focus(1),c.preventDefault()):(e.focus(1),c.preventDefault())}})}};a.fn.joyride=function(b){return g[b]?g[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+" does not exist on jQuery.joyride"),void 0):g.init.apply(this,arguments)}}(jQuery,this); \ No newline at end of file From e7ef6eccc492d07f3df4cb5dea396ca87ea5e818 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Tue, 29 Oct 2013 22:08:08 +0100 Subject: [PATCH 3/3] fixed bug which happened if you pressed the move up/down or twist left/right buttons after loading Doodle3D (before drawing anything). Somewhat related: after pressing 'new', the move up/down and twist left/right buttons would show the previous (cached) doodle. Cleared that as well. --- js_src/buttonbehaviors.js | 58 +++++++++++++++++++++++--------------- js_src/init_layout.js | 1 - js_src/previewRendering.js | 7 ++++- 3 files changed, 41 insertions(+), 25 deletions(-) diff --git a/js_src/buttonbehaviors.js b/js_src/buttonbehaviors.js index eec0c37..590b273 100644 --- a/js_src/buttonbehaviors.js +++ b/js_src/buttonbehaviors.js @@ -64,7 +64,8 @@ function initButtonBehavior() { e.preventDefault(); clearInterval(btnOopsInterval); redrawDoodle(true); - redrawPreview(); + renderToImageDataPreview(); +// redrawPreview(); } btnOops.on('touchstart', function(e) { startOops(e); }); btnOops.on('touchend', function(e) { stopOops(e); }); @@ -74,17 +75,19 @@ function initButtonBehavior() { function startMoveUp(e) { e.preventDefault(); // console.log("btnMoveUp mouse down"); - previewUp(true); - clearInterval(btnMoveUpInterval); - btnMoveUpInterval = setInterval( function() { + if (_points.length > 1) { previewUp(true); - }, 1000/30); + clearInterval(btnMoveUpInterval); + btnMoveUpInterval = setInterval( function() { + previewUp(true); + }, 1000/30); + } } function stopMoveUp(e) { e.preventDefault(); - console.log("btnMoveUp mouse up"); +// console.log("btnMoveUp mouse up"); clearInterval(btnMoveUpInterval); - previewUp(); + if (_points.length > 1) previewUp(); } btnMoveUp.mousedown(function(e) { startMoveUp(e) }); btnMoveUp.mouseup(function(e) { stopMoveUp(e) }); @@ -94,17 +97,19 @@ function initButtonBehavior() { function startMoveDown(e) { e.preventDefault(); // console.log("btnMoveDown mouse down"); - previewDown(true); - clearInterval(btnMoveDownInterval); - btnMoveDownInterval = setInterval( function() { + if (_points.length > 1) { previewDown(true); - }, 1000/30); + clearInterval(btnMoveDownInterval); + btnMoveDownInterval = setInterval( function() { + previewDown(true); + }, 1000/30); + } } function stopMoveDown(e) { e.preventDefault(); - console.log("btnMoveDown mouse up"); +// console.log("btnMoveDown mouse up"); clearInterval(btnMoveDownInterval); - previewDown(); + if (_points.length > 1) previewDown(); } btnMoveDown.mousedown(function(e) { startMoveDown(e) }); btnMoveDown.mouseup(function(e) { stopMoveDown(e) }); @@ -114,17 +119,19 @@ function initButtonBehavior() { function startTwistLeft(e) { e.preventDefault(); // console.log("btnTwistLeft mouse down"); - previewTwistLeft(true); - clearInterval(btnTwistLeftInterval); - btnTwistLeftInterval = setInterval( function() { + if (_points.length > 1) { previewTwistLeft(true); - }, 1000/30); + clearInterval(btnTwistLeftInterval); + btnTwistLeftInterval = setInterval( function() { + previewTwistLeft(true); + }, 1000/30); + } } function stopTwistLeft(e) { e.preventDefault(); // console.log("btnTwistLeft mouse up"); clearInterval(btnTwistLeftInterval); - previewTwistLeft(); + if (_points.length > 1) previewTwistLeft(); } btnTwistLeft.mousedown(function(e) { startTwistLeft(e) }); btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) }); @@ -134,17 +141,19 @@ function initButtonBehavior() { function startTwistRight(e) { e.preventDefault(); // console.log("btnTwistRight mouse down"); - previewTwistRight(true); - clearInterval(btnTwistRightInterval); - btnTwistRightInterval = setInterval( function() { + if (_points.length > 1) { previewTwistRight(true); - }, 1000/30); + clearInterval(btnTwistRightInterval); + btnTwistRightInterval = setInterval( function() { + previewTwistRight(true); + }, 1000/30); + } } function stopTwistRight(e) { e.preventDefault(); // console.log("btnTwistRight mouse up"); clearInterval(btnTwistRightInterval); - previewTwistRight(); + if (_points.length > 1) previewTwistRight(); } btnTwistRight.mousedown(function(e) { startTwistRight(e) }); btnTwistRight.mouseup(function(e) { stopTwistRight(e) }); @@ -267,6 +276,9 @@ function resetPreview() { previewCtx.clearRect(0,0,canvas.width, canvas.height); previewCtx.restore(); + // also make new Image, otherwise the previously cached preview can be redrawn with move up/down or twist left/right + doodleImageCapture = new Image(); + // reset height and rotation to default values numLayers = previewDefaults.numLayers; // current number of preview layers rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; // diff --git a/js_src/init_layout.js b/js_src/init_layout.js index 907aa30..34be0e0 100644 --- a/js_src/init_layout.js +++ b/js_src/init_layout.js @@ -22,7 +22,6 @@ function doOnResize() { redrawDoodle(); redrawPreview(); - } function initLayouting() { diff --git a/js_src/previewRendering.js b/js_src/previewRendering.js index 32a7383..6c3c825 100644 --- a/js_src/previewRendering.js +++ b/js_src/previewRendering.js @@ -33,8 +33,13 @@ function initPreviewRendering() { previewCtx_tmp = preview_tmp.getContext('2d'); +// doodleImageCapture = new Image(); + calcPreviewCanvasProperties(); redrawPreview(); + + // needed to +// doodleImageCapture = new Image(); } function calcPreviewCanvasProperties() { @@ -226,7 +231,7 @@ function renderToImageDataPreview() { // it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance) function redrawRenderedPreview(redrawLess) { if (redrawLess == undefined) redrawLess = false; - console.log("f:redrawRenderedPreview()"); +// console.log("f:redrawRenderedPreview()"); previewCtx.clearRect(0, 0, preview.width, preview.height); previewCtx.lineWidth = strokeWidth;