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

Problem: inline editing, adding section sometimes did not register click events

Solution: re-event handlers and remove them after use
This commit is contained in:
Harvey Kandola 2017-03-22 09:40:34 +00:00
parent 3791569d0e
commit dbba63c6cf
7 changed files with 42 additions and 24 deletions

View file

@ -21,9 +21,17 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
didReceiveAttrs() {
this._super(...arguments);
if (this.get('isDestroyed') || this.get('isDestroying')) {
return;
}
let page = this.get('page');
this.get('documentService').getPageMeta(page.get('documentId'), page.get('id')).then((meta) => {
if (this.get('isDestroyed') || this.get('isDestroying')) {
return;
}
this.set('meta', meta);
if (this.get('toEdit') === this.get('page.id') && this.get('isEditor')) {
this.send('onEdit');

View file

@ -23,7 +23,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
appMeta: Ember.inject.service(),
link: Ember.inject.service(),
hasPages: computed.notEmpty('pages'),
newSectionName: '',
newSectionName: 'Section',
newSectionNameMissing: computed.empty('newSectionName'),
newSectionLocation: '',
beforePage: '',
@ -51,13 +51,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
didInsertElement() {
this._super(...arguments);
$(".start-section:not(.start-section-empty-state)").hoverIntent({interval: 100, over: function() {
// in
$(this).find('.start-button').velocity("transition.slideDownIn", {duration: 300});
}, out: function() {
// out
$(this).find('.start-button').velocity("transition.slideUpOut", {duration: 300});
} });
this.setupAddWizard();
let self = this;
$(".tooltipped").each(function(i, el) {
@ -67,6 +61,8 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
willDestroyElement() {
this._super(...arguments);
$('.start-section:not(.start-section-empty-state)').off('.hoverIntent');
this.destroyTooltips();
},
@ -105,6 +101,20 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
});
},
setupAddWizard() {
Ember.run.schedule('afterRender', () => {
$('.start-section:not(.start-section-empty-state)').off('.hoverIntent');
$('.start-section:not(.start-section-empty-state)').hoverIntent({interval: 100, over: function() {
// in
$(this).find('.start-button').velocity("transition.slideDownIn", {duration: 300});
}, out: function() {
// out
$(this).find('.start-button').velocity("transition.slideUpOut", {duration: 300});
} });
});
},
addSection(model) {
// calculate sequence of page (position in document)
let sequence = 0;
@ -172,10 +182,10 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
},
onSavePage(page, meta) {
this.set('toEdit', '');
this.attrs.onSavePage(page, meta);
},
// Section wizard related
onShowSectionWizard(page) {
if (is.undefined(page)) {
page = { id: '0' };
@ -200,7 +210,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
}
$("#new-section-wizard").insertAfter(`#add-section-button-${page.id}`);
$("#new-section-wizard").velocity("transition.slideDownIn", {duration: 300, complete:
$("#new-section-wizard").velocity("transition.slideDownIn", { duration: 300, complete:
function() {
$("#new-section-name").focus();
}});
@ -209,6 +219,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
onHideSectionWizard() {
this.set('newSectionLocation', '');
this.set('beforePage', null);
$("#new-section-wizard").insertAfter('#wizard-placeholder');
$("#new-section-wizard").velocity("transition.slideUpOut", { duration: 300 });
},
@ -251,6 +262,8 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
} else {
this.set('toEdit', '');
}
this.setupAddWizard();
});
},
@ -289,12 +302,8 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
const promise = this.addSection(model);
promise.then((id) => {
this.set('pageId', id);
// if (model.page.pageType === 'section') {
// this.set('toEdit', id);
// } else {
// this.set('toEdit', '');
// }
this.setupAddWizard();
});
},

View file

@ -17,7 +17,8 @@ export default Ember.Component.extend({
prompt: null,
optionValuePath: 'id',
optionLabelPath: 'name',
action: Ember.K, // action to fire on change
action() {}, // action to fire on change
// action: Ember.K, // action to fire on change
// shadow the passed-in `selection` to avoid
// leaking changes to it via a 2-way binding

View file

@ -113,11 +113,7 @@ export default Ember.Controller.extend(NotifierMixin, {
}
this.set('model.pages', _.sortBy(pages, "sequence"));
this.transitionToRoute('document.index',
this.get('model.folder.id'),
this.get('model.folder.slug'),
this.get('model.document.id'),
this.get('model.document.slug'));
this.get('target.router').refresh();
});
} else {
// page delete followed by re-leveling child pages

View file

@ -1,4 +1,5 @@
<div class="document-view">
{{#if hasPages}}
{{#each pages key="id" as |page index|}}
{{#if isEditor}}
@ -47,6 +48,8 @@
{{/if}}
{{/if}}
<div id="wizard-placeholder" class="hide margin-top-50" />
<div id="new-section-wizard" class="new-section-wizard">
<div class="input-inline input-transparent pull-left width-80">
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'section-name error-inline' 'section-name') placeholder="Name" autocomplete="off"}}
@ -94,4 +97,5 @@
{{/if}}
</div>
</div>
</div>

View file

@ -24,7 +24,7 @@
<p>Are you sure you want to delete <span class="bold">{{page.title}}?</span></p>
<p>
{{input type="checkbox" id=checkId class="margin-left-20" checked=deleteChildren}}
<label for="{{checkId}}">&nbsp;Delete child pages</label>
<label for="{{checkId}}">&nbsp;Delete child sections</label>
</p>
{{/dropdown-dialog}}
{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onSavePageAsBlock')}}

View file

@ -37,7 +37,7 @@
<p>Are you sure you want to delete <span class="bold">{{page.title}}?</span></p>
<p>
{{input type="checkbox" id=checkId class="margin-left-20" checked=deleteChildren}}
<label for="{{checkId}}">&nbsp;Delete child pages</label>
<label for="{{checkId}}">&nbsp;Delete child sections</label>
</p>
{{/dropdown-dialog}}
{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onSavePageAsBlock')}}