Adding a poll button to the bottom of the composer

Dev
1

@Steven was kind enough to help and was able to put together this script that almost works but tapping the button doesn’t do anything:

<script type='text/x-handlebars' data-template-name='composer'> {{#composer-body composer=model showPreview=showPreview openIfDraft=(action "openIfDraft") typed=(action "typed") cancelled=(action "cancelled") save=(action "save")}} <div class="grippie"></div> {{#if visible}} {{composer-messages composer=model messageCount=messageCount addLinkLookup=(action "addLinkLookup")}} {{#if model.viewOpenOrFullscreen}} <div class="reply-area {{if canEditTags 'with-tags'}}"> <div class='composer-fields'> {{plugin-outlet name="composer-open" args=(hash model=model)}} <div class='reply-to'> {{#unless model.viewFullscreen}} <div class="reply-details"> {{composer-action-title model=model openComposer=(action "openComposer") closeComposer=(action "closeComposer") canWhisper=canWhisper tabindex=8}} {{plugin-outlet name="composer-action-after" noTags=true args=(hash model=model)}} {{#unless site.mobileView}} {{#if isWhispering}} <span class='whisper'>{{d-icon "far-eye-slash"}}</span> {{/if}} {{#if model.unlistTopic}} <span class='whisper'>({{i18n 'composer.unlist'}})</span> {{/if}} {{#if model.noBump}} <span class="no-bump">{{d-icon "anchor"}}</span> {{/if}} {{/unless}} {{#if canEdit}} {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason icon="info-circle" class="display-edit-reason"}} {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}} {{/link-to-input}} {{/if}} </div> {{/unless}} {{composer-toggles composeState=model.composeState toggleComposer=(action "toggle") toggleToolbar=(action "toggleToolbar") toggleFullscreen=(action "fullscreenComposer")}} </div> {{#unless model.viewFullscreen}} {{#if model.canEditTitle}} {{#if model.creatingPrivateMessage}} <div class='user-selector'> {{composer-user-selector topicId=topicModel.id usernames=model.targetRecipients hasGroups=model.hasTargetGroups focusTarget=focusTarget class="users-input"}} {{#if showWarning}} <label class='add-warning'> {{input type="checkbox" checked=model.isWarning tabindex="3"}} {{i18n "composer.add_warning"}} </label> {{/if}} </div> {{/if}} <div class="title-and-category {{if showPreview 'with-preview'}}"> {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}} {{#if model.showCategoryChooser}} <div class="category-input"> {{category-chooser value=model.categoryId tabindex="3" onChange=(action (mut model.categoryId)) isDisabled=disableCategoryChooser options=(hash scopedCategoryId=scopedCategoryId ) }} {{popup-input-tip validation=categoryValidation}} </div> {{/if}} {{#if canEditTags}} {{mini-tag-chooser value=model.tags tabindex=4 isDisabled=disableTagsChooser onChange=(action (mut model.tags)) options=(hash categoryId=model.categoryId minimum=model.minimumRequiredTags ) }} {{popup-input-tip validation=tagValidation}} {{/if}} </div> {{/if}} {{plugin-outlet name="composer-fields" args=(hash model=model)}} {{/unless}} </div> {{composer-editor topic=topic composer=model lastValidatedAt=lastValidatedAt canWhisper=canWhisper storeToolbarState=(action "storeToolbarState") onPopupMenuAction=(action "onPopupMenuAction") showUploadModal=(route-action "showUploadSelector") popupMenuOptions=popupMenuOptions draftStatus=model.draftStatus isUploading=isUploading allowUpload=allowUpload uploadIcon=uploadIcon isCancellable=isCancellable uploadProgress=uploadProgress groupsMentioned=(action "groupsMentioned") cannotSeeMention=(action "cannotSeeMention") importQuote=(action "importQuote") togglePreview=(action "togglePreview") showToolbar=showToolbar afterRefresh=(action "afterRefresh") focusTarget=focusTarget}} <div class='submit-panel'> {{plugin-outlet name="composer-fields-below" args=(hash model=model)}} <div class='save-or-cancel'> {{#unless model.viewFullscreen}} {{composer-save-button action=(action "save") icon=saveIcon label=saveLabel disableSubmit=disableSubmit}} {{#if site.mobileView}} <a href {{action "cancel"}} class='cancel' tabindex="6" title="{{i18n 'cancel'}}"> {{#if canEdit}} {{d-icon "times"}} {{else}} {{d-icon "far-trash-alt"}} {{/if}} </a> {{else}} <a href {{action "cancel"}} class='cancel' tabindex="6" >{{i18n 'cancel'}}</a> {{/if}} {{/unless}} {{#if site.mobileView}} {{#if whisperOrUnlistTopic}} <span class='whisper'> {{d-icon "far-eye-slash"}} </span> {{/if}} {{#if model.noBump}} <span class="no-bump">{{d-icon "anchor"}}</span> {{/if}} {{/if}} {{#if isUploading}} <div id="file-uploading"> {{loading-spinner size="small"}}<span>{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span> {{#if isCancellable}} <a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a> {{/if}} </div> {{/if}} <div id='draft-status' class="{{if isUploading 'hidden'}}"> {{#if model.draftSaving}}<div class="spinner small"></div>{{/if}} {{#if model.draftSaved}}{{d-icon 'check' class='save-animation'}}{{/if}} {{#if model.draftStatus}} <span title="{{model.draftStatus}}"> {{#if model.draftConflictUser}} {{avatar model.draftConflictUser imageSize="small"}} {{d-icon 'user-edit'}} {{else}} {{d-icon 'sync-alt'}} {{/if}} {{#unless site.mobileView}} {{model.draftStatus}} {{/unless}} </span> {{/if}} </div> </div> {{#if site.mobileView}} {{#if allowUpload}} <a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}"> {{d-icon uploadIcon}} </a> {{/if}} <a href class="btn btn-default no-text mobile-preview" {{action "showPollBuilder"}}> {{d-icon "chart-bar"}} </a> <a href class="btn btn-default no-text mobile-preview" title="{{i18n 'composer.show_preview'}}" {{action "togglePreview"}}> {{d-icon "desktop"}} </a> {{#if showPreview}} {{d-button action=(action "togglePreview") class="hide-preview" label="composer.hide_preview"}} {{/if}} {{else}} <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a> {{/if}} </div> </div> {{else}} <div class='saving-text'> {{#if model.createdPost}} {{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a> {{else}} {{i18n 'composer.saving'}} {{loading-spinner size="small"}} {{/if}} </div> <div class='draft-text'> {{#if model.topic}} {{d-icon "share"}} {{{draftTitle}}} {{else}} {{i18n "composer.saved_draft"}} {{/if}} </div> {{composer-toggles composeState=model.composeState toggleFullscreen=(action "openIfDraft") toggleComposer=(action "toggle") toggleToolbar=(action "toggleToolbar")}} {{/if}} {{/if}} {{/composer-body}} </script>

His potential reasoning was: “It only works if we use the poll button of the composer before. I think it’s because Discourse will only trigger the action showPollBuilder (this is what opens the poll builder) after we trigger the action onPopupMenuAction (the icon that open the list of actions in the toolbar, like hide details, blur spoiler, build poll).”

Would anybody mind taking over? :slight_smile:
(Thanks again Steven for the super generous assistance!)

2 Likes
2

You probably don’t need to override the whole composer template. Use composer-fields-below outlet instead.

6 Likes
3

I couldnt help myself and looked down the rabit hole a bit. haha and now are 2 hours gone already.

handlebars
handlebars2786×1294 213 KB

you need to add the handlebars file like this to display the button

js
js2714×1442 349 KB

and then you need some action similar to the one in the poll plugin:
https://github.com/discourse/discourse/blob/f5180656540084cddcb3e4072d7ae9e4aa333ee4/plugins/poll/assets/javascripts/initializers/add-poll-ui-builder.js.es6#L24
we can feed the poll builder modal a “fake” toolbar event, but the issue is that you also need to replicate the logic in the editor component
https://github.com/discourse/discourse/blob/9c96511ec47bf0eb450a0b7e15738d284ee3761f/app/assets/javascripts/discourse/components/d-editor.js.es6#L953
the part with _getSelected and _addText. I would be very interested to know if there is some api to add text programmatically to the editor textarea from “the outside”.

3 Likes
4

That was the plan, for testing purpose it was easier to rewrite the composer template since the plugin outlet might need some tweaks to adjust to his theme.

But I wanted to make the code works first, and adapt later, but I was stuck on the coding

1 Like
5

No AFAIk we don’t have anything to do this ATM.

6

Oh okay, gotcha. Great job! :slight_smile:

7

This is actually tricker than it seems (how hard can it be to move a button right? :slight_smile: )

I had a brief tackle of this and it seems the least messy way is assign the composer editor toolbar to a controller property you can then access in the outlet.

If you try to recreate the behaviour of the toolbar, you run into the immediate issues @spirobel mentioned, but will probably run into other issues down the line as the text parsing logic is tweaked.

The basic principle being to try and use the functionality at the highest level of abstrction, i.e. we need the toolbar of the actual composer editor…so let’s get that.

i.e.

api.modifyClass("component:d-editor", { @on('didInsertElement') makeToolbarAccessible() { if (this.outletArgs && this.outletArgs.editorType === 'composer') { const controller = getOwner(this).lookup('controller:composer'); controller.set('editorToolbar', this.toolbar); } } });

Then in the outlet we get the toolbar from the composer controller and add a new button to it. There may be a way to use the existing poll button (that would be ideal), but it’s in wrapped up in the popupMenu logic, and I couldn’t see a way to extricate it.

setupComponent(attrs, ctx) { const controller = getOwner(this).lookup('controller:composer'); controller.addObserver('editorToolbar', function() { if (this._state === 'destroying') return; const toolbar = controller.editorToolbar; toolbar.addButton({ group: "extras", icon: "chart-bar", title: "poll.ui_builder.title", sendAction: e => { controller.send('storeToolbarState', e); this.send("showPollBuilder"); } }); const extras = toolbar.groups.find(g => g.group == 'extras'); const pollButton = extras.buttons.find(b => b.icon == "chart-bar"); ctx.set('pb', pollButton); }); }

Then in the template itself

{{d-button type="button" action=pb.action actionParam=pb translatedTitle=pb.title icon=pb.icon class=pb.className}}

@nexo Give this theme component a whirl: discourse-poll-button-bottom.zip (2.5 KB)

p.s. I just loaded it on thepavilion.io and it seems to be working (mobile only).

4 Likes
8

wow that seems like an amazing solution. mine is really boring compared to that:

export default { actions: { showPollBuilderNextToSave() { $("button[title='Options']").trigger('click') console.log($("button[title='Options']")) Ember.run.later((function() { $("li[data-value='showPollBuilder']").trigger('click'); console.log($("li[data-value='showPollBuilder']")) }), 50); } } };

I just use jquery to click the button :smiley: maybe there is a better way to find the first selector without hardcoding the options title, in case this would be an issue.

1 Like
9

Yeah, nice one :+1: Also an option.

1 Like
10

Wow, I’m speechless Angus…this is incredible, you’re a genius my lad! You’ve motivated me to start learning to develop starting today, just like Johani motivated me to learn CSS a year ago. Thank you Angus, absolutely stunning. :trophy:

4 Likes