Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save bantic/f6d6d04fcb21f06e5cdae1677e7023ce to your computer and use it in GitHub Desktop.
Save bantic/f6d6d04fcb21f06e5cdae1677e7023ce to your computer and use it in GitHub Desktop.
mobiledoc template fill in
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'span',
classNames: ['template-tag'],
click() {
let tag = this.get('tag');
let promise = this.get('onClick')(tag);
promise.then((tagVal) => {
tag.setProperties({
tag: tagVal,
value: tagVal
});
});
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['template-tags-input'],
attributeBindings: ['contenteditable'],
contenteditable: true,
init() {
this._super(...arguments);
this.templateItems = [];
},
didInsertElement() {
let editor = new Mobiledoc.Editor({
html: 'hi',
autofocus: false,
atoms: [
{
name: 'tag',
type: 'dom',
render({ value }) {
let span = document.createElement('span');
span.textContent = value;
span.classList.add('template-tag');
span.onclick = function () {
alert('clicked');
};
return span;
}
}
]
});
editor.onTextInput({
text: '{',
run: (editor) => {
let { range } = editor;
this.get('onShowTags')().then((tag) => {
console.log('insert tag', tag);
editor.selectRange(range);
editor.insertAtom('tag', tag);
editor.insertText('}');
});
}
});
editor.render(this.element);
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['template-tags'],
actions: {
openAndSelect(open, close) {
open();
let defer = Ember.RSVP.defer();
this.set('defer', defer);
return defer.promise.then((tag) => {
close();
return tag;
});
},
setTag(tag) {
let defer = this.get('defer');
defer.resolve(tag);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
tags: ['firstName', 'lastName', 'email'],
template: ''
});
import Ember from 'ember';
export function eq([val1, val2]/*, hash*/) {
return val1 === val2;
}
export default Ember.Helper.helper(eq);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.template-tags-input {
background-color: #efefef;
line-height: 1.5;
}
.template-tag {
background-color: lightseagreen;
}
<h1>template-tags</h1>
<p>
Start typing text in the input below. Use `{` character to
start adding a template value. Click on one of the options to select.
</p>
<br>
{{template-tags template=template tags=tags onChange=(action (mut template))}}
<div id="ember-basic-dropdown-wormhole"></div>
{{yield}}
{{#basic-dropdown as |dropdown|}}
{{template-tags-input tags=tags template=template
onShowTags=(action 'openAndSelect' dropdown.actions.open dropdown.actions.close)
onTagClick=(action 'openAndSelect' dropdown.actions.open dropdown.actions.close)}}
{{#dropdown.content}}
<ul>
{{#each tags as |tag|}}
<li>
<a onclick={{action 'setTag' tag}}>{{tag}}</a>
</li>
{{/each}}
</ul>
{{/dropdown.content}}
{{/basic-dropdown}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0",
"mobiledoc-kit": "https://unpkg.com/mobiledoc-kit@0.10.15/dist/global/mobiledoc-kit.js"
},
"addons": {
"ember-data": "2.12.1",
"ember-basic-dropdown": "0.31.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment