From: Radek Czajka <radekczajka@nowoczesnapolska.org.pl>
Date: Tue, 23 Sep 2014 10:52:52 +0000 (+0200)
Subject: Widget upgrade.
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/048c03a936a31dc5e1a1f14a8e2541e7fb28882d

Widget upgrade.
---

diff --git a/apps/search/urls.py b/apps/search/urls.py
index 695a7e603..d77d7220a 100644
--- a/apps/search/urls.py
+++ b/apps/search/urls.py
@@ -6,6 +6,6 @@ from django.conf.urls import patterns, url
 
 urlpatterns = patterns('search.views',
     url(r'^$', 'main', name='search'),
-    url(r'^hint/$', 'hint'),
+    url(r'^hint/$', 'hint', name='search_hint'),
 )
 
diff --git a/apps/search/views.py b/apps/search/views.py
index a50897199..f7aa77cd9 100644
--- a/apps/search/views.py
+++ b/apps/search/views.py
@@ -73,9 +73,6 @@ def hint(request):
     # jezeli tagi dot tylko ksiazki, to wazne zeby te nowe byly w tej samej ksiazce
     # jesli zas dotycza themes, to wazne, zeby byly w tym samym fragmencie.
 
-    tags = search.hint_tags(prefix, pdcounter=True)
-    books = search.hint_books(prefix)
-
     def is_dupe(tag):
         if isinstance(tag, PDCounterAuthor):
             if filter(lambda t: t.slug == tag.slug and t != tag, tags):
@@ -85,24 +82,47 @@ def hint(request):
                 return True
         return False
 
-    tags = filter(lambda t: not is_dupe(t), tags)
-
     def category_name(c):
         if c.startswith('pd_'):
             c = c[len('pd_'):]
         return _(c)
 
-    callback = request.GET.get('callback', None)
-    data = [{'label': t.name,
-              'category': category_name(t.category),
-              'id': t.id,
-              'url': t.get_absolute_url()}
-              for t in tags] + \
-              [{'label': b.title,
+    try:
+        limit = int(request.GET.get('max', ''))
+    except ValueError:
+        limit = -1
+    else:
+        if limit < 1:
+            limit = -1
+
+    data = []
+
+    tags = search.hint_tags(prefix, pdcounter=True)
+    tags = filter(lambda t: not is_dupe(t), tags)
+    for t in tags:
+        if not limit:
+            break
+        limit -= 1
+        data.append({
+            'label': t.name,
+            'category': category_name(t.category),
+            'id': t.id,
+            'url': t.get_absolute_url()
+            })
+    if limit:
+        books = search.hint_books(prefix)
+        for b in books:
+            if not limit:
+                break
+            limit -= 1
+            data.append({
+                'label': b.title,
                 'category': _('book'),
                 'id': b.id,
-                'url': b.get_absolute_url()}
-                for b in books]
+                'url': b.get_absolute_url()
+                })
+
+    callback = request.GET.get('callback', None)
     if callback:
         return HttpResponse("%s(%s);" % (callback, json.dumps(data)),
                             content_type="application/json; charset=utf-8")
diff --git a/apps/wolnelektury_core/static/css/widget.css b/apps/wolnelektury_core/static/css/widget.css
deleted file mode 100644
index 8da8bf36c..000000000
--- a/apps/wolnelektury_core/static/css/widget.css
+++ /dev/null
@@ -1,153 +0,0 @@
-
-/* 
- *  RESET 
- *  src: http://meyerweb.com/eric/tools/css/reset/
- */
-
-#wl div, #wl span, #wl applet, #wl object, #wl iframe,
-#wl  #eh1, #wl h2, #wl h3, #wl h4, #wl h5, #wl h6, #wl p, #wl blockquote, #wl pre,
-#wl a, #wl abbr, #wl acronym, #wl address, #wl big, #wl cite, #wl code,
-#wl del, #wl dfn, #wl em, #wl img, #wl ins, #wl kbd, #wl q, #wl s, #wl samp,
-#wl small, #wl strike, #wl strong, #wl sub, #wl sup, #wl tt, #wl var,
-#wl b, #wl u, #wl i, #wl center,
-#wl dl, #wl dt, #wl dd, #wl ol, #wl ul, #wl li,
-#wl fieldset, #wl form, #wl label, #wl legend,
-#wl table, #wl caption, #wl tbody, #wl tfoot, #wl thead, #wl tr, #wl th, #wl td,
-#wl article, #wl aside, #wl canvas, #wl details, #wl embed,
-#wl figure, #wl figcaption, #wl footer, #wl header, #wl hgroup, 
-#wl menu, #wl nav, #wl output, #wl ruby, #wl section, #wl summary,
-#wl time, #wl mark, #wl audio, #wl video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-
-#wl {
-	line-height: 1;
-}
-
-#wl ol, #wl ul {
-	list-style: none;
-}
-#wl blockquote, #wl q {
-	quotes: none;
-}
-
-#wl blockquote:before, #wl blockquote:after,
-#wl q:before, #wl q:after {
-	content: '';
-	content: none;
-}
-#wl table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* END RESET */
-
-#wl {
-    background-color: white;
-}
-
-#wl a, a:visited, a:hover {
-    border: 0;
-}
-
-#wl img {
-    border: 0;
-    width: 8.625em;
-    margin: 0.375em 0;
-}
-
-
-.ui-menu {
-    width: 29em;
-    font-size: small;
-    list-style-type: none;
-    padding: 0;
-    margin:0;
-    border: 1px solid #ddd;
-}
-
-.ui-menu .search-hint-label {
-    display: inline-block;
-    width: 20em;
-    margin-right: 2em;
-    font-size: 1.1em;
-    line-height: 1.636em;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.ui-menu .search-hint-category {
-    width: 9em;
-}
-
-.ui-corner-all {
-    /*width: 160px;*/
-    cursor: pointer;
-    display:block;
-}
-
-.ui-corner-all a {
-    text-decoration: none;
-    color: #0D7E85;
-    font-size: small;
-    padding: 5px;
-
-}
-
-.ui-menu li {
-}
-
-.ui-menu li:nth-child(odd) {
-    background-color: white;
-}
-
-.ui-menu li:nth-child(even){
-    background-color: #EEE;
-}
-
-.ui-menu li .ui-state-hover {
-    background-color: #fdf5ce;
-}
-
-.ui-menu li:hover{
-    background-color: #053469;
-    color:white;
-}
-
-.ui-menu a:hover {
-/*    color:white;*/
-    text-decoration: none;
-}
-
-
-#wl #id_qq {
-    font-family: Georgia;
-    font-size: 0.75em;
-    
-    background-color: #FFFFFF;
-    border: medium none;
-    border-radius: 0.38em 0.38em 0.38em 0.38em;
-    box-shadow: 0 0 0.5em #444444 inset;
-    color: #000000;
-    height: 2.54em;
-    width: 9.125em;
-
-    line-height: 2.5em;
-    padding: 0 0 0 1em;
-    position: relative;
-}
-
-#wl input[type=image] {
-    width: 1.5em;
-    height: 1.5625em;
-    top: 0.375em;
-    position: relative;
-    margin-left: 0.625em;
-}
-
diff --git a/apps/wolnelektury_core/static/img/search.png b/apps/wolnelektury_core/static/img/search.png
index 16b2a5077..8f032bf0b 100644
Binary files a/apps/wolnelektury_core/static/img/search.png and b/apps/wolnelektury_core/static/img/search.png differ
diff --git a/apps/wolnelektury_core/static/js/widget.js b/apps/wolnelektury_core/static/js/widget.js
index f9cf53e13..3b680fc7d 100644
--- a/apps/wolnelektury_core/static/js/widget.js
+++ b/apps/wolnelektury_core/static/js/widget.js
@@ -1,107 +1,8 @@
-/* create basic elements */
-var id          = "wl";
-var widget      = document.getElementById(id);
-var linkLogo    = document.createElement('a');
-var logo        = document.createElement('img');
-var form        = document.createElement('form');
-var inputText   = document.createElement('input');
-var inputSubmit = document.createElement('input');
-var body        = document.getElementsByTagName('body')
-var stylesheet = document.createElement('link');
-var stylesheetJQUI = document.createElement('linl');
-
-var host = 'wolnelektury.pl';
-
-/* set attributes of created elements */
-stylesheet.setAttribute('type', 'text/css');
-stylesheet.setAttribute('rel', 'stylesheet');
-stylesheet.setAttribute('href', '//'+host+'/static/css/widget.css');
-stylesheetJQUI.setAttribute('type', 'text/css');
-stylesheetJQUI.setAttribute('rel', 'stylesheet');
-stylesheetJQUI.setAttribute('href', '//'+host+'/static/css/ui-lightness/jquery-ui-1.8.16.custom.css');
-linkLogo.setAttribute('href', '//'+host);
-logo.setAttribute('src', '//'+host+'/static/img/logo-bez.png');
-form.setAttribute('action', '//'+host+'/szukaj/');
-form.setAttribute('method', 'get');
-form.setAttribute('accept-charset', 'utf-8');
-form.setAttribute('id', 'wl-form');
-inputText.setAttribute('type', 'text');
-inputText.setAttribute('title', 'tytul, autor, motyw/temat, epoka, rodzaj, gatunek');
-inputText.setAttribute('value', '');
-inputText.setAttribute('name', 'q');
-inputText.setAttribute('id', 'id_qq');
-inputText.setAttribute('data-source', '//'+host+'/szukaj/hint/');
-/*inputText.setAttribute('size', '13');*/
-inputSubmit.setAttribute('type', 'image');
-inputSubmit.setAttribute('src', '//'+host+'/static/img/search.png');
-/* inputSubmit.setAttribute('style', 'position:relative; top:5px; margin-left:5px');*/
-
-/* import jquery and autocomplete */
-var scriptJ = document.createElement('script');
-scriptJ.setAttribute('type', 'text/javascript');
-scriptJ.setAttribute('src', '//'+host+'/static/js/jquery.js');
-
-var scriptUI = document.createElement('script');
-scriptUI.setAttribute('type', 'text/javascript');
-scriptUI.setAttribute('src', '//'+host+'/static/js/jquery-ui-1.8.2.custom.min.js');
-scriptUI.setAttribute('id', 'wl-jquery-ui-script')
-
-var scriptSearch = document.createElement('script');
-scriptSearch.setAttribute('type', 'text/javascript');
-scriptSearch.setAttribute('src', '//'+host+'/static/js/search.js');
-scriptSearch.setAttribute('id', 'wl-search-script')
-
-body[0].appendChild(scriptJ);
-scriptJ.onload = function() { body[0].appendChild(scriptUI); };
-scriptJ.onreadystatechange = function() { if (scriptJ.readyState == 'complete') { scriptJ.onload(); } };
-
-scriptUI.onload = function() { body[0].appendChild(scriptSearch); };
-scriptUI.onreadystatechange = function() { if (scriptUI.readyState == 'complete') { scriptUI.onload(); } };
-
-scriptSearch.onload = function() {
-    	var s = $('#id_qq');
-        var url = s.attr('data-source');
-        s.search({source: 
-                        function(req, cb) {
-                        $.ajax({url: url,
-                                dataType: "jsonp",
-                                data: { term: req.term },
-                                type: "GET",
-                                success: function(data) { cb(data); },
-                                error: function() { cb([]); }
-                    });
-                        },
-            dataType: "jsonp",
-            host: "//"+host});
-}
-scriptSearch.onreadystatechange = function() { if (scriptSearch.readyState == 'complete') { scriptSearch.onload(); } };
-
-/* append elements to widget */
-widget.appendChild(stylesheet);
-//widget.appendChild(stylesheetJQUI);
-widget.appendChild(linkLogo);
-linkLogo.appendChild(logo);
-widget.appendChild(form);
-form.appendChild(inputText);
-form.appendChild(inputSubmit);
-
-/* ...and a little make-up */
-/*
-widget.style.borderColor = "#84BF2A";
-widget.style.borderWidth = "2px";
-widget.style.borderStyle = "solid";
-widget.style.width = "160px";
-widget.style.padding = "10px";
-widget.style.fontSize = "12px";
-form.style.paddingTop = "10px";
-*/
-
-/* resize - if needed */
-if(widget.getAttribute('width') == '140'){
-    logo.setAttribute('width', '140');
-    inputText.setAttribute('size', '10');
-    widget.style.width = "140px";
-}
-
-
-
+var WOLNELEKTURY_LOADED;
+if (WOLNELEKTURY_LOADED == undefined) {
+    var iframe = document.createElement('iframe');
+    iframe.setAttribute('style', 'width: 100%; height: 140px; border: none; box-shadow: 0 0 .5rem #191919;');
+    iframe.setAttribute('src', '//wolnelektury.pl/widget.html');
+    document.getElementById('wl').appendChild(iframe);
+    WOLNELEKTURY_LOADED = true;
+}
\ No newline at end of file
diff --git a/apps/wolnelektury_core/static/js/widget_run.js b/apps/wolnelektury_core/static/js/widget_run.js
new file mode 100644
index 000000000..c2453e722
--- /dev/null
+++ b/apps/wolnelektury_core/static/js/widget_run.js
@@ -0,0 +1,26 @@
+var s = $('#id_qq');
+var url = s.attr('data-source');
+s.search({
+    source: function(req, cb) {
+        $.ajax({url: url,
+            dataType: "jsonp",
+            data: {term: req.term},
+            type: "GET",
+            success: function(data) {cb(data);},
+            error: function() {cb([]);}
+        });
+    },
+    dataType: "jsonp",
+    select: function(event, ui) {
+        if (ui.item.url != undefined) {
+            window.top.location.href = '//wolnelektury.pl' + ui.item.url;
+        } else {
+            $('form').submit();
+        }
+    },
+    position: {
+        my: "center bottom",
+        at: "center bottom",
+        of: "#wl a"
+    },
+});
diff --git a/apps/wolnelektury_core/static/scss/widget.scss b/apps/wolnelektury_core/static/scss/widget.scss
new file mode 100644
index 000000000..7d78730ef
--- /dev/null
+++ b/apps/wolnelektury_core/static/scss/widget.scss
@@ -0,0 +1,150 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+
+#wl {
+    background-color: #191919;
+    position:relative;
+
+    a, a:visited, a:hover {
+        display: block;
+        line-height: 5.94rem;
+        border: 0;
+
+        img {
+            border: 0;
+            max-width: 100%;
+            margin: 0;
+            vertical-align: middle;
+        }
+    }
+
+    #wl-form {
+        background: #444;
+        color: white;
+        height: 2.8125rem;
+        position: relative;
+    }
+    #wl-search {
+        position: absolute;
+        left: .3125rem;
+        right: 2.9rem;
+        right: 22%;
+        top: .3125rem;
+    }
+
+    #id_qq {
+        font-family: Georgia;
+        font-size: 0.8125rem;
+        
+        background-color: #FFFFFF;
+        border: medium none;
+        border-radius: 0.3125rem;
+        box-shadow: 0 0 0.40625rem #444444 inset;
+        color: #000000;
+        height: 2.0625rem;
+        width: 100%;
+
+        line-height: 2.03125rem;
+        padding: 0 0 0 .8125rem;
+        position: relative;
+        box-sizing: border-box;
+        z-index: 200;
+
+        &::-moz-placeholder {
+            color: #767676;
+            font-family: Georgia;
+            font-style: italic;
+        }
+    }
+
+    button {
+        background: #018189;
+        border: none;
+        color: white;
+        display: inline-block;
+        font-size: .6875rem;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 2rem;
+
+        width: 20%;
+        height: 2.8125rem;
+        margin: 0;
+        padding: 0;
+
+        img {
+            max-width: 100%;
+        }
+    }
+
+}
+
+.ui-menu {
+    width: 100%;
+    font-size: 0.7rem;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    border-style: solid;
+    border-color: #ddd;
+    border-width: 1px 0;
+
+    li {
+        clear: right;
+
+        &:nth-child(odd) {
+            background-color: rgba(255,255,255,.95);
+        }
+
+        &:nth-child(even){
+            background-color: rgba(238,238,238,.95);
+        }
+
+        &:hover{
+            background-color: #053469;
+            color:white;
+        }
+
+        .ui-state-hover {
+            background-color: #fdf5ce;
+        }
+
+        .search-hint-label {
+            line-height: 1.636em;
+            display: inline-block;
+            max-width: 80%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .search-hint-category {
+            display: none;
+            @media screen and (min-width: 10em) {
+                display: block;
+            }
+            float: right;
+            font-size: .9em;
+        }
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+}
+
+.ui-corner-all {
+    cursor: pointer;
+    display:block;
+
+    a {
+        text-decoration: none;
+        color: #0D7E85;
+        padding: 5px;
+    }
+}
diff --git a/apps/wolnelektury_core/static/widget.html b/apps/wolnelektury_core/static/widget.html
deleted file mode 100644
index 8389e0bd1..000000000
--- a/apps/wolnelektury_core/static/widget.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<html>
-<body>
-<!-- START Umiescic ten element, w miejscu w ktorym ma sie pojawic widget -->
-<div id="wl"></div>
-<!-- KONIEC -->
-
-<!-- START Umiescic ten element zaraz przed zamknieciem taga body: </body> -->
-<script type="text/javascript" src="//wolnelektury.pl/static/js/widget.js"></script>
-<!-- KONIEC -->
-
-</body>
-</html>
diff --git a/apps/wolnelektury_core/templates/widget.html b/apps/wolnelektury_core/templates/widget.html
new file mode 100644
index 000000000..bfd0358e0
--- /dev/null
+++ b/apps/wolnelektury_core/templates/widget.html
@@ -0,0 +1,37 @@
+{% spaceless %}
+
+{% load static from staticfiles %}
+{% load compressed %}
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <base target="_parent" />
+    <title>Widget Wolnych Lektur</title>
+    {% compressed_css 'widget' %}
+</head>
+<body>
+<div id="wl">
+
+<a href="/">
+    <img src="{% static 'img/logo-neon.png' %}">
+</a>
+
+<form action="{% url 'search' %}" method="get" accept-charset="utf-8" id="wl-form">
+    <div id="wl-search">
+        <input data-source="{% url 'search_hint' %}?max=3" id="id_qq" name="q" title="tytuł, autor, motyw/temat, epoka, rodzaj, gatunek, cytat" placeholder="tytuł, autor, motyw/temat, epoka, rodzaj, gatunek, cytat" type="text" value="">
+    </div>
+    <button>
+        <img alt="Szukaj" src="{% static 'img/search.png' %}">
+    </button>
+</form>
+
+</div>
+
+{% compressed_js 'widget' %}
+
+</body>
+</html>
+
+{% endspaceless %}
\ No newline at end of file
diff --git a/apps/wolnelektury_core/views.py b/apps/wolnelektury_core/views.py
index 1ccd24a59..51371735a 100644
--- a/apps/wolnelektury_core/views.py
+++ b/apps/wolnelektury_core/views.py
@@ -145,3 +145,8 @@ def latest_blog_posts(request, feed_url=None, posts_to_show=5):
     except:
         posts = []
     return render(request, 'latest_blog_posts.html', {'posts': posts})
+
+
+@ssi_included(use_lang=False)
+def widget(request):
+    return render(request, 'widget.html')
diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py
index 306e718b6..0a520ad7e 100644
--- a/wolnelektury/settings/static.py
+++ b/wolnelektury/settings/static.py
@@ -66,6 +66,10 @@ PIPELINE_CSS = {
         'source_filenames': ('css/simple.css',),
         'output_filename': 'css/compressed/simple.css',
     },
+    'widget': {
+        'source_filenames': ('scss/widget.scss',),
+        'output_filename': 'css/compressed/widget.css',
+    },
 }
 
 PIPELINE_JS = {
@@ -135,8 +139,16 @@ PIPELINE_JS = {
     'book_ie': {
         'source_filenames': ('js/contrib/ierange-m2.js',),
         'output_filename': 'js/book_ie.min.js',
-    }
-
+    },
+    'widget': {
+        'source_filenames': (
+            'js/contrib/jquery.js',
+            'js/contrib/jquery-ui-1.8.16.custom.min.js',
+            'js/search.js',
+            'js/widget_run.js',
+        ),
+        'output_filename': 'js/widget.min.js',
+    },
 }
 
 STATICFILES_STORAGE = 'fnpdjango.utils.pipeline_storage.GzipPipelineCachedStorage'
diff --git a/wolnelektury/urls.py b/wolnelektury/urls.py
index 2dfd4d410..bdfb474fd 100644
--- a/wolnelektury/urls.py
+++ b/wolnelektury/urls.py
@@ -12,6 +12,7 @@ import wolnelektury_core.views
 urlpatterns = patterns('wolnelektury_core.views',
     url(r'^$', 'main_page', name='main_page'),
     url(r'^planowane/$', 'publish_plan', name='publish_plan'),
+    url(r'^widget\.html$', 'widget', name='widget'),
 
     url(r'^zegar/$', 'clock', name='clock'),