-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement card refactor for editor-dom renderer
Update cards to be in format expected by dom renderer This is based on the changes to mobiledoc-dom-renderer in bustle/mobiledoc-dom-renderer#18 Reorganize cards into dom/ html/ and text/ directories fixes #236 fixes #239
- Loading branch information
Showing
41 changed files
with
1,076 additions
and
759 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,28 @@ | ||
import Ember from 'ember'; | ||
import { cardsHash } from '../mobiledoc-cards/index'; | ||
import cards from '../mobiledoc-cards/dom'; | ||
import Renderer from 'ember-mobiledoc-dom-renderer'; | ||
|
||
let { computed, run } = Ember; | ||
let { run } = Ember; | ||
|
||
let renderer = new Renderer({cards}); | ||
|
||
export default Ember.Component.extend({ | ||
domRenderer: computed(function(){ | ||
return new Renderer(); | ||
}), | ||
didRender() { | ||
let domRenderer = this.get('domRenderer'); | ||
let mobiledoc = this.get('mobiledoc'); | ||
if (!mobiledoc) { | ||
return; | ||
} | ||
|
||
run(() => { | ||
let target = this.$(); | ||
target.empty(); | ||
if (mobiledoc) { | ||
domRenderer.render(mobiledoc, target[0], cardsHash); | ||
if (this._teardownRender) { | ||
this._teardownRender(); | ||
this._teardownRender = null; | ||
} | ||
|
||
let target = this.$(); | ||
let { result, teardown } = renderer.render(mobiledoc); | ||
target.append(result); | ||
this._teardownRender = teardown; | ||
}); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,22 @@ | ||
import Ember from 'ember'; | ||
import { cardsHash } from '../mobiledoc-cards/index'; | ||
import cards from '../mobiledoc-cards/html'; | ||
import Renderer from 'ember-mobiledoc-html-renderer'; | ||
|
||
let { computed, run } = Ember; | ||
let { run } = Ember; | ||
|
||
let renderer = new Renderer({cards}); | ||
|
||
export default Ember.Component.extend({ | ||
htmlRenderer: computed(function(){ | ||
return new Renderer(); | ||
}), | ||
didRender() { | ||
let renderer = this.get('htmlRenderer'); | ||
let mobiledoc = this.get('mobiledoc'); | ||
if (!mobiledoc) { | ||
return; | ||
} | ||
|
||
run(() => { | ||
let target = this.$(); | ||
target.empty(); | ||
if (mobiledoc) { | ||
let html = renderer.render(mobiledoc, cardsHash); | ||
target.text(html); | ||
} | ||
let { result: html } = renderer.render(mobiledoc); | ||
target.text(html); | ||
}); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,36 @@ | ||
import Ember from 'ember'; | ||
import { cardsHash } from '../mobiledoc-cards/index'; | ||
import cards from '../mobiledoc-cards/text'; | ||
import Renderer from 'ember-mobiledoc-text-renderer'; | ||
|
||
let { computed, run } = Ember; | ||
let { run } = Ember; | ||
|
||
let renderer = new Renderer({cards}); | ||
|
||
let addHTMLEntitites = (str) => { | ||
return str.replace(/</g, '<') | ||
.replace(/>/g, '>') | ||
.replace(/\n/g, '<br>'); | ||
}; | ||
|
||
export default Ember.Component.extend({ | ||
textRenderer: computed(function(){ | ||
return new Renderer(); | ||
}), | ||
didRender() { | ||
let renderer = this.get('textRenderer'); | ||
let mobiledoc = this.get('mobiledoc'); | ||
if (!mobiledoc) { | ||
return; | ||
} | ||
run(() => { | ||
let target = this.$(); | ||
target.empty(); | ||
if (mobiledoc) { | ||
let text = renderer.render(mobiledoc, cardsHash); | ||
text = text.replace(/</g, '<') | ||
.replace(/>/g,'>') | ||
.replace(/\n/g, '<br>'); | ||
target.html(text); | ||
if (this._teardownRender) { | ||
this._teardownRender(); | ||
this._teardownRender = null; | ||
} | ||
|
||
let target = this.$(); | ||
let {result: text, teardown} = renderer.render(mobiledoc); | ||
|
||
text = addHTMLEntitites(text); | ||
target.html(text); | ||
|
||
this._teardownRender = teardown; | ||
}); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
import Ember from 'ember'; | ||
import { cardsList } from '../mobiledoc-cards/index'; | ||
import cards from '../mobiledoc-cards/dom'; | ||
|
||
export function mobiledocCardsList() { | ||
return cardsList; | ||
return cards; | ||
} | ||
|
||
export default Ember.Helper.helper(mobiledocCardsList); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import inputCard from './dom/input'; | ||
import simpleCard from './dom/simple'; | ||
import selfieCard from './dom/selfie'; | ||
import imageCard from './dom/image'; | ||
import codemirrorCard from './dom/codemirror'; | ||
|
||
export default [ | ||
inputCard, | ||
simpleCard, | ||
selfieCard, | ||
imageCard, | ||
codemirrorCard | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
/* global $, CodeMirror */ | ||
const defaultCode = 'let x = 3;'; | ||
|
||
function codeMirror(element, code, readOnly=true, callback=()=>{}) { | ||
setTimeout(() => { | ||
let ta = $(`<textarea>${code}</textarea>`).appendTo(element); | ||
let options = { | ||
mode: 'javascript' | ||
}; | ||
if (readOnly) { | ||
options.readOnly = 'nocursor'; | ||
} | ||
let cm = CodeMirror.fromTextArea(ta[0], options); | ||
callback(cm); | ||
}); | ||
} | ||
|
||
export default { | ||
name: 'codemirror-card', | ||
type: 'dom', | ||
|
||
render({env, options, payload}) { | ||
let element = $('<div></div>')[0]; | ||
let code = payload.code || defaultCode; | ||
|
||
if (env.isInEditor) { | ||
$('<button>Edit</button>').appendTo(element).on('click', env.edit); | ||
} | ||
|
||
let readOnly = true; | ||
codeMirror(element, code, readOnly); | ||
|
||
return element; | ||
}, | ||
|
||
edit({env, options, payload}) { | ||
let element = $('<div></div>')[0]; | ||
let code = payload.code || defaultCode; | ||
|
||
let saveButton = $('<button>Save</button>').appendTo(element); | ||
|
||
let readOnly = false; | ||
let callback = (cm) => { | ||
saveButton.on('click', () => env.save({code: cm.getValue()})); | ||
}; | ||
codeMirror(element, code, readOnly, callback); | ||
|
||
return element; | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
/* global $ */ | ||
const defaultSrc = 'http://placekitten.com/200/75'; | ||
|
||
function makeImageInWrapper(src=defaultSrc) { | ||
return $('<div></div>').append(`<img src="${src}">`)[0]; | ||
} | ||
|
||
export default { | ||
name: 'image-card', | ||
type: 'dom', | ||
render({env, payload}) { | ||
let element = makeImageInWrapper(payload.src); | ||
let { isInEditor } = env; | ||
|
||
if (isInEditor) { | ||
$('<button>Change</button>').appendTo(element) | ||
.on('click', env.edit); | ||
} | ||
|
||
return element; | ||
}, | ||
edit({env, payload}) { | ||
let element = makeImageInWrapper(payload.src); | ||
|
||
function importImage(event) { | ||
let reader = new FileReader(); | ||
let file = event.target.files[0]; | ||
reader.onloadend = () => { | ||
env.save({src: reader.result}); | ||
}; | ||
reader.readAsDataURL(file); | ||
} | ||
|
||
$('<input type="file">').appendTo(element) | ||
.on('change', importImage); | ||
|
||
$('<button>Save</button>').appendTo(element) | ||
.on('click', () => { env.save(payload); }); | ||
|
||
return element; | ||
} | ||
/* FIXME: html and text | ||
html: { | ||
setup(buffer, options, env, payload) { | ||
let src = payload.src || defaultSrc; | ||
let html = `<img src="${src}">`; | ||
buffer.push(html); | ||
} | ||
}, | ||
text: { | ||
setup(str, options, env, payload) { | ||
return "[image]"; | ||
} | ||
} | ||
*/ | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import Ember from 'ember'; | ||
|
||
let { $ } = Ember; | ||
|
||
export default { | ||
name: 'input-card', | ||
type: 'dom', | ||
render({env, payload}) { | ||
var text = 'I am in display mode'; | ||
if (payload.name) { | ||
text = 'Hello, ' + payload.name + '!'; | ||
} | ||
var card = $(`<div>${text}</div>`); | ||
var button = $('<button>Edit</button>'); | ||
button.on('click', env.edit); | ||
|
||
if (env.edit) { | ||
card.append(button); | ||
} | ||
return card[0]; | ||
}, | ||
edit({env}) { | ||
var card = $('<div>What is your name?</div>'); | ||
card.innerHTML = 'What is your name?'; | ||
|
||
var input = $('<input placeholder="Enter your name...">'); | ||
var button = $('<button>Save</button>'); | ||
button.on('click', () => { | ||
var name = input.val(); | ||
env.save({name}); | ||
}); | ||
|
||
card.append(input); | ||
card.append(button); | ||
return card[0]; | ||
} | ||
}; |
Oops, something went wrong.