})
-def file_html(request, path):
- return direct_to_template(request, 'explorer/file_html.html', extra_context={
- 'object': html.transform(repo.get_file(path).data(), is_file=False),
- 'hash': path,
- 'image_folders_form': forms.ImageFoldersForm(),
+# ===============
+# = Panel views =
+# ===============
+def xmleditor_panel(request, path):
+ form = forms.BookForm()
+ text = repo.get_file(path).data()
+
+ return direct_to_template(request, 'explorer/panels/xmleditor.html', extra_context={
+ 'text': text,
+ })
+
+
+def gallery_panel(request, path):
+ return direct_to_template(request, 'explorer/panels/gallery.html', extra_context={
+ 'form': forms.ImageFoldersForm(),
})
-
+
+
+def htmleditor_panel(request, path):
+ return direct_to_template(request, 'explorer/panels/htmleditor.html', extra_context={
+ 'html': html.transform(repo.get_file(path).data(), is_file=False),
+ })
+
+
def folder_images(request, folder):
return direct_to_template(request, 'explorer/folder_images.html', extra_context={
'images': models.get_images_from_folder(folder),
overflow-y: scroll;
}
-#whatever {
- float: left;
+/* ========== */
+/* = Panels = */
+/* ========== */
+.panel-wrap {
+ overflow: hidden;
}
-#images-wrap {
-/* width: 0px;*/
- height: 480px;
- overflow-y: scroll;
- overflow-x: hidden;
- background-color: #fff;
+#left-panel-wrap {
float: left;
+ width: 8px;
}
-#sidebar {
- float: left;
- width: 8px;
+
+/* Toolbars with select box to change panel contents*/
+.panel-toolbar {
+ height: 20px;
+ padding: 0 0 2px 0;
+ border-top: 1px solid #AAA;
+ border-bottom: 1px solid #AAA;
+ font-size: 12px;
+ line-height: 20px;
+ background-color: #DDD;
+ white-space: nowrap;
overflow: hidden;
}
-#toggle-sidebar {
+.panel-toolbar label {
+ display: block;
+ float: left;
+ margin: 0 10px 0 2px;
+}
+
+/* Slider between panels */
+#slider {
border-left: 1px solid #999;
border-right: 1px solid #999;
background-color: #DDD;
float: left;
}
-#toggle-sidebar:hover {
+#slider:hover {
background-color: #999;
cursor: col-resize;
}
-#status-bar {
- border-top: 1px solid #999;
- background-color: #EEE;
- padding: 2px 10px;
-}
-
-.errorlist {
- color: red;
- margin: 0 20px 0 0;
- padding: 0;
- float: left;
-}
-
-.errorlist:before {
- content: '';
- clear: both;
+/* ================= */
+/* = Gallery panel = */
+/* ================= */
+.images-wrap, .htmleditor {
+ overflow-x: hidden;
+ overflow-y: scroll;
}
-p {
- margin: 0;
-}
-.image-box {
- border-top: 1px solid #DDD;
-}
+/* ==================== */
+/* = XML Editor panel = */
+/* ==================== */
#toolbar {
height: 48px;
}
function checkScroll() {
+ if (container.data('lazyload:lastCheckedScrollTop') == undefined) {
+ return;
+ }
if (Math.abs(container.scrollTop() - container.data('lazyload:lastCheckedScrollTop')) > settings.scrollThreshold) {
container.data('lazyload:lastCheckedScrollTop', container.scrollTop());
};
$(document).mousemove($.resizable.drag).mouseup($.resizable.stop);
$('body').css('cursor', 'col-resize');
- }).bind('dragstart', function(event) { event.preventDefault() });
+ }).bind('dragstart', function(event) { event.preventDefault(); })
+ .bind('drag', function(event) { event.preventDefault(); })
+ .bind('draggesture', function(event) { event.preventDefault(); });
};
})(jQuery);
--- /dev/null
+function loadPanel(target, url) {
+ console.log('ajax', url, 'into', target);
+ $(document).trigger('panel:unload', target);
+ $.ajax({
+ url: url,
+ dataType: 'html',
+ success: function(data, textStatus) {
+ console.log(target, 'ajax success');
+ $(target).html(data);
+ console.log(target, 'triggering panel:load');
+ $(document).trigger('panel:load', target);
+ // panel(target);
+ },
+ error: function(request, textStatus, errorThrown) {
+ console.log('ajax', url, target, 'error:', textStatus, errorThrown);
+ }
+ });
+}
+
+// Funkcja do tworzenia nowych paneli
+function panel(load, unload) {
+ var self = null;
+ var eventId = Math.ceil(Math.random() * 1000000000);
+
+ unloadHandler = function(event, panel) {
+ if (self && self == panel) {
+ console.log('Panel', panel, 'unloading');
+ $(document).unbind('panel:unload.' + eventId);
+ $(panel).html('');
+ unload(event, panel);
+ console.log('Panel', panel, 'unloaded');
+ return false;
+ }
+ };
+
+ $(document).one('panel:load', function(event, panel) {
+ self = panel;
+ console.log('Panel', panel, 'loading');
+ $(document).bind('panel:unload.' + eventId, unloadHandler);
+ load(event, panel);
+ console.log('Panel', panel, 'loaded');
+ });
+}
+
+$(function() {
+ // ========================
+ // = Resizable panels =
+ // ========================
+ function resizePanels() {
+ $('.panel').height($(window).height() - $('.panel').position().top);
+ $('.panel-contents').height($(window).height() - $('.panel-contents').position().top);
+ $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
+ }
+
+ $(window).resize(function() {
+ resizePanels();
+ })
+
+ $('#left-panel-wrap').bind('resizable:stop', resizePanels)
+ .resizable('#slider', {minWidth: 8});
+
+ resizePanels();
+
+ $('.panel-toolbar select').change(function() {
+ loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val())
+ });
+ // $('#id_folders').change(function() {
+ // $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {
+ // $('#images-wrap').data('lazyload:lastCheckedScrollTop', -10000);
+ // });
+ // });
+ //
+ //
+
+ // var editor = CodeMirror.fromTextArea("id_text", {
+ // parserfile: 'parsexml.js',
+ // path: "/static/js/codemirror/",
+ // stylesheet: "/static/css/xmlcolors.css",
+ // parserConfig: {useHTMLKludges: false},
+ // initCallback: function() {
+ // $('#images').autoscroll('iframe');
+ // $('.toggleAutoscroll').toggle(function() {
+ // $(this).html('Synchronizuj przewijanie');
+ // $('#images').disableAutoscroll();
+ // }, function() {
+ // $(this).html('Nie synchronizuj przewijania');
+ // $('#images').enableAutoscroll();
+ // })
+ //
+ // // Toolbar
+ // $('#toolbar-tabs li').click(function() {
+ // var id = $(this).attr('p:button-list');
+ // $('#toolbar-tabs li').removeClass('active');
+ // $(this).addClass('active');
+ // if (!$('#' + id).is(':visible')) {
+ // $('#toolbar-buttons ol').not('#' + id).hide();
+ // $('#' + id).show();
+ // }
+ // })
+ //
+ // var keys = {};
+ // $('#toolbar-buttons li').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);
+ // }
+ // }
+ // if ($(this).attr('p:key')) {
+ // keys[$(this).attr('p:key')] = handler;
+ // }
+ // $(this).click(handler)
+ // });
+ //
+ // editor.grabKeys(function(event) {
+ // if (keys[event.keyCode]) {
+ // keys[event.keyCode]();
+ // }
+ // }, function(event) {
+ // return event.altKey && keys[event.keyCode];
+ // });
+ // }
+ // });
+
+
+
+
+
+ // $('#toolbar-buttons li').wTooltip({
+ // delay: 1000,
+ // style: {
+ // border: "1px solid #7F7D67",
+ // opacity: 0.9,
+ // background: "#FBFBC6",
+ // padding: "1px",
+ // fontSize: "12px",
+ // }});
+
+ // $('#images-wrap').lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5});
+});
{% extends "base.html" %}
-{% load toolbar_tags %}
{% block extrahead %}
<script src="/static/js/jquery.lazyload.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 type="text/javascript" charset="utf-8">
- $(function() {
- $('#id_folders').change(function() {
- $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {
- $('#images-wrap').data('lazyload:lastCheckedScrollTop', -10000);
- });
- });
-
- function resizePanels() {
- $('iframe').width($(window).width() - $('#sidebar').outerWidth());
- $('iframe').height($(window).height() - $('iframe').position().top);
- $('#toggle-sidebar').height($(window).height() - $('#toggle-sidebar').position().top);
- $('#images-wrap').height($(window).height() - $('#images-wrap').position().top);
- $('#images-wrap, #sidebar-toolbar').width($('#sidebar').width() - 10);
- }
-
- $(window).resize(function() {
- resizePanels();
- })
-
- var editor = CodeMirror.fromTextArea("id_text", {
- parserfile: 'parsexml.js',
- path: "/static/js/codemirror/",
- stylesheet: "/static/css/xmlcolors.css",
- parserConfig: {useHTMLKludges: false},
- initCallback: function() {
- $('#images').autoscroll('iframe');
- $('.toggleAutoscroll').toggle(function() {
- $(this).html('Synchronizuj przewijanie');
- $('#images').disableAutoscroll();
- }, function() {
- $(this).html('Nie synchronizuj przewijania');
- $('#images').enableAutoscroll();
- })
-
- // Toolbar
- $('#toolbar-tabs li').click(function() {
- var id = $(this).attr('p:button-list');
- $('#toolbar-tabs li').removeClass('active');
- $(this).addClass('active');
- if (!$('#' + id).is(':visible')) {
- $('#toolbar-buttons ol').not('#' + id).hide();
- $('#' + id).show();
- }
- })
-
- var keys = {};
- $('#toolbar-buttons li').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);
- }
- }
- if ($(this).attr('p:key')) {
- keys[$(this).attr('p:key')] = handler;
- }
- $(this).click(handler)
- });
-
- editor.grabKeys(function(event) {
- if (keys[event.keyCode]) {
- keys[event.keyCode]();
- }
- }, function(event) {
- return event.altKey && keys[event.keyCode];
- });
-
- $('#sidebar').bind('resizable:resize', resizePanels)
- .resizable('#toggle-sidebar', {minWidth: 8});
-
- resizePanels();
- }
- });
-
- $('#toolbar-buttons li').wTooltip({
- delay: 1000,
- style: {
- border: "1px solid #7F7D67",
- opacity: 0.9,
- background: "#FBFBC6",
- padding: "1px",
- fontSize: "12px",
- }});
-
- $('#images-wrap').lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5});
- });
-
- </script>
+ <script src="/static/js/panels.js" type="text/javascript" charset="utf-8"></script>
{% endblock extrahead %}
{% block breadcrumbs %}<a href="{% url file_list %}">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
{% block maincontent %}
- <form action="." method="post" accept-charset="utf-8">
<div id="panels">
- <div id="sidebar">
- <div id="toggle-sidebar" style="float: right"></div>
- <div id="whatever">
- <div id="sidebar-toolbar">
- <ol id="sidebar-tabs">
- <li>Tab</li>
- <li>Tab 2</li>
- </ol>
- </div>
- <div id="images-wrap">
-
- <div style="clear: both; height: 0; width: 0"> </div>
- <div id="images">
- <p>Aby zobaczyć obrazki wybierz folder poniżej:</p>
- <p>{{ image_folders_form.folders }}</p>
+ <div id="left-panel-wrap" class="panel-wrap">
+ <div id="left-panel" class="panel">
+ <div id="slider" style="float: right"></div>
+ <div style="margin-right: 10px">
+ <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>
</div>
+ <div id="left-panel-contents" class="panel-contents">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="right-panel-wrap" class="panel-wrap">
+ <div id="right-panel" class="panel">
+ <div id="right-panel-toolbar" class="panel-toolbar">
+ <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>
+ </select>
+ </div>
+ <div id="right-panel-contents" class="panel-contents">
</div>
</div>
</div>
- {% toolbar %}
- <textarea id="id_text" name="text" width="480px">{{ form.text.field.initial }}</textarea>
</div>
-
- {# <div id="status-bar"> #}
- {# {{ form.user.errors }} {{ form.commit_message.errors }} #}
- {# <p> #}
- {# Użytkownik: {{ form.user }} #}
- {# Opis zmian: {{ form.commit_message }} #}
- {# <input type="submit" value="Zapisz"/> #}
- {# <a href="#" class="toggleAutoscroll" style="float: right">Nie synchronizuj przewijania</a> #}
- {# </p> #}
- {# </div> #}
- </form>
{% endblock maincontent %}
--- /dev/null
+<div class="panel">
+ <div class="images-wrap">
+ <div class="images">
+ <p>Aby zobaczyć obrazki wybierz folder poniżej:</p>
+ <p><select name="folders" class="id_folders">
+ <option value="" selected="selected">-- Wybierz folder z obrazkami --</option>
+ <option value="andersen_basnie">andersen_basnie</option>
+ </select></p>
+ </div>
+ </div>
+</div>
+<script type="text/javascript" charset="utf-8">
+ (function() {
+ function resizeEditor(event, panel) {
+ var panel = panel || event.data.panel;
+ $('.images-wrap', panel).height($(panel).height());
+ }
+
+ panel(function(event, panel) {
+ $('.id_folders', panel).change(function() {
+ $('.images', panel).load('{% url folder_image_ajax %}' + $('.id_folders', panel).val() + '/', function() {
+ $('.images-wrap', panel).data('lazyload:lastCheckedScrollTop', -10000);
+ });
+ });
+ $('.images-wrap', panel).lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5});
+
+ $(window).bind('resize', {'panel': panel}, resizeEditor);
+ resizeEditor(null, panel);
+ }, function(event, panel) {
+ console.log('unloaded gallery panel', panel);
+ });
+ })()
+</script>
--- /dev/null
+<div class="panel">
+ <div class="htmleditor">
+ {{ html|safe }}
+ </div>
+</div>
+<script type="text/javascript" charset="utf-8">
+ (function() {
+ function resizeEditor(event, panel) {
+ var panel = panel || event.data.panel;
+ $('.htmleditor', panel).height($(panel).height());
+ }
+
+ panel(function(event, panel) {
+ $(window).bind('resize', {'panel': panel}, resizeEditor);
+ resizeEditor(null, panel);
+ }, function(event, panel) {});
+ })()
+</script>
\ No newline at end of file
--- /dev/null
+{% load toolbar_tags %}
+
+<div class="panel">
+ {% toolbar %}
+ <textarea name="text" width="480px">{{ text }}</textarea>
+</div>
+<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) {
+ console.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) {
+ console.log('unloaded xmleditor panel', panel);
+ })
+ })();
+</script>
# Explorer:
url(r'^$', 'explorer.views.file_list', name='file_list'),
url(r'^file/(?P<path>[^/]+)/$', 'explorer.views.file_xml', name='file_xml'),
- url(r'^html/(?P<path>[^/]+)/$', 'explorer.views.file_html', name='file_html'),
url(r'^images/(?P<folder>[^/]+)/$', 'explorer.views.folder_images', name='folder_image'),
url(r'^images/$', 'explorer.views.folder_images', {'folder': '.'}, name='folder_image_ajax'),
+ # Editor panels
+ url(r'^editor/(?P<path>[^/]+)/panels/xmleditor/$', 'explorer.views.xmleditor_panel', name='xmleditor_panel'),
+ url(r'^editor/(?P<path>[^/]+)/panels/gallery/$', 'explorer.views.gallery_panel', name='gallery_panel'),
+ url(r'^editor/(?P<path>[^/]+)/panels/htmleditor/$', 'explorer.views.htmleditor_panel', name='htmleditor_panel'),
+
# Admin panel
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
url(r'^admin/(.*)', admin.site.root),
fnp / redakcja.git / commitdiff