{% load toolbar_tags %}
-<div id="toolbar">
- <ol id="toolbar-tabs">
+<div class="toolbar">
+ <ol class="toolbar-tabs">
{% for group in groups %}
<li p:button-list="{{ group.slug }}" {% if forloop.first %}class="active"{% endif %}>{{ group.name }}</li>
{% endfor %}
</ol>
<div style="clear: both; height: 0; width: 0"> </div>
- <div id="toolbar-buttons">
+ <div class="toolbar-buttons">
{% for group in groups %}
- <ol id="{{ group.slug }}" {% if not forloop.first %}style="display:none"{% endif %}>
+ <ol class="{{ group.slug }}" {% if not forloop.first %}style="display:none"{% endif %}>
{% 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>
{% endfor %}
/* = XML Editor panel = */
/* ==================== */
-#toolbar {
+.toolbar {
height: 48px;
overflow: hidden;
}
-#toolbar, #toolbar ol, #sidebar-toolbar, #sidebar-toolbar ol {
+.toolbar, .toolbar ol {
/* overflow: hidden;*/
display: block;
margin: 0;
border-top: 1px solid #AAA;
}
-#sidebar-toolbar {
- width: 0;
-}
-
-#sidebar-toolbar, #sidebar-toolbar ol {
- overflow: hidden;
-}
-
-#sidebar-tabs li, #toolbar-tabs li {
+.toolbar-tabs li {
font-size: 14px;
display: block;
float: left;
-webkit-border-top-right-radius: 8px;
}
-#sidebar-tabs, #toolbar-tabs {
+.toolbar-tabs {
height: 21px;
z-index: 1000;
/* overflow: hidden;*/
}
-#sidebar-tabs li:hover, #sidebar-tabs li.active, #toolbar-tabs li:hover, #toolbar-tabs li.active {
+.toolbar-tabs li:hover, .toolbar-tabs li.active {
cursor: default;
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
-#toolbar-buttons {
+.toolbar-buttons {
background-color: #EEE;
border-bottom: 1px solid #AAA;
}
-#toolbar-buttons li {
+.toolbar-buttons li {
display: block;
font-size: 12px;
padding: 1px 8px;
float: left;
}
-#toolbar-buttons li:hover {
+.toolbar-buttons li:hover {
background-color: #777;
color: #FFF;
cursor: default;
<script type="text/javascript" charset="utf-8">
(function() {
- function xmleditor_onload(event, me) {
+ function xmleditor_onload(event, panel) {
var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
- $('textarea', me).attr('id', textareaId);
+ $('textarea', panel).attr('id', textareaId);
var editor = CodeMirror.fromTextArea(textareaId, {
parserfile: 'parsexml.js',
path: "/static/js/codemirror/",
parserConfig: {useHTMLKludges: false},
initCallback: function() {
// Toolbar
- $('#toolbar-tabs li', panel).click(function() {
+ $('.toolbar-tabs li', panel).click(function() {
var id = $(this).attr('p:button-list');
- $('#toolbar-tabs li', panel).removeClass('active');
+ $('.toolbar-tabs li', panel).removeClass('active');
$(this).addClass('active');
- if (!$('#' + id).is(':visible')) {
- $('#toolbar-buttons ol', panel).not('#' + id).hide();
- $('#' + id, panel).show();
+ if (!$('.' + id, panel).is(':visible')) {
+ $('.toolbar-buttons ol', panel).not('#' + id).hide();
+ $('.' + id, panel).show();
}
})
var keys = {};
- $('#toolbar-buttons li', panel).each(function() {
+ $('.toolbar-buttons li', panel).each(function() {
var tag = $(this).attr('p:tag');
var handler = function() {
var text = editor.selection();
+ console.log(editor, editor.frame);
editor.replaceSelection('<' + tag + '>' + text + '</' + tag + '>');
if (text.length == 0) {
var pos = editor.cursorPosition();
});
};
- function xmleditor_onunload(event, me) {}
+ function xmleditor_onunload(event, panel) {}
panel(xmleditor_onload, xmleditor_onunload);
})();