twig implementation

tpl/_head.twig

@@ -1,10 +1,10 @@
-        <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
-        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/apple-touch-icon-144x144-precomposed.png">
-        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./img/apple-touch-icon-72x72-precomposed.png">
-        <link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-precomposed.png">
-        <link rel="stylesheet" href="./css/knacss.css" media="all">
-        <link rel="stylesheet" href="./css/style.css" media="all">
+        <link rel="shortcut icon" type="image/x-icon" href="./tpl/img/favicon.ico" />
+        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./tpl/img/apple-touch-icon-144x144-precomposed.png">
+        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./tpl/img/apple-touch-icon-72x72-precomposed.png">
+        <link rel="apple-touch-icon-precomposed" href="./tpl/img/apple-touch-icon-precomposed.png">
+        <link rel="stylesheet" href="./tpl/css/knacss.css" media="all">
+        <link rel="stylesheet" href="./tpl/css/style.css" media="all">
         <!-- Light Theme -->
-        <link rel="stylesheet" href="./css/style-light.css" media="all" title="light-style">
+        <link rel="stylesheet" href="./tpl/css/style-light.css" media="all" title="light-style">
         <!-- Dark Theme -->
-        <link rel="alternate stylesheet" href="./css/style-dark.css" media="all" title="dark-style">
+        <link rel="alternate stylesheet" href="./tpl/css/style-dark.css" media="all" title="dark-style">

tpl/_top.twig

@@ -1,3 +1,3 @@
         <header>
-            <h1><a href="./"><img src="./img/logo.png" alt="logo poche" /></a>poche</h1>
+            <h1><a href="./"><img src="./tpl/img/logo.png" alt="logo poche" /></a>poche</h1>
         </header>

tpl/config.twig

@@ -12,30 +12,30 @@
 {% endblock %}
 {% block content %}
             <div id="content">
-            	<h2>Bookmarklet</h2>
-            	<p>Thanks to the bookmarklet, you will be able to easily add a link to your poche. If you don't know how use a bookmarklet, <a href="http://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks">have a look here</a>.</p>
-            	<p>Drag & drop this link to your bookmarks bar and have fun with poche.</p>
-                <p><a ondragend="this.click();" style="cursor: move; border: 1px dashed grey; background: white;" title="i am a bookmarklet, use me !" href="javascript:if(top['bookmarklet-url@inthepoche.com']){top['bookmarklet-url@inthepoche.com'];}else{(function(){var%20url%20=%20location.href%20||%20url;window.open('{$poche_url}?action=add&url='%20+%20btoa(url),'_self');})();void(0);}">poche it !</a></p>
+            	<h2>{% trans "Bookmarklet" %}</h2>
+            	<p>{% trans "Thanks to the bookmarklet, you will be able to easily add a link to your poche." %} {% trans "Have a look to this documentation:" %} <a href="http://inthepoche.com/?pages/Documentation" target="_blank">http://inthepoche.com/?pages/Documentation</a>.</p>
+            	<p>{% trans "Drag & drop this link to your bookmarks bar and have fun with poche." %}</p>
+                <p><a ondragend="this.click();" style="cursor: move; border: 1px dashed grey; background: white;" title="i am a bookmarklet, use me !" href="javascript:if(top['bookmarklet-url@inthepoche.com']){top['bookmarklet-url@inthepoche.com'];}else{(function(){var%20url%20=%20location.href%20||%20url;window.open('{$poche_url}?action=add&url='%20+%20btoa(url),'_self');})();void(0);}">{% trans "poche it!" %}</a></p>
 
-                <h2>Password</h2>
+                <h2>{% trans "Change your password" %}</h2>
 	            <form method="post" action="?config" name="loginform">
 	                <fieldset class="w500p">
 	                    <div class="row">
-	                        <label class="col w150p" for="password">New password</label>
-	                        <input class="col" type="password" id="password" name="password" placeholder="Password" tabindex="2">
+	                        <label class="col w150p" for="password">{% trans "New password" %}</label>
+	                        <input class="col" type="password" id="password" name="password" placeholder="{% trans "Password" %}" tabindex="2">
 	                    </div>
 	                    <div class="row">
-	                        <label class="col w150p" for="password_repeat">Repeat your new password</label>
-	                        <input class="col" type="password" id="password_repeat" name="password_repeat" placeholder="Password" tabindex="3">
+	                        <label class="col w150p" for="password_repeat">{% trans "Repeat your new password" %}</label>
+	                        <input class="col" type="password" id="password_repeat" name="password_repeat" placeholder="{% trans "Password" %}" tabindex="3">
 	                    </div>
 	                    <div class="row mts txtcenter">
-	                        <button class="bouton" type="submit" tabindex="4">Update</button>
+	                        <button class="bouton" type="submit" tabindex="4">{% trans "Update" %}</button>
 	                    </div>
 	                </fieldset>
-	                <input type="hidden" name="returnurl" value="<?php echo htmlspecialchars($referer);?>">
-	                <input type="hidden" name="token" value="<?php echo Session::getToken(); ?>">
+	                <input type="hidden" name="returnurl" value="{{ referer }}">
+	                <input type="hidden" name="token" value="{{ token }}">
 	            </form>
-                <h2>Export</h2>
-                <p><a href="?view=export" target="_blank">Click here</a> to export your poche datas.</p>
+                <h2>{% trans "Export your poche datas" %}</h2>
+                <p><a href="?view=export" target="_blank">{% trans "Click here" %}</a> {% trans "to export your poche datas." %}</p>
             </div>
 {% endblock %}

tpl/css/style-dark.css

@@ -0,0 +1,90 @@
+/*** GENERAL ***/
+body {
+    color: #fff;
+    background-color: #0d0d0d;
+}
+
+a, a:hover, a:visited {
+    color: #fff;
+}
+
+#main ul#links li a.current {
+    background-color: #000;
+    color: #fff;
+}
+
+#links a:hover, .backhome a:hover, .support a:hover{
+    background-color: #fff;
+    color: #000;
+}
+
+input[type=submit].delete {
+    background : url('../img/dark/remove.png') no-repeat center center;
+    color : transparent;
+}
+
+#main .entrie {
+    color: #fff;
+    background-color: #000;
+    border: 1px solid #fff;
+}
+
+#main .entrie h2 a:hover {
+    color: #29B1E3;
+}
+
+a.fav span {
+    background: url('../img/dark/star-on.png') no-repeat;
+}
+
+a.fav span:hover {
+    background: url('../img/dark/star-off.png') no-repeat;
+}
+
+a.fav-off span {
+    background: url('../img/dark/star-off.png') no-repeat;
+}
+
+a.fav-off span:hover {
+    background: url('../img/dark/star-on.png') no-repeat;
+}
+
+a.archive span {
+    background: url('../img/dark/checkmark-on.png') no-repeat;
+}
+
+a.archive span:hover {
+    background: url('../img/dark/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span {
+    background: url('../img/dark/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span:hover {
+    background: url('../img/dark/checkmark-on.png') no-repeat;
+}
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+	color: #fff;
+    background-color: #0d0d0d;
+}
+
+#article header {
+    border-bottom: 1px solid #222222;
+}
+
+#article article {
+    border-bottom: 1px solid #222222;
+}
+
+.vieworiginal a {
+    color: #888888;
+}
+
+.entrie {
+    background-color: #fff;
+}

tpl/css/style-light.css

@@ -0,0 +1,100 @@
+/*** GENERAL ***/
+body {
+    color: #222222;
+    background-color: #F1F1F1;
+}
+
+a, a:hover, a:visited {
+    color: #000;
+}
+
+.bouton {
+	background-color: #000;
+    color: #fff;
+    border: none;
+}
+.bouton:hover {
+	background-color: #222222;
+    color: #F1F1F1;
+}
+
+#main ul#links li a.current {
+    background-color: #000;
+    color: #fff;
+}
+
+#links a:hover, .backhome a:hover, .support a:hover{
+    background-color: #040707;
+    color: #F1F1F1;
+}
+
+input[type=submit].delete {
+    background : url('../img/light/remove.png') no-repeat center center;
+    color : transparent;
+}
+
+#main .entrie {
+    color: #2e2e2e;
+    background-color: #ffffff;
+    border: 1px solid #000;
+}
+
+#main .entrie h2 a:hover {
+    color: #F5BE00;
+}
+
+a.fav span {
+    background: url('../img/light/star-on.png') no-repeat;
+}
+
+a.fav span:hover {
+    background: url('../img/light/star-off.png') no-repeat;
+}
+
+a.fav-off span {
+    background: url('../img/light/star-off.png') no-repeat;
+}
+
+a.fav-off span:hover {
+    background: url('../img/light/star-on.png') no-repeat;
+}
+
+a.archive span {
+    background: url('../img/light/checkmark-on.png') no-repeat;
+}
+
+a.archive span:hover {
+    background: url('../img/light/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span {
+    background: url('../img/light/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span:hover {
+    background: url('../img/light/checkmark-on.png') no-repeat;
+}
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+	color: #222222;
+    background-color: #F1F1F1;
+}
+
+#article header {
+    border-bottom: 1px solid #222222;
+}
+
+#article article {
+    border-bottom: 1px solid #222222;
+}
+
+.vieworiginal a {
+    color: #888888;
+}
+
+.entrie {
+    background-color: #fff;
+}

tpl/css/style.css

@@ -0,0 +1,210 @@
+/*** GENERAL ***/
+body {
+    font: 20px/1.3em Palatino,Georgia,serif;
+    margin: 10px;
+}
+
+header {
+    text-align: center;
+}
+
+.bouton {
+	border-radius: 2px;
+}
+
+#main ul#links {
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+}
+
+#main ul#links li {
+    display: inline;
+}
+
+#main ul#links li a.current {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+}
+
+#main ul#sort {
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+}
+
+#main ul#sort li {
+    display: inline;
+    font-size: 0.9em;
+}
+
+#main ul#sort img:hover {
+    cursor: pointer;
+}
+
+#main, #article {
+    margin: 0 auto;
+}
+
+#links a, .backhome a, .support a{
+    text-decoration: none;
+    padding: 5px 10px;
+}
+#links a:hover, .backhome a:hover, .support a:hover{
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.support {
+    font-size: 14px;
+}
+
+footer {
+    text-align: right;
+}
+
+/*** ***/
+/*** LINKS DISPLAY ***/
+
+#main a.tool {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+input[type=submit].delete {
+    width : 16px;
+    height :16px;
+    border : none;
+    cursor: pointer;
+    font-size : 0;
+}
+
+#main #content {
+    margin-top: 20px;
+}
+
+#main .entrie {
+    padding: 15px;
+    min-height: 8em;
+    border: 1px solid;
+}
+
+#main .entrie h2 a {
+    text-decoration: none;
+}
+
+.tools {
+    text-align: right;
+}
+
+.tools ul {
+    padding: 0; margin: 0;
+    list-style-type: none;
+}
+
+.tools ul li {
+    line-height: 20px;
+}
+
+.tools a.tool {
+    cursor: pointer;
+}
+
+#article .tools {
+    position: relative;
+    display: inline;
+    top: 0px;
+    right: 0px;
+    width: 100%;
+    text-align: left;
+}
+
+#article .tools ul li{
+    display: inline;
+}
+
+#main .entrie .tools a.tool span, #article .tools a.tool span {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+#main .entrie .url {
+    font-size: 13px;
+}
+
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+    font: 20px/1.3em Palatino,Georgia,serif;
+}
+
+#article header {
+    text-align: left;
+}
+
+#article header a {
+    text-decoration: none;
+}
+
+.vieworiginal a {
+    text-decoration: none;
+}
+
+.backhome {
+    display: inline;
+}
+
+/*** ***/
+
+#main
+{
+    max-width: 60em; /* 960 px */
+    margin: 0 auto;
+}
+#content
+{
+    width: 103.125%; /* 990px */
+    overflow: hidden;
+    margin-left: -1.562%; /* 15px */
+    margin-bottom: -1.875em; /* 30px */
+}
+
+.entrie
+{
+    width: 30.303%; /* 300px */
+    background-color: #fff;
+    float: left;
+    margin: 0 1.515% 1.875em; /* 15px 30px */
+}
+
+@media only screen and ( max-width: 40em ) /* 640px */
+{
+    .entrie
+    {
+        width: 46.876%; /* 305px */
+        margin-bottom: 0.938em; /* 15px */
+    }
+}
+
+@media only screen and ( max-width: 20em ) /* 320px */
+{
+    #content
+    {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .entrie
+    {
+        width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+.messages {
+    
+}

tpl/entries.html

@@ -1,21 +0,0 @@
-            <div id="content">
-                {loop="entries"}
-                    <div id="entry-{$value.id}" class="entrie mb2">
-                        <span class="content">
-                            <h2 class="h6-like">
-                                <a href="index.php?&view=view&id={$value.id}">{$value.title}</a>
-                            </h2>
-                            <div class="tools">
-                                <ul>
-                                    <li>
-                                        <a title="toggle mark as read" class="tool archive {if="$value.is_read == '0'"}archive-off{/if}" onclick="toggle_archive(this, {$value.id})"><span></span></a></li>
-                                        <li><a title="toggle favorite" class="tool fav {if="$value.is_fav == '0'"}fav-off{/if}" onclick="toggle_favorite(this, {$value.id})"><span></span></a></li>
-                                        <li><form method="post" onsubmit="return confirm('Are you sure?')" style="display: inline;"><input type="hidden" name="token" id="token" value="<?php echo Session::getToken(); ?>" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="view" name="view" value="{$view}" /><input type="hidden" id="id" name="id" value="{$value.id}" /><input type="submit" class="delete" title="toggle delete" /></form>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="url">{$value.url}</div>
-                        </span>
-                    </div>
-                {/loop}
-            </div>

tpl/home.twig

@@ -11,10 +11,19 @@
 {% endblock %}
 {% block precontent %}
             <ul id="sort">
-                <li><img src="img/up.png" onclick="sort_links('{{ view }}', 'ia');" title="{% trans "by date asc" %}" /> {% trans "by date" %} <img src="img/down.png" onclick="sort_links('{{ view }}', 'id');" title="{% trans "by date desc" %}" /></li>
-                <li><img src="img/up.png" onclick="sort_links('{{ view }}', 'ta');" title="{% trans "by title asc" %}" /> {% trans "by title" %} <img src="img/down.png" onclick="sort_links('{{ view }}', 'td');" title="{% trans "by title desc" %}" /></li>
+                <li><img src="./tpl/img/up.png" onclick="sort_links('{{ view }}', 'ia');" title="{% trans "by date asc" %}" /> {% trans "by date" %} <img src="./tpl/img/down.png" onclick="sort_links('{{ view }}', 'id');" title="{% trans "by date desc" %}" /></li>
+                <li><img src="./tpl/img/up.png" onclick="sort_links('{{ view }}', 'ta');" title="{% trans "by title asc" %}" /> {% trans "by title" %} <img src="./tpl/img/down.png" onclick="sort_links('{{ view }}', 'td');" title="{% trans "by title desc" %}" /></li>
             </ul>
 {% endblock %}
+{% block notices %}
+            <div class="messages">
+                <ul>
+                {% for notice in notices %}
+                    <li>{{ notice.value|e }}</li>
+                {% endfor %}
+                </ul>
+            </div>
+{% endblock %}
 {% block content %}
             <div id="content">
                 {% for entry in entries %}
@@ -28,7 +37,7 @@
                                     <li>
                                         <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" onclick="toggle_archive(this, {{ entry.id|e }})"><span></span></a></li>
                                         <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" onclick="toggle_favorite(this, {{ entry.id|e }})"><span></span></a></li>
-                                        <li><form method="post" onsubmit="return confirm('{% trans "are you sure?" %}')" style="display: inline;"><input type="hidden" name="token" id="token" value="{{ token }}" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="view" name="view" value="{{ view }}" /><input type="hidden" id="id" name="id" value="{{ entry.id|e }}" /><input type="submit" class="delete" title="{% trans "toggle delete" %}" /></form>
+                                        <li><form method="post" style="display: inline;"><input type="hidden" name="token" id="token" value="{{ token }}" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="view" name="view" value="{{ view }}" /><input type="hidden" id="id" name="id" value="{{ entry.id|e }}" /><input type="submit" class="delete" title="{% trans "toggle delete" %}" /></form>
                                     </li>
                                 </ul>
                             </div>
@@ -40,9 +49,9 @@
 {% endblock %}
 
 {% block js %}
-            <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
-            <script type="text/javascript" src="js/poche.js"></script>
-            <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
+            <script type="text/javascript" src="./tpl/js/jquery-1.9.1.min.js"></script>
+            <script type="text/javascript" src="./tpl/js/poche.js"></script>
+            <script type="text/javascript" src="./tpl/js/jquery.masonry.min.js"></script>
             <script type="text/javascript">
                 $( window ).load( function()
                 {

tpl/js/poche.js

@@ -0,0 +1,57 @@
+function toggle_favorite(element, id) {
+    $(element).toggleClass('fav-off');
+    $.ajax ({
+        url: "index.php?action=toggle_fav",
+        data:{id:id}
+    });
+}
+
+function toggle_archive(element, id, view_article) {
+    $(element).toggleClass('archive-off');
+    $.ajax ({
+        url: "index.php?action=toggle_archive",
+        data:{id:id}
+    });
+    var obj = $('#entry-'+id);
+
+    // on vient de la vue de l'article, donc pas de gestion de grille
+    if (view_article != 1) {
+        $('#content').masonry('remove',obj);
+        $('#content').masonry('reloadItems');
+        $('#content').masonry('reload');
+    }
+}
+
+function sort_links(view, sort) {
+    $.get('index.php', { view: view, sort: sort, full_head: 'no' }, function(data) {
+      $('#content').html(data);
+    });
+}
+
+
+// ---------- Swith light or dark view
+function setActiveStyleSheet(title) {
+	var i, a, main;
+	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+			a.disabled = true;
+			if(a.getAttribute("title") == title) a.disabled = false;
+		}
+	}
+}
+$('#themeswitch').click(function() {
+	// we want the dark
+	if ($('body').hasClass('light-style')) {
+		setActiveStyleSheet('dark-style');
+		$('body').addClass('dark-style');
+		$('body').removeClass('light-style');
+		$('#themeswitch').text('light');
+	// we want the light
+	} else if ($('body').hasClass('dark-style')) {
+		setActiveStyleSheet('light-style');
+		$('body').addClass('light-style');
+		$('body').removeClass('dark-style');
+		$('#themeswitch').text('dark');
+	}
+	return false;
+});

tpl/login.twig

@@ -1,11 +1,11 @@
 {% extends "layout.twig" %}
 
 {% block title %}{% trans "login to your poche" %}{% endblock %}
-{% block messages %}
+{% block notices %}
             <div class="messages">
                 <ul>
-                {% for error in errors %}
-                    <li>{{ error.value|e }}</li>
+                {% for notice in notices %}
+                    <li>{{ notice.value|e }}</li>
                 {% endfor %}
                 </ul>
             </div>
@@ -28,7 +28,7 @@
 						<label class="col w150p">{% trans "Stay signed in" %}</label>
 						<div class="col">
 							<input type="checkbox" name="longlastingsession" tabindex="3">
-							<small class="inbl">(Do not check on public computers)</small>
+							<small class="inbl">{% trans "(Do not check on public computers)" %}</small>
 						</div>
 					</div>
 					<div class="row mts txtcenter">