app/views/write/editor.html.erb
<div class="row">
<div class="col s9">
<h1 contenteditable="true" class="hoverable">Title</h1>
<div class="hoverable editor" style="background: #efefef; height: 400px;" contenteditable="true"></div>
</div>
<div class="col s3">
<div class="card-container"></div>
</div>
</div>
<script>
var notebook_data = {
'characters': <%= @characters.to_json.html_safe %>,
'locations': <%= @locations.to_json.html_safe %>,
'items': <%= @items.to_json.html_safe %>,
'matches_anything': function (name) {
for (var i = 0, m = this.characters.length; i < m; i++) {
// TODO: We can break early if character/etc names are sorted and we pass where we'd match
if (name == this.characters[i]['name']) {
return this.characters[i];
}
}
for (var i = 0, m = this.locations.length; i < m; i++) {
if (name == this.locations[i]['name']) {
return this.locations[i];
}
}
for (var i = 0, m = this.items.length; i < m; i++) {
if (name == this.items[i]['name']) {
return this.items[i];
}
}
return null;
}
};
function build_card_template_for(data) {
var card = $('<div />').addClass('hoverable card')
.append($('<div />').addClass('card-content')
.append($('<span />').addClass('card-title activator').text(data['name']))
)
.append($('<div />').addClass('card-reveal')
.append($('<i />').addClass('material-icons right').text('X'))
.append($('<div />').addClass('extended-info').text('Extended info'))
)
.append($('<div />').addClass('card-action')
.append($('<a />').attr('href', '#').text('Clear'))
.append($('<a />').attr('href', '#').addClass('activator').text('More...'))
)
.attr('identifier', data['name']);
var ignored_fields = [
'name', 'id', 'user_id', 'universe_id', 'created_at', 'updated_at'
];
var fieldset = $('<p />');
$.each(data, function (key, value) {
if (ignored_fields.indexOf(key) >= 0) {
return true; // return true == continue
}
// Don't add blank values
if (value == '' || value == null) { return true; }
fieldset.append($('<div />').text(key + ': ' + value));
});
card.find('.card-content').append(fieldset);
return card;
}
var editor = new MediumEditor('.editor', {
'disableExtraSpaces': true
});
editor.subscribe('editableInput', function (data, editable) {
var active_paragraph = $(editable).find('p:last');
var hotwords = active_paragraph.text().split(/[\r|\n|\s]+/).filter(Boolean).slice(-1);
// #TODO: Trigger this on text selection also, which makes hotwords > 1 more relevant
for (var i = 0, m = hotwords.length; i < m; i++) {
if ((match = notebook_data.matches_anything(hotwords[i])) != null) {
if ($('.card-container').find('.card[identifier=' + match['name'] + ']').length == 0) {
var card_to_create = build_card_template_for(match);
$('.card-container').prepend(card_to_create);
}
}
}
});
</script>