From 628af855108483bd6d49932b5c2a3183012c6fbd Mon Sep 17 00:00:00 2001 From: Stefan Krulj Date: Fri, 28 Dec 2012 15:24:49 +0100 Subject: [PATCH] Hover effect for galleries done; Outputs are now W3C compilant - note there is a bug in certain versions of the markdown libary it generates `rel` and `rev` attributes for the ``-tags, which is illegal since HTML5. I've informed the developer so using the newest version you can get would fix it. Otherwise find and comment the following two lines: a.set('rel', 'footnote') backlink.set("rev", "footnote") in `examples/footnotes.py` of the library --- gallery.js | 24 ++++++------- mdx_gallery.py | 15 ++++----- pylog.py | 3 +- pylog_action_impl.py | 10 +++--- pylog_config.py | 3 ++ style.css | 80 ++++++++++++++++++++++++++++++-------------- 6 files changed, 83 insertions(+), 52 deletions(-) diff --git a/gallery.js b/gallery.js index c244171..be7eb7b 100644 --- a/gallery.js +++ b/gallery.js @@ -1,5 +1,5 @@ -var current_li; +var current_anch; function nextByTag(parent,current,name){ var next = false; @@ -34,12 +34,12 @@ function prevByTag(parent,current,name){ } function prevImg(){ - var parent = current_li.parentNode; - var prev_li = prevByTag(parent,current_li,"LI"); - if( !prev_li ){ + var parent = current_anch.parentNode; + var next_anch = prevByTag(parent,current_anch,"A"); + if( !next_anch ){ return false; } - var img = prev_li.getElementsByTagName("img")[0]; + var img = next_anch.getElementsByTagName("img")[0]; var div = document.getElementById("gallery_container"); var oldimg = div.getElementsByTagName("img"); if( oldimg ){ @@ -49,17 +49,17 @@ function prevImg(){ } } } - current_li = prev_li; + current_anch = next_anch; return false; } function nextImg(){ - var parent = current_li.parentNode; - var next_li = nextByTag(parent,current_li,"LI"); - if( !next_li ){ + var parent = current_anch.parentNode; + var next_anch = nextByTag(parent,current_anch,"A"); + if( !next_anch ){ return false; } - var img = next_li.getElementsByTagName("img")[0]; + var img = next_anch.getElementsByTagName("img")[0]; var div = document.getElementById("gallery_container"); var oldimg = div.getElementsByTagName("img"); if( oldimg ){ @@ -69,14 +69,14 @@ function nextImg(){ } } } - current_li = next_li; + current_anch = next_anch; return false; } function loadImg(src,target){ var body = document.getElementsByTagName("body")[0]; var div = document.getElementById("gallery_container"); - current_li = target.parentNode; + current_anch = target; if( !div ) { div = document.createElement('div'); diff --git a/mdx_gallery.py b/mdx_gallery.py index 69739bd..1ead036 100644 --- a/mdx_gallery.py +++ b/mdx_gallery.py @@ -6,29 +6,28 @@ import markdown, urllib class GalleryPattern(Pattern): def __init__(self,md): - Pattern.__init__(self,'!\\[(.*?)\\]\(\((.*?)\)\)',md) # + Pattern.__init__(self,'!\\[(.*?)\\]\(\((.*?)\)\)',md) # ![alt]((img1 img2 ... imgn)) def handleMatch(self, m): alt=m.group(2) imgs=m.group(3).split() - ul = markdown.util.etree.Element('ul') - ul.attrib["class"]='gallery' + span = markdown.util.etree.Element('span') + span.attrib["class"]='gallery' for img in imgs: - li = markdown.util.etree.Element('li') - ul.append(li) anch = markdown.util.etree.Element('a') anch.attrib["href"]=img anch.attrib["target"]="_blank" + anch.attrib["class"]="gallery_link" anch.attrib["onclick"]='loadImg("%s",this);return false;' % (img) - li.append(anch) + span.append(anch) img_el = markdown.util.etree.Element('img') - anch.append(img_el) img_el.attrib["src"]=img img_el.attrib["alt"]=alt + anch.append(img_el) - return ul + return span class GalleryExtension(markdown.Extension): def extendMarkdown(self, md, md_globals): diff --git a/pylog.py b/pylog.py index 7cf89ca..3176ea3 100755 --- a/pylog.py +++ b/pylog.py @@ -111,7 +111,7 @@ def disp_file_dict(d,keys): name = os.path.basename(f) if typ in prev_actions and not os.path.isdir(f): sys.stdout.write('

') + sys.stdout.write('disp='+os.path.normpath(f).replace(' ','+')+'">') print name+' - ', print datetime.fromtimestamp(int(k)).strftime(cfg.datefmt), print ' ' @@ -284,6 +284,7 @@ try: print '
' print '' comment_section.disp_comments(validdisp) else: disp_list(path) diff --git a/pylog_action_impl.py b/pylog_action_impl.py index efd34df..0ddc019 100644 --- a/pylog_action_impl.py +++ b/pylog_action_impl.py @@ -24,7 +24,7 @@ def dir_link(name,f,depth,hidden): if hidden: print ' hidden', print '">' - print ' '+name+'' + print ' '+name+'' print ' ' def file_link(name,f,depth,hidden): script = sys.argv[0][sys.argv[0].rindex('/')+1:] @@ -32,14 +32,14 @@ def file_link(name,f,depth,hidden): if hidden: print ' hidden', print '">' - print ' '+name+'' + print ' '+name+'' print ' ' def disp_txt(path): print '
' f = codecs.open(path, mode="r", encoding=cfg.encoding) txt=f.read() - print markdown.markdown(txt,extensions=cfg.markdown_extensions).encode(cfg.encoding) + print markdown.markdown(txt,extensions=cfg.markdown_extensions,content_format=cfg.content_format).encode(cfg.encoding) f.close() print '
' @@ -58,7 +58,7 @@ def disp_source(path,lang,line_numbers): txt="\t:::"+lang+'\n' for line in f.read().split('\n'): txt += "\t"+line+'\n' - print markdown.markdown(txt,extensions=cfg.markdown_extensions).encode(cfg.encoding) + print markdown.markdown(txt,extensions=cfg.markdown_extensions,content_format=cfg.content_format).encode(cfg.encoding) f.close() print '' @@ -99,7 +99,7 @@ def prev(path): def prev_txt(path): fi = codecs.open(path, mode="r", encoding=cfg.encoding) txt=get_n_words(fi,40) - print '
'+markdown.markdown(txt[0],extensions=cfg.markdown_extensions).encode(cfg.encoding) + print '
'+markdown.markdown(txt[0],extensions=cfg.markdown_extensions, content_format=cfg.content_format).encode(cfg.encoding) if txt[1]: print ' ...' print '
' diff --git a/pylog_config.py b/pylog_config.py index 0392328..fc99d68 100644 --- a/pylog_config.py +++ b/pylog_config.py @@ -38,6 +38,9 @@ encoding="utf-8" # format. See manual reference for codecs.open for # details +content_format="html5" +# The content-format generated by the markdown-library + markdown_extensions = ['math','gallery','extra','codehilite(guess_lang=False)',] # Markdown extensions: # math .......... rich subset of latex formulas between $$ c^2=a^2+b^2 $$ diff --git a/style.css b/style.css index 4a1fbfb..c01aad8 100644 --- a/style.css +++ b/style.css @@ -274,43 +274,71 @@ span.pre { font-family:monospace; } -ul.gallery { - display:block; +.gallery_link{ + transform: rotate(1deg); + display:inline-block; padding:0px; - height:90px; -} -ul.gallery li { - display:inline; + -moz-transition: all 0.5s; + -webkit-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s } +.gallery_link:nth-child(2n+1) { + transform: rotate(3deg); + -ms-transform: rotate(3deg); + -webkit-transform: rotate(3deg); + -o-transform: rotate(3deg); + -moz-transform: rotate(3deg); +} +.gallery_link:nth-child(3n+1) { + transform: rotate(-7deg); + -ms-transform: rotate(-7deg); + -webkit-transform: rotate(-7deg); + -o-transform: rotate(-7deg); + -moz-transform: rotate(-7deg); +} +.gallery_link:nth-child(7n+1) { + transform: rotate(-4deg); + -ms-transform: rotate(-4deg); + -webkit-transform: rotate(-4deg); + -o-transform: rotate(-4deg); + -moz-transform: rotate(-4deg); +} +.gallery_link:nth-child(5n+1) { + transform: rotate(-2deg); + -ms-transform: rotate(-2deg); + -webkit-transform: rotate(-2deg); + -o-transform: rotate(-2deg); + -moz-transform: rotate(-2deg); +} +.gallery_link:hover { + transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + -moz-transform: rotate(0deg); +} -ul.gallery li img{ - /*transform: rotate(2deg);*/ +.gallery_link img{ border:2px solid white; box-shadow: 0px 1px 4px black; + -webkit-box-shadow: 0px 3px 12px #444444; + -moz-box-shadow: 0px 3px 12px #444444; height:75px; margin:4px; - -moz-transition: all 0.5s; - -webkit-transition: all 0.5s; - -ms-transition: all 0.5s; - -o-transition: all 0.5s; + -moz-transition: all 0.5s; + -webkit-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; transition: all 0.5s } -ul.gallery li img:nth-of-type(even) { - transform: rotate(1deg); -} -ul.gallery li img:nth-of-type(odd) { - transform: rotate(-2deg); -} -/*ul.gallery li img:img:nth-of-type(5n) { - transform: rotate(3deg); -} -ul.gallery li img:img:nth-of-type(7n) { - transform: rotate(-1deg); -}*/ -ul.gallery li img:hover{ - transform: rotate(0deg); + +.gallery_link img:hover{ box-shadow: 0px 1px 6px black; + -webkit-box-shadow: 0px 3px 12px #444444; + -moz-box-shadow: 0px 3px 12px #444444; height:82px; margin:0px; }