',
source: this.getContext.bind(this),
sorter: function(items) {
items.sort(
function(a,b) {return a.variable > b.variable ? 1 : -1;}
);
return items;
},
matcher: function(item) {
if (item.toLowerCase().indexOf(this.query.toLowerCase()) !== 0)
return false;
return (this.query.match(/\./g) || []).length == (item.match(/\./g) || []).length;
},
onselect: this.select.bind(this),
scroll: true,
items: 100
});
}
if (position) {
var width = this.textWidth(
backText,
this.app.api('selection.getParent') || $('
')
),
pleft = $(parent).offset().left,
left = position.left - width;
if (left < pleft)
// This is a bug in chrome, but I'm not sure how to adjust it
left += pleft;
this.typeahead
.css({top: position.top + this.app.$win.scrollTop(), left: left});
}
this.typeahead
.val(match[1])
.triggerHandler(e);
return !e.isDefaultPrevented();
},
getContext: function(typeahead, query) {
var dfd, that=this,
root = this.$element.data('rootContext');
if (!this.context) {
dfd = $.Deferred();
$.ajax('ajax.php/content/context', {
data: {root: root},
success: function(json) {
var items = $.map(json, function(v,k) {
return {variable: k, desc: v};
});
that.variables = json;
dfd.resolve(items);
}
});
this.context = dfd;
}
// Only fetch the context once for this redactor box
this.context.then(function(items) {
typeahead.process(items);
});
},
textWidth: function(text, clone) {
var c = $(clone),
o = c.clone().text(text)
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden'})
.css({'font-family': c.css('font-family'), 'font-weight': c.css('font-weight'),
'font-size': c.css('font-size')})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
},
destroy: function() {
if (this.typeahead) {
this.typeahead.typeahead('hide');
this.typeahead.remove();
this.typeahead = false;
}
},
select: function(item, event) {
// Collapse multiple textNodes together
(this.app.api('selection.getBlock') || this.$element.get(0)).normalize();
var current = this.app.api('selection.getCurrent'),
sel = this.app.api('selection.get'),
range = sel.getRangeAt(0),
cursorAt = range.endOffset,
// TODO: Consume immediately following `}` symbols
search = new RegExp(/%\{([^}]*)(\}?)$/);
// FIXME: ENTER will end up here, but current will be empty
if (!current)
return;
// Set cursor at the end of the expanded text
var left = current.textContent.substring(0, cursorAt),
right = current.textContent.substring(cursorAt),
autoExpand = event.target.nodeName == 'I',
selected = item.variable + (autoExpand ? '.' : '')
newLeft = left.replace(search, '%{' + selected + '}');
current.textContent = newLeft
// Drop the remaining part of a variable block, if any
+ right.replace(/[^%}]*?[%}]/, '');
range.setStart(current, newLeft.length - 1);
range.setEnd(current, newLeft.length - 1);
this.app.api('selection.setRange', range);
if (!autoExpand)
return this.destroy();
this.typeahead.val(selected);
this.typeahead.typeahead('lookup');
return false;
}
});
// Make the toolbar a class rather than a service, so it can be reused in
// a dialog
var ToolbarService = $R[$R.env['service']]['toolbar'];
$R.add('class', 'toolbar', $R.extend(ToolbarService.prototype, {
init: function(app) {
this.app = app
this._oldtoolbar = app.toolbar;
this.app.toolbar = this;
// Connect what's normally available in a service module
this.opts = app.opts;
this.detector = app.detector;
this.buttons = [];
this.dropdownOpened = false;
this.buttonsObservers = {};
// Start immediately
this.create();
this.$wrapper.append(this.$toolbar);
},
is: function() {
return true;
},
destroy: function() {
this.app.toolbar = this._oldtoolbar;
}
}));
$R.add('plugin', 'translatable', {
langs: undefined,
config: undefined,
current: undefined,
primary: undefined,
changed: {},
init: function(app) {
this.app = app;
this.statusbar = app.statusbar;
this.$textarea = $R.dom(this.app.rootElement);
this.$editor = app.editor.getElement();
},
start: function() {
this.fetch('ajax.php/i18n/langs/all')
.then(this.setLangs.bind(this));
getConfig().then(this.setConfig.bind(this));
$editor = this.app.editor.getElement();
this.translateTag = this.$textarea.data()['translateTag'];
},
setLangs: function(langs) {
if (Object.keys(langs).length < 2)
return;
this.langs = langs;
this.buildDropdown();
},
setConfig: function(config) {
this.config = config;
this.buildDropdown();
},
buildDropdown: function() {
if (!this.config || !this.langs)
return;
var primary = this.$textarea,
primary_lang = this.config.primary_language.replace('-','_'),
primary_info = this.langs[primary_lang],
items = {},
dropdown = {
primary_lang: {
title: '
'+primary_info.name,
api: 'plugin.translatable.switchTo',
args: primary_lang,
},
},
button = this.app.toolbar.addButton('flag', {
title: __('Translate'),
});
this.primary = this.current = primary_lang;
this.button = button;
$.each(this.langs, function(lang, info) {
if (lang == primary_lang)
return;
dropdown[lang] = {
title: '
'+info.name,
api: 'plugin.translatable.switchTo',
args: lang,
};
});
// Add the button to the toolbar
button.setDropdown(dropdown);
// Flip back to primary language before submitting
var that=this;
this.app.editor.getElement().closest('form').on('submit', function() {
that.switchTo(primary_lang);
});
this.showStatus(this.primary);
},
showStatus: function(lang) {
var tstatus = $R.dom('
').text('lang: ')
tstatus.append($R.dom(''))
tstatus.append(document.createTextNode(' ' + this.current))
this.statusbar.add('translatable', tstatus);
this.button.setIcon('');
},
switchTo: function(lang) {
if (lang == this.current)
return;
var that = this;
this.fetch('ajax.php/i18n/translate/' + this.translateTag)
.then(function(json) {
// Preserve current text
json[that.current] = that.app.source.getCode();
that.current = lang;
that.app.insertion.set(json[lang] || '', false, true);
that.app.api('module.source.sync');
that.app.editor.getElement()
.attr({lang: lang, dir: that.langs[lang].direction});
that.showStatus(lang);
that.showCommit();
});
},
onchanged: function() {
this.showCommit();
this.changed[this.current] = true;
},
showCommit: function() {
if (this.current == this.primary) {
this.statusbar.remove('translatable:commit');
return true;
}
if (!this.changed[this.current])
return true;
var tstatus = $R.dom('')
.text(__('save translation'))
.on('click', this.commit.bind(this))
this.statusbar.add('translatable:commit', tstatus);
},
commit: function() {
if (!this.changed[this.current])
return this.app.statusbar.remove('translatable:commit');
var changes = {}, self = this;
this.app.statusbar.add('translatable:commit', __('saving...'))
changes[this.current] = this.app.source.getCode();
$.ajax('ajax.php/i18n/translate/' + this.translateTag, {
type: 'post',
data: changes,
success: function() {
self.changed[self.current] = false;
self.app.statusbar.remove('translatable:commit');
}
});
// Don't bubble the click event
return false;
},
urlcache: {},
fetch: function( url, data, callback ) {
var urlcache = this.urlcache;
if ( !urlcache[ url ] ) {
urlcache[ url ] = $.Deferred(function( defer ) {
$.ajax( url, { data: data, dataType: 'json' } )
.then( defer.resolve, defer.reject );
}).promise();
}
return urlcache[ url ].done( callback );
},
});
})(Redactor);