overflow-y: scroll;
}
+#whatever {
+ float: left;
+}
+
#images-wrap {
- width: 0px;
+/* width: 0px;*/
height: 480px;
- border-right: 1px solid #999;
overflow-y: scroll;
overflow-x: hidden;
background-color: #fff;
}
#toggle-sidebar {
+ border-left: 1px solid #999;
+ border-right: 1px solid #999;
background-color: #DDD;
- width: 7px;
+ width: 8px;
height: 100%;
float: left;
}
#toggle-sidebar:hover {
background-color: #999;
- cursor: pointer;
+ cursor: col-resize;
}
#status-bar {
margin: 0;
padding: 0;
background-color: #CCC;
- border-bottom: 1px solid #AAA;
+ border-top: 1px solid #AAA;
}
#toolbar {
width: 400%;
}
-#toolbar-tabs li {
+#sidebar-toolbar, #sidebar-toolbar ol {
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
+ background-color: #CCC;
+ border-bottom: 1px solid #AAA;
+}
+
+#sidebar-toolbar {
+ width: 0;
+}
+
+#sidebar-tabs li, #toolbar-tabs li {
font-size: 14px;
display: block;
float: left;
- margin: 4px 4px 0 0;
+ margin: 4px 0 -1px 4px;
padding: 2px 10px 0 10px;
- border-left: 1px solid #EEE;
- border-right: 1px solid #AAA;
- margin-bottom: -1px;
+ background-color: #CCC;
border: 1px solid #AAA;
border-radius-topleft: 8px;
border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
}
-#toolbar-tabs li:hover, #toolbar-tabs li.active {
+#sidebar-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 {
cursor: default;
background-color: #EEE;
border-bottom: 1px solid #EEE;
#toolbar-buttons {
background-color: #EEE;
+ border-bottom: 1px solid #AAA;
}
#toolbar-buttons li {
+++ /dev/null
-(function() {
- jQuery.fn.getSelection = function() {
- var e = (this.jquery) ? this[0] : this;
-
- return (
- // Mozilla / dom 3.0
- ('selectionStart' in e && function() {
- var l = e.selectionEnd - e.selectionStart;
- return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
- }) ||
-
- // Internet Explorer
- (document.selection && function() {
- e.focus();
-
- var r = document.selection.createRange();
- if (r === null) {
- return { start: 0, end: e.value.length, length: 0 }
- }
-
- var re = e.createTextRange();
- var rc = re.duplicate();
- re.moveToBookmark(r.getBookmark());
- rc.setEndPoint('EndToStart', re);
-
- return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
- }) ||
-
- // browser not supported
- function() { return null; }
- )();
- },
-
- jQuery.fn.replaceSelection = function() {
- var e = this.jquery ? this[0] : this;
- var text = arguments[0] || '';
- var scrollTop = $(this).scrollTop();
-
- return (
- // Mozilla / dom 3.0
- ('selectionStart' in e && function() {
- var selectionStart = e.selectionStart;
- console.log(e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length));
- e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
- $(e).scrollTop(scrollTop).focus();
- e.selectionStart = selectionStart + text.length;
- e.selectionEnd = selectionStart + text.length;
- return this;
- }) ||
-
- // Internet Explorer
- (document.selection && function() {
- e.focus();
- document.selection.createRange().text = text;
- return this;
- }) ||
-
- // browser not supported
- function() {
- e.value += text;
- return jQuery(e);
- }
- )();
- }
-})();
\ No newline at end of file
--- /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(handle, options) {
+ var settings = {
+ minWidth: 0,
+ maxWidth: $(window).width()
+ }
+
+ $.extend(settings, options);
+
+ var element = $(this);
+
+ $(handle, element).mousedown(function(event) {
+ var position = element.position();
+ $.resizable.settings = settings;
+ $.resizable.element = {
+ element: element,
+ width: parseInt(element.css('width')) || element[0].scrollWidth || 0,
+ mouseX: event.pageX,
+ };
+ $(document).mousemove($.resizable.drag).mouseup($.resizable.stop);
+ $('body').css('cursor', 'col-resize');
+ }).bind('dragstart', function(event) { event.preventDefault() });
+ };
+})(jQuery);
+
{% load toolbar_tags %}
{% block extrahead %}
- <script src="/static/js/jquery.fieldselection.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>
<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').data('lastScroll', -1000);
+ $('#images-wrap').data('lazyload:lastCheckedScrollTop', -10000);
});
});
function resizePanels() {
$('iframe').width($(window).width() - $('#sidebar').outerWidth());
- $('iframe').height($(window).height() - 100);
- $('#images-wrap, #toggle-sidebar').height($(window).height() - 100);
+ $('iframe').height($(window).height() - $('#breadcrumbs').height() - $('toolbar').height());
+ $('#toggle-sidebar').height($(window).height() - $('#breadcrumbs').height());
+ $('#images-wrap').height($(window).height() - $('#breadcrumbs').height() - $('#sidebar-toolbar').height())
+ $('#images-wrap, #sidebar-toolbar').width($('#sidebar').width() - 10);
}
- $('#toggle-sidebar').toggle(function() {
- $('#images-wrap').width(480);
- $('#sidebar').width(488);
- $('#images-wrap').data('lazyload:lastCheckedScrollTop', -10000);
- resizePanels();
- }, function() {
- $('#images-wrap').width(0);
- $('#sidebar').width(8);
- resizePanels();
- })
-
$(window).resize(function() {
resizePanels();
})
return event.ctrlKey && keys[event.keyCode];
});
+ $('#sidebar').bind('resizable:resize', resizePanels)
+ .resizable('#toggle-sidebar', {minWidth: 8});
+
resizePanels();
}
});
{% block breadcrumbs %}<a href="{% url file_list %}">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
{% block maincontent %}
- {% toolbar %}
-
<form action="." method="post" accept-charset="utf-8">
<div id="panels">
<div id="sidebar">
- <div id="images-wrap">
- <div id="images">
- <p>Aby zobaczyć obrazki wybierz folder poniżej:</p>
- <p>{{ image_folders_form.folders }}</p>
+ <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>
</div>
</div>
- <div id="toggle-sidebar"></div>
</div>
+ {% toolbar %}
<textarea id="id_text" name="text" width="480px">{{ form.text.field.initial }}</textarea>
</div>