from toolbar import models
-
-class ButtonGroupAdmin(admin.ModelAdmin):
- list_display = ('name', 'slug', 'position',)
- search_fields = ('name', 'slug',)
- prepopulated_fields = {'slug': ('name',)}
- list_editable = ('position',)
-
-admin.site.register(models.ButtonGroup, ButtonGroupAdmin)
-
-
-class ButtonAdmin(admin.ModelAdmin):
- list_display = ('label', 'slug', 'tag', 'key', 'position',)
- list_filter = ('group',)
- search_fields = ('label', 'slug', 'tag', 'key',)
- prepopulated_fields = {'slug': ('label',)}
- filter_horizontal = ('group',)
- list_editable = ('position',)
-
-admin.site.register(models.Button, ButtonAdmin)
-
+#class ButtonGroupAdmin(admin.ModelAdmin):
+# list_display = ('name', 'slug', 'position',)
+# search_fields = ('name', 'slug',)
+# prepopulated_fields = {'slug': ('name',)}
+# list_editable = ('position',)
+admin.site.register(models.ButtonGroup)
+
+#class ButtonAdmin(admin.ModelAdmin):
+# list_display = ('label', 'action', 'key', 'position',)
+# list_filter = ('group',)
+# search_fields = ('label', 'action', 'key',)
+# filter_horizontal = ('group',)
+# list_editable = ('position',)
+
+admin.site.register(models.Button)
class Button(models.Model):
label = models.CharField(max_length=32)
- slug = models.SlugField()
- tag = models.CharField(max_length=128)
- key = models.CharField(blank=True, max_length=1)
- position = models.IntegerField(default=0)
+ slug = models.SlugField() #unused
+
+ action = models.CharField(max_length=256)
+ key = models.CharField(blank=True, max_length=1)
+ position = models.IntegerField(default=0)
+
group = models.ManyToManyField(ButtonGroup)
class Meta:
{% load toolbar_tags %}
-<div class="toolbar">
- <ol class="toolbar-tabs">
+<div class="toolbar" xmlns:ui="http://nowoczesnapolska.org.pl/platforma/ui">
+
+ <div class="toolbar-tabs-container">
+ <p>
{% for group in groups %}
- <li p:button-list="{{ group.slug }}" {% if forloop.first %}class="active"{% endif %}>{{ group.name }}</li>
+ <button ui:group="{{ group.slug }}" {% if forloop.first %}class="active"{% endif %}>
+ {{ group.name }}
+ </button>
{% endfor %}
- </ol>
- <div style="clear: both; height: 0; width: 0"> </div>
- <div class="toolbar-buttons">
- {% for group in groups %}
- <ol class="{{ group.slug }}" {% if not forloop.first %}style="display:none"{% endif %}>
+ </p>
+ </div>
+
+ <div class="toolbar-button-groups-container">
+ {% for group in groups %}
+ <p ui:group="{{group.slug}}" class="toolbar-buttons-container" {% if not forloop.first %}style="display:none;"{% endif %}>
+ {# buttons for this group #}
{% for button in group.button_set.all %}
- <li p:tag="{{ button.tag }}" {% if button.key %}p:key="{{ button.key|keycode }}" title="Alt+{{ button.key|upper }}"{% endif %}>{{ button.label }}</li>
+ <button type="button"
+ ui:action="{{ button.action }}"
+ ui:hotkey="{{ button.key|keycode }}" >
+ {{ button.label }}
+ </button>
{% endfor %}
- </ol>
+ </p>
{% endfor %}
- <div style="clear: both; height: 0; width: 0"> </div>
</div>
-</div>
\ No newline at end of file
+
+</div>
from django import template
-
from toolbar import models
-
register = template.Library()
-
@register.inclusion_tag('toolbar/toolbar.html')
def toolbar():
groups = models.ButtonGroup.objects.all()
return {'groups': groups}
-
@register.filter
def keycode(value):
return ord(str(value).upper())
/* = XML Editor panel = */
/* ==================== */
-.toolbar {
- overflow: hidden;
- z-index: 70;
-}
-
-.toolbar, .toolbar ol {
-/* overflow: hidden;*/
- display: block;
- margin: 0;
- padding: 0;
- background-color: #CCC;
- border-top: 1px solid #AAA;
-}
-
-.toolbar-tabs li {
- font-size: 14px;
- display: block;
- float: left;
- margin: 4px 0 -1px 4px;
- padding: 2px 10px 0 10px;
- background-color: #CCC;
- border: 1px solid #AAA;
- border-radius-topleft: 8px;
- border-radius-topright: 8px;
- -moz-border-radius-topleft: 8px;
- -moz-border-radius-topright: 8px;
- -webkit-border-top-left-radius: 8px;
- -webkit-border-top-right-radius: 8px;
-}
-
-.toolbar-tabs {
- height: 21px;
-}
-
-.toolbar-tabs li:hover, .toolbar-tabs li.active {
- cursor: default;
- background-color: #EEE;
- border-bottom: 1px solid #EEE;
-}
-
-.toolbar-buttons {
- background-color: #EEE;
- border-bottom: 1px solid #AAA;
- z-index: 71;
-}
-
-.toolbar-buttons li {
- display: block;
- font-size: 12px;
- padding: 1px 8px;
- margin: 4px;
- border-radius: 10px;
- -moz-border-radius: 10px;
- -webkit-border-radius: 8px;
- float: left;
-}
-
-.toolbar-buttons li:hover {
- background-color: #777;
- color: #FFF;
- cursor: default;
-}
-
.change-font-size {
width: 45px;
height: 18px;
--- /dev/null
+.toolbar {
+ overflow: hidden;
+ z-index: 100;
+ background: #AAA;
+ position: absolute;
+ top: 0px; left:0px; right: 0px;
+ height: 40pt;
+ padding: 1pt;
+ margin: 0pt;
+}
+
+.toolbar p {
+ margin: 0pt;
+
+ padding: 0pt;
+ padding-left: 0.5em;
+
+ border: none;
+ background: #AAA;
+ font-size: 10pt;
+ line-height: 12pt;
+}
+
+.toolbar button {
+ border: none;
+ padding: 2pt 0.5em;
+ background: #AAA;
+}
+
+.toolbar div {
+ background: green;
+ margin: 0pt;
+ padding: 0pt;
+}
+
+.toolbar-tabs-container button.active {
+ background: #DDD;
+}
+
+.toolbar-button-groups-container p {
+ background: #DDD;
+ padding-top: 2pt;
+ padding-bottom: 2pt;
+}
+
+.toolbar-button-groups-container button {
+ background: #DDD;
+}
+
+.toolbar-button-groups-container button:hover {
+ background: #EEE;
+}
+
+.toolbar-button-groups-container button:active {
+ background: yellow;
+}
+
+/*
+.toolbar, .toolbar ol {
+ display: block;
+ margin: 0;
+ padding: 0;
+ background-color: #CCC;
+ border-top: 1px solid #AAA;
+}
+
+.toolbar-tabs li {
+ font-size: 14px;
+ display: block;
+ float: left;
+ margin: 4px 0 -1px 4px;
+ padding: 2px 10px 0 10px;
+ background-color: #CCC;
+ border: 1px solid #AAA;
+ border-radius-topleft: 8px;
+ border-radius-topright: 8px;
+ -moz-border-radius-topleft: 8px;
+ -moz-border-radius-topright: 8px;
+ -webkit-border-top-left-radius: 8px;
+ -webkit-border-top-right-radius: 8px;
+}
+
+.toolbar-tabs {
+ height: 21px;
+}
+
+.toolbar-tabs li:hover, .toolbar-tabs li.active {
+ cursor: default;
+ background-color: #EEE;
+ border-bottom: 1px solid #EEE;
+}
+
+.toolbar-buttons {
+ background-color: #EEE;
+ border-bottom: 1px solid #AAA;
+ z-index: 71;
+}
+
+.toolbar-buttons li {
+ display: block;
+ font-size: 12px;
+ padding: 1px 8px;
+ margin: 4px;
+ border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 8px;
+ float: left;
+}
+
+.toolbar-buttons li:hover {
+ background-color: #777;
+ color: #FFF;
+ cursor: default;
+} */
+
$(self.contentDiv).html(data);
self.hooks = panel_hooks;
panel_hooks = null;
+ self.connectToolbar();
self.callHook('load');
},
error: function(request, textStatus, errorThrown) {
return saveInfo;
}
+Panel.prototype.connectToolbar = function() {
+ // check if there is a one
+ var toolbar = $("div.toolbar", this.contentDiv);
+ $.log('Connecting toolbar', toolbar);
+ if(toolbar.length == 0) return;
+
+ // connect group-switch buttons
+ var group_buttons = $('*.toolbar-tabs-container button', toolbar);
+
+ $.log('Found groups:', group_buttons);
+
+ group_buttons.each(function() {
+ var group = $(this);
+ var group_name = group.attr('ui:group');
+ $.log('Connecting group: ' + group_name);
+
+ group.click(function() {
+ // change the active group
+ var active = $("*.toolbar-tabs-container button.active");
+ if (active != group) {
+ active.removeClass('active');
+ group.addClass('active');
+ $(".toolbar-button-groups-container p").each(function() {
+ if ( $(this).attr('ui:group') != group_name)
+ $(this).hide();
+ else
+ $(this).show();
+ });
+ }
+ });
+ });
+
+ // connect action buttons
+ var action_buttons = $('*.toolbar-button-groups-container button');
+ action_buttons.each(function() {
+ var button = $(this);
+ var action = button.attr('ui:action').split(':');
+ var action_name = action[0];
+ var action_data = action[1];
+
+ button.click(function() {
+ $.log('emiting action ', action_name, ' with data: ', action_data);
+ $(document).trigger('ui:action:' + action_name, action_data);
+ });
+ });
+}
function Editor() {
this.rootDiv = $('#panels');
{% extends "base.html" %}
{% block extrahead %}
+ <link rel="stylesheet" href="/static/css/toolbar.css" type="text/css" />
<script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.autoscroll.js" type="text/javascript" charset="utf-8"></script>
{% load toolbar_tags %}
-{% toolbar %}
+
<div class="change-font-size" style="">
<div class="decrease-font-size">A<sup>-</sup></div>
<div class="increase-font-size">A<sup>+</sup></div>
</div>
-<div class="iframe-container" style="position: absolute; top: 48px; left:0px; right:0px; bottom: 0px;">
+
+<div class="iframe-container" style="position: absolute; top: 41pt; left:0px; right:0px; bottom: 0px;">
<textarea name="text">{{ text }}</textarea>
</div>
+
+{% toolbar %}
+
<script type="text/javascript" charset="utf-8">
panel_hooks = {
panel.trigger('panel:contentChanged', self);
},
initCallback: function(editor) {
- // Toolbar
- $('.toolbar-tabs li', panel).click(function() {
- var id = $(this).attr('p:button-list');
- $('.toolbar-tabs li', panel).removeClass('active');
- $(this).addClass('active');
- if (!$('.' + id, panel).is(':visible')) {
- $('.toolbar-buttons ol', panel).not('#' + id).hide();
- $('.' + id, panel).show();
- }
- })
-
- var keys = {};
- $('.toolbar-buttons li', panel).each(function() {
- var tag = $(this).attr('p:tag');
- var handler = function() {
- var text = texteditor.selection();
- editor.replaceSelection('<' + tag + '>' + text + '</' + tag + '>');
- if (text.length == 0) {
- var pos = texteditor.cursorPosition();
- texteditor.selectLines(pos.line, pos.character + tag.length + 2);
- }
- $(document).trigger('panel:contentChanged', self);
- }
- if ($(this).attr('p:key')) {
- keys[$(this).attr('p:key')] = handler;
+ // Editor is loaded
+ // Buttons are connected
+ // register callbacks for actions
+ $(document).bind("ui:action:INSERT_TAG", function(event, data) {
+ var tag = data;
+ var text = texteditor.selection();
+ editor.replaceSelection('<' + tag + '>' + text + '</' + tag + '>');
+ if (text.length == 0) {
+ var pos = texteditor.cursorPosition();
+ texteditor.selectLines(pos.line, pos.character + tag.length + 2);
}
- $(this).click(handler)
+
+ $(document).trigger('panel:contentChanged', self);
});
- texteditor.grabKeys(function(event) {
+/* texteditor.grabKeys(function(event) {
if (keys[event.keyCode]) {
keys[event.keyCode]();
}
- }, function(event) { return event.altKey && keys[event.keyCode]; });
+ }, function(event) { return event.altKey && keys[event.keyCode]; }); */
}
})
fnp / redakcja.git / commitdiff