Added option to disable jQuery and heavy javascript

Shaarli uses light Javascript in its normal operation, and some jQuery
for some features (autocomplete in tags, QR-Code popup...).
jQuery can be slow on small computers. An option has been added in
configuration screen to disable javascript features which are hard on
CPU.
(Note that the Picture Wall is awfully heavy *without* jQuery.)

(Side note: A *LOT* of users want Shaarli to work without javasript at
all, if possible. That's why I try to use as few javascript as possible:
It keeps Shaarli pages fast.)

diff --git a/index.php b/index.php
index f84ec17f58688244fabe5ac31790f110383fe0af..8a456357610e4f2a3dba61a612db2c34d24ce492 100644 (file)
--- a/index.php
+++ b/index.php
@@ -96,6 +96,8 @@ require $GLOBALS['config']['CONFIG_FILE'];  // Read login/password hash into $GL
 if (empty($GLOBALS['title'])) $GLOBALS['title']='Shared links on '.htmlspecialchars(indexUrl());
 if (empty($GLOBALS['timezone'])) $GLOBALS['timezone']=date_default_timezone_get();
 if (empty($GLOBALS['disablesessionprotection'])) $GLOBALS['disablesessionprotection']=false;
+if (empty($GLOBALS['disablejquery'])) $GLOBALS['disablejquery']=false;
+// I really need to rewrite Shaarli with a proper configuation manager.
 
 autoLocale(); // Sniff browser language and set date format accordingly.
 header('Content-Type: text/html; charset=utf-8'); // We use UTF-8 for proper international characters handling.
@@ -1350,6 +1352,7 @@ function renderPage()
             $GLOBALS['title']=$_POST['title'];
             $GLOBALS['redirector']=$_POST['redirector'];
             $GLOBALS['disablesessionprotection']=!empty($_POST['disablesessionprotection']);
+            $GLOBALS['disablejquery']=!empty($_POST['disablejquery']);
             writeConfig();
             echo '<script language="JavaScript">alert("Configuration was saved.");document.location=\'?do=tools\';</script>';
             exit;
@@ -1951,6 +1954,11 @@ function lazyThumbnail($url,$href=false)
     $html='<a href="'.htmlspecialchars($t['href']).'">';
     
     // Lazy image (only loaded by javascript when in the viewport).
+    if (!empty($GLOBALS['disablejquery'])) // (except if jQuery is disabled)
+        $html.='<img class="lazyimage" src="'.htmlspecialchars($t['src']).'"';
+    else
+        $html.='<img class="lazyimage" src="#" data-original="'.htmlspecialchars($t['src']).'"';
+
     $html.='<img class="lazyimage" src="#" data-original="'.htmlspecialchars($t['src']).'"';
     if (!empty($t['width']))  $html.=' width="'.htmlspecialchars($t['width']).'"';
     if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';
@@ -1958,7 +1966,7 @@ function lazyThumbnail($url,$href=false)
     if (!empty($t['alt']))    $html.=' alt="'.htmlspecialchars($t['alt']).'"';
     $html.='>';
     
-    // No-javascript fallback:
+    // No-javascript fallback.
     $html.='<noscript><img src="'.htmlspecialchars($t['src']).'"';
     if (!empty($t['width']))  $html.=' width="'.htmlspecialchars($t['width']).'"';
     if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';
@@ -2065,8 +2073,8 @@ function templateTZform($ptz=false)
         foreach($continents as $continent)
             $continents_html.='<option  value="'.$continent.'"'.($pcontinent==$continent?'selected':'').'>'.$continent.'</option>';
         $cities_html = $cities[$pcontinent];
-        $timezone_form = "Continent: <select name=\"continent\" id=\"continent\" onChange=\"onChangecontinent();\">${continents_html}</select><br /><br />";
-        $timezone_form .= "City: <select name=\"city\" id=\"city\">${cities[$pcontinent]}</select><br /><br />";
+        $timezone_form = "Continent: <select name=\"continent\" id=\"continent\" onChange=\"onChangecontinent();\">${continents_html}</select>";
+        $timezone_form .= "&nbsp;&nbsp;&nbsp;&nbsp;City: <select name=\"city\" id=\"city\">${cities[$pcontinent]}</select><br />";
         $timezone_js = "<script language=\"JavaScript\">";
         $timezone_js .= "function onChangecontinent(){document.getElementById(\"city\").innerHTML = citiescontinent[document.getElementById(\"continent\").value];}";
         $timezone_js .= "var citiescontinent = ".json_encode($cities).";" ;
@@ -2137,12 +2145,11 @@ function processWS()
 function writeConfig()
 {
     if (is_file($GLOBALS['config']['CONFIG_FILE']) && !isLoggedIn()) die('You are not authorized to alter config.'); // Only logged in user can alter config.
-    if (empty($GLOBALS['redirector'])) $GLOBALS['redirector']='';
-    if (empty($GLOBALS['disablesessionprotection'])) $GLOBALS['disablesessionprotection']=false;
     $config='<?php $GLOBALS[\'login\']='.var_export($GLOBALS['login'],true).'; $GLOBALS[\'hash\']='.var_export($GLOBALS['hash'],true).'; $GLOBALS[\'salt\']='.var_export($GLOBALS['salt'],true).'; ';
     $config .='$GLOBALS[\'timezone\']='.var_export($GLOBALS['timezone'],true).'; date_default_timezone_set('.var_export($GLOBALS['timezone'],true).'); $GLOBALS[\'title\']='.var_export($GLOBALS['title'],true).';';
     $config .= '$GLOBALS[\'redirector\']='.var_export($GLOBALS['redirector'],true).'; ';
     $config .= '$GLOBALS[\'disablesessionprotection\']='.var_export($GLOBALS['disablesessionprotection'],true).'; ';
+    $config .= '$GLOBALS[\'disablejquery\']='.var_export($GLOBALS['disablejquery'],true).'; ';
     $config .= ' ?>';
     if (!file_put_contents($GLOBALS['config']['CONFIG_FILE'],$config) || strcmp(file_get_contents($GLOBALS['config']['CONFIG_FILE']),$config)!=0)
     {

diff --git a/tpl/configure.html b/tpl/configure.html
index 00c41f2849051b7f819b748b72259e2e2548663d..1beba59c5bce86c9e7a21a4d9c79df4e5f8ac9b9 100644 (file)
--- a/tpl/configure.html
+++ b/tpl/configure.html
@@ -8,10 +8,19 @@
     <form method="POST" action="" name="configform" id="configform">
        <input type="hidden" name="token" value="{$token}">
        <table border="0" cellpadding="20">
-         <tr><td><b>Page title:</b></td><td><input type="text" name="title" id="title" size="50" value="{$title}"></td></tr>
-         <tr><td valign="top"><b>Timezone:</b></td><td>{$timezone_form}</td></tr>
-         <tr><td valign="top"><b>Redirector</b></td><td><input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"><br>(e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)</td></tr>
-      <tr> <td valign="top">Security:</td> <td><input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" {if="!empty($GLOBALS['disablesessionprotection'])"}checked{/if}><label for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get disconnected often or if your IP address changes often.)</label></td></tr>
+
+           <tr><td><b>Page title:</b></td><td><input type="text" name="title" id="title" size="50" value="{$title}"></td></tr>
+
+           <tr><td valign="top"><b>Timezone:</b></td><td valign="top">{$timezone_form}</td></tr>
+
+           <tr><td valign="top"><b>Redirector</b></td><td><input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"><br>(e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)</td></tr>
+
+        <tr><td valign="top"><b>Security:</b></td><td><input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" {if="!empty($GLOBALS['disablesessionprotection'])"}checked{/if}><label for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get disconnected often or if your IP address changes often.)</label></td></tr>
+
+        <tr><td valign="top"><b>Features:</b></td><td>
+               <input type="checkbox" name="disablejquery" id="disablejquery" {if="!empty($GLOBALS['disablejquery'])"}checked{/if}><label for="disablejquery">&nbsp;Disable jQuery and all heavy javascript (for example: Autocomplete in tags. Useful for slow computers.)</label>
+        </tr>
+
          <tr><td></td><td align="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
        </table>
        </form>

diff --git a/tpl/includes.html b/tpl/includes.html
index 5319f452bf7683fdecde8ff0ca69a3ac6b0c15d9..e0ad00d551d7a226711817452b36b45b07fa0383 100644 (file)
--- a/tpl/includes.html
+++ b/tpl/includes.html
@@ -7,4 +7,4 @@
 <link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
 <link type="text/css" rel="stylesheet" href="inc/shaarli.css?version={$version|urlencode}#" />
 {if condition="is_file('inc/user.css')"}<link type="text/css" rel="stylesheet" href="inc/user.css?version={$version}#" />{/if}
-<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>
+{if="empty($GLOBALS['disablejquery'])"}<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>{/if}

diff --git a/tpl/linklist.html b/tpl/linklist.html
index 45bd478fb27d61d0fe62a1378877c211bc4a5dc8..3a703512d32b0ca49af369a7f91923ebcd7f759e 100644 (file)
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -48,7 +48,8 @@
                 {else}
                     <span class="linkdate" title="Short link here"><a href="?{$value.linkdate|smallHash}">permalink</a> - </span>
                 {/if}
-                <div style="position:relative;display:inline;"><a href="http://invx.com/code/qrcode/?code={$scripturl|urlencode}%3F{$value.linkdate|smallHash}&width=200&height=200" onclick="return false;" class="qrcode"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - 
+                <div style="position:relative;display:inline;"><a href="http://invx.com/code/qrcode/?code={$scripturl|urlencode}%3F{$value.linkdate|smallHash}&width=200&height=200" 
+                    {if="empty($GLOBALS['disablejquery'])"}onclick="return false;"{/if} class="qrcode"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - 
                 <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span><br>
                 {if="$value.tags"}
                     <div class="linktaglist">
@@ -65,6 +66,7 @@
 </div>
 
     {include="page.footer"}
+{if="empty($GLOBALS['disablejquery'])"}    
 <script>
 $(document).ready(function() {
        $('a.qrcode').click(function(){
@@ -75,5 +77,6 @@ $(document).ready(function() {
 });
 function hide_qrcode() { $('div.qrcode').remove(); }
 </script>
+{/if}
 </body>
 </html>
\ No newline at end of file

diff --git a/tpl/page.footer.html b/tpl/page.footer.html
index 7fe15017d948772c37e8f4e8aec84e348e7eac22..13b566ae47794811a13ead5a03b4d56286fb203f 100644 (file)
--- a/tpl/page.footer.html
+++ b/tpl/page.footer.html
@@ -8,7 +8,7 @@
 <script language="JavaScript">function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
 {/if}
 
-{if="$GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()"}
+{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
 <script language="JavaScript">
 $(document).ready(function()
 {

diff --git a/tpl/picwall.html b/tpl/picwall.html
index 2083a6292d45bb3708357f705ca89ecb1fbbe50b..8f8e0a0eed56b7b6671706e15f4fc8cb4130c0a4 100644 (file)
--- a/tpl/picwall.html
+++ b/tpl/picwall.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>{include="includes"}
-<script src="inc/jquery.lazyload.min.js#"></script>
+{if="empty($GLOBALS['disablejquery'])"}        
+       <script src="inc/jquery.lazyload.min.js#"></script>
+{/if}
 </head>
 <body>
 <div id="pageheader">{include="page.header"}</div>
@@ -16,9 +18,11 @@
 </center>
 {include="page.footer"}
 </body>
+{if="empty($GLOBALS['disablejquery'])"} 
 <script>
 $(document).ready(function() {
     $("img.lazyimage").show().lazyload();
 });
 </script>
+{/if} 
 </html>
\ No newline at end of file