From b89eaee8db7e1d44278a65cdf9a42d035ecab50a Mon Sep 17 00:00:00 2001 From: Marcin Koziej Date: Wed, 11 Apr 2012 15:36:31 +0200 Subject: [PATCH] widget --- apps/wolnelektury_core/static/css/widget.css | 153 ++++++++++++++---- apps/wolnelektury_core/static/img/search.png | Bin 1604 -> 738 bytes apps/wolnelektury_core/static/js/search.js | 6 +- apps/wolnelektury_core/static/js/widget.js | 23 ++- .../wolnelektury_core/static/js/widgetInit.js | 20 ++- apps/wolnelektury_core/static/widget.html | 2 +- 6 files changed, 168 insertions(+), 36 deletions(-) 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 6bfc84cb16673fc65122517bcdb40544215008ad..16b2a507714d8b75226f91beb84214e99e6e52e4 100644 GIT binary patch literal 738 zcmV<80v-K{P)X1^@s6D=Y3@00004b3#c}2nYxW zdmVu*DNG&3Y{?D0E#Qvq_x!>v z&dmJ2-}#+0XHI0MK19Tm*n#=Zw&FGxa0wT2E;H};5)64J1tMaAH?aqg-tS{v!@{zc5IK^WU-b#>#{0#88J}e4<(^8b&@OFDA1Ot>mzjSIa|RKy zUOUiQ`2)!zGk?U<;+nz!nlr#o%og9#X~+vs;6hn%kBGHZ;Dr)g#J9^J*B$DK;tD)p z1?EfeN@o7I9DxoOC)Oj*0k)LD!V1V`=5_p2TqDi_{w;wgRw57)Ggw<(H><#<5~$~~ z96YOa&=4ceNrA^BV)F_FUY=Nw3H&k<{4gS7TIPs&8t)d@P3@wN1kP)7W{6kt#+2lN z!`gfr;^f#o>W1AGoW@U`ozX_eY-Z{+Y{U<^(b?}fj+vTQr|CP`J5l7H_)hEd1+7!& zwQ>FywwK(*fy_KS_LoIqfCG5_9y^lSEv;COxh{4Ue|I8hmk5j;5wB?jYuY=ph}9TA zHg~jl;R5ZD$IHw-jkoc=a$$P#7mjFe!l~k)#itRmsrL^mx-Oa1y5t${(fN+j{{R30 literal 1604 zcmV-K2D|x*P)P000;W1^@s654Bdt00001b5ch_0Itp) z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2igc5 z2Olgl)Ot<;000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}000G_Nkl*?9en|fc zUQ0z=R4HkBXrd;mN@_46U?(_KHsA|5fOoOa`kXy`ZZmyAws65of6_=ZqtSe3ez&jC zT5JBt*4Eaj)z?v}LI}`WgAiz~u`Qea{sB5VI{1Ihe0mW@5v^9hNB{hg`T5U@q7V=$ zt&vio(v(uEor#I>aQgIVGIj>bvc47~wto_aA=j>b!iB$FU~+Pjqes7qz#xocQVq6g zUg@wuZAoxF7k)-=lJgABoD(Pb6;xO@+JrS z^5nBNajHn7gohhj+;>x)tjWR?$^86HmY0{Y?JOeK!|Yw3 zuC_cU_7&OJmBqFsK`SC?MYLrLXzj675BZPCFcVD7V7#zw~}6bjFU7?q)csWgc> zbo2z57d%oU%XrmcsB9ypBvqO)N(iF_AvAHbf!A!&h$Lwoa-`bJ?CcG?ySwS`?s+am zF5X_C8TbtCe}UyqsFoEOnc%k~JU_tmd|Iu5I0^}ZfG`ZPQx7ZN;GS=D=+I#vK3HSZ z-Q3$haQeoVE&7Fip3(8N(I}t zpM^|KO-(tDL#bHgA0NC=b90>^OpLH^Xpr?*mL)I8YBSGzn5Vn9kC!KgQ4eRi{IBcWyH` zH^hlblg2#GW-#>U2}RE9Wr?)P-}bTj(xF>19sckkYz8Tbqi4Di-l zKOvXPJqy{k2M->wy1GKWUVG9mgg^>OM@I*pGGQw+nPR4UQg*@@#g z96NRl$0_i)i|^9dYA|{F3`!|RM@M=4cW=|z+lNe&gd|CJUb{Vy;~3X8=sS zF;NulxJfCsQ*?%5U|AMYN=(zlFbp;}H@JS|I+v#}W0@u|z4U!fojUa-Cfl)4N};vh z<+APlr{l4cnnEC@+y!cEHCS0$!H@>S!^4zHCH@P!83={(*4'+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 @@ - + -- 2.20.1