mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-03-14 07:00:01 -04:00
Integrated nanoscroller.
This commit is contained in:
Aditya Raisinghani
parent
deb3ddeece
commit
44979c074d
19 changed files with 361 additions and 519 deletions
|
|
@ -67,7 +67,7 @@
|
|||
<!-- end olark code -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body class="clearfix">
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<!-- begin facebook code -->
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
<header class="header-container" id="header-container"></header>
|
||||
|
||||
<div id="page-container"></div>
|
||||
<div id="page-container" class="nano-content"></div>
|
||||
<!--
|
||||
<div class="antiscroll-wrap">
|
||||
<div class="antiscroll-inner">
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
</div>
|
||||
-->
|
||||
|
||||
<div id="modal-wrapper"></div>
|
||||
<div id="modal-wrapper" class="modal-content"></div>
|
||||
|
||||
<!-- begin google api/plus code -->
|
||||
<script type="text/javascript">
|
||||
|
|
@ -161,5 +161,23 @@
|
|||
(function(a){if(window.filepicker){return}var b=a.createElement("script");b.type="text/javascript";b.async=!0;b.src=("https:"===a.location.protocol?"https:":"http:")+"//api.filepicker.io/v1/filepicker.js";var c=a.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);var d={};d._queue=[];var e="pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");var f=function(a,b){return function(){b.push([a,arguments])}};for(var g=0;g<e.length;g++){d[e[g]]=f(e[g],d._queue)}window.filepicker=d})(document);
|
||||
</script>
|
||||
<!-- end filepicker.io code -->
|
||||
|
||||
<!-- being nanascroller code -->
|
||||
<script type="text/javascript">
|
||||
function renderScrollbar(){
|
||||
$('.nano-pane').css('display','none');
|
||||
$(function(){
|
||||
$('body').nanoScroller();
|
||||
});
|
||||
};
|
||||
|
||||
// Doesn't seem to load when you open for first time.
|
||||
$(function(){
|
||||
setTimeout(function(){
|
||||
$('body').nanoScroller();
|
||||
},1000);
|
||||
});
|
||||
</script>
|
||||
<!-- end nanoscroller code -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
@import "bootstrap/variables"
|
||||
@import "bootstrap/mixins"
|
||||
|
||||
::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
html
|
||||
background-color: #2f261d
|
||||
|
||||
|
|
@ -100,10 +97,14 @@ a[data-toggle="modal"]
|
|||
|
||||
.modal-dialog
|
||||
padding: 5px
|
||||
background: transparent url(/images/pages/base/modal_background.png)
|
||||
background-size: 100% 100%
|
||||
border: 0
|
||||
@include box-shadow(0 0 0 #000)
|
||||
|
||||
.background-wrapper
|
||||
background: url("/images/pages/base/modal_background.png")
|
||||
background-size: 100% 100%
|
||||
border: 0
|
||||
@include box-shadow(0 0 0 #000)
|
||||
position: absolute
|
||||
width: 99%
|
||||
|
||||
.modal-content
|
||||
@include box-shadow(none)
|
||||
|
|
|
|||
272
app/styles/nanoscroller.scss
Normal file
272
app/styles/nanoscroller.scss
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
//
|
||||
// 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{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
.modal-dialog {
|
||||
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-dialog::-webkit-scrollbar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.#{$paneClass} {
|
||||
.modal:hover > &,
|
||||
&.active,
|
||||
&.flashed {
|
||||
visibility: visible\9; // Target only IE7 and IE8 with this hack
|
||||
opacity: 0.99;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
background-color: transparent
|
||||
background-size: 100% 100%
|
||||
z-index: 0
|
||||
overflow-y: auto
|
||||
//overflow-y: auto
|
||||
|
||||
img
|
||||
position: absolute
|
||||
|
|
@ -47,6 +47,12 @@
|
|||
&.multiple-tabs li:not(.active) a
|
||||
cursor: pointer
|
||||
|
||||
.tab-content
|
||||
height: 80px
|
||||
.nano-pane
|
||||
width: 7px
|
||||
right: 5px
|
||||
|
||||
//.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
|
||||
// background-color: lighten(rgb(230, 212, 146), 10%)
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
line-height: 15px
|
||||
left: 0
|
||||
|
||||
max-width: 1920px
|
||||
//max-width: 1920px
|
||||
margin: 0 auto
|
||||
@include user-select(none)
|
||||
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
max-height: 1284px
|
||||
|
||||
.level-content
|
||||
max-width: 1920px
|
||||
position: relative
|
||||
margin: 0px auto
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ body
|
|||
p If this is showing, you dun goofed
|
||||
|
||||
block footer
|
||||
.footer
|
||||
.footer.clearfix
|
||||
.content
|
||||
p.footer-link-text
|
||||
if pathname == "/"
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
.modal-dialog
|
||||
.modal-content
|
||||
block modal-header
|
||||
.modal-header
|
||||
if closeButton
|
||||
.button.close(type="button", data-dismiss="modal", aria-hidden="true") ×
|
||||
block modal-header-content
|
||||
h3 man bites God
|
||||
|
||||
block modal-body
|
||||
.modal-body
|
||||
block modal-body-content
|
||||
p Man Bites God are the bad boys of the Melbourne live music and comedy scene. It is like being drowned in a bathtub of harmony.
|
||||
img(src="http://www.manbitesgod.com/images/picturecoupleb.jpg")
|
||||
img(src="http://www.manbitesgod.com/images/manrantb.jpg")
|
||||
.background-wrapper
|
||||
.modal-content
|
||||
block modal-header
|
||||
.modal-header
|
||||
if closeButton
|
||||
.button.close(type="button", data-dismiss="modal", aria-hidden="true") ×
|
||||
block modal-header-content
|
||||
h3 man bites God
|
||||
|
||||
block modal-body
|
||||
.modal-body
|
||||
block modal-body-content
|
||||
p Man Bites God are the bad boys of the Melbourne live music and comedy scene. It is like being drowned in a bathtub of harmony.
|
||||
img(src="http://www.manbitesgod.com/images/picturecoupleb.jpg")
|
||||
img(src="http://www.manbitesgod.com/images/manrantb.jpg")
|
||||
|
||||
.modal-body.wait.secret
|
||||
block modal-body-wait-content
|
||||
h3 Reticulating Splines...
|
||||
.progress.progress-striped.active
|
||||
.progress-bar
|
||||
.modal-body.wait.secret
|
||||
block modal-body-wait-content
|
||||
h3 Reticulating Splines...
|
||||
.progress.progress-striped.active
|
||||
.progress-bar
|
||||
|
||||
block modal-footer
|
||||
.modal-footer
|
||||
block modal-footer-content
|
||||
button.btn.btn-primary(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.okay") Okay
|
||||
block modal-footer
|
||||
.modal-footer
|
||||
block modal-footer-content
|
||||
button.btn.btn-primary(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.okay") Okay
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
#level-loading-view
|
||||
|
||||
.level-content
|
||||
|
||||
#control-bar-view
|
||||
|
||||
#code-area
|
||||
|
|
|
|||
|
|
@ -9,12 +9,14 @@
|
|||
.thang-name
|
||||
|
||||
.thang-actions.thang-elem
|
||||
.action-header(data-i18n="play_level.action_timeline") Action Timeline
|
||||
.table-container
|
||||
.progress-arrow.progress-indicator
|
||||
.progress-line.progress-indicator
|
||||
table
|
||||
tbody
|
||||
.nano-table
|
||||
.nano-table-content
|
||||
.action-header(data-i18n="play_level.action_timeline") Action Timeline
|
||||
.table-container
|
||||
.progress-arrow.progress-indicator
|
||||
.progress-line.progress-indicator
|
||||
table
|
||||
tbody
|
||||
|
||||
.dialogue-area
|
||||
p.bubble.dialogue-bubble
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
|
|||
h4= group
|
||||
.tab-content
|
||||
each slug, group in entryGroupSlugs
|
||||
div(id="palette-tab-" + slug, class="tab-pane" + (group == "this" || slug == defaultGroupSlug ? " active" : ""))
|
||||
div(class="properties properties-" + slug)
|
||||
div(id="palette-tab-" + slug, class="tab-pane nano" + (group == "this" || slug == defaultGroupSlug ? " active" : ""))
|
||||
div(class="properties properties-" + slug + " nano-content")
|
||||
|
|
|
|||
|
|
@ -39,4 +39,4 @@ module.exports = class HomeView extends View
|
|||
href = playLink.attr("href").split("/")
|
||||
href[href.length-1] = lastLevel if href.length isnt 0
|
||||
href = href.join("/")
|
||||
playLink.attr("href", href)
|
||||
playLink.attr("href", href)
|
||||
|
|
@ -37,6 +37,9 @@ module.exports = class ModalView extends CocoView
|
|||
# This makes sure if you press enter right after opening the players guide,
|
||||
# it doesn't just reopen the modal.
|
||||
$(document.activeElement).blur()
|
||||
setTimeout ->
|
||||
$('.modal').nanoScroller({contentClass:'modal-dialog'})
|
||||
, 1000
|
||||
|
||||
showLoading: ($el) ->
|
||||
$el = @$el.find('.modal-body') unless $el
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ module.exports = class RootView extends CocoView
|
|||
location.hash = ''
|
||||
location.hash = hash
|
||||
@buildLanguages()
|
||||
renderScrollbar()
|
||||
#@$('.antiscroll-wrap').antiscroll() # not yet, buggy
|
||||
|
||||
afterRender: ->
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ module.exports = class SpellPaletteView extends View
|
|||
for entry in entryColumn
|
||||
col.append entry.el
|
||||
entry.render() # Render after appending so that we can access parent container for popover
|
||||
$('.nano').nanoScroller()
|
||||
|
||||
createPalette: ->
|
||||
lcs = @supermodel.getModels LevelComponent
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ module.exports = class SpellView extends View
|
|||
@ace.setShowPrintMargin false
|
||||
@ace.setShowInvisibles aceConfig.invisibles
|
||||
@ace.setBehavioursEnabled aceConfig.behaviors
|
||||
@ace.setAnimatedScroll true
|
||||
@ace.setAnimatedScroll true
|
||||
@ace.setKeyboardHandler @keyBindings[aceConfig.keyBindings ? 'default']
|
||||
@toggleControls null, @writable
|
||||
@aceSession.selection.on 'changeCursor', @onCursorActivity
|
||||
|
|
|
|||
|
|
@ -198,3 +198,4 @@ module.exports = class PlayView extends View
|
|||
super()
|
||||
@$el.find('.modal').on 'shown.bs.modal', ->
|
||||
$('input:visible:first', @).focus()
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,10 @@ exports.config =
|
|||
joinTo:
|
||||
'stylesheets/app.css': /^(app|vendor)/
|
||||
order:
|
||||
before: ['app/styles/bootstrap.scss']
|
||||
before: [
|
||||
'app/styles/bootstrap.scss'
|
||||
'app/styles/nanoscroller.scss'
|
||||
]
|
||||
templates:
|
||||
defaultExtension: 'jade'
|
||||
joinTo: 'javascripts/app.js'
|
||||
|
|
|
|||
471
vendor/scripts/antiscroll.js
vendored
471
vendor/scripts/antiscroll.js
vendored
|
|
@ -1,471 +0,0 @@
|
|||
(function ($) {
|
||||
|
||||
/**
|
||||
* Augment jQuery prototype.
|
||||
*/
|
||||
|
||||
$.fn.antiscroll = function (options) {
|
||||
return this.each(function () {
|
||||
if ($(this).data('antiscroll')) {
|
||||
$(this).data('antiscroll').destroy();
|
||||
}
|
||||
|
||||
$(this).data('antiscroll', new $.Antiscroll(this, options));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Expose constructor.
|
||||
*/
|
||||
|
||||
$.Antiscroll = Antiscroll;
|
||||
|
||||
/**
|
||||
* Antiscroll pane constructor.
|
||||
*
|
||||
* @param {Element|jQuery} main pane
|
||||
* @parma {Object} options
|
||||
* @api public
|
||||
*/
|
||||
|
||||
function Antiscroll (el, opts) {
|
||||
this.el = $(el);
|
||||
this.options = opts || {};
|
||||
|
||||
this.x = (false !== this.options.x) || this.options.forceHorizontal;
|
||||
this.y = (false !== this.options.y) || this.options.forceVertical;
|
||||
this.autoHide = false !== this.options.autoHide;
|
||||
this.padding = undefined == this.options.padding ? 2 : this.options.padding;
|
||||
|
||||
this.inner = this.el.find('.antiscroll-inner');
|
||||
this.inner.css({
|
||||
'width': '+=' + (this.y ? scrollbarSize() : 0)
|
||||
, 'height': '+=' + (this.x ? scrollbarSize() : 0)
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
};
|
||||
|
||||
/**
|
||||
* refresh scrollbars
|
||||
*
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.refresh = function() {
|
||||
var needHScroll = this.inner.get(0).scrollWidth > this.el.width() + (this.y ? scrollbarSize() : 0),
|
||||
needVScroll = this.inner.get(0).scrollHeight > this.el.height() + (this.x ? scrollbarSize() : 0);
|
||||
|
||||
if (this.x) {
|
||||
if (!this.horizontal && needHScroll) {
|
||||
this.horizontal = new Scrollbar.Horizontal(this);
|
||||
} else if (this.horizontal && !needHScroll) {
|
||||
this.horizontal.destroy();
|
||||
this.horizontal = null;
|
||||
} else if (this.horizontal) {
|
||||
this.horizontal.update();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.y) {
|
||||
if (!this.vertical && needVScroll) {
|
||||
this.vertical = new Scrollbar.Vertical(this);
|
||||
} else if (this.vertical && !needVScroll) {
|
||||
this.vertical.destroy();
|
||||
this.vertical = null;
|
||||
} else if (this.vertical) {
|
||||
this.vertical.update();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleans up.
|
||||
*
|
||||
* @return {Antiscroll} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.destroy = function () {
|
||||
if (this.horizontal) {
|
||||
this.horizontal.destroy();
|
||||
this.horizontal = null
|
||||
}
|
||||
if (this.vertical) {
|
||||
this.vertical.destroy();
|
||||
this.vertical = null
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Rebuild Antiscroll.
|
||||
*
|
||||
* @return {Antiscroll} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.rebuild = function () {
|
||||
this.destroy();
|
||||
this.inner.attr('style', '');
|
||||
Antiscroll.call(this, this.el, this.options);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrollbar constructor.
|
||||
*
|
||||
* @param {Element|jQuery} element
|
||||
* @api public
|
||||
*/
|
||||
|
||||
function Scrollbar (pane) {
|
||||
this.pane = pane;
|
||||
this.pane.el.append(this.el);
|
||||
this.innerEl = this.pane.inner.get(0);
|
||||
|
||||
this.dragging = false;
|
||||
this.enter = false;
|
||||
this.shown = false;
|
||||
|
||||
// hovering
|
||||
this.pane.el.mouseenter($.proxy(this, 'mouseenter'));
|
||||
this.pane.el.mouseleave($.proxy(this, 'mouseleave'));
|
||||
|
||||
// dragging
|
||||
this.el.mousedown($.proxy(this, 'mousedown'));
|
||||
|
||||
// scrolling
|
||||
this.innerPaneScrollListener = $.proxy(this, 'scroll');
|
||||
this.pane.inner.scroll(this.innerPaneScrollListener);
|
||||
|
||||
// wheel -optional-
|
||||
this.innerPaneMouseWheelListener = $.proxy(this, 'mousewheel');
|
||||
this.pane.inner.bind('mousewheel', this.innerPaneMouseWheelListener);
|
||||
|
||||
// show
|
||||
var initialDisplay = this.pane.options.initialDisplay;
|
||||
|
||||
if (initialDisplay !== false) {
|
||||
this.show();
|
||||
if (this.pane.autoHide) {
|
||||
this.hiding = setTimeout($.proxy(this, 'hide'), parseInt(initialDisplay, 10) || 3000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleans up.
|
||||
*
|
||||
* @return {Scrollbar} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.destroy = function () {
|
||||
this.el.remove();
|
||||
this.pane.inner.unbind('scroll', this.innerPaneScrollListener);
|
||||
this.pane.inner.unbind('mousewheel', this.innerPaneMouseWheelListener);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon mouseenter.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mouseenter = function () {
|
||||
this.enter = true;
|
||||
this.show();
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon mouseleave.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mouseleave = function () {
|
||||
this.enter = false;
|
||||
|
||||
if (!this.dragging) {
|
||||
if (this.pane.autoHide) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon wrap scroll.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.scroll = function () {
|
||||
if (!this.shown) {
|
||||
this.show();
|
||||
if (!this.enter && !this.dragging) {
|
||||
if (this.pane.autoHide) {
|
||||
this.hiding = setTimeout($.proxy(this, 'hide'), 1500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.update();
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon scrollbar mousedown.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mousedown = function (ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
this.dragging = true;
|
||||
|
||||
this.startPageY = ev.pageY - parseInt(this.el.css('top'), 10);
|
||||
this.startPageX = ev.pageX - parseInt(this.el.css('left'), 10);
|
||||
|
||||
// prevent crazy selections on IE
|
||||
this.el[0].ownerDocument.onselectstart = function () { return false; };
|
||||
|
||||
var pane = this.pane,
|
||||
move = $.proxy(this, 'mousemove'),
|
||||
self = this
|
||||
|
||||
$(this.el[0].ownerDocument)
|
||||
.mousemove(move)
|
||||
.mouseup(function () {
|
||||
self.dragging = false;
|
||||
this.onselectstart = null;
|
||||
|
||||
$(this).unbind('mousemove', move);
|
||||
|
||||
if (!self.enter) {
|
||||
self.hide();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Show scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.show = function (duration) {
|
||||
if (!this.shown && this.update()) {
|
||||
this.el.addClass('antiscroll-scrollbar-shown');
|
||||
if (this.hiding) {
|
||||
clearTimeout(this.hiding);
|
||||
this.hiding = null;
|
||||
}
|
||||
this.shown = true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.hide = function () {
|
||||
if (this.pane.autoHide !== false && this.shown) {
|
||||
// check for dragging
|
||||
this.el.removeClass('antiscroll-scrollbar-shown');
|
||||
this.shown = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Horizontal scrollbar constructor
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal = function (pane) {
|
||||
this.el = $('<div class="antiscroll-scrollbar antiscroll-scrollbar-horizontal"/>', pane.el);
|
||||
Scrollbar.call(this, pane);
|
||||
};
|
||||
|
||||
/**
|
||||
* Inherits from Scrollbar.
|
||||
*/
|
||||
|
||||
inherits(Scrollbar.Horizontal, Scrollbar);
|
||||
|
||||
/**
|
||||
* Updates size/position of scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.update = function () {
|
||||
var paneWidth = this.pane.el.width(),
|
||||
trackWidth = paneWidth - this.pane.padding * 2,
|
||||
innerEl = this.pane.inner.get(0)
|
||||
|
||||
this.el
|
||||
.css('width', trackWidth * paneWidth / innerEl.scrollWidth)
|
||||
.css('left', trackWidth * innerEl.scrollLeft / innerEl.scrollWidth);
|
||||
|
||||
return paneWidth < innerEl.scrollWidth;
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon drag.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.mousemove = function (ev) {
|
||||
var trackWidth = this.pane.el.width() - this.pane.padding * 2,
|
||||
pos = ev.pageX - this.startPageX,
|
||||
barWidth = this.el.width(),
|
||||
innerEl = this.pane.inner.get(0)
|
||||
|
||||
// minimum top is 0, maximum is the track height
|
||||
var y = Math.min(Math.max(pos, 0), trackWidth - barWidth);
|
||||
|
||||
innerEl.scrollLeft = (innerEl.scrollWidth - this.pane.el.width())
|
||||
* y / (trackWidth - barWidth);
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon container mousewheel.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.mousewheel = function (ev, delta, x, y) {
|
||||
if ((x < 0 && 0 == this.pane.inner.get(0).scrollLeft) ||
|
||||
(x > 0 && (this.innerEl.scrollLeft + Math.ceil(this.pane.el.width())
|
||||
== this.innerEl.scrollWidth))) {
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Vertical scrollbar constructor
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical = function (pane) {
|
||||
this.el = $('<div class="antiscroll-scrollbar antiscroll-scrollbar-vertical"/>', pane.el);
|
||||
Scrollbar.call(this, pane);
|
||||
};
|
||||
|
||||
/**
|
||||
* Inherits from Scrollbar.
|
||||
*/
|
||||
|
||||
inherits(Scrollbar.Vertical, Scrollbar);
|
||||
|
||||
/**
|
||||
* Updates size/position of scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.update = function () {
|
||||
var paneHeight = this.pane.el.height(),
|
||||
trackHeight = paneHeight - this.pane.padding * 2,
|
||||
innerEl = this.innerEl;
|
||||
|
||||
var scrollbarHeight = trackHeight * paneHeight / innerEl.scrollHeight;
|
||||
scrollbarHeight = scrollbarHeight < 20 ? 20 : scrollbarHeight;
|
||||
|
||||
var topPos = trackHeight * innerEl.scrollTop / innerEl.scrollHeight;
|
||||
|
||||
if((topPos + scrollbarHeight) > trackHeight) {
|
||||
var diff = (topPos + scrollbarHeight) - trackHeight;
|
||||
topPos = topPos - diff - 3;
|
||||
}
|
||||
|
||||
this.el
|
||||
.css('height', scrollbarHeight)
|
||||
.css('top', topPos);
|
||||
|
||||
return paneHeight < innerEl.scrollHeight;
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon drag.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.mousemove = function (ev) {
|
||||
var paneHeight = this.pane.el.height(),
|
||||
trackHeight = paneHeight - this.pane.padding * 2,
|
||||
pos = ev.pageY - this.startPageY,
|
||||
barHeight = this.el.height(),
|
||||
innerEl = this.innerEl
|
||||
|
||||
// minimum top is 0, maximum is the track height
|
||||
var y = Math.min(Math.max(pos, 0), trackHeight - barHeight);
|
||||
|
||||
innerEl.scrollTop = (innerEl.scrollHeight - paneHeight)
|
||||
* y / (trackHeight - barHeight);
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon container mousewheel.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.mousewheel = function (ev, delta, x, y) {
|
||||
if ((y > 0 && 0 == this.innerEl.scrollTop) ||
|
||||
(y < 0 && (this.innerEl.scrollTop + Math.ceil(this.pane.el.height())
|
||||
== this.innerEl.scrollHeight))) {
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cross-browser inheritance.
|
||||
*
|
||||
* @param {Function} constructor
|
||||
* @param {Function} constructor we inherit from
|
||||
* @api private
|
||||
*/
|
||||
|
||||
function inherits (ctorA, ctorB) {
|
||||
function f() {};
|
||||
f.prototype = ctorB.prototype;
|
||||
ctorA.prototype = new f;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrollbar size detection.
|
||||
*/
|
||||
|
||||
var size;
|
||||
|
||||
function scrollbarSize () {
|
||||
if (size === undefined) {
|
||||
var div = $(
|
||||
'<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
|
||||
+ 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
|
||||
+ '</div>'
|
||||
);
|
||||
|
||||
$('body').append(div);
|
||||
var w1 = $(div).innerWidth();
|
||||
var w2 = $('div', div).innerWidth();
|
||||
$(div).remove();
|
||||
|
||||
size = w1 - w2;
|
||||
}
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
4
vendor/scripts/jquery.nanoscroller.min.js
vendored
Normal file
4
vendor/scripts/jquery.nanoscroller.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue