Plugowalne akcje w toolbarach.

diff --git a/apps/toolbar/admin.py b/apps/toolbar/admin.py
index 2c8cd28..8658d34 100644 (file)
--- a/apps/toolbar/admin.py
+++ b/apps/toolbar/admin.py
@@ -3,23 +3,18 @@ from django.utils.translation import ugettext_lazy as _
 
 from toolbar import models
 
 
 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)

diff --git a/apps/toolbar/models.py b/apps/toolbar/models.py
index a3db70f..f91f739 100644 (file)
--- a/apps/toolbar/models.py
+++ b/apps/toolbar/models.py
@@ -17,11 +17,13 @@ class ButtonGroup(models.Model):
 
 class Button(models.Model):
     label = models.CharField(max_length=32)
 
 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:
     group = models.ManyToManyField(ButtonGroup)
     
     class Meta:

diff --git a/apps/toolbar/templates/toolbar/toolbar.html b/apps/toolbar/templates/toolbar/toolbar.html
index c6b5ebb..3238a8c 100644 (file)
--- a/apps/toolbar/templates/toolbar/toolbar.html
+++ b/apps/toolbar/templates/toolbar/toolbar.html
@@ -1,19 +1,29 @@
 {% load toolbar_tags %}
 {% 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 %}
         {% 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 %}
         {% endfor %}

-    </ol>
-    <div style="clear: both; height: 0; width: 0">&nbsp;</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 %}
             {% 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 %}
             {% endfor %}

-        </ol>
+        </p>

         {% endfor %}
         {% endfor %}

-        <div style="clear: both; height: 0; width: 0">&nbsp;</div>

     </div>
     </div>

-</div>
\ No newline at end of file
+
+</div>

diff --git a/apps/toolbar/templatetags/toolbar_tags.py b/apps/toolbar/templatetags/toolbar_tags.py
index eab5455..e29c8a0 100644 (file)
--- a/apps/toolbar/templatetags/toolbar_tags.py
+++ b/apps/toolbar/templatetags/toolbar_tags.py
@@ -1,17 +1,13 @@
 from django import template
 from django import template

-

 from toolbar import models
 
 from toolbar import models
 

-

 register = template.Library()
 
 register = template.Library()
 

-

 @register.inclusion_tag('toolbar/toolbar.html')
 def toolbar():
     groups = models.ButtonGroup.objects.all()
     return {'groups': groups}
 
 @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())
 @register.filter
 def keycode(value):
     return ord(str(value).upper())

diff --git a/project/static/css/master.css b/project/static/css/master.css
index 7e39942..561ef50 100644 (file)
--- a/project/static/css/master.css
+++ b/project/static/css/master.css
@@ -220,69 +220,6 @@ label {
 /* = XML Editor panel = */
 /* ==================== */
 
 /* = 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;
 .change-font-size {
     width: 45px;
     height: 18px;

diff --git a/project/static/css/toolbar.css b/project/static/css/toolbar.css
new file mode 100644 (file)
index 0000000..aba534f
--- /dev/null
+++ b/project/static/css/toolbar.css
@@ -0,0 +1,115 @@
+.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;
+} */
+

diff --git a/project/static/js/editor.js b/project/static/js/editor.js
index 585f3ce..5366c58 100644 (file)
--- a/project/static/js/editor.js
+++ b/project/static/js/editor.js
@@ -47,6 +47,7 @@ Panel.prototype.load = function (url) {
                        $(self.contentDiv).html(data);
                        self.hooks = panel_hooks;                       
                        panel_hooks = null;
                        $(self.contentDiv).html(data);
                        self.hooks = panel_hooks;                       
                        panel_hooks = null;

+            self.connectToolbar();

                        self.callHook('load');
                },
         error: function(request, textStatus, errorThrown) {
                        self.callHook('load');
                },
         error: function(request, textStatus, errorThrown) {


@@ -104,6 +105,52 @@ Panel.prototype.saveInfo = function() {
        return saveInfo;
 }
 
        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');
 
 function Editor() {
        this.rootDiv = $('#panels');

diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html
index 68c8c7f..c7eadbf 100644 (file)
--- a/project/templates/explorer/editor.html
+++ b/project/templates/explorer/editor.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block extrahead %}
 {% 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>
     <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>

diff --git a/project/templates/explorer/panels/xmleditor.html b/project/templates/explorer/panels/xmleditor.html
index 2253609..0f26ccf 100644 (file)
--- a/project/templates/explorer/panels/xmleditor.html
+++ b/project/templates/explorer/panels/xmleditor.html
@@ -1,14 +1,18 @@
 {% load toolbar_tags %}
 
 {% 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="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>
 
        <textarea name="text">{{ text }}</textarea>
 </div>
 

+
+{% toolbar %}
+

 <script type="text/javascript" charset="utf-8">
 
 panel_hooks = {
 <script type="text/javascript" charset="utf-8">
 
 panel_hooks = {


@@ -28,40 +32,26 @@ panel_hooks = {
                                panel.trigger('panel:contentChanged', self);
             },
             initCallback: function(editor) {
                                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]();
                     }
                     if (keys[event.keyCode]) {
                         keys[event.keyCode]();
                     }

-                }, function(event) { return event.altKey && keys[event.keyCode]; });
+                }, function(event) { return event.altKey && keys[event.keyCode]; }); */

             }
         })
         
             }
         })