Browse Source

Dépôt du squelette Moodboard

svn/attic/moodboard/109865
haplooswebdesign@free.fr 8 years ago
commit
8c754c7b9b
  1. 34
      .gitattributes
  2. 74
      apropos.html
  3. 46
      archives.html
  4. 93
      article.html
  5. 63
      articles.html
  6. 59
      contact.html
  7. BIN
      css/img/topreturn-16.png
  8. 316
      css/moodboard.css
  9. 63
      inclure/articles_mb.html
  10. 59
      inclure/articles_rubrique_mb.html
  11. 14
      inclure/feed_mb.html
  12. 20
      inclure/footer.html
  13. 16
      inclure/nav.html
  14. 6
      inclure/noscript_mb.html
  15. 44
      inclure/recents_mb.html
  16. 80
      inclure/rubriques_mb.html
  17. 439
      js/jquery.wookmark.js
  18. 14
      js/play.jquery.wookmark.js
  19. 31
      lang/moodboard_en.php
  20. 31
      lang/moodboard_fr.php
  21. 9
      lang/paquet-moodboard_en.php
  22. 10
      lang/paquet-moodboard_fr.php
  23. 674
      licence.txt
  24. 35
      modeles/archives_mb.html
  25. 20
      modeles/article_mots.html
  26. 16
      moodboard_fonctions.php
  27. 28
      paquet.xml
  28. BIN
      prive/themes/spip/images/moodboard-16.png
  29. BIN
      prive/themes/spip/images/moodboard-24.png
  30. BIN
      prive/themes/spip/images/moodboard-32.png
  31. BIN
      prive/themes/spip/images/moodboard-64.png
  32. 154
      rubrique.html
  33. 63
      rubriques.html
  34. 89
      sommaire.html

34
.gitattributes

@ -0,0 +1,34 @@
* text=auto !eol
/apropos.html -text
/archives.html -text
/article.html -text
/articles.html -text
/contact.html -text
css/img/topreturn-16.png -text
css/moodboard.css -text
inclure/articles_mb.html -text
inclure/articles_rubrique_mb.html -text
inclure/feed_mb.html -text
inclure/footer.html -text
inclure/nav.html -text
inclure/noscript_mb.html -text
inclure/recents_mb.html -text
inclure/rubriques_mb.html -text
js/jquery.wookmark.js -text
js/play.jquery.wookmark.js -text
lang/moodboard_en.php -text
lang/moodboard_fr.php -text
lang/paquet-moodboard_en.php -text
lang/paquet-moodboard_fr.php -text
/licence.txt -text
modeles/archives_mb.html -text
modeles/article_mots.html -text
/moodboard_fonctions.php -text
/paquet.xml -text
prive/themes/spip/images/moodboard-16.png -text
prive/themes/spip/images/moodboard-24.png -text
prive/themes/spip/images/moodboard-32.png -text
prive/themes/spip/images/moodboard-64.png -text
/rubrique.html -text
/rubriques.html -text
/sommaire.html -text

74
apropos.html

@ -0,0 +1,74 @@
<BOUCLE_principale(ARTICLES) {titre_mot="about_mb"}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title><:moodboard:about:>[ - (#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
[<link rel="canonical" href="(#URL_ARTICLE|url_absolue)" />]
<INCLURE{fond=inclure/head} />
</head>
<body class="pas_surlignable page_about">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
[(#REM) Contenu principal : contenu de l'article ]
<div class="wrapper hfeed">
<div class="content hentry" id="content">
<p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt; <strong class="on"><:moodboard:about:></strong></p>
<div class="cartouche">
[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
<h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{500,*}) ]#TITRE</h1>
[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]
<p class="info-publi"><abbr class="published" title="[(#DATE|date_iso)]">[(#DATE|nom_jour) ][(#DATE|affdate)]</abbr>[<span class="sep">, </span><span class="auteurs"><:par_auteur:> (#LESAUTEURS)</span>]</p>
[(#REM) Inclure le modele des liens de traductions ]
#MODELE{article_traductions}
</div>
[<div class="#EDIT{chapo} chapo surlignable">(#CHAPO|image_reduire{500,*})</div>]
[<div class="#EDIT{texte} texte surlignable">(#TEXTE|image_reduire{500,*})</div>]
[<hr /><p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
[<div class="#EDIT{ps} ps surlignable"><hr />(#PS|image_reduire{500,*})</div>]
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents,id_article, env})]
[(#REM) Petition :
La petition ayant une PAGINATION il faut absolument {env}
et pourquoi pas ajax
][(#PETITION|oui)<INCLURE{fond=inclure/petition,id_article,env,ajax} />]
[<div class="notes"><hr />(#NOTES)</div>]
[(#REM) Forum de l'article ]
<a href="#forum" name="forum" id="forum"></a>
<INCLURE{fond=inclure/forum,id_article} />
[<h2><:forum:form_pet_message_commentaire:></h2>
(#FORMULAIRE_FORUM)]
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
#FORMULAIRE_RECHERCHE
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>
</BOUCLE_principale>

46
archives.html

@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title><:moodboard:archives:>[ - (#NOM_SITE_SPIP|textebrut)]</title>
<meta name="description" content="<:moodboard:archives:>" />
<INCLURE{fond=inclure/head} />
<meta name="robots" content="none" />
</head>
<body class="pas_surlignable page_archives">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
<div class="wrapper">
<div class="content" id="content">
<p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt; <strong class="on"><:moodboard:archives:></strong></p>
<div class="cartouche">
<h1><:moodboard:archives:></h1>
</div>
#MODELE{archives_mb}
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
<INCLURE{fond=inclure/navsub} />
#FORMULAIRE_RECHERCHE
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>

93
article.html

@ -0,0 +1,93 @@
[(#REM) Exclure le mot about ]
<BOUCLE_principale(ARTICLES) {id_article} {!titre_mot="about_mb"}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
[<link rel="canonical" href="(#URL_ARTICLE|url_absolue)" />]
<INCLURE{fond=inclure/head} />
</head>
<body class="pas_surlignable page_article">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
[(#REM) Contenu principal : contenu de l'article ]
<div class="wrapper hfeed">
<div class="content hentry" id="content">
<p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_article}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ &gt; <strong class="on">(#TITRE|couper{80})</strong>]</p>
<div class="cartouche">
[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
<h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{40,*}) ]#TITRE</h1>
[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]
<p class="info-publi"><abbr class="published" title="[(#DATE|date_iso)]">[(#DATE|nom_jour) ][(#DATE|affdate)]</abbr>[<span class="sep">, </span><span class="auteurs"><:par_auteur:> (#LESAUTEURS)</span>]</p>
[(#REM) Inclure le modele des liens de traductions ]
#MODELE{article_traductions}
</div>
[<div class="#EDIT{chapo} chapo surlignable">(#CHAPO|image_reduire{500,*})</div>]
[<div class="#EDIT{texte} texte surlignable">(#TEXTE|image_reduire{500,*})</div>]
[<hr /><p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
[<div class="#EDIT{ps} ps surlignable"><hr />(#PS|image_reduire{500,*})</div>]
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents,id_article, env})]
[(#REM) Petition :
La petition ayant une PAGINATION il faut absolument {env}
et pourquoi pas ajax
][(#PETITION|oui)<INCLURE{fond=inclure/petition,id_article,env,ajax} />]
[<div class="notes"><hr />(#NOTES)</div>]
[(#REM) Forum de l'article ]
<a href="#forum" name="forum" id="forum"></a>
<INCLURE{fond=inclure/forum,id_article} />
[<h2><:forum:form_pet_message_commentaire:></h2>
(#FORMULAIRE_FORUM)]
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
<INCLURE{fond=inclure/navsub, id_rubrique} />
#FORMULAIRE_RECHERCHE
[(#REM) Articles dans la meme rubrique ]
<B_articles_rubrique>
<div class="menu">
<h2><:meme_rubrique:></h2>
<ul>
<BOUCLE_articles_rubrique(ARTICLES) {id_rubrique} {!par date} {0,10}>
<li><a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>#TITRE</a></li>
</BOUCLE_articles_rubrique>
</ul>
</div>
</B_articles_rubrique>
[(#REM) Menu de navigation mots-cles ]
#MODELE{article_mots}
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>
</BOUCLE_principale>

63
articles.html

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title><:moodboard:pins:>[ - (#NOM_SITE_SPIP|textebrut)]</title>
<meta name="description" content="<:moodboard:all_pins:>" />
<INCLURE{fond=inclure/head} />
</head>
<body class="pas_surlignable page_articles">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
<div class="wrapper hfeed">
<div class="content" id="content">
<INCLURE{fond=inclure/articles_mb,env,ajax} />
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
<INCLURE{fond=inclure/navsub} />
#FORMULAIRE_RECHERCHE
[(#REM) Liens des forums ]
<B_forums_liens>
<div class="menu menu_comments">
<h2><:derniers_commentaires:></h2>
<ul>
<BOUCLE_forums_liens(FORUMS?) {plat} {!par date} {0,5}>
[<li>[(#NOM|sinon{...})&nbsp;: ]<a href="#URL_FORUM"[ title="(#TITRE|attribut_html|couper{80})"]>(#TEXTE|couper{80})</a></li>]
</BOUCLE_forums_liens>
</ul>
</div>
</B_forums_liens>
[(#REM) Sur le Web ]
<B_syndic>
<div class="menu">
<h2><:nouveautes_web:></h2>
<ul>
<BOUCLE_syndic(SYNDIC_ARTICLES) {age<180} {!par date} {0,5}>
<li>[(#DATE|affdate_jourcourt) &ndash; ]<a href="#URL_ARTICLE"[ title="(#NOM_SITE|attribut_html|couper{80})"] class="spip_out">#TITRE</a></li>
</BOUCLE_syndic>
</ul>
</div>
</B_syndic>
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>

59
contact.html

@ -0,0 +1,59 @@
<BOUCLE_principale(AUTEURS){tout}{par id_auteur}{! email}{0,1}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title><:moodboard:contact:> - [(#NOM_SITE_SPIP|textebrut)]</title>
<meta name="description" content="<:moodboard:contact_form:>" />
<INCLURE{fond=inclure/head} />
</head>
<body class="pas_surlignable page_contact">
<div class="page">
<INCLURE{fond=inclure/header} />
<INCLURE{fond=inclure/nav,env} />
<div class="main">
<div class="wrapper">
<div class="content" id="content">
<p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt; <strong class="on"><:moodboard:contact:></strong></p>
<div class="cartouche">
<h1><:moodboard:contact:></h1>
</div>
#FORMULAIRE_ECRIRE_AUTEUR
</div><!--.content-->
</div><!--.wrapper-->
<div class="aside">
<INCLURE{fond=inclure/navsub} />
#FORMULAIRE_RECHERCHE
[(#REM) Bio ]
<div class="menu">
[(#REM) microformat vcard]
<div class="vcard">
<h2 class="#EDIT{qui} fn">#NOM</h2>
[<div class="#EDIT{bio} texte adr">(#BIO)</div>]
[<p><a href="(#URL_SITE)" class="#EDIT{hyperlien} spip_out url">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
<p><a href="[(#LOGO_AUTEUR|extraire_attribut{src})]">[(#LOGO_AUTEUR{236,0}|left||inserer_attribut{'class',photo}|inserer_attribut{alt, #NOM|attribut_html})]</a></p>
</div>
</div>
</div><!--.aside-->
</div><!--.main-->
<INCLURE{fond=inclure/footer,self=#SELF} />
</div><!--.page-->
</body>
</html>
</BOUCLE_principale>[(#INCLURE{fond=404, erreur=<:aucun_auteur:>})]<//B_principale>

BIN
css/img/topreturn-16.png

After

Width: 16  |  Height: 16  |  Size: 412 B

316
css/moodboard.css

@ -0,0 +1,316 @@
/* ------------------------------------------ */
/* */
/* MOODBOARD CSS by haploos */
/* Licence GNU/GPL */
/* http://haplooswebdesign.free.fr */
/* */
/* ------------------------------------------ */
/* -------------------------- */
/* SPIP LAYOUT */
/* -------------------------- */
.page { width: 940px; }
.texte { text-align: justify; }
.page_sommaire .page,
.page_articles .page,
.page_rubriques .page,
.page_rubrique .page { padding-left: 2%; padding-right: 2%; width: inherit; }
.page_sommaire .wrapper,
.page_articles .wrapper,
.page_rubriques .wrapper,
.page_rubrique .wrapper { width: 80%; }
.page_sommaire .aside,
.page_articles .aside,
.page_rubriques .aside,
.page_rubrique .aside { width: 18%; }
.page_sommaire #formulaire_recherche,
.page_articles #formulaire_recherche,
.page_rubriques #formulaire_recherche,
.page_rubrique #formulaire_recherche { right: 3%; }
.page_about .wrapper { width: 100%; }
.footer .colophon { width: 60%; }
.footer .generator { color: #AAAAAA; float: right; margin-bottom: 0; text-align: right; width: 40%; }
.generator a { color: #AAAAAA; }
.generator a:focus,
.generator a:hover,
.generator a:active { color: #990000; }
/* -------------------------- */
/* MOODBOARD STYLE */
/* -------------------------- */
/* NO SCRIPT
----------------------------- */
.noscript_mb {
border: 2px dashed #F57900;
font-size: 18px;
line-height: 24px;
margin: 2em 4% 6em;
padding: 0.75em;
text-align: center;
}
/* FEED
----------------------------- */
.feed_mb { margin: 5px 0; }
.logo_feed_mb { vertical-align: text-bottom; }
.text_feed_mb {}
/* INFOBAR
----------------------------- */
.infobar_md {
margin: 0 0 1.5em;
padding: 0 10px;
}
.content_infobar_md {
float: left;
padding: 4px 0;
width: 100%;
}
.tri_mb {
float: left;
margin-top: 5px;
min-width: 216px;
text-align: left;
width: 50%;
}
.pagination_mb {
float: right;
margin-top: 5px;
min-width: 216px;
text-align: right;
width: 50%;
}
/* .page_sommaire */
.page_sommaire .pagination_mb {
float: left;
text-align: center;
width: 100%;
}
.page_sommaire .pagination_mb a {
background: #EED;
text-decoration: none;
}
.page_sommaire .pagination_mb a:focus,
.page_sommaire .pagination_mb a:hover,
.page_sommaire .pagination_mb a:active {
background-color: #900;
color: #FFF;
text-decoration: none;
}
.page_sommaire .pagination_mb .on {
background: none repeat scroll 0 0 #222222;
color: #FFFFFF;
font-weight: bold;
}
.page_sommaire .pagination_mb a, .page_sommaire .pagination_mb .on {
margin: 0 1px;
padding: 0.2em 0.5em;
}
.page_sommaire .pagination_mb .sep { display: none; }
/* PINS
----------------------------- */
#articles_mb {}
#pins_mb { list-style-type: none; margin: 0 0 2em; position: relative;}
/* .pin_mb */
.pin_mb { background: none repeat scroll 0 0 #F8F8F8; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); cursor: pointer; display: none; width: 236px; }
.pin_mb a { color: #333333; display: inline-block; width: 236px;}
.pin_mb a:focus, .pin_mb a:hover, .pin_mb a:active { background-color: #FFFFFF; border-radius: 3px 3px 3px 3px; color: #333333; display: inline-block; opacity: 0.85; text-decoration: none; width: 236px; }
.pin_mb h2 { font-family: Arial,Helvetica,sans-serif; font-size: 0.9em; font-variant: small-caps; line-height: 1.2em; margin: 15px; text-align: left; width: 216px; }
.pin_mb h3 { color: #6F777D; font-size: 0.7em; margin: 0 15px 15px; text-align: left; width: 206px;}
.pin_mb small { border-top: 1px solid #E7E7E7; color: #AAAAAA; display: inline-block; font-size: 0.68em; margin: 0; padding: 4px 15px 8px; text-align: left; width: 206px;}
/* .logo_pin_mb */
.logo_pin_mb { display: inline-block; margin: 0; padding: 0; width: 236px; }
.logo_pin_mb img { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px 3px 0 0; display: block; margin: 0 auto; padding: 0; width: 236px; }
.logo_pin_mb img:hover {}
/* .text_pin_mb */
.text_pin_mb { display: inline-block; margin: 0; padding: 0; width: 236px; }
/* BOARDS
----------------------------- */
#rubriques_mb {}
/* .boards_mb */
.boards_mb { margin: 0 auto; position: relative;}
/* .board_mb */
.board_mb { height: 249px; width: 236px; }
.board_mb a { padding: 10px; width: 216px;}
.board_mb a:focus, .board_mb a:hover, .board_mb a:active { border-radius: 3px 3px 3px 3px; width: 216px; }
/* .text_board_mb */
.text_board_mb { display: block; height: auto; margin: 0 3px 6px; position: relative; text-align: center; }
.text_board_mb h2 { font-size: 18px; font-weight: bold; margin: 0; }
/* .logo_board_mb */
.logo_board_mb { clear: both;
height: 146px;
overflow: hidden;
position: relative;
width: 216px; }
.logo_board_mb img { border-radius: 3px 3px 3px 3px; display: block; margin: 0 auto;}
/* .thumbs_board_mb */
.thumbs_board_mb { height: 51px; margin: 4px 0 0;}
.thumbs_board_mb ul {}
.thumbs_board_mb ul li:first-child { margin-left: 0; }
.thumbs_board_mb ul li { display: inline;
float: left;
height: 51px;
margin-left: 4px;
position: relative;
width: 51px; }
.thumbs_board_mb img { border-radius: 3px 3px 3px 3px; }
/* .hovermask_mb */
.hovermask_mb {
border-radius: 3px 3px 3px 3px;
bottom: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.33) inset;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 80;
}
/* ARCHIVES
----------------------------- */
.archives_mb { float: left; margin-bottom: 1em; }
.archives_mb h2 { font-weight: bold; margin-bottom: 0.5em; }
.archives_mb h3 { font-style: italic; margin-bottom: 0; }
.archives_mb ul { margin: 0 0 1em 1em; }
.archives_mb ul li { list-style-type: none; }
.archives_mb ul li ul { list-style-type: none; }
.archives_mb ul li ul li { list-style-type: none; }
.archives_mb ul li ul li ul { list-style-type: none; }
.archives_mb ul li ul li ul li { line-height: normal; list-style-type: circle; margin-left: 1.2em; }
/* FOOTER
----------------------------- */
.topreturn_mb {
display: none;
position: fixed;
right: 5%;
bottom: 0;
white-space: nowrap;
z-index: 100;
}
.button_topreturn_mb {
background-color: #990000;
border: 0 none;
border-radius: 0.3em 0.3em 0 0;
font-weight: bold;
margin: 0;
opacity: 0.7;
padding: 0.4em 1em;
}
.topreturn_mb a {
border-radius: 0.3em 0.3em 0 0;
color: #FFFFFF;
opacity: 0.7;
text-decoration: none;
}
.topreturn_mb a:focus,
.topreturn_mb a:hover,
.topreturn_mb a:active {
background-color: #990000;
text-decoration: none;
}
/* -------------------------- */
/* AFFICHAGE */
/* SUR PETIT ECRAN */
/* -------------------------- */
@media (max-width: 640px) {
/* HEADER
----------- */
.header { padding-right: 0; }
/* INFOBAR
----------- */
.tri_mb {
text-align: center;
width: 100%;
}
.pagination_mb {
text-align: center;
width: 100%;
}
/* WRAPPER
----------- */
.wrapper {
height: auto !important;
max-width: 100% !important;
}
.content img {
height: auto !important;
max-width: 100% !important;
}
.texte { text-align: left; }
.spip_documents_right { max-width: 100% !important; }
.spip_documents_left { max-width: 100% !important; }
.spip_documents_center { max-width: 100% !important; }
/* PINS
----------- */
#pins_mb { margin: 0 0 2em !important;}
/* .pin_mb */
.pin_mb { width: 236px !important; }
.pin_mb a { width: 236px !important;}
.pin_mb a:focus, .pin_mb a:hover, .pin_mb a:active { width: 236px !important; }
.pin_mb h2 { margin: 15px !important; width: 216px !important; }
.pin_mb h3 { margin: 0 15px 15px !important; width: 206px !important;}
.pin_mb small { margin: 0 !important; padding: 4px 15px 8px !important; width: 206px !important;}
/* .logo_pin_mb */
.logo_pin_mb { margin: 0 !important; padding: 0 !important; width: 236px !important; }
.logo_pin_mb img { height: inherit !important; margin: 0 auto !important; padding: 0 !important; width: 236px !important; }
.logo_pin_mb img:hover {}
/* .text_pin_mb */
.text_pin_mb { margin: 0 !important; padding: 0 !important; width: 236px !important; }
/* BAORDS
----------- */
.text_board_mb h2 { margin: 0 !important; }
/* FOOTER
----------------------------- */
.topreturn_mb { display: inherit !important; }
}
/* end */

63
inclure/articles_mb.html

@ -0,0 +1,63 @@
[(#REM) Ordre de tri des articles ]
#SET{defaut_tri,#ARRAY{
date,-1,
titre,1,
popularite,-1,
hasard,
}}
<B_articles_mb>
<div id="articles_mb">
#ANCRE_PAGINATION
<strong class="h1"><:moodboard:all_pins:> (#GRAND_TOTAL)</strong>
[(#REM) Si javascript n'est pas activé sur le navigateur ]
<INCLURE{fond=inclure/noscript_mb} />
[(#REM) Info Barre ]
<div class="clearfix infobar_md">
<div class="content_infobar_md">
<div class="tri_mb">
#TRI{date,'Date',ajax}&nbsp;|
#TRI{titre,'Titre',ajax}&nbsp;|
#TRI{popularite,'Vues',ajax}&nbsp;|
#TRI{hasard,'Hazard',ajax}
</div>
[<div class="pagination_mb">(#PAGINATION|{prive})</div>]
</div>
</div>
[(#REM) Affichage des articles façon moodboard ]
<ul id="pins_mb">
[(#REM) Exclure les mots about et offscreen ]
<BOUCLE_articles_mb(ARTICLES){tri date,#GET{defaut_tri}}{!titre_mot == ^(about_mb|offscreen_mb)$}{pagination 20}>
<li class="hentry pin_mb" style="display: list-item;">
[(#REM) Si pas de logo d'article récupérer la première image ]
#SET{logo_document,''}
<BOUCLE_doc(DOCUMENTS) {id_article}{extension IN png,jpg,gif}{0,1}>
#SET{logo_document,#FICHIER}
</BOUCLE_doc>
<a href="[(#URL_ARTICLE)]" rel="bookmark">
[<div class="logo_pin_mb" style="width: 236px; height: [(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]px;">
<img width="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|largeur)]" height="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]" alt="[(#TITRE|textebrut)]" src="(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|extraire_attribut{src}|url_absolue)" />
</div>]
<div class="text_pin_mb">
<h2 class="h2 entry-title">#TITRE</h2>
[<h3 class="#EDIT{soustitre} soustitre entry-content">(#SOUSTITRE)</h3>]
</div>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|nom_jour) ][(#DATE|affdate)]</abbr></small>
</a>
</li>
</BOUCLE_articles_mb>
</ul>
</div><!-- #articles_mb -->
</B_articles_mb>
<!-- Wookmark : lancement du script de mise en page des articles -->
<script src="[(#CHEMIN{js/play.jquery.wookmark.js})]" type="text/javascript"></script>
<!-- Fin Wookmark -->

59
inclure/articles_rubrique_mb.html

@ -0,0 +1,59 @@
[(#REM) Ordre de tri des articles ]
#SET{defaut_tri,#ARRAY{
date,-1,
titre,1,
popularite,-1,
hasard,
}}
<B_articles_rubrique_mb>
<div id="articles_mb">
#ANCRE_PAGINATION
[(#REM) Si javascript n'est pas activé sur le navigateur ]
<INCLURE{fond=inclure/noscript_mb} />
[(#REM) Info Barre ]
<div class="clearfix infobar_md">
<div class="content_infobar_md">
<div class="tri_mb">
#TRI{date,'Date',ajax}&nbsp;|
#TRI{titre,'Titre',ajax}&nbsp;|
#TRI{popularite,'Vues',ajax}&nbsp;|
#TRI{hasard,'Hazard',ajax}
</div>
[<div class="pagination_mb">(#PAGINATION|{prive})</div>]
</div>
</div>
[(#REM) Affichage des articles façon moodboard ]
<ul id="pins_mb">
[(#REM) Exclure les mots about et offscreen ]
<BOUCLE_articles_rubrique_mb(ARTICLES){!titre_mot == ^(about_mb|offscreen_mb)$}{id_rubrique}{tri date,#GET{defaut_tri}}{pagination 20}>
<li class="hentry pin_mb" style="display: list-item;">
[(#REM) Si pas de logo d'article récupérer la première image ]
#SET{logo_document,''}
<BOUCLE_doc(DOCUMENTS) {id_article}{extension IN png,jpg,gif} {par num titre, titre}{0,1}>
#SET{logo_document,#FICHIER}
</BOUCLE_doc>
<a href="[(#URL_ARTICLE)]" rel="bookmark">
[<div class="logo_pin_mb" style="width: 236px; height: [(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]px;">
<img width="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|largeur)]" height="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]" alt="[(#TITRE|textebrut)]" src="(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|extraire_attribut{src}|url_absolue)" />
</div>]
<div class="text_pin_mb">
<h2 class="h2 entry-title">#TITRE</h2>
[<h3 class="#EDIT{soustitre} soustitre entry-content">(#SOUSTITRE)</h3>]
</div>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|nom_jour) ][(#DATE|affdate)]</abbr></small>
</a>
</li>
</BOUCLE_articles_rubrique_mb>
</ul>
</div><!-- #articles_mb -->
</B_articles_rubrique_mb>
<!-- Wookmark : lancement du script de mise en page des articles -->
<script src="[(#CHEMIN{js/play.jquery.wookmark.js})]" type="text/javascript"></script>
<!-- Fin Wookmark -->

14
inclure/feed_mb.html

@ -0,0 +1,14 @@
<div class="feed_mb">
<img class="logo_feed_mb" alt="<:icone_suivi_activite:>" width="16" height="16" src="#CHEMIN{prive/themes/spip/images/rss-16.png}" />
[(#REM) Si page d'accueil = lien vers le flux RSS de tout le site ][(#ENV{home,'non'}|=={oui}|?{
<a rel="alternate" target="_blank" href="[(#URL_PAGE{backend})]">
<:moodboard:follow_all:>
</a>,
[(#REM) Si rubrique = lien vers le flux RSS de la rubrique ]
<a rel="alternate" target="_blank" href="[(#URL_PAGE{backend}|parametre_url{id_rubrique,#ID_RUBRIQUE})]">
<:moodboard:follow:>
</a>})]
</div>

20
inclure/footer.html

@ -0,0 +1,20 @@
<div class="footer clearfix">
<p class="colophon">
<:moodboard:licence:><BOUCLE_annee(ARTICLES){par date}{0,1}>[(#DATE|annee)]</BOUCLE_annee>-</B_annee>[(#DATE|annee) ]#NOM_SITE_SPIP
<br />
[(#SESSION{id_auteur}|non)<a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]" rel="nofollow" class='login_modal'><:lien_connecter:></a>][
(#AUTORISER{ecrire})<a href="#EVAL{_DIR_RESTREINT_ABS}"><:espace_prive:></a>][
(#SESSION{id_auteur}|oui) | <a href="#URL_LOGOUT" rel="nofollow"><:icone_deconnecter:></a>]
</p>
<p class="generator">
<small >
<:moodboard:powered_by:><a class="spip_out" rel="generator" href="http://www.spip.net/">SPIP</a><:moodboard:with:><a href="http://contrib.spip.net/Moodboard">Moodboard</a><:moodboard:by:><a href="http://haplooswebdesign.free.fr">haploos</a>
</small>
</p>
</div>
[(#REM) Bouton retour en haut pour les petits ecrans ]
<div class="topreturn_mb">
<a class="button_topreturn_mb" href="#top">
<img src="#CHEMIN{css/img/topreturn-16.png}" />
</a>
</div>

16
inclure/nav.html

@ -0,0 +1,16 @@
<div class="nav clearfix" id="nav">
<ul>
<li><a rel="contents" href="#URL_PAGE{articles}"><:moodboard:pins:></a></li>
<B_rubriques>
<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}> </BOUCLE_rubriques>
<li class="[ (#TOTAL_BOUCLE|=={1}|oui)none]"><a rel="contents" href="#URL_PAGE{rubriques}"><:moodboard:boards:></a></li>
</B_rubriques>
<li><a rel="contents" href="#URL_PAGE{archives}"><:moodboard:archives:></a></li>
<B_about>
<BOUCLE_about(MOTS){titre_mot="about_mb"}>
<li><a rel="contents" href="#URL_PAGE{apropos}"><:moodboard:about:></a></li>
</BOUCLE_about>
</B_about>
<li><a rel="nofollow" href="#URL_PAGE{contact}"><:moodboard:contact:></a></li>
</ul>
</div>

6
inclure/noscript_mb.html

@ -0,0 +1,6 @@
<noscript>
<div class="noscript_mb">
<:moodboard:noscript_text:><a href="http://core.spip.org/">core.spip.org</a>
<style>#pins_mb{display:none;}.infobar_md{display:none;}.pagination_mb{display:none;}</style>
</div>
</noscript>

44
inclure/recents_mb.html

@ -0,0 +1,44 @@
<B_recents_mb>
<div id="recents_mb">
<strong class="h1"><:moodboard:recents_pins:></strong>
[(#REM) Si javascript n'est pas activé sur le navigateur ]
<INCLURE{fond=inclure/noscript_mb} />
#ANCRE_PAGINATION
[(#REM) Affichage des articles façon moodboard ]
<ul id="pins_mb">
[(#REM) Exclure les mots about et offscreen ]
<BOUCLE_recents_mb(ARTICLES){!titre_mot == ^(about_mb|offscreen_mb)$}{!par date}{pagination}>
<li class="hentry pin_mb" style="display: list-item;">
[(#REM) Si pas de logo d'article récupérer la première image ]
#SET{logo_document,''}
<BOUCLE_doc(DOCUMENTS) {id_article}{extension IN png,jpg,gif}{0,1}>
#SET{logo_document,#FICHIER}
</BOUCLE_doc>
<a href="[(#URL_ARTICLE)]" rel="bookmark">
[<div class="logo_pin_mb" style="width: 236px; height: [(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]px;">
<img width="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|largeur)]" height="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|hauteur)]" alt="[(#TITRE|textebrut)]" src="(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_reduire{236,*}|extraire_attribut{src}|url_absolue)" />
</div>]
<div class="text_pin_mb">
<h2 class="h2 entry-title">#TITRE</h2>
[<h3 class="#EDIT{soustitre} soustitre entry-content">(#SOUSTITRE)</h3>]
</div>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|nom_jour) ][(#DATE|affdate)]</abbr></small>
</a>
</li>
</BOUCLE_recents_mb>
</ul>
[<p class="pagination_mb">(#PAGINATION|{precedent_suivant})</p>]
</div><!-- #recents_mb -->
</B_recents_mb>
<!-- Wookmark : lancement du script de mise en page des articles -->
<script src="[(#CHEMIN{js/play.jquery.wookmark.js})]" type="text/javascript"></script>
<!-- Fin Wookmark -->

80
inclure/rubriques_mb.html

@ -0,0 +1,80 @@
[(#REM) Ordre de tri des rubriques ]
#SET{defaut_tri,#ARRAY{
date,-1,
titre,1,
hasard,
}}
<B_rubriques_mb>
<div id="rubriques_mb">
#ANCRE_PAGINATION
<strong class="h1"><:moodboard:all_categories:> (#GRAND_TOTAL)</strong>
[(#REM) Si javascript n'est pas activé sur le navigateur ]
<INCLURE{fond=inclure/noscript_mb} />
[(#REM) Info Barre ]
<div class="clearfix infobar_md">
<div class="content_infobar_md">
<div class="tri_mb">
#TRI{date,'Date',ajax}&nbsp;|
#TRI{titre,'Titre',ajax}&nbsp;|
#TRI{hasard,'Hazard',ajax}
</div>
[<div class="pagination_mb">(#PAGINATION|{prive})</div>]
</div>
</div>
[(#REM) Affichage des rubriques façon moodboard ]
<ul id="pins_mb" class="boards_mb">
<BOUCLE_rubriques_mb(RUBRIQUES){tri date,#GET{defaut_tri}}{pagination 20}>
<li class="hentry board_mb pin_mb">
<a href="[(#URL_RUBRIQUE)]" rel="bookmark">
<div class="text_board_mb">
<h2 class="h2 entry-title">[(#TITRE|couper{28}|textebrut)]</h2>
</div>
<div class="logo_board_mb">
[(#REM) Exclure les mots about et offscreen ]
<BOUCLE_logo_rubriques_mb(ARTICLES){!titre_mot == ^(about_mb|offscreen_mb)$}{id_rubrique}{!par date} {0,1}>
[(#REM) Si pas de logo d'article récupérer la première image ]
#SET{logo_document,''}
<BOUCLE_doc_logo(DOCUMENTS) {id_article}{extension IN png,jpg,gif}{0,1}>
#SET{logo_document,#FICHIER}
</BOUCLE_doc_logo>
<span class="hovermask_mb"></span>
<img width="216" height="146" alt="[(#TITRE|textebrut)]" src="[(#LOGO_ARTICLE|sinon{#GET{logo_document}}||image_passe_partout{216,146}|image_recadre{216,146}|extraire_attribut{src}|url_absolue)]" />
</BOUCLE_logo_rubriques_mb>
</div>
<div class="thumbs_board_mb">
<ul>
[(#REM) Exclure les mots about et offscreen ]
<BOUCLE_thumbs_rubriques_mb(ARTICLES){!titre_mot == ^(about_mb|offscreen_mb)$}{id_rubrique}{!par date} {1,4}>
<li>
[(#REM) Si pas de logo d'article récupérer la première image ]
#SET{thumbs_document,''}
<BOUCLE_doc_thumbs(DOCUMENTS){id_article}{extension IN png,jpg,gif}{0,1}>
#SET{thumbs_document,#FICHIER}
</BOUCLE_doc_thumbs>
<span class="hovermask_mb"></span>
<img width="51" height="51" alt="[(#TITRE|textebrut)]" src="[(#LOGO_ARTICLE|sinon{#GET{thumbs_document}}||image_passe_partout{51,51}|image_recadre{51,51}|extraire_attribut{src}|url_absolue)]" />
</li>
</BOUCLE_thumbs_rubriques_mb>
</ul>
</div>
</a>
</li>
</BOUCLE_rubriques_mb>
</ul>
</div><!-- #rubriques_mb -->
</B_rubriques_mb>
<!-- Wookmark : lancement du script de mise en page des rubriques -->
<script src="[(#CHEMIN{js/play.jquery.wookmark.js})]" type="text/javascript"></script>
<!-- Fin Wookmark -->

439
js/jquery.wookmark.js

@ -0,0 +1,439 @@
/*!
jQuery Wookmark plugin
@name jquery.wookmark.js
@author Christoph Ono (chri@sto.ph or @gbks)
@author Sebastian Helzle (sebastian@helzle.net or @sebobo)
@version 1.3.0
@date 6/27/2013
@category jQuery plugin
@copyright (c) 2009-2013 Christoph Ono (www.wookmark.com)
@license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
(function (factory) {
if (typeof define === 'function' && define.amd)
define(['jquery'], factory);
else
factory(jQuery);
}(function ($) {
var Wookmark, defaultOptions, __bind;
__bind = function(fn, me) {
return function() {
return fn.apply(me, arguments);
};
};
// Wookmark default options
defaultOptions = {
align: 'center',
container: $('body'),
offset: 2,
autoResize: false,
itemWidth: 0,
flexibleWidth: 0,
resizeDelay: 50,
onLayoutChanged: undefined,
fillEmptySpace: false
};
Wookmark = (function(options) {
function Wookmark(handler, options) {
// Instance variables.
this.handler = handler;
this.columns = this.containerWidth = this.resizeTimer = null;
this.activeItemCount = 0;
this.direction = 'left';
this.itemHeightsDirty = true;
this.placeholders = [];
$.extend(true, this, defaultOptions, options);
// Bind instance methods
this.update = __bind(this.update, this);
this.onResize = __bind(this.onResize, this);
this.onRefresh = __bind(this.onRefresh, this);
this.getItemWidth = __bind(this.getItemWidth, this);
this.layout = __bind(this.layout, this);
this.layoutFull = __bind(this.layoutFull, this);
this.layoutColumns = __bind(this.layoutColumns, this);
this.filter = __bind(this.filter, this);
this.clear = __bind(this.clear, this);
this.getActiveItems = __bind(this.getActiveItems, this);
this.refreshPlaceholders = __bind(this.refreshPlaceholders, this);
// Collect filter data
var i = j = 0, filterClasses = {}, itemFilterClasses;
for (; i < handler.length; i++) {
$item = handler.eq(i);
// Read filter classes
itemFilterClasses = $item.data('filterClass');
// Globally store each filter class as object and the fitting items in the array
if (typeof itemFilterClasses == 'object' && itemFilterClasses.length > 0) {
for (j = 0; j < itemFilterClasses.length; j++) {
filterClass = $.trim(itemFilterClasses[j]).toLowerCase();
if (!(filterClass in filterClasses)) {
filterClasses[filterClass] = [];
}
filterClasses[filterClass].push($item[0]);
}
}
};
this.filterClasses = filterClasses;
// Listen to resize event if requested.
if (this.autoResize) {
$(window).bind('resize.wookmark', this.onResize);
};
this.container.bind('refreshWookmark', this.onRefresh);
};
// Method for updating the plugins options
Wookmark.prototype.update = function(options) {
this.itemHeightsDirty = true;
$.extend(true, this, options);
};
// This timer ensures that layout is not continuously called as window is being dragged.
Wookmark.prototype.onResize = function() {
clearTimeout(this.resizeTimer);
this.itemHeightsDirty = this.flexibleWidth != 0;
this.resizeTimer = setTimeout(this.layout, this.resizeDelay);
};
// Marks the items heights as dirty and does a relayout
Wookmark.prototype.onRefresh = function() {
this.itemHeightsDirty = true;
this.layout();
};
/**
* Filters the active items with the given string filters.
* @param filters array of string
* @param mode 'or' or 'and'
*/
Wookmark.prototype.filter = function(filters, mode) {
var activeFilters = [], activeFiltersLength, activeItems = $(),
i, j, k, filter;
filters = filters || [];
mode = mode || 'or';
if (filters.length) {
// Collect active filters
for (i = 0; i < filters.length; i++) {
filter = $.trim(filters[i].toLowerCase());
if (filter in this.filterClasses) {
activeFilters.push(this.filterClasses[filter]);
}
}
// Get items for active filters with the selected mode
activeFiltersLength = activeFilters.length
if (mode == 'or' || activeFiltersLength == 1) {
// Set all items in all active filters active
for (i = 0; i < activeFiltersLength; i++) {
activeItems = activeItems.add(activeFilters[i]);
}
} else if (mode == 'and') {
var shortestFilter = activeFilters[0],
itemValid = true, foundInFilter,
currentItem, currentFilter;
// Find shortest filter class
for (i = 1; i < activeFiltersLength; i++) {
if (activeFilters[i].length < shortestFilter.length) {
shortestFilter = activeFilters[i];
}
}
// Iterate over shortest filter and find elements in other filter classes
for (i = 0; i < shortestFilter.length; i++) {
currentItem = shortestFilter[i];
itemValid = true;
for (j = 0; j < activeFilters.length && itemValid; j++) {
currentFilter = activeFilters[j];
if (shortestFilter == currentFilter) continue;
// Search for current item in each active filter class
for (k = 0, foundInFilter = false; k < currentFilter.length && !foundInFilter; k++) {
foundInFilter = currentFilter[k] == currentItem;
}
itemValid &= foundInFilter;
}
itemValid && activeItems.push(shortestFilter[i]);
}
}
// Hide inactive items
this.handler.not(activeItems).addClass('inactive');
} else {
// Show all items if no filter is selected
activeItems = this.handler;
}
// Show active items
activeItems.removeClass('inactive');
// Unset columns and refresh grid for a full layout
this.columns = null;
this.layout();
};
/**
* Creates or updates existing placeholders to create columns of even height
*/
Wookmark.prototype.refreshPlaceholders = function(columnWidth, sideOffset) {
var i = this.placeholders.length,
$placeholder, $lastColumnItem,
columnsLength = this.columns.length, column,
placeholderBorderWidth,
height, width, top,
containerHeight = this.container.outerHeight();
for (; i < columnsLength; i++) {
$placeholder = $('<div class="wookmark-placeholder"/>').appendTo(this.container);
this.placeholders.push($placeholder);
}
innerOffset = this.offset + parseInt(this.placeholders[0].css('borderWidth')) * 2;
for (i = 0; i < this.placeholders.length; i++) {
$placeholder = this.placeholders[i];
column = this.columns[i];
if (i >= columnsLength || !column[column.length - 1]) {
$placeholder.css('display', 'none');
} else {
$lastColumnItem = column[column.length - 1];
if (!$lastColumnItem) continue;
top = $lastColumnItem.data('wookmark-top') + $lastColumnItem.data('wookmark-height') + this.offset;
height = containerHeight - top - innerOffset;
$placeholder.css({
position: 'absolute',
display: height > 0 ? 'block' : 'none',
left: i * columnWidth + sideOffset,
top: top,
width: columnWidth - innerOffset,
height: height
});
}
}
};
// Method the get active items which are not disabled and visible
Wookmark.prototype.getActiveItems = function() {
return this.handler.not('.inactive');
};
// Method to get the standard item width
Wookmark.prototype.getItemWidth = function() {
var itemWidth = this.itemWidth,
containerWidth = this.container.width(),
firstElement = this.handler.eq(0),
flexibleWidth = this.flexibleWidth;
if (this.itemWidth === undefined || this.itemWidth === 0 && !this.flexibleWidth) {
itemWidth = firstElement.outerWidth();
}
else if (typeof this.itemWidth == 'string' && this.itemWidth.indexOf('%') >= 0) {
itemWidth = parseFloat(this.itemWidth) / 100 * containerWidth;
}
// Calculate flexible item width if option is set
if (flexibleWidth) {
if (typeof flexibleWidth == 'string' && flexibleWidth.indexOf('%') >= 0) {
flexibleWidth = parseFloat(flexibleWidth) / 100 * containerWidth
- firstElement.outerWidth() + firstElement.innerWidth();
}
var columns = ~~(1 + containerWidth / (flexibleWidth + this.offset)),
columnWidth = (containerWidth - (columns - 1) * this.offset) / columns;
itemWidth = Math.max(itemWidth, ~~(columnWidth));
// Stretch items to fill calculated width
this.handler.css('width', itemWidth);
}
return itemWidth;
};
// Main layout method.
Wookmark.prototype.layout = function() {
// Do nothing if container isn't visible
if (!this.container.is(":visible")) return;
// Calculate basic layout parameters.
var columnWidth = this.getItemWidth() + this.offset,
containerWidth = this.container.width(),
columns = ~~((containerWidth + this.offset) / columnWidth),
offset = maxHeight = i = 0,
activeItems = this.getActiveItems(),
activeItemsLength = activeItems.length,
$item;
// Cache item height
if (this.itemHeightsDirty) {
for (; i < activeItemsLength; i++) {
$item = activeItems.eq(i);
$item.data('wookmark-height', $item.outerHeight());
}
this.itemHeightsDirty = false;
}
// Use less columns if there are to few items
columns = Math.max(1, Math.min(columns, activeItemsLength));
// Calculate the offset based on the alignment of columns to the parent container
if (this.align == 'left' || this.align == 'right') {
offset = ~~((columns / columnWidth + this.offset) >> 1);
} else {
offset = ~~(.5 + (containerWidth - (columns * columnWidth - this.offset)) >> 1);
}
// Get direction for positioning
this.direction = this.align == 'right' ? 'right' : 'left';
// If container and column count hasn't changed, we can only update the columns.
if (this.columns != null && this.columns.length == columns && this.activeItemCount == activeItemsLength) {
maxHeight = this.layoutColumns(columnWidth, offset);
} else {
maxHeight = this.layoutFull(columnWidth, columns, offset);
}
this.activeItemCount = activeItemsLength;
// Set container height to height of the grid.
this.container.css('height', maxHeight);
// Update placeholders
if (this.fillEmptySpace) {
this.refreshPlaceholders(columnWidth, offset);
}
if (this.onLayoutChanged !== undefined && typeof this.onLayoutChanged === 'function') {
this.onLayoutChanged();
}
};
/**
* Perform a full layout update.
*/
Wookmark.prototype.layoutFull = function(columnWidth, columns, offset) {
var item, top, left, i = 0, k = 0 , j = 0,
activeItems = this.getActiveItems(),
length = activeItems.length,
shortest = null, shortestIndex = null,
itemCSS = {position: 'absolute'},
sideOffset, heights = [],
leftAligned = this.align == 'left' ? true : false;
this.columns = [];
// Prepare arrays to store height of columns and items.
while (heights.length < columns) {
heights.push(0);
this.columns.push([]);
}
// Loop over items.
for (; i < length; i++ ) {
$item = activeItems.eq(i);
// Find the shortest column.
shortest = heights[0];
shortestIndex = 0;
for (k = 0; k < columns; k++) {
if (heights[k] < shortest) {
shortest = heights[k];
shortestIndex = k;
}
}
// stick to left side if alignment is left and this is the first column
if (shortestIndex == 0 && leftAligned) {
sideOffset = 0;
} else {
sideOffset = shortestIndex * columnWidth + offset;
}
// Position the item.
itemCSS[this.direction] = sideOffset;
itemCSS.top = shortest;
$item.css(itemCSS).data('wookmark-top', shortest);
// Update column height and store item in shortest column
heights[shortestIndex] += $item.data('wookmark-height') + this.offset;
this.columns[shortestIndex].push($item);
}
// Return longest column
return Math.max.apply(Math, heights);
};
/**
* This layout method only updates the vertical position of the
* existing column assignments.
*/
Wookmark.prototype.layoutColumns = function(columnWidth, offset) {
var heights = [],
i = 0, k = 0,
column, item, itemCSS, sideOffset;
for (; i < this.columns.length; i++) {
heights.push(0);
column = this.columns[i];
sideOffset = i * columnWidth + offset;
currentHeight = heights[i];
for (k = 0; k < column.length; k++) {
$item = column[k];
itemCSS = {
top: currentHeight
};
itemCSS[this.direction] = sideOffset;
$item.css(itemCSS).data('wookmark-top', currentHeight);
currentHeight += $item.data('wookmark-height') + this.offset;
}
heights[i] = currentHeight;
}
// Return longest column
return Math.max.apply(Math, heights);
};
/**
* Clear event listeners and time outs.
*/
Wookmark.prototype.clear = function() {
clearTimeout(this.resizeTimer);
$(window).unbind('resize.wookmark', this.onResize);
this.container.unbind('refreshWookmark', this.onRefresh);
};
return Wookmark;
})();
$.fn.wookmark = function(options) {
// Create a wookmark instance if not available
if (!this.wookmarkInstance) {
this.wookmarkInstance = new Wookmark(this, options || {});
} else {
this.wookmarkInstance.update(options || {});
}
// Apply layout
this.wookmarkInstance.layout();
// Display items (if hidden) and return jQuery object to maintain chainability
return this.show();
};
}));

14
js/play.jquery.wookmark.js

@ -0,0 +1,14 @@
var instance = null;
var gbks = gbks || {};
$('.pin_mb').wookmark({
align: 'center',
autoResize: true,
container: $('#pins_mb'),
itemWidth: 236,
offset: 14,
resizeDelay: 50,
flexibleWidth: 0,
onLayoutChanged: undefined,
fillEmptySpace: false
});

31
lang/moodboard_en.php

@ -0,0 +1,31 @@
<?
$GLOBALS[$GLOBALS['idx_lang']] = array(
// A
'about' => "About",
'all_categories' => "All sections",
'all_pins' => "All articles",
'archives' => "Archives",
// B
'boards' => "Sections",
'by' => " by ",
// C
'contact' => "Contact",
'contact_form' => "Contact form & address",
// F
'follow' => "Follow this section",
'follow_all' => "Follow this website",
// L
'licence' => "&copy; ",
// N
'noscript_text' => "Scripting is not enabled in your browser,
if you are using a plugin like NoScript &ldquo; High five &rdquo;!
This CMS's code is open source and you can view it on&nbsp;",
// P
'pins' => "Articles",
'powered_by' => "Powered by ",
// R
'recents_pins' => "Latest articles",