using native mobile scroll

This commit is contained in:
Antelle 2016-01-17 23:19:42 +03:00
parent d7ff37a11d
commit 7e0f618ed5
6 changed files with 32 additions and 38 deletions

View File

@ -1,8 +1,22 @@
'use strict';
var Backbone = require('backbone');
var Backbone = require('backbone'),
FeatureDetector = require('../util/feature-detector'),
baron = require('baron');
var isEnabled = FeatureDetector.isDesktop();
var Scrollable = {
createScroll: function(opts) {
opts.$ = Backbone.$;
if (isEnabled) {
this.scroll = baron(opts);
}
this.scroller = this.$el.find('.scroller');
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
},
pageResized: function() {
// TODO: check size on window resize
//if (this.checkSize && (!e || e.source === 'window')) {
@ -20,7 +34,9 @@ var Scrollable = {
},
initScroll: function() {
this.listenTo(Backbone, 'page-geometry', this.pageResized);
if (isEnabled) {
this.listenTo(Backbone, 'page-geometry', this.pageResized);
}
}
};

View File

@ -23,7 +23,6 @@ var Backbone = require('backbone'),
Tip = require('../../util/tip'),
Timeouts = require('../../const/timeouts'),
FileSaver = require('filesaver'),
baron = require('baron'),
kdbxweb = require('kdbxweb');
var DetailsView = Backbone.View.extend({
@ -98,15 +97,11 @@ var DetailsView = Backbone.View.extend({
Tip.createTips(this.$el);
this.setSelectedColor(this.model.color);
this.addFieldViews();
this.scroll = baron({
this.createScroll({
root: this.$el.find('.details__body')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0],
$: Backbone.$
bar: this.$el.find('.scroller__bar')[0]
});
this.scroller = this.$el.find('.scroller');
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
this.$el.find('.details').removeClass('details--drag');
this.dragging = false;
if (this.dragTimeout) {

View File

@ -3,8 +3,7 @@
var Backbone = require('backbone'),
Scrollable = require('../mixins/scrollable'),
IconSelectView = require('./icon-select-view'),
Tip = require('../util/tip'),
baron = require('baron');
Tip = require('../util/tip');
var GrpView = Backbone.View.extend({
template: require('templates/grp.hbs'),
@ -36,15 +35,11 @@ var GrpView = Backbone.View.extend({
this.$el.find('#grp__field-title').focus();
}
}
this.scroll = baron({
this.createScroll({
root: this.$el.find('.details__body')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0],
$: Backbone.$
bar: this.$el.find('.scroller__bar')[0]
});
this.scroller = this.$el.find('.scroller');
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
this.pageResized();
return this;
},

View File

@ -6,8 +6,7 @@ var Backbone = require('backbone'),
ListSearchView = require('./list-search-view'),
EntryPresenter = require('../presenters/entry-presenter'),
DragDropInfo = require('../comp/drag-drop-info'),
AppSettingsModel = require('../models/app-settings-model'),
baron = require('baron');
AppSettingsModel = require('../models/app-settings-model');
var ListView = Backbone.View.extend({
template: require('templates/list.hbs'),
@ -54,14 +53,11 @@ var ListView = Backbone.View.extend({
this.views.search.setElement(this.$el.find('.list__header')).render();
this.setTableView();
this.scroll = baron({
this.createScroll({
root: this.$el.find('.list__items')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0],
$: Backbone.$
bar: this.$el.find('.scroller__bar')[0]
});
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
}
if (this.items.length) {
var itemTemplate = this.getItemTemplate();

View File

@ -4,8 +4,7 @@ var Backbone = require('backbone'),
MenuItemView = require('./menu-item-view'),
Resizable = require('../../mixins/resizable'),
Scrollable = require('../../mixins/scrollable'),
AppSettingsModel = require('../../models/app-settings-model'),
baron = require('baron');
AppSettingsModel = require('../../models/app-settings-model');
var MenuSectionView = Backbone.View.extend({
template: require('templates/menu/menu-section.hbs'),
@ -30,14 +29,11 @@ var MenuSectionView = Backbone.View.extend({
this.itemsEl = this.model.get('scrollable') ? this.$el.find('.scroller') : this.$el;
if (this.model.get('scrollable')) {
this.initScroll();
this.scroll = baron({
this.createScroll({
root: this.$el[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0],
$: Backbone.$
bar: this.$el.find('.scroller__bar')[0]
});
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
}
} else {
this.removeInnerViews();

View File

@ -3,8 +3,7 @@
var Backbone = require('backbone'),
Scrollable = require('../../mixins/scrollable'),
Keys = require('../../const/keys'),
KeyHandler = require('../../comp/key-handler'),
baron = require('baron');
KeyHandler = require('../../comp/key-handler');
var SettingsView = Backbone.View.extend({
template: require('templates/settings/settings.hbs'),
@ -28,14 +27,11 @@ var SettingsView = Backbone.View.extend({
render: function () {
this.renderTemplate();
this.scroll = baron({
this.createScroll({
root: this.$el.find('.settings')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0],
$: Backbone.$
bar: this.$el.find('.scroller__bar')[0]
});
this.scrollerBar = this.$el.find('.scroller__bar');
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
this.pageEl = this.$el.find('.scroller');
return this;
},