From: Marcin Koziej Date: Wed, 11 Apr 2012 13:36:31 +0000 (+0200) Subject: widget X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/b89eaee8db7e1d44278a65cdf9a42d035ecab50a widget --- diff --git a/apps/wolnelektury_core/static/css/widget.css b/apps/wolnelektury_core/static/css/widget.css index 626698844..14aed95f2 100644 --- a/apps/wolnelektury_core/static/css/widget.css +++ b/apps/wolnelektury_core/static/css/widget.css @@ -1,54 +1,153 @@ + +/* + * 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 { -background-color: white; + 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; + border: 0; } + #wl img { -border: 0; + border: 0; + width: 8.625em; + margin: 0.375em 0; } + + .ui-menu { -width: 160px; -font-size: small; -list-style-type: none; -padding: 0; -margin:0; -border-left: 1px solid #696969; -border-right: 1px solid #696969; -border-bottom: 1px solid #696969; + 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 { -font-size: small; -padding: 5px; -width: 150px } .ui-menu li:nth-child(odd) { -background-color: white; + background-color: white; } .ui-menu li:nth-child(even){ -background-color: #EDF1F5; + background-color: #EEE; +} + +.ui-menu li .ui-state-hover { + background-color: #fdf5ce; } .ui-menu li:hover{ -background-color: #053469; -color:white; + background-color: #053469; + color:white; } .ui-menu a:hover { -color:white; -text-decoration: none; + color:white; + text-decoration: none; } -.ui-corner-all { -width: 160px; -cursor: pointer; -display:block; + +#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; } -.ui-corner-all a{ - color: black; - text-decoration: none; +#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 6bfc84cb1..16b2a5077 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/search.js b/apps/wolnelektury_core/static/js/search.js index 6afc4a399..293b9e3fa 100644 --- a/apps/wolnelektury_core/static/js/search.js +++ b/apps/wolnelektury_core/static/js/search.js @@ -16,7 +16,9 @@ var __bind = function (self, fn) { focus: function() { return false; }, source: this.element.data('source'), }; - this.element.autocomplete(opts).data("autocomplete")._renderItem = __bind(this, this.render_item); + + this.element.autocomplete($.extend(opts, this.options)) + .data("autocomplete")._renderItem = __bind(this, this.render_item); }, enter: function(event, ui) { @@ -32,7 +34,7 @@ var __bind = function (self, fn) { .append(''+item.label+''+ ''+item.category+'') .appendTo(ul); - }, + }, destroy: function() { diff --git a/apps/wolnelektury_core/static/js/widget.js b/apps/wolnelektury_core/static/js/widget.js index de30eb714..550bf2084 100644 --- a/apps/wolnelektury_core/static/js/widget.js +++ b/apps/wolnelektury_core/static/js/widget.js @@ -8,15 +8,19 @@ 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 = 'www.wolnelektury.pl'; +var host = 'localhost:8000'; //'www.wolnelektury.pl'; /* set attributes of created elements */ stylesheet.setAttribute('type', 'text/css'); stylesheet.setAttribute('rel', 'stylesheet'); stylesheet.setAttribute('href', 'http://'+host+'/static/css/widget.css'); +stylesheetJQUI.setAttribute('type', 'text/css'); +stylesheetJQUI.setAttribute('rel', 'stylesheet'); +stylesheetJQUI.setAttribute('href', 'http://'+host+'/static/css/ui-lightness/jquery-ui-1.8.16.custom.css'); linkLogo.setAttribute('href', 'http://'+host); -logo.setAttribute('src', 'http://'+host+'/static/img/logo.png'); +logo.setAttribute('src', 'http://'+host+'/static/img/logo-bez.png'); form.setAttribute('action', 'http://'+host+'/szukaj/'); form.setAttribute('method', 'get'); form.setAttribute('accept-charset', 'utf-8'); @@ -26,10 +30,11 @@ inputText.setAttribute('title', 'tytul, autor, motyw/temat, epoka, rodzaj, gatun inputText.setAttribute('value', ''); inputText.setAttribute('name', 'q'); inputText.setAttribute('id', 'id_qq'); -inputText.setAttribute('size', '13'); +inputText.setAttribute('data-source', 'http://'+host+'/szukaj/hint'); +/*inputText.setAttribute('size', '13');*/ inputSubmit.setAttribute('type', 'image'); inputSubmit.setAttribute('src', 'http://'+host+'/static/img/search.png'); -inputSubmit.setAttribute('style', 'position:relative; top:5px; margin-left:5px'); +/* inputSubmit.setAttribute('style', 'position:relative; top:5px; margin-left:5px');*/ /* import jquery and autocomplete */ var scriptJ = document.createElement('script'); @@ -39,6 +44,12 @@ scriptJ.setAttribute('src', 'http://'+host+'/static/js/jquery.js'); var scriptAutoComplete = document.createElement('script'); scriptAutoComplete.setAttribute('type', 'text/javascript'); scriptAutoComplete.setAttribute('src', 'http://'+host+'/static/js/jquery-ui-1.8.2.custom.min.js'); +scriptAutoComplete.setAttribute('id', 'wl-jquery-ui-script') + +var scriptSearch = document.createElement('script'); +scriptSearch.setAttribute('type', 'text/javascript'); +scriptSearch.setAttribute('src', 'http://'+host+'/static/js/search.js'); +scriptSearch.setAttribute('id', 'wl-search-script') var scriptInit = document.createElement('script'); scriptInit.setAttribute('type', 'text/javascript'); @@ -46,10 +57,12 @@ scriptInit.setAttribute('src', 'http://'+host+'/static/js/widgetInit.js'); body[0].appendChild(scriptJ); body[0].appendChild(scriptAutoComplete); +body[0].appendChild(scriptSearch); body[0].appendChild(scriptInit); /* append elements to widget */ widget.appendChild(stylesheet); +//widget.appendChild(stylesheetJQUI); widget.appendChild(linkLogo); linkLogo.appendChild(logo); widget.appendChild(form); @@ -57,6 +70,7 @@ form.appendChild(inputText); form.appendChild(inputSubmit); /* ...and a little make-up */ +/* widget.style.borderColor = "#84BF2A"; widget.style.borderWidth = "2px"; widget.style.borderStyle = "solid"; @@ -64,6 +78,7 @@ widget.style.width = "160px"; widget.style.padding = "10px"; widget.style.fontSize = "12px"; form.style.paddingTop = "10px"; +*/ /* resize - if needed */ if(widget.getAttribute('width') == '140'){ diff --git a/apps/wolnelektury_core/static/js/widgetInit.js b/apps/wolnelektury_core/static/js/widgetInit.js index ab57a3062..4cfa85a26 100644 --- a/apps/wolnelektury_core/static/js/widgetInit.js +++ b/apps/wolnelektury_core/static/js/widgetInit.js @@ -1,5 +1,20 @@ - $(function() { - $("#id_qq").autocomplete({ + +var wl_scripts_loaded = {}; + +function wl_load_search_if_ready(id) { + wl_scripts_loaded[id] = true; + if (wl_scripts_loaded['wl-search-script'] && + wl_scripts_loaded['wl-jquery-ui-script']) + { + var s = $('#id_qq'); + s.search({source: s.attr('data-source')}); + } +} + +$('#wl-search-script').ready(function(){wl_load_search_if_ready('wl-search-script');}); +$('#wl-jquery-ui-script').ready(function(){wl_load_search_if_ready('wl-jquery-ui-script');}); + +/*autocomplete({ source: function(request, response) { $.ajax({ url: "http://www.wolnelektury.pl/katalog/jtags/", @@ -27,3 +42,4 @@ } }); }); +*/ diff --git a/apps/wolnelektury_core/static/widget.html b/apps/wolnelektury_core/static/widget.html index 890184da4..fffc0167f 100644 --- a/apps/wolnelektury_core/static/widget.html +++ b/apps/wolnelektury_core/static/widget.html @@ -5,7 +5,7 @@ - +