1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00

WIP content linker UX

This commit is contained in:
Harvey Kandola 2017-12-07 19:43:46 +00:00
parent 531e9c88d7
commit db1b3aef8c
11 changed files with 338 additions and 325 deletions

View file

@ -10,43 +10,23 @@
// https://documize.com
import { empty } from '@ember/object/computed';
import { computed } from '@ember/object';
import TooltipMixin from '../../mixins/tooltip';
import ModalMixin from '../../mixins/modal';
import Component from '@ember/component';
export default Component.extend({
drop: null,
export default Component.extend(TooltipMixin, ModalMixin, {
busy: false,
mousetrap: null,
showLinkModal: false,
hasNameError: empty('page.title'),
containerId: computed('page', function () {
let page = this.get('page');
return `base-editor-inline-container-${page.id}`;
}),
pageId: computed('page', function () {
let page = this.get('page');
return `page-editor-${page.id}`;
}),
cancelId: computed('page', function () {
let page = this.get('page');
return `cancel-edits-button-${page.id}`;
}),
dialogId: computed('page', function () {
let page = this.get('page');
return `discard-edits-dialog-${page.id}`;
}),
contentLinkerButtonId: computed('page', function () {
let page = this.get('page');
return `content-linker-button-${page.id}`;
}),
previewButtonId: computed('page', function () {
let page = this.get('page');
return `content-preview-button-${page.id}`;
}),
didRender() {
let msContainer = document.getElementById(this.get('containerId'));
let msContainer = document.getElementById('section-editor-' + this.get('containerId'));
let mousetrap = this.get('mousetrap');
if (is.null(mousetrap)) {
@ -67,13 +47,14 @@ export default Component.extend({
$('#' + this.get('pageId')).focus(function() {
$(this).select();
});
this.renderTooltips();
},
willDestroyElement() {
let drop = this.get('drop');
if (is.not.null(drop)) {
drop.destroy();
}
this._super(...arguments);
this.removeTooltips();
let mousetrap = this.get('mousetrap');
if (is.not.null(mousetrap)) {
@ -83,33 +64,6 @@ export default Component.extend({
},
actions: {
onCancel() {
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
$('#' + this.get('dialogId')).css("display", "block");
let drop = new Drop({
target: $('#' + this.get('cancelId'))[0],
content: $('#' + this.get('dialogId'))[0],
classes: 'drop-theme-basic',
position: "bottom right",
openOn: "always",
constrainToWindow: true,
constrainToScrollParent: false,
tetherOptions: {
offset: "5px 0",
targetOffset: "10px 0"
},
remove: false
});
this.set('drop', drop);
return;
}
this.attrs.onCancel();
},
onAction() {
if (this.get('busy') || is.empty(this.get('page.title'))) {
return;
@ -122,21 +76,31 @@ export default Component.extend({
this.attrs.onAction(this.get('page.title'));
},
keepEditing() {
let drop = this.get('drop');
drop.close();
},
onCancel() {
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
this.modalOpen('#discard-modal-' + this.get('page.id'), {show: true});
return;
}
discardEdits() {
this.attrs.onCancel();
},
onInsertLink(selection) {
return this.get('onInsertLink')(selection);
},
onDiscard() {
this.modalClose('#discard-modal-' + this.get('page.id'));
this.attrs.onCancel();
},
onPreview() {
return this.get('onPreview')();
},
},
onShowLinkModal() {
this.set('showLinkModal', true);
},
onInsertLink(selection) {
this.set('showLinkModal', false);
return this.get('onInsertLink')(selection);
}
}
});