<button type="button"
ui:action="{{ button.scriptlet.name }}"
ui:action-params="{{ button.params|escape }}"
- {% if button.key %}ui:hotkey="{{ button.key|keycode }}"{% endif %} >
+ {% if button.key %}ui:hotkey="{{ button.key|keycode }}"{% endif %}
+ {% if button.tooltip %}ui:tooltip="{{ button.tooltip }}"{% endif %} >
{{ button.label }}
</button>
{% endfor %}
function Panel(panelWrap) {
var self = this;
+ self.hotkeys = [];
self.wrap = panelWrap;
self.contentDiv = $('.panel-content', panelWrap);
self.instanceId = Math.ceil(Math.random() * 1000000000);
Panel.prototype.connectToolbar = function()
{
var self = this;
+ self.hotkeys = [];
// check if there is a one
var toolbar = $("div.toolbar", this.contentDiv);
// connect action buttons
var action_buttons = $('*.toolbar-button-groups-container button', toolbar);
action_buttons.each(function() {
- var button = $(this);
-
- button.click(function() {
+ var button = $(this);
+ var hk = button.attr('ui:hotkey');
+
+ var callback = function() {
editor.callScriptlet(button.attr('ui:action'),
self, eval(button.attr('ui:action-params')) );
- });
+ };
- // connect hotkeys
+ // connect button
+ button.click(callback);
+ // connect hotkey
+ if(hk) self.hotkeys[parseInt(hk)] = callback;
+
+ // tooltip
+ if (button.attr('ui:tooltip') )
+ {
+ var tooltip = button.attr('ui:tooltip');
+ if(hk) tooltip += ' [Alt+'+hk+']';
+
+ button.wTooltip({
+ delay: 1000,
+ style: {
+ border: "1px solid #7F7D67",
+ opacity: 0.9,
+ background: "#FBFBC6",
+ padding: "1px",
+ fontSize: "12px"
+ },
+ content: tooltip
+ });
+ }
});
}
+Panel.prototype.hotkeyPressed = function(event)
+{
+ var callback = this.hotkeys[event.keyCode];
+ if(callback) callback();
+}
+
+Panel.prototype.isHotkey = function(event) {
+ if( event.altKey && (this.hotkeys[event.keyCode] != null) )
+ return true;
+ return false;
+}
+
//
Panel.prototype.fireEvent = function(name) {
$(document).trigger('panel:'+name, this);
}
$(function() {
+ $.fbind = function (self, func) {
+ return function() { return func.apply(self, arguments); };
+ };
+
editor = new Editor();
// do the layout
{% load toolbar_tags %}
-
<div class="change-font-size" style="">
<div class="decrease-font-size">A<sup>-</sup></div>
<div class="increase-font-size">A<sup>+</sup></div>
var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
$('textarea', panel).attr('id', textareaId);
- var texteditor = CodeMirror.fromTextArea(textareaId, {
+ var texteditor = CodeMirror.fromTextArea(textareaId, {
parserfile: 'parsexml.js',
path: "{{STATIC_URL}}js/codemirror/",
stylesheet: "{{STATIC_URL}}css/xmlcolors.css",
parserConfig: {useHTMLKludges: false},
onChange: function() {
- panel.trigger('panel:contentChanged', self);
+ self.fireEvent('contentChanged');
},
initCallback: function(editor) {
// Editor is loaded
// Buttons are connected
// register callbacks for actions
-
-
-/* texteditor.grabKeys(function(event) {
- if (keys[event.keyCode]) {
- keys[event.keyCode]();
- }
- }, function(event) { return event.altKey && keys[event.keyCode]; }); */
+ texteditor.grabKeys(
+ $.fbind(self, self.hotkeyPressed),
+ $.fbind(self, self.isHotkey) );
}
})
$(texteditor.frame).css({width: '100%', height: '100%'});
- $('#toolbar-buttons li').wTooltip({
- delay: 1000,
- style: {
- border: "1px solid #7F7D67",
- opacity: 0.9,
- background: "#FBFBC6",
- padding: "1px",
- fontSize: "12px"
- }
- });
+
$('.decrease-font-size', panel).click(function() {
var frameBody = $('body', $(texteditor.frame).contents());