From 7cc9d22254f617d608392361b01eed740b0fa072 Mon Sep 17 00:00:00 2001 From: Aditya Raisinghani Date: Tue, 8 Apr 2014 03:04:36 +0530 Subject: [PATCH] Moved nanoscroller to bower components and related fixes. --- app/assets/main.html | 10 +- app/styles/base.sass | 3 + app/templates/play/level/hud.jade | 4 +- app/views/kinds/RootView.coffee | 6 +- bower.json | 3 +- config.coffee | 2 +- vendor/scripts/jquery.nanoscroller.min.js | 4 - vendor/styles/nanoscroller.scss | 272 ---------------------- 8 files changed, 18 insertions(+), 286 deletions(-) delete mode 100644 vendor/scripts/jquery.nanoscroller.min.js delete mode 100644 vendor/styles/nanoscroller.scss diff --git a/app/assets/main.html b/app/assets/main.html index a7a46407f..26397d97f 100644 --- a/app/assets/main.html +++ b/app/assets/main.html @@ -72,7 +72,7 @@ - +
@@ -162,21 +162,21 @@ - --> diff --git a/app/styles/base.sass b/app/styles/base.sass index a228c9681..72ff4fe2f 100644 --- a/app/styles/base.sass +++ b/app/styles/base.sass @@ -5,6 +5,9 @@ html background-color: #2f261d +body + position: absolute !important + // https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important .secret display: none diff --git a/app/templates/play/level/hud.jade b/app/templates/play/level/hud.jade index a5b066cc3..5153f1379 100644 --- a/app/templates/play/level/hud.jade +++ b/app/templates/play/level/hud.jade @@ -9,8 +9,8 @@ .thang-name .thang-actions.thang-elem - .nano-table - .nano-table-content + .nano + .nano-content .action-header(data-i18n="play_level.action_timeline") Action Timeline .table-container .progress-arrow.progress-indicator diff --git a/app/views/kinds/RootView.coffee b/app/views/kinds/RootView.coffee index 7043f1989..0a26d6cf3 100644 --- a/app/views/kinds/RootView.coffee +++ b/app/views/kinds/RootView.coffee @@ -30,6 +30,10 @@ module.exports = class RootView extends CocoView $el ?= @$el.find('.main-content-area') super($el) + renderScrollbar: -> + $('.nano-pane').css('display','none') + $ -> $('.nano').nanoScroller() + afterInsert: -> # force the browser to scroll to the hash # also messes with the browser history, so perhaps come up with a better solution @@ -38,7 +42,7 @@ module.exports = class RootView extends CocoView location.hash = '' location.hash = hash @buildLanguages() - renderScrollbar() + @renderScrollbar() #@$('.antiscroll-wrap').antiscroll() # not yet, buggy afterRender: -> diff --git a/bower.json b/bower.json index e73834bc5..4580acd32 100644 --- a/bower.json +++ b/bower.json @@ -36,7 +36,8 @@ "underscore.string": "~2.3.3", "firebase": "~1.0.2", "catiline": "~2.9.3", - "d3": "~3.4.4" + "d3": "~3.4.4", + "nanoscroller": "~0.8.0" }, "overrides": { "backbone": { diff --git a/config.coffee b/config.coffee index 1189f2270..10daa6b93 100644 --- a/config.coffee +++ b/config.coffee @@ -70,7 +70,7 @@ exports.config = stylesheets: defaultExtension: 'sass' joinTo: - 'stylesheets/app.css': /^(app|vendor)/ + 'stylesheets/app.css': /^(app|vendor|bower_components)/ order: before: [ 'app/styles/bootstrap.scss' diff --git a/vendor/scripts/jquery.nanoscroller.min.js b/vendor/scripts/jquery.nanoscroller.min.js deleted file mode 100644 index 0e42f7645..000000000 --- a/vendor/scripts/jquery.nanoscroller.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! nanoScrollerJS - v0.8.0 - (c) 2014 James Florentino; Licensed MIT */ - -!function(a,b,c){"use strict";var d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F;x={paneClass:"nano-pane",sliderClass:"nano-slider",contentClass:"nano-content",iOSNativeScrolling:!1,preventPageScrolling:!1,disableResize:!1,alwaysVisible:!1,flashDelay:1500,sliderMinHeight:20,sliderMaxHeight:null,documentContext:null,windowContext:null},s="scrollbar",r="scroll",k="mousedown",l="mousemove",n="mousewheel",m="mouseup",q="resize",h="drag",u="up",p="panedown",f="DOMMouseScroll",g="down",v="wheel",i="keydown",j="keyup",t="touchmove",d="Microsoft Internet Explorer"===b.navigator.appName&&/msie 7./i.test(b.navigator.appVersion)&&b.ActiveXObject,e=null,B=b.requestAnimationFrame,w=b.cancelAnimationFrame,D=c.createElement("div").style,F=function(){var a,b,c,d,e,f;for(d=["t","webkitT","MozT","msT","OT"],a=e=0,f=d.length;f>e;a=++e)if(c=d[a],b=d[a]+"ransform",b in D)return d[a].substr(0,d[a].length-1);return!1}(),E=function(a){return F===!1?!1:""===F?a:F+a.charAt(0).toUpperCase()+a.substr(1)},C=E("transform"),z=C!==!1,y=function(){var a,b,d;return a=c.createElement("div"),b=a.style,b.position="absolute",b.width="100px",b.height="100px",b.overflow=r,b.top="-9999px",c.body.appendChild(a),d=a.offsetWidth-a.clientWidth,c.body.removeChild(a),d},A=function(){var a,c,d;return c=b.navigator.userAgent,(a=/(?=.+Mac OS X)(?=.+Firefox)/.test(c))?(d=/Firefox\/\d{2}\./.exec(c),d&&(d=d[0].replace(/\D+/g,"")),a&&+d>23):!1},o=function(){function i(d,f){this.el=d,this.options=f,e||(e=y()),this.$el=a(this.el),this.doc=a(this.options.documentContext||c),this.win=a(this.options.windowContext||b),this.$content=this.$el.children("."+f.contentClass),this.$content.attr("tabindex",this.options.tabIndex||0),this.content=this.$content[0],this.options.iOSNativeScrolling&&null!=this.el.style.WebkitOverflowScrolling?this.nativeScrolling():this.generate(),this.createEvents(),this.addEvents(),this.reset()}return i.prototype.preventScrolling=function(a,b){if(this.isActive)if(a.type===f)(b===g&&a.originalEvent.detail>0||b===u&&a.originalEvent.detail<0)&&a.preventDefault();else if(a.type===n){if(!a.originalEvent||!a.originalEvent.wheelDelta)return;(b===g&&a.originalEvent.wheelDelta<0||b===u&&a.originalEvent.wheelDelta>0)&&a.preventDefault()}},i.prototype.nativeScrolling=function(){this.$content.css({WebkitOverflowScrolling:"touch"}),this.iOSNativeScrolling=!0,this.isActive=!0},i.prototype.updateScrollValues=function(){var a;a=this.content,this.maxScrollTop=a.scrollHeight-a.clientHeight,this.prevScrollTop=this.contentScrollTop||0,this.contentScrollTop=a.scrollTop,this.iOSNativeScrolling||(this.maxSliderTop=this.paneHeight-this.sliderHeight,this.sliderTop=0===this.maxScrollTop?0:this.contentScrollTop*this.maxSliderTop/this.maxScrollTop)},i.prototype.setOnScrollStyles=function(){var a;z?(a={},a[C]="translate(0, "+this.sliderTop+"px)"):a={top:this.sliderTop},B?this.scrollRAF||(this.scrollRAF=B(function(b){return function(){b.scrollRAF=null,b.slider.css(a)}}(this))):this.slider.css(a)},i.prototype.createEvents=function(){this.events={down:function(a){return function(b){return a.isBeingDragged=!0,a.offsetY=b.pageY-a.slider.offset().top,a.pane.addClass("active"),a.doc.bind(l,a.events[h]).bind(m,a.events[u]),!1}}(this),drag:function(a){return function(b){return a.sliderY=b.pageY-a.$el.offset().top-a.offsetY,a.scroll(),a.contentScrollTop>=a.maxScrollTop&&a.prevScrollTop!==a.maxScrollTop?a.$el.trigger("scrollend"):0===a.contentScrollTop&&0!==a.prevScrollTop&&a.$el.trigger("scrolltop"),!1}}(this),up:function(a){return function(){return a.isBeingDragged=!1,a.pane.removeClass("active"),a.doc.unbind(l,a.events[h]).unbind(m,a.events[u]),!1}}(this),resize:function(a){return function(){a.reset()}}(this),panedown:function(a){return function(b){return a.sliderY=(b.offsetY||b.originalEvent.layerY)-.5*a.sliderHeight,a.scroll(),a.events.down(b),!1}}(this),scroll:function(a){return function(b){a.updateScrollValues(),a.isBeingDragged||(a.iOSNativeScrolling||(a.sliderY=a.sliderTop,a.setOnScrollStyles()),null!=b&&(a.contentScrollTop>=a.maxScrollTop?(a.options.preventPageScrolling&&a.preventScrolling(b,g),a.prevScrollTop!==a.maxScrollTop&&a.$el.trigger("scrollend")):0===a.contentScrollTop&&(a.options.preventPageScrolling&&a.preventScrolling(b,u),0!==a.prevScrollTop&&a.$el.trigger("scrolltop"))))}}(this),wheel:function(a){return function(b){var c;if(null!=b)return c=b.delta||b.wheelDelta||b.originalEvent&&b.originalEvent.wheelDelta||-b.detail||b.originalEvent&&-b.originalEvent.detail,c&&(a.sliderY+=-c/3),a.scroll(),!1}}(this)}},i.prototype.addEvents=function(){var a;this.removeEvents(),a=this.events,this.options.disableResize||this.win.bind(q,a[q]),this.iOSNativeScrolling||(this.slider.bind(k,a[g]),this.pane.bind(k,a[p]).bind(""+n+" "+f,a[v])),this.$content.bind(""+r+" "+n+" "+f+" "+t,a[r])},i.prototype.removeEvents=function(){var a;a=this.events,this.win.unbind(q,a[q]),this.iOSNativeScrolling||(this.slider.unbind(),this.pane.unbind()),this.$content.unbind(""+r+" "+n+" "+f+" "+t,a[r])},i.prototype.generate=function(){var a,c,d,f,g,h;return f=this.options,g=f.paneClass,h=f.sliderClass,a=f.contentClass,this.$el.find("."+g).length||this.$el.find("."+h).length||this.$el.append('
'),this.pane=this.$el.children("."+g),this.slider=this.pane.find("."+h),0===e&&A()?(d=b.getComputedStyle(this.content,null).getPropertyValue("padding-right").replace(/\D+/g,""),c={right:-14,paddingRight:+d+14}):e&&(c={right:-e},this.$el.addClass("has-scrollbar")),null!=c&&this.$content.css(c),this},i.prototype.restore=function(){this.stopped=!1,this.iOSNativeScrolling||this.pane.show(),this.addEvents()},i.prototype.reset=function(){var a,b,c,f,g,h,i,j,k,l,m,n;return this.iOSNativeScrolling?void(this.contentHeight=this.content.scrollHeight):(this.$el.find("."+this.options.paneClass).length||this.generate().stop(),this.stopped&&this.restore(),a=this.content,f=a.style,g=f.overflowY,d&&this.$content.css({height:this.$content.height()}),b=a.scrollHeight+e,l=parseInt(this.$el.css("max-height"),10),l>0&&(this.$el.height(""),this.$el.height(a.scrollHeight>l?l:a.scrollHeight)),i=this.pane.outerHeight(!1),k=parseInt(this.pane.css("top"),10),h=parseInt(this.pane.css("bottom"),10),j=i+k+h,n=Math.round(j/b*j),nthis.options.sliderMaxHeight&&(n=this.options.sliderMaxHeight),g===r&&f.overflowX!==r&&(n+=e),this.maxSliderTop=j-n,this.contentHeight=b,this.paneHeight=i,this.paneOuterHeight=j,this.sliderHeight=n,this.slider.height(n),this.events.scroll(),this.pane.show(),this.isActive=!0,a.scrollHeight===a.clientHeight||this.pane.outerHeight(!0)>=a.scrollHeight&&g!==r?(this.pane.hide(),this.isActive=!1):this.el.clientHeight===a.scrollHeight&&g===r?this.slider.hide():this.slider.show(),this.pane.css({opacity:this.options.alwaysVisible?1:"",visibility:this.options.alwaysVisible?"visible":""}),c=this.$content.css("position"),("static"===c||"relative"===c)&&(m=parseInt(this.$content.css("right"),10),m&&this.$content.css({right:"",marginRight:m})),this)},i.prototype.scroll=function(){return this.isActive?(this.sliderY=Math.max(0,this.sliderY),this.sliderY=Math.min(this.maxSliderTop,this.sliderY),this.$content.scrollTop((this.paneHeight-this.contentHeight+e)*this.sliderY/this.maxSliderTop*-1),this.iOSNativeScrolling||(this.updateScrollValues(),this.setOnScrollStyles()),this):void 0},i.prototype.scrollBottom=function(a){return this.isActive?(this.$content.scrollTop(this.contentHeight-this.$content.height()-a).trigger(n),this.stop().restore(),this):void 0},i.prototype.scrollTop=function(a){return this.isActive?(this.$content.scrollTop(+a).trigger(n),this.stop().restore(),this):void 0},i.prototype.scrollTo=function(a){return this.isActive?(this.scrollTop(this.$el.find(a).get(0).offsetTop),this):void 0},i.prototype.stop=function(){return w&&this.scrollRAF&&(w(this.scrollRAF),this.scrollRAF=null),this.stopped=!0,this.removeEvents(),this.iOSNativeScrolling||this.pane.hide(),this},i.prototype.destroy=function(){return this.stopped||this.stop(),!this.iOSNativeScrolling&&this.pane.length&&this.pane.remove(),d&&this.$content.height(""),this.$content.removeAttr("tabindex"),this.$el.hasClass("has-scrollbar")&&(this.$el.removeClass("has-scrollbar"),this.$content.css({right:""})),this},i.prototype.flash=function(){return!this.iOSNativeScrolling&&this.isActive?(this.reset(),this.pane.addClass("flashed"),setTimeout(function(a){return function(){a.pane.removeClass("flashed")}}(this),this.options.flashDelay),this):void 0},i}(),a.fn.nanoScroller=function(b){return this.each(function(){var c,d;if((d=this.nanoscroller)||(c=a.extend({},x,b),this.nanoscroller=d=new o(this,c)),b&&"object"==typeof b){if(a.extend(d.options,b),null!=b.scrollBottom)return d.scrollBottom(b.scrollBottom);if(null!=b.scrollTop)return d.scrollTop(b.scrollTop);if(b.scrollTo)return d.scrollTo(b.scrollTo);if("bottom"===b.scroll)return d.scrollBottom(0);if("top"===b.scroll)return d.scrollTop(0);if(b.scroll&&b.scroll instanceof a)return d.scrollTo(b.scroll);if(b.stop)return d.stop();if(b.destroy)return d.destroy();if(b.flash)return d.flash()}return d.reset()})},a.fn.nanoScroller.Constructor=o}(jQuery,window,document); -//# sourceMappingURL=jquery.nanoscroller.min.map \ No newline at end of file diff --git a/vendor/styles/nanoscroller.scss b/vendor/styles/nanoscroller.scss deleted file mode 100644 index e6a546dc3..000000000 --- a/vendor/styles/nanoscroller.scss +++ /dev/null @@ -1,272 +0,0 @@ -// -// nanoScrollerJS (Sass) -// -------------------------------------------------- -/** initial setup **/ -$nanoClass: "nano"; -$paneClass: "nano-pane"; -$sliderClass: "nano-slider"; -$contentClass: "nano-content"; - -.#{$nanoClass} { - width: 100%; - height: 100%; - position: relative; - overflow: hidden; - - .#{$contentClass} { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: scroll; - overflow-x: hidden; - - &:focus { - outline: thin dotted; - } - - &::-webkit-scrollbar { - visibility: hidden; - } - } - - > .#{$paneClass} { - width: 10px; - background: rgba(0,0,0,.25); - position: absolute; - top: 0; - right: 0; - bottom: 0; - -webkit-transition: .2s; - -moz-transition: .2s; - -o-transition: .2s; - transition: .2s; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - visibility: hidden\9; // Target only IE7 and IE8 with this hack - opacity: .01; - - > .#{$sliderClass} { - background: #444; - background: rgba(0,0,0,.5); - position: relative; - margin: 0 1px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - } - } -} - -.has-scrollbar > .#{$contentClass}::-webkit-scrollbar { - visibility: visible; -} - -.#{$paneClass} { - .#{$nanoClass}:hover > &, - &.active, - &.flashed { - visibility: visible\9; // Target only IE7 and IE8 with this hack - opacity: 0.99; - } -} - -.nano-table { - width: 100%; - height: 100%; - position: relative; - overflow: hidden; - - .nano-table-content { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: scroll; - overflow-x: hidden; - - &:focus { - outline: thin dotted; - } - - &::-webkit-scrollbar { - visibility: hidden; - } - } - - > .#{$paneClass} { - width: 10px; - background: rgba(0,0,0,.25); - position: absolute; - top: 0; - right: 0; - bottom: 0; - -webkit-transition: .2s; - -moz-transition: .2s; - -o-transition: .2s; - transition: .2s; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - visibility: hidden\9; // Target only IE7 and IE8 with this hack - opacity: .01; - - > .#{$sliderClass} { - background: #444; - background: rgba(0,0,0,.5); - position: relative; - margin: 0 1px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - } - } -} - -.has-scrollbar > .nano-table-content::-webkit-scrollbar { - visibility: visible; -} - -.#{$paneClass} { - .nano-table:hover > &, - &.active, - &.flashed { - visibility: visible\9; // Target only IE7 and IE8 with this hack - opacity: 0.99; - } -} - -body { - width: 100%; - height: 100%; - position: absolute; - overflow: hidden; - - .nano-content { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: scroll; - overflow-x: hidden; - - &:focus { - outline: thin dotted; - } - - &::-webkit-scrollbar { - visibility: hidden; - } - } - - > .#{$paneClass} { - width: 10px; - background: rgba(0,0,0,.25); - position: absolute; - top: 0; - right: 0; - bottom: 0; - -webkit-transition: .2s; - -moz-transition: .2s; - -o-transition: .2s; - transition: .2s; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - visibility: hidden\9; // Target only IE7 and IE8 with this hack - opacity: .01; - - > .#{$sliderClass} { - background: #444; - background: rgba(0,0,0,.5); - position: relative; - margin: 0 1px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - } - } -} - -.has-scrollbar > .nano-content::-webkit-scrollbar { - visibility: visible; -} - -.#{$paneClass} { - body:hover > &, - &.active, - &.flashed { - visibility: visible\9; // Target only IE7 and IE8 with this hack - opacity: 0.99; - } -} - -// .modal-content{ -// width: 100%; -// height: 100%; -// position: absolute; -// overflow: hidden; - -// .modal-body { -// // position: absolute; -// top: 0; -// right: 0; -// bottom: 0; -// left: 0; -// overflow: scroll; -// overflow-x: hidden; - -// &:focus { -// outline: thin dotted; -// } - -// &::-webkit-scrollbar { -// visibility: hidden; -// } -// } - -// > .#{$paneClass} { -// width: 10px; -// background: rgba(255,255,255,.6); -// position: absolute; -// top: 0; -// right: 0; -// bottom: 0; -// -webkit-transition: .2s; -// -moz-transition: .2s; -// -o-transition: .2s; -// transition: .2s; -// -webkit-border-radius: 5px; -// -moz-border-radius: 5px; -// border-radius: 5px; -// visibility: hidden\9; // Target only IE7 and IE8 with this hack -// opacity: .01; - -// > .#{$sliderClass} { -// background: #444; -// background: rgba(0,0,0,.5); -// position: relative; -// margin: 0 1px; -// -webkit-border-radius: 3px; -// -moz-border-radius: 3px; -// border-radius: 3px; -// } -// } -// } - -// .has-scrollbar > .modal-body::-webkit-scrollbar { -// visibility: visible; -// } - -// .#{$paneClass} { -// .modal-content:hover > &, -// &.active, -// &.flashed { -// visibility: visible\9; // Target only IE7 and IE8 with this hack -// opacity: 0.99; -// } -// } \ No newline at end of file