From c9ac7f2fa3f7de476b9a0ab944ef2299cbb7c9fb Mon Sep 17 00:00:00 2001 From: antelle Date: Sun, 15 Sep 2019 21:22:23 +0200 Subject: [PATCH] drag view --- app/scripts/view-engine/view.js | 11 ++++---- app/scripts/views/app-view.js | 8 +++--- app/scripts/views/drag-view.js | 40 +++++++++++++++-------------- app/scripts/views/menu/menu-view.js | 4 +-- app/styles/utils/_drag.scss | 16 +++++++++--- app/templates/drag.hbs | 1 + app/templates/footer.hbs | 13 +++++----- 7 files changed, 53 insertions(+), 40 deletions(-) create mode 100644 app/templates/drag.hbs diff --git a/app/scripts/view-engine/view.js b/app/scripts/view-engine/view.js index cfe1e59d..7347636b 100644 --- a/app/scripts/view-engine/view.js +++ b/app/scripts/view-engine/view.js @@ -159,14 +159,15 @@ class View extends EventEmitter { if (visible === undefined) { visible = this.hidden; } - this.el.classList.toggle('show', !!visible); - this.el.classList.toggle('hide', !visible); this.hidden = !visible; this.emit(visible ? 'show' : 'hide'); - if (!visible) { - Tip.hideTips(this.el); + if (this.el) { + this.el.classList.toggle('show', !!visible); + this.el.classList.toggle('hide', !visible); + if (!visible) { + Tip.hideTips(this.el); + } } - return this; } isHidden() { diff --git a/app/scripts/views/app-view.js b/app/scripts/views/app-view.js index 1ef120e3..261d0bef 100644 --- a/app/scripts/views/app-view.js +++ b/app/scripts/views/app-view.js @@ -44,11 +44,11 @@ const AppView = Backbone.View.extend({ initialize() { this.views = {}; this.views.menu = new MenuView({ model: this.model.menu }); - this.views.menuDrag = new DragView('x'); + this.views.menuDrag = new DragView('x', { parent: '.app__menu-drag' }); this.views.footer = new FooterView(this.model); this.views.listWrap = new ListWrapView({ model: this.model }); this.views.list = new ListView({ model: this.model }); - this.views.listDrag = new DragView('x'); + this.views.listDrag = new DragView('x', { parent: '.app__list-drag' }); this.views.list.dragView = this.views.listDrag; this.views.details = new DetailsView(); this.views.details.appModel = this.model; @@ -145,10 +145,10 @@ const AppView = Backbone.View.extend({ this.panelEl = this.$el.find('.app__panel:first'); this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render(); this.views.menu.setElement(this.$el.find('.app__menu')).render(); - this.views.menuDrag.setElement(this.$el.find('.app__menu-drag')).render(); + this.views.menuDrag.render(); this.views.footer.render(); this.views.list.setElement(this.$el.find('.app__list')).render(); - this.views.listDrag.setElement(this.$el.find('.app__list-drag')).render(); + this.views.listDrag.render(); this.views.details.setElement(this.$el.find('.app__details')).render(); this.showLastOpenFile(); return this; diff --git a/app/scripts/views/drag-view.js b/app/scripts/views/drag-view.js index 31b175ca..37441def 100644 --- a/app/scripts/views/drag-view.js +++ b/app/scripts/views/drag-view.js @@ -1,26 +1,28 @@ -import Backbone from 'backbone'; +import { View } from 'view-engine/view'; +import template from 'templates/drag.hbs'; -const DragView = Backbone.View.extend({ - events: { +class DragView extends View { + template = template; + + events = { 'mousedown': 'mousedown' - }, + }; - initialize(coord) { + constructor(coord, options) { + super(coord, options); this.setCoord(coord); this.mouseDownTime = -1; this.mouseDownCount = 0; - }, + } + + render() { + super.render({ coord: this.model }); + } setCoord(coord) { this.coord = coord; this.offsetProp = 'page' + coord.toUpperCase(); - }, - - render() { - $('
') - .addClass('drag-handle__inner') - .appendTo(this.$el); - }, + } mousedown(e) { if (e.which === 1) { @@ -28,7 +30,7 @@ const DragView = Backbone.View.extend({ if (now - this.mouseDownTime < 500) { this.mouseDownCount++; if (this.mouseDownCount === 2) { - this.trigger('autosize', { coord: this.coord }); + this.emit('autosize', { coord: this.coord }); return; } } else { @@ -42,24 +44,24 @@ const DragView = Backbone.View.extend({ .appendTo('body'); this.dragMask.on('mousemove', this.mousemove.bind(this)); this.dragMask.on('mouseup', this.mouseup.bind(this)); - this.trigger('dragstart', { offset: this.initialOffset, coord: this.coord }); + this.emit('dragstart', { offset: this.initialOffset, coord: this.coord }); this.$el.addClass('dragging'); e.preventDefault(); } - }, + } mousemove(e) { if (e.which === 0) { this.mouseup(); } else { - this.trigger('drag', { offset: e[this.offsetProp] - this.initialOffset }); + this.emit('drag', { offset: e[this.offsetProp] - this.initialOffset }); } - }, + } mouseup() { this.dragMask.remove(); this.$el.removeClass('dragging'); } -}); +} export { DragView }; diff --git a/app/scripts/views/menu/menu-view.js b/app/scripts/views/menu/menu-view.js index 07b9f90d..98353761 100644 --- a/app/scripts/views/menu/menu-view.js +++ b/app/scripts/views/menu/menu-view.js @@ -46,12 +46,12 @@ const MenuView = Backbone.View.extend({ const sectionView = new MenuSectionView({ el: sectionsEl, model: section }); sectionView.render(); if (section.get('drag')) { - const dragView = new DragView('y'); const dragEl = $('
') .addClass('menu__drag-section') .appendTo(sectionsEl); + const dragView = new DragView('y', { parent: dragEl[0] }); sectionView.listenDrag(dragView); - dragView.setElement(dragEl).render(); + dragView.render(); this.sectionViews.push(dragView); } this.sectionViews.push(sectionView); diff --git a/app/styles/utils/_drag.scss b/app/styles/utils/_drag.scss index ce06ee9a..e5d0a1f0 100644 --- a/app/styles/utils/_drag.scss +++ b/app/styles/utils/_drag.scss @@ -20,10 +20,18 @@ .drag-handle__inner { position: absolute; - top: 0; - left: -2px; - width: 5px; - height: 100%; + &--x { + top: 0; + left: -2px; + width: 5px; + height: 100%; + } + &--y { + top: -2px; + left: 0; + width: 100%; + height: 5px; + } @include mobile { display: none; } diff --git a/app/templates/drag.hbs b/app/templates/drag.hbs new file mode 100644 index 00000000..ca208858 --- /dev/null +++ b/app/templates/drag.hbs @@ -0,0 +1 @@ +
diff --git a/app/templates/footer.hbs b/app/templates/footer.hbs index 2435abf0..3a73f327 100644 --- a/app/templates/footer.hbs +++ b/app/templates/footer.hbs @@ -1,6 +1,7 @@
{{#each files.models as |file|}} -
+
{{file.attributes.name}} {{#if file.attributes.syncing~}} @@ -12,17 +13,17 @@ {{~/if}}
{{/each}} -
+
 {{res 'footerOpen'}}
-
-
+
+
{{#if updateAvailable}} {{else}} {{/if}}
-
-
+
+