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()]
+
+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('.')]
+
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)
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()
return direct_to_template(request, 'explorer/file_xml.html', extra_context={
'hash': path,
'form': form,
+ 'image_folders_form': forms.ImageFoldersForm(),
})
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),
+ })
+
'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 *
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;
}
--- /dev/null
+/*
+ * 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) {
+ $("<img />")
+ .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);
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>{% block title %}Platforma Redakcyjna{% endblock %}</title>
<link rel="stylesheet" href="/static/css/master.css" type="text/css" />
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
{% block extrahead %}
{% endblock %}
</head>
{% extends "base.html" %}
+{% block extrahead %}
+ <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ function aboveViewport(container, element, treshold) {
+ return $(container).offset().top >= $(element).offset().top + $(element).height() + treshold;
+ }
+
+ function belowViewport(container, element, treshold) {
+ return $(container).offset().top + $(container).height() + treshold <= $(element).offset().top;
+ }
+
+ var TRESHOLD = 600;
+ var lastScroll = -1000;
+
+ function checkScroll() {
+ console.log('checkScroll', $('#images').scrollTop(), lastScroll);
+
+ if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
+ console.log('checking!');
+
+ var container = $('#images');
+ lastScroll = container.scrollTop();
+
+ $('#images .image-box').each(function() {
+ if (aboveViewport(container, this, TRESHOLD)) {
+ $(this).html('loading...');
+ } else if (belowViewport(container, this, TRESHOLD)) {
+ $(this).html('loading...');
+ } else {
+ $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
+ }
+ })
+ }
+ setTimeout(checkScroll, 2000);
+ }
+
+ $(function() {
+ $('#id_folders').change(function() {
+ $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
+ lastScroll = -1000;
+ });
+ });
+
+ setTimeout(checkScroll, 2000);
+ });
+ </script>
+{% endblock extrahead %}
+
{% block breadcrumbs %}<a href="/">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
{% block maincontent %}
- <div id="tabs"><a href="{% url file_xml hash %}">Źródło</a><a href="{% url file_html hash %}" class="active">HTML</a><div style="clear: both; height: 0; width: 0"> </div></div>
+ <div id="tabs"><a href="{% url file_xml hash %}">Źródło</a><a href="{% url file_html hash %}" class="active">HTML</a><div style="padding: 3px; margin-left: 10px">{{ image_folders_form.folders }}</div><div style="clear: both; height: 0; width: 0"> </div></div>
+
+ <div id="images">
+ <div class="image-box">
+ <p>Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.</p>
+ </div>
+ </div>
<div id="file-text">
{{ object|safe }}
</div>
{% extends "base.html" %}
+{% block extrahead %}
+ <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ function aboveViewport(container, element, treshold) {
+ return $(container).offset().top >= $(element).offset().top + $(element).height() + treshold;
+ }
+
+ function belowViewport(container, element, treshold) {
+ return $(container).offset().top + $(container).height() + treshold <= $(element).offset().top;
+ }
+
+ var TRESHOLD = 600;
+ var lastScroll = -1000;
+
+ function checkScroll() {
+ console.log('checkScroll', $('#images').scrollTop(), lastScroll);
+
+ if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
+ console.log('checking!');
+
+ var container = $('#images');
+ lastScroll = container.scrollTop();
+
+ $('#images .image-box').each(function() {
+ if (aboveViewport(container, this, TRESHOLD)) {
+ $(this).html('loading...');
+ } else if (belowViewport(container, this, TRESHOLD)) {
+ $(this).html('loading...');
+ } else {
+ $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
+ }
+ })
+ }
+ setTimeout(checkScroll, 2000);
+ }
+
+ $(function() {
+ $('#id_folders').change(function() {
+ $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
+ lastScroll = -1000;
+ });
+ });
+
+ setTimeout(checkScroll, 2000);
+ });
+ </script>
+{% endblock extrahead %}
+
{% block breadcrumbs %}<a href="/">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
{% block maincontent %}
- <div id="tabs"><a href="{% url file_xml hash %}" class="active">Źródło</a><a href="{% url file_html hash %}">HTML</a><div style="clear: both; height: 0; width: 0"> </div></div>
+ <div id="tabs"><a href="{% url file_xml hash %}" class="active">Źródło</a><a href="{% url file_html hash %}">HTML</a> <div style="padding: 3px; margin-left: 10px">{{ image_folders_form.folders }}</div><div style="clear: both; height: 0; width: 0"> </div></div>
+
+ <div id="images">
+ <div class="image-box">
+ <p>Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.</p>
+ </div>
+ </div>
<form action="." method="post" accept-charset="utf-8">
- {{ form }}
+ {{ form.text }}
<p><input type="submit" value="Zapisz"/></p>
</form>
{% endblock maincontent %}
--- /dev/null
+{% for image in images %}
+ <div class="image-box" src="{{ image }}" style="width: 460px; height: 460px; margin: 5px; background-color: gray">
+ <p>{{ image }}</p>
+ </div>
+{% endfor %}
\ No newline at end of file
# Example:
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'^html/(?P<path>[^/]+)/$', 'explorer.views.file_html', name='file_html'),
+ url(r'^images/(?P<folder>[^/]+)/$', 'explorer.views.folder_images', name='folder_image'),
+
# Admin panel
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
url(r'^admin/(.*)', admin.site.root),
fnp / redakcja.git / commitdiff