From: Marek Stępniowski Date: Fri, 7 Aug 2009 08:51:27 +0000 (+0200) Subject: Dodanie wyświetlania obrazków na lewo od edytora/podglądu HTML. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/998977e74882d0c12413d7bc08c8475a78afbf18 Dodanie wyświetlania obrazków na lewo od edytora/podglądu HTML. --- diff --git a/apps/explorer/forms.py b/apps/explorer/forms.py index 065a8153..2d1c99a2 100644 --- a/apps/explorer/forms.py +++ b/apps/explorer/forms.py @@ -1,6 +1,16 @@ from django import forms +from explorer import models + class BookForm(forms.Form): text = forms.CharField(widget=forms.Textarea) + +class ImageFoldersForm(forms.Form): + folders = forms.ChoiceField(required=False) + + def __init__(self, *args, **kwargs): + super(ImageFoldersForm, self).__init__(*args, **kwargs) + self.fields['folders'].choices = [('', '-- Wybierz folder z obrazkami --')] + [(fn, fn) for fn in models.get_image_folders()] + diff --git a/apps/explorer/models.py b/apps/explorer/models.py index e69de29b..3b5848b7 100644 --- a/apps/explorer/models.py +++ b/apps/explorer/models.py @@ -0,0 +1,14 @@ +import os + +from django.conf import settings + + +def get_image_folders(): + return [fn for fn in os.listdir(settings.IMAGE_DIR) if not fn.startswith('.')] + + +def get_images_from_folder(folder): + return ['/media/images/' + folder + '/' + fn for fn + in os.listdir(os.path.join(settings.IMAGE_DIR, folder)) + if not fn.startswith('.')] + diff --git a/apps/explorer/views.py b/apps/explorer/views.py index b1513e0c..b8d00cf7 100644 --- a/apps/explorer/views.py +++ b/apps/explorer/views.py @@ -5,7 +5,7 @@ from django.views.generic.simple import direct_to_template from django.conf import settings from django.http import HttpResponseRedirect -from explorer import forms +from explorer import forms, models repo = hg.Repository(settings.REPOSITORY_PATH) @@ -23,7 +23,7 @@ def file_xml(request, path): if form.is_valid(): repo.add_file(path, form.cleaned_data['text']) repo.commit() - return HttpResponseRedirect('/') + return HttpResponseRedirect(request.get_full_path()) else: form = forms.BookForm() form.fields['text'].initial = repo.get_file(path).data() @@ -31,6 +31,7 @@ def file_xml(request, path): return direct_to_template(request, 'explorer/file_xml.html', extra_context={ 'hash': path, 'form': form, + 'image_folders_form': forms.ImageFoldersForm(), }) @@ -38,5 +39,12 @@ 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(), }) - \ No newline at end of file + + +def folder_images(request, folder): + return direct_to_template(request, 'explorer/folder_images.html', extra_context={ + 'images': models.get_images_from_folder(folder), + }) + diff --git a/project/settings.py b/project/settings.py index ea7114d8..aad5a882 100644 --- a/project/settings.py +++ b/project/settings.py @@ -104,7 +104,8 @@ INSTALLED_APPS = ( 'explorer' ) -REPOSITORY_PATH = '/Users/zuber/Projekty/books/01' +REPOSITORY_PATH = '/Users/zuber/Projekty/platforma/files/books' +IMAGE_DIR = '/Users/zuber/Projekty/platforma/files/images' try: from localsettings import * diff --git a/project/static/css/master.css b/project/static/css/master.css index 1bc59daa..87262b55 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -58,12 +58,31 @@ li a:hover { display: none; } +label { + display: block; +} + textarea { - width: 97%; - height: 42em; + width: 480px; + height: 480px; padding: 5px 10px; } #file-text { padding: 5px 10px; + overflow-x: hidden; + overflow-y: scroll; + width: 480px; + height: 480px; + border: 1px solid #999; +} + +#images { + float: left; + width: 480px; + height: 480px; + border: 1px solid #999; + padding: 5px 10px; + overflow-y: scroll; + overflow-x: hidden; } diff --git a/project/static/js/jquery.lazyload.js b/project/static/js/jquery.lazyload.js new file mode 100644 index 00000000..98a74c13 --- /dev/null +++ b/project/static/js/jquery.lazyload.js @@ -0,0 +1,141 @@ +/* + * Lazy Load - jQuery plugin for lazy loading images + * + * Copyright (c) 2007-2009 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * http://www.appelsiini.net/projects/lazyload + * + * Version: 1.3.2 + * + */ +(function($) { + + $.fn.lazyload = function(options) { + var settings = { + threshold : 0, + failurelimit : 0, + event : "scroll", + effect : "show", + container : window + }; + + if(options) { + $.extend(settings, options); + } + + /* Fire one scroll event per scroll. Not one scroll event per image. */ + var elements = this; + if ("scroll" == settings.event) { + $(settings.container).bind("scroll", function(event) { + var counter = 0; + elements.each(function() { + if (!$.belowthefold(this, settings) && + !$.rightoffold(this, settings)) { + $(this).trigger("appear"); + } else { + if (counter++ > settings.failurelimit) { + return false; + } + } + }); + /* Remove image from array so it is not looped next time. */ + var temp = $.grep(elements, function(element) { + return !element.loaded; + }); + elements = $(temp); + }); + } + + return this.each(function() { + var self = this; + /* TODO: use .data() instead of .attr() */ + $(self).attr("original", $(self).attr("src")); + if ("scroll" != settings.event + || $.belowthefold(self, settings) + || $.rightoffold(self, settings)) { + if (settings.placeholder) { + $(self).attr("src", settings.placeholder); + } else { + $(self).removeAttr("src"); + } + self.loaded = false; + } else { + self.loaded = true; + } + + /* When appear is triggered load original image. */ + $(self).one("appear", function() { + if (!this.loaded) { + $("") + .bind("load", function() { + $(self) + .hide() + .attr("src", $(self).attr("original")) + [settings.effect](settings.effectspeed); + self.loaded = true; + }) + .attr("src", $(self).attr("original")); + }; + }); + + /* When wanted event is triggered load original image */ + /* by triggering appear. */ + if ("scroll" != settings.event) { + $(self).bind(settings.event, function(event) { + if (!self.loaded) { + $(self).trigger("appear"); + } + }); + } + }); + + }; + + /* Convenience methods in jQuery namespace. */ + /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ + + $.belowthefold = function(element, settings) { + if (settings.container === undefined || settings.container === window) { + var fold = $(window).height() + $(window).scrollTop(); + } + else { + var fold = $(settings.container).offset().top + $(settings.container).height(); + } + return fold <= $(element).offset().top - settings.threshold; + }; + + $.rightoffold = function(element, settings) { + if (settings.container === undefined || settings.container === window) { + var fold = $(window).width() + $(window).scrollLeft(); + } + else { + var fold = $(settings.container).offset().left + $(settings.container).width(); + } + return fold <= $(element).offset().left - settings.threshold; + }; + + $.aboveViewport = function(element, settings) { + if (settings.container === undefined || settings.container === window) { + var top = $(window).scrollTop(); + } + else { + var top = $(settings.container).offset().top; + } + return top >= $(element).offset().bottom - settings.threshold; + }; + + /* Custom selectors for your convenience. */ + /* Use as $("img:below-the-fold").something() */ + + $.extend($.expr[':'], { + "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", + "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", + "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", + "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" + }); + +})(jQuery); diff --git a/project/templates/base.html b/project/templates/base.html index 7e2457bd..515a02e3 100644 --- a/project/templates/base.html +++ b/project/templates/base.html @@ -5,6 +5,7 @@ {% block title %}Platforma Redakcyjna{% endblock %} + {% block extrahead %} {% endblock %} diff --git a/project/templates/explorer/file_html.html b/project/templates/explorer/file_html.html index 8fed0828..7e126f0a 100644 --- a/project/templates/explorer/file_html.html +++ b/project/templates/explorer/file_html.html @@ -1,9 +1,63 @@ {% extends "base.html" %} +{% block extrahead %} + + +{% endblock extrahead %} + {% block breadcrumbs %}Platforma Redakcyjna ❯ plik {{ hash }}{% endblock breadcrumbs %} {% block maincontent %} -
ŹródłoHTML
 
+
ŹródłoHTML
{{ image_folders_form.folders }}
 
+ +
+
+

Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.

+
+
{{ object|safe }}
diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html index 14ae61ec..3f50659c 100644 --- a/project/templates/explorer/file_xml.html +++ b/project/templates/explorer/file_xml.html @@ -1,11 +1,65 @@ {% extends "base.html" %} +{% block extrahead %} + + +{% endblock extrahead %} + {% block breadcrumbs %}Platforma Redakcyjna ❯ plik {{ hash }}{% endblock breadcrumbs %} {% block maincontent %} -
ŹródłoHTML
 
+
ŹródłoHTML
{{ image_folders_form.folders }}
 
+ +
+
+

Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.

+
+
- {{ form }} + {{ form.text }}

{% endblock maincontent %} diff --git a/project/templates/explorer/folder_images.html b/project/templates/explorer/folder_images.html new file mode 100644 index 00000000..e6beb076 --- /dev/null +++ b/project/templates/explorer/folder_images.html @@ -0,0 +1,5 @@ +{% for image in images %} +
+

{{ image }}

+
+{% endfor %} \ No newline at end of file diff --git a/project/urls.py b/project/urls.py index c3b14c87..3b75849b 100644 --- a/project/urls.py +++ b/project/urls.py @@ -10,8 +10,9 @@ urlpatterns = patterns('', # Example: url(r'^$', 'explorer.views.file_list', name='file_list'), url(r'^file/(?P[^/]+)/$', 'explorer.views.file_xml', name='file_xml'), - url(r'^html/(?P[^/]+)/', 'explorer.views.file_html', name='file_html'), - + url(r'^html/(?P[^/]+)/$', 'explorer.views.file_html', name='file_html'), + url(r'^images/(?P[^/]+)/$', 'explorer.views.folder_images', name='folder_image'), + # Admin panel url(r'^admin/doc/', include('django.contrib.admindocs.urls')), url(r'^admin/(.*)', admin.site.root),