{% 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;
margin: 0.5em 1em;
}
+.change-notification {
+ color: red;
+}
settings: {},
current_data: {},
resize_start: function(event, mydata) {
- $.log('Overlay: ' + mydata.overlay);
$(document).bind('mousemove', mydata, $.hpanel.resize_changed).
bind('mouseup', mydata, $.hpanel.resize_stop);
$.fn.makeHorizPanel = function(options)
{
- $.log('Making an hpanel out of "#' + $(this).attr('id') + '"');
var root = $(this)
var all_panels = $('.panel-wrap', root)
- $.log('Panels: ' + all_panels);
/* create an overlay */
var overlay_root = $("<div class='panel-overlay'></div>");
+++ /dev/null
-(function($){
- $.resizable = {
- settings: {},
- element: {},
- drag: function(event) {
- $.resizable.element.element.css({
- width: Math.max(event.pageX - $.resizable.element.mouseX + $.resizable.element.width,
- $.resizable.settings.minWidth)
- })
- $.resizable.element.element.trigger('resizable:resize');
- return false;
- },
- stop: function(event) {
- $.resizable.element.element.trigger('resizable:stop');
- $(document).unbind('mousemove', $.resizable.drag).unbind('mouseup', $.resizable.stop)
- $('body').css('cursor', 'auto');
- return false;
- }
- };
-
- $.fn.resizable = function(options) {
- var settings = {
- minWidth: 0,
- maxWidth: $(window).width()
- }
-
- $.extend(settings, options);
-
- var element = $(this);
- var handle = $('.panel-slider', element)
-
- handle.mousedown(function(event) {
- var position = element.position();
- console.log('Mouse down on position: ' + position);
- /* from this point on, the panel should resize events */
-
- /* $.resizable.settings = settings;
- $.resizable.data = {
- element: element,
- width: parseInt(element.css('width')) || element[0].scrollWidth || 0,
- mouseX: event.pageX,
- }; */
-
- $(document).mousemove($.resizable.ondrag, element).mouseup($.resizable.stop, element);
- /* $('body').css('cursor', 'col-resize'); */
- });
-
- /* stop drag events */
- handle.bind('dragstart', function(event) { event.preventDefault(); })
- .bind('drag', function(event) { event.preventDefault(); })
- .bind('draggesture', function(event) { event.preventDefault(); });
- };
-})(jQuery);
-
function loadPanel(target, url) {
$.log('ajax', url, 'into', target);
+ $('.change-notification', $(target).parent()).fadeOut();
$(document).trigger('panel:unload', target);
$.ajax({
url: url,
dataType: 'html',
success: function(data, textStatus) {
- $.log(target, 'ajax success');
$(target).html(data);
- $.log(target, 'triggering panel:load');
$(document).trigger('panel:load', target);
- // panel(target);
},
error: function(request, textStatus, errorThrown) {
$.log('ajax', url, target, 'error:', textStatus, errorThrown);
unloadHandler = function(event, panel) {
if (self && self == panel) {
- $.log('Panel', panel, 'unloading');
$(document).unbind('panel:unload.' + eventId);
$(panel).html('');
unload(event, panel);
- $.log('Panel', panel, 'unloaded');
return false;
}
};
$(document).one('panel:load', function(event, panel) {
self = panel;
- $.log('Panel', panel, 'loading');
$(document).bind('panel:unload.' + eventId, unloadHandler);
load(event, panel);
- $.log('Panel', panel, 'loaded');
});
}
<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.wtooltip.js" type="text/javascript" charset="utf-8"></script>
-<!-- <script src="/static/js/jquery.resizable.js" type="text/javascript" charset="utf-8"></script> -->
<script src="/static/js/jquery.hpanel.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/panels.js" type="text/javascript" charset="utf-8"></script>
{% endblock extrahead %}
<div id="panels">
<div id="left-panel-wrap" class="panel-wrap">
<div id="left-panel-toolbar" class="panel-toolbar">
- <label for="select-left-panel">Lewy panel:</label>
- <select name="select-left-panel" id="select-left-panel">
- <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
- <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
- <option value="{% url gallery_panel hash %}">Galeria skanów</option> </select>
+ <label for="select-left-panel">Lewy panel:</label>
+ <select name="select-left-panel" id="select-left-panel">
+ <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
+ <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
+ <option value="{% url gallery_panel hash %}">Galeria skanów</option>
+ </select>
+ <strong class="change-notification" style="display: none">Zmieniono!</strong>
</div>
<div id="left-panel-content" class="panel-content"></div>
<button class="panel-slider"> </button>
</div>
<div id="right-panel-wrap" class="panel-wrap last-panel">
<div id="right-panel-toolbar" class="panel-toolbar">
- <label for="select-right-panel">Prawy panel:</label>
+ <label for="select-right-panel">Prawy panel:</label>
<select name="select-right-panel" id="select-right-panel">
- <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
- <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
- <option value="{% url gallery_panel hash %}">Galeria skanów</option>
+ <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
+ <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
+ <option value="{% url gallery_panel hash %}">Galeria skanów</option>
</select>
+ <strong class="change-notification" style="display: none">Zmieniono!</strong>
</div>
<div id="right-panel-content" class="panel-content"></div>
</div>
$(window).bind('resize', {'panel': panel}, resizeEditor);
resizeEditor(null, panel);
}, function(event, panel) {
- console.log('unloaded gallery panel', panel);
});
})()
</script>
</div>
<script type="text/javascript" charset="utf-8">
(function() {
- function resizeEditor(event, panel) {
- var panel = panel || event.data.panel;
- $('.htmleditor', panel).height($(panel).height());
- }
-
+ var id = Math.ceil(Math.random() * 1000000000);
+
panel(function(event, panel) {
- $(window).bind('resize', {'panel': panel}, resizeEditor);
- resizeEditor(null, panel);
- }, function(event, panel) {});
+ $(document).bind('panel:contentChanged.' + id, function(event, p) {
+ $('.change-notification', $(panel).parent()).fadeIn();
+ })
+ }, function(event, panel) {
+ $(document).unbind('panel:contentChanged.' + id);
+ });
})()
</script>
\ No newline at end of file
<script type="text/javascript" charset="utf-8">
(function() {
- function xmleditor_onload(event, me) {
- $.log('loading: ', me);
- var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
- $('textarea', panel).attr('id', textareaId);
- var editor = CodeMirror.fromTextArea(textareaId, {
- parserfile: 'parsexml.js',
- path: "/static/js/codemirror/",
- stylesheet: "/static/css/xmlcolors.css",
- parserConfig: {useHTMLKludges: false},
- })
- $.log('Frame is: ', editor.frame);
- var frame = $(editor.frame)
- frame.css({width: '100%', height: '100%', background: 'yellow'});
- };
+ function xmleditor_onload(event, panel) {
+ var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
+ $('textarea', panel).attr('id', textareaId);
+ var editor = CodeMirror.fromTextArea(textareaId, {
+ parserfile: 'parsexml.js',
+ path: "/static/js/codemirror/",
+ stylesheet: "/static/css/xmlcolors.css",
+ parserConfig: {useHTMLKludges: false},
+ onChange: function() {
+ $(document).trigger('panel:contentChanged', panel);
+ },
+ 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 = editor.selection();
+ editor.replaceSelection('<' + tag + '>' + text + '</' + tag + '>');
+ if (text.length == 0) {
+ var pos = editor.cursorPosition();
+ editor.selectLines(pos.line, pos.character + tag.length + 2);
+ }
+ $(document).trigger('panel:contentChanged', panel);
+ }
+ if ($(this).attr('p:key')) {
+ keys[$(this).attr('p:key')] = handler;
+ }
+ $(this).click(handler)
+ });
- function xmleditor_onunload(event, me) {}
-
- panel(xmleditor_onload, xmleditor_onunload);
+ editor.grabKeys(function(event) {
+ if (keys[event.keyCode]) {
+ keys[event.keyCode]();
+ }
+ }, function(event) { return event.altKey && keys[event.keyCode]; });
+ }
+ })
+
+ $(editor.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",
+ }
+ });
+ };
+
+ function xmleditor_onunload(event, panel) {}
+
+ panel(xmleditor_onload, xmleditor_onunload);
})();
</script>
-
-<!-- <script type="text/javascript" charset="utf-8">
- (function() {
- function resizeEditor(event, panel) {
- var panel = panel || event.data.panel;
- $('iframe', panel).height($(panel).height());
- }
-
- panel(function(event, panel) {
- $.log('loading panel', panel);
- var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
- $('textarea', panel).attr('id', textareaId);
- var editor = CodeMirror.fromTextArea(textareaId, {
- parserfile: 'parsexml.js',
- path: "/static/js/codemirror/",
- stylesheet: "/static/css/xmlcolors.css",
- parserConfig: {useHTMLKludges: false},
- initCallback: function() {}
- })
- $(window).bind('resize', {'panel': panel}, resizeEditor);
- resizeEditor(null, panel);
- }, function(event, panel) {
- $.log('unloaded xmleditor panel', panel);
- })
- })();
-</script> -->
fnp / redakcja.git / commitdiff