mirrors
/
keeweb
mirror of https://github.com/keeweb/keeweb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

drag view

Browse Source
pull/1267/head
antelle 4 years ago
parent 22d1b478f9
commit c9ac7f2fa3
7 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File

11
app/scripts/view-engine/view.js
Unescape Escape View File

@ -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() {

8
app/scripts/views/app-view.js
Unescape Escape View File

@ -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;

40
app/scripts/views/drag-view.js
Unescape Escape View File

@ -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 };

4
app/scripts/views/menu/menu-view.js
Unescape Escape View File

@ -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);

16
app/styles/utils/_drag.scss
Unescape Escape View File

@ -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;
}

1
app/templates/drag.hbs
Unescape Escape View File

@ -0,0 +1 @@
<div class="drag-handle__inner drag-handle__inner--{{coord}}"></div>

13
app/templates/footer.hbs
Unescape Escape View File

@ -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">&nbsp;{{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>

Write Preview
Loading…
Cancel
Save