mirror of https://github.com/keeweb/keeweb.git
drag view
This commit is contained in:
parent
22d1b478f9
commit
c9ac7f2fa3
|
@ -159,14 +159,15 @@ class View extends EventEmitter {
|
||||||
if (visible === undefined) {
|
if (visible === undefined) {
|
||||||
visible = this.hidden;
|
visible = this.hidden;
|
||||||
}
|
}
|
||||||
this.el.classList.toggle('show', !!visible);
|
|
||||||
this.el.classList.toggle('hide', !visible);
|
|
||||||
this.hidden = !visible;
|
this.hidden = !visible;
|
||||||
this.emit(visible ? 'show' : 'hide');
|
this.emit(visible ? 'show' : 'hide');
|
||||||
if (!visible) {
|
if (this.el) {
|
||||||
Tip.hideTips(this.el);
|
this.el.classList.toggle('show', !!visible);
|
||||||
|
this.el.classList.toggle('hide', !visible);
|
||||||
|
if (!visible) {
|
||||||
|
Tip.hideTips(this.el);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
isHidden() {
|
isHidden() {
|
||||||
|
|
|
@ -44,11 +44,11 @@ const AppView = Backbone.View.extend({
|
||||||
initialize() {
|
initialize() {
|
||||||
this.views = {};
|
this.views = {};
|
||||||
this.views.menu = new MenuView({ model: this.model.menu });
|
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.footer = new FooterView(this.model);
|
||||||
this.views.listWrap = new ListWrapView({ model: this.model });
|
this.views.listWrap = new ListWrapView({ model: this.model });
|
||||||
this.views.list = new ListView({ 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.list.dragView = this.views.listDrag;
|
||||||
this.views.details = new DetailsView();
|
this.views.details = new DetailsView();
|
||||||
this.views.details.appModel = this.model;
|
this.views.details.appModel = this.model;
|
||||||
|
@ -145,10 +145,10 @@ const AppView = Backbone.View.extend({
|
||||||
this.panelEl = this.$el.find('.app__panel:first');
|
this.panelEl = this.$el.find('.app__panel:first');
|
||||||
this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render();
|
this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render();
|
||||||
this.views.menu.setElement(this.$el.find('.app__menu')).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.footer.render();
|
||||||
this.views.list.setElement(this.$el.find('.app__list')).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.views.details.setElement(this.$el.find('.app__details')).render();
|
||||||
this.showLastOpenFile();
|
this.showLastOpenFile();
|
||||||
return this;
|
return this;
|
||||||
|
|
|
@ -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({
|
class DragView extends View {
|
||||||
events: {
|
template = template;
|
||||||
|
|
||||||
|
events = {
|
||||||
'mousedown': 'mousedown'
|
'mousedown': 'mousedown'
|
||||||
},
|
};
|
||||||
|
|
||||||
initialize(coord) {
|
constructor(coord, options) {
|
||||||
|
super(coord, options);
|
||||||
this.setCoord(coord);
|
this.setCoord(coord);
|
||||||
this.mouseDownTime = -1;
|
this.mouseDownTime = -1;
|
||||||
this.mouseDownCount = 0;
|
this.mouseDownCount = 0;
|
||||||
},
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
super.render({ coord: this.model });
|
||||||
|
}
|
||||||
|
|
||||||
setCoord(coord) {
|
setCoord(coord) {
|
||||||
this.coord = coord;
|
this.coord = coord;
|
||||||
this.offsetProp = 'page' + coord.toUpperCase();
|
this.offsetProp = 'page' + coord.toUpperCase();
|
||||||
},
|
}
|
||||||
|
|
||||||
render() {
|
|
||||||
$('<div/>')
|
|
||||||
.addClass('drag-handle__inner')
|
|
||||||
.appendTo(this.$el);
|
|
||||||
},
|
|
||||||
|
|
||||||
mousedown(e) {
|
mousedown(e) {
|
||||||
if (e.which === 1) {
|
if (e.which === 1) {
|
||||||
|
@ -28,7 +30,7 @@ const DragView = Backbone.View.extend({
|
||||||
if (now - this.mouseDownTime < 500) {
|
if (now - this.mouseDownTime < 500) {
|
||||||
this.mouseDownCount++;
|
this.mouseDownCount++;
|
||||||
if (this.mouseDownCount === 2) {
|
if (this.mouseDownCount === 2) {
|
||||||
this.trigger('autosize', { coord: this.coord });
|
this.emit('autosize', { coord: this.coord });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -42,24 +44,24 @@ const DragView = Backbone.View.extend({
|
||||||
.appendTo('body');
|
.appendTo('body');
|
||||||
this.dragMask.on('mousemove', this.mousemove.bind(this));
|
this.dragMask.on('mousemove', this.mousemove.bind(this));
|
||||||
this.dragMask.on('mouseup', this.mouseup.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');
|
this.$el.addClass('dragging');
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
mousemove(e) {
|
mousemove(e) {
|
||||||
if (e.which === 0) {
|
if (e.which === 0) {
|
||||||
this.mouseup();
|
this.mouseup();
|
||||||
} else {
|
} else {
|
||||||
this.trigger('drag', { offset: e[this.offsetProp] - this.initialOffset });
|
this.emit('drag', { offset: e[this.offsetProp] - this.initialOffset });
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
mouseup() {
|
mouseup() {
|
||||||
this.dragMask.remove();
|
this.dragMask.remove();
|
||||||
this.$el.removeClass('dragging');
|
this.$el.removeClass('dragging');
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
export { DragView };
|
export { DragView };
|
||||||
|
|
|
@ -46,12 +46,12 @@ const MenuView = Backbone.View.extend({
|
||||||
const sectionView = new MenuSectionView({ el: sectionsEl, model: section });
|
const sectionView = new MenuSectionView({ el: sectionsEl, model: section });
|
||||||
sectionView.render();
|
sectionView.render();
|
||||||
if (section.get('drag')) {
|
if (section.get('drag')) {
|
||||||
const dragView = new DragView('y');
|
|
||||||
const dragEl = $('<div/>')
|
const dragEl = $('<div/>')
|
||||||
.addClass('menu__drag-section')
|
.addClass('menu__drag-section')
|
||||||
.appendTo(sectionsEl);
|
.appendTo(sectionsEl);
|
||||||
|
const dragView = new DragView('y', { parent: dragEl[0] });
|
||||||
sectionView.listenDrag(dragView);
|
sectionView.listenDrag(dragView);
|
||||||
dragView.setElement(dragEl).render();
|
dragView.render();
|
||||||
this.sectionViews.push(dragView);
|
this.sectionViews.push(dragView);
|
||||||
}
|
}
|
||||||
this.sectionViews.push(sectionView);
|
this.sectionViews.push(sectionView);
|
||||||
|
|
|
@ -20,10 +20,18 @@
|
||||||
|
|
||||||
.drag-handle__inner {
|
.drag-handle__inner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
&--x {
|
||||||
left: -2px;
|
top: 0;
|
||||||
width: 5px;
|
left: -2px;
|
||||||
height: 100%;
|
width: 5px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
&--y {
|
||||||
|
top: -2px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
@include mobile {
|
@include mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<div class="drag-handle__inner drag-handle__inner--{{coord}}"></div>
|
|
@ -1,6 +1,7 @@
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
{{#each files.models as |file|}}
|
{{#each files.models as |file|}}
|
||||||
<div class="footer__db footer__db-item {{#unless file.attributes.open}}footer__db--dimmed{{/unless}}" data-file-id="{{file.cid}}">
|
<div class="footer__db footer__db-item {{#unless file.attributes.open}}footer__db--dimmed{{/unless}}"
|
||||||
|
data-file-id="{{file.cid}}" id="footer__db--{{file.cid}}">
|
||||||
<i class="fa fa-{{#if file.attributes.open}}unlock{{else}}lock{{/if}}"></i> {{file.attributes.name}}
|
<i class="fa fa-{{#if file.attributes.open}}unlock{{else}}lock{{/if}}"></i> {{file.attributes.name}}
|
||||||
{{#if file.attributes.syncing~}}
|
{{#if file.attributes.syncing~}}
|
||||||
<i class="fa fa-refresh fa-spin footer__db-sign"></i>
|
<i class="fa fa-refresh fa-spin footer__db-sign"></i>
|
||||||
|
@ -12,17 +13,17 @@
|
||||||
{{~/if}}
|
{{~/if}}
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
<div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open">
|
<div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open" id="footer__db-open">
|
||||||
<i class="fa fa-plus"></i><span class="footer__db-text"> {{res 'footerOpen'}}</span>
|
<i class="fa fa-plus"></i><span class="footer__db-text"> {{res 'footerOpen'}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer__btn footer__btn-help" title="{{res 'help'}}" tip-placement="top"><i class="fa fa-question"></i></div>
|
<div class="footer__btn footer__btn-help" title="{{res 'help'}}" tip-placement="top" id="footer__btn-help"><i class="fa fa-question"></i></div>
|
||||||
<div class="footer__btn footer__btn-settings" title="{{res 'settings'}}" tip-placement="top">
|
<div class="footer__btn footer__btn-settings" title="{{res 'settings'}}" tip-placement="top" id="footer__btn-settings">
|
||||||
{{#if updateAvailable}}
|
{{#if updateAvailable}}
|
||||||
<i class="fa fa-bell footer__update-icon"></i>
|
<i class="fa fa-bell footer__update-icon"></i>
|
||||||
{{else}}
|
{{else}}
|
||||||
<i class="fa fa-cog"></i>
|
<i class="fa fa-cog"></i>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="footer__btn footer__btn-generate" title="{{res 'footerTitleGen'}}" tip-placement="top"><i class="fa fa-bolt"></i></div>
|
<div class="footer__btn footer__btn-generate" title="{{res 'footerTitleGen'}}" tip-placement="top" id="footer__btn-generate"><i class="fa fa-bolt"></i></div>
|
||||||
<div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left"><i class="fa fa-sign-out"></i></div>
|
<div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left" id="footer__btn-lock"><i class="fa fa-sign-out"></i></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue