Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate composer view to component

This commit is contained in:
Robin Ward 2016-11-18 11:17:15 -05:00
parent 4e82e3ac75
commit c9af4b839e
5 changed files with 251 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/application.js
View File

@ -68,7 +68,6 @@
//= require ./discourse/lib/emoji/groups
//= require ./discourse/lib/emoji/toolbar
//= require ./discourse/components/d-editor
//= require ./discourse/views/composer
//= require ./discourse/lib/show-modal
//= require ./discourse/lib/screen-track
//= require ./discourse/routes/discourse

113
app/assets/javascripts/discourse/components/composer-body.js.es6 Normal file
View File

@ -0,0 +1,113 @@
import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
import Composer from 'discourse/models/composer';
import afterTransition from 'discourse/lib/after-transition';
import positioningWorkaround from 'discourse/lib/safari-hacks';
import { headerHeight } from 'discourse/components/site-header';
export default Ember.Component.extend({
elementId: 'reply-control',
classNameBindings: ['composer.creatingPrivateMessage:private-message',
'composeState',
'composer.loading',
'composer.canEditTitle:edit-title',
'composer.createdPost:created-post',
'composer.creatingTopic:topic',
'composer.whisper:composing-whisper'],
@computed('composer.composeState')
composeState(composeState) {
return composeState || Composer.CLOSED;
},
movePanels(sizePx) {
$('#main-outlet').css('padding-bottom', sizePx);
// signal the progress bar it should move!
this.appEvents.trigger("composer:resized");
},
@observes('composeState', 'composer.action')
resize() {
Ember.run.scheduleOnce('afterRender', () => {
const h = $('#reply-control').height() || 0;
this.movePanels(h + "px");
// Figure out the size of the fields
const $fields = this.$('.composer-fields');
const fieldPos = $fields.position();
if (fieldPos) {
this.$('.wmd-controls').css('top', $fields.height() + fieldPos.top + 5);
}
// get the submit panel height
const submitPos = this.$('.submit-panel').position();
if (submitPos) {
this.$('.wmd-controls').css('bottom', h - submitPos.top + 7);
}
});
},
keyUp() {
this.sendAction('typed');
const lastKeyUp = new Date();
this._lastKeyUp = lastKeyUp;
// One second from now, check to see if the last key was hit when
// we recorded it. If it was, the user paused typing.
Ember.run.cancel(this._lastKeyTimeout);
this._lastKeyTimeout = Ember.run.later(() => {
if (lastKeyUp !== this._lastKeyUp) { return; }
this.appEvents.trigger('composer:find-similar');
}, 1000);
},
keyDown(e) {
if (e.which === 27) {
this.sendAction('cancelled');
return false;
} else if (e.which === 13 && (e.ctrlKey || e.metaKey)) {
// CTRL+ENTER or CMD+ENTER
this.sendAction('save');
return false;
}
},
didInsertElement() {
this._super();
const $replyControl = $('#reply-control');
const resize = () => Ember.run(() => this.resize());
$replyControl.DivResizer({
resize,
maxHeight: winHeight => winHeight - headerHeight(),
onDrag: sizePx => this.movePanels(sizePx)
});
const triggerOpen = () => {
if (this.get('composer.composeState') === Composer.OPEN) {
this.appEvents.trigger('composer:opened');
}
};
triggerOpen();
afterTransition($replyControl, () => {
resize();
triggerOpen();
});
positioningWorkaround(this.$());
this.appEvents.on('composer:resize', this, this.resize);
},
willDestroyElement() {
this._super();
this.appEvents.off('composer:resize', this, this.resize);
},
click() {
this.sendAction('openIfDraft');
},
});

11
app/assets/javascripts/discourse/controllers/composer.js.es6
View File

@ -196,6 +196,17 @@ export default Ember.Controller.extend({
}.property('model.creatingPrivateMessage', 'model.targetUsernames'),
actions: {
typed() {
this.checkReplyLength();
this.get('model').typing();
},
cancelled() {
this.send('hitEsc');
this.send('hideOptions');
},
addLinkLookup(linkLookup) {
this.set('linkLookup', linkLookup);
},

7
app/assets/javascripts/discourse/templates/composer.hbs
View File

@ -1,3 +1,9 @@
{{#composer-body
composer=model
openIfDraft="openIfDraft"
typed="typed"
cancelled="cancelled"
save="save"}}
{{#if visible}}
<div class='contents'>
@ -134,3 +140,4 @@
</div>
</div>
{{/if}}
{{/composer-body}}

121
app/assets/javascripts/discourse/views/composer.js.es6
View File

@ -1,121 +0,0 @@
import afterTransition from 'discourse/lib/after-transition';
import positioningWorkaround from 'discourse/lib/safari-hacks';
import { headerHeight } from 'discourse/components/site-header';
import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
import Composer from 'discourse/models/composer';
const ComposerView = Ember.View.extend({
_lastKeyTimeout: null,
elementId: 'reply-control',
classNameBindings: ['composer.creatingPrivateMessage:private-message',
'composeState',
'composer.loading',
'composer.canEditTitle:edit-title',
'composer.createdPost:created-post',
'composer.creatingTopic:topic',
'composer.whisper:composing-whisper'],
composer: Em.computed.alias('controller.model'),
@computed('composer.composeState')
composeState(composeState) {
return composeState || Composer.CLOSED;
},
movePanels(sizePx) {
$('#main-outlet').css('padding-bottom', sizePx);
// signal the progress bar it should move!
this.appEvents.trigger("composer:resized");
},
@observes('composeState', 'composer.action')
resize() {
Ember.run.scheduleOnce('afterRender', () => {
const h = $('#reply-control').height() || 0;
this.movePanels(h + "px");
// Figure out the size of the fields
const $fields = this.$('.composer-fields');
const fieldPos = $fields.position();
if (fieldPos) {
this.$('.wmd-controls').css('top', $fields.height() + fieldPos.top + 5);
}
// get the submit panel height
const submitPos = this.$('.submit-panel').position();
if (submitPos) {
this.$('.wmd-controls').css('bottom', h - submitPos.top + 7);
}
});
},
keyUp() {
const controller = this.get('controller');
controller.checkReplyLength();
this.get('composer').typing();
const lastKeyUp = new Date();
this._lastKeyUp = lastKeyUp;
// One second from now, check to see if the last key was hit when
// we recorded it. If it was, the user paused typing.
Ember.run.cancel(this._lastKeyTimeout);
this._lastKeyTimeout = Ember.run.later(() => {
if (lastKeyUp !== this._lastKeyUp) { return; }
this.appEvents.trigger('composer:find-similar');
}, 1000);
},
keyDown(e) {
if (e.which === 27) {
this.get('controller').send('hitEsc');
this.get('controller').send('hideOptions');
return false;
} else if (e.which === 13 && (e.ctrlKey || e.metaKey)) {
// CTRL+ENTER or CMD+ENTER
this.get('controller').send('save');
return false;
}
},
@on('didInsertElement')
_enableResizing() {
const $replyControl = $('#reply-control');
const resize = () => Ember.run(() => this.resize());
$replyControl.DivResizer({
resize,
maxHeight: winHeight => winHeight - headerHeight(),
onDrag: sizePx => this.movePanels(sizePx)
});
const triggerOpen = () => {
if (this.get('composer.composeState') === Composer.OPEN) {
this.appEvents.trigger('composer:opened');
}
};
triggerOpen();
afterTransition($replyControl, () => {
resize();
triggerOpen();
});
positioningWorkaround(this.$());
this.appEvents.on('composer:resize', this, this.resize);
},
willDestroyElement() {
this._super();
this.appEvents.off('composer:resize', this, this.resize);
},
click() {
this.get('controller').send('openIfDraft');
}
});
RSVP.EventTarget.mixin(ComposerView);
export default ComposerView;