mirror of https://github.com/keeweb/keeweb.git
drag view
This commit is contained in:
antelle
parent
22d1b478f9
commit
c9ac7f2fa3
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
$('<div/>')
|
||||
.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 };
|
||||
|
|
|
|||
|
|
@ -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 = $('<div/>')
|
||||
.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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<div class="drag-handle__inner drag-handle__inner--{{coord}}"></div>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<div class="footer">
|
||||
{{#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}}
|
||||
{{#if file.attributes.syncing~}}
|
||||
<i class="fa fa-refresh fa-spin footer__db-sign"></i>
|
||||
|
|
@ -12,17 +13,17 @@
|
|||
{{~/if}}
|
||||
</div>
|
||||
{{/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>
|
||||
</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-settings" title="{{res 'settings'}}" tip-placement="top">
|
||||
<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" id="footer__btn-settings">
|
||||
{{#if updateAvailable}}
|
||||
<i class="fa fa-bell footer__update-icon"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-cog"></i>
|
||||
{{/if}}
|
||||
</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-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left"><i class="fa fa-sign-out"></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" id="footer__btn-lock"><i class="fa fa-sign-out"></i></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue