add MultiView controller on admin page (replaces the "switch theme" button)

git-svn-id: http://piwigo.org/svn/trunk@29168 68402e56-0260-453c-a942-63ccdbb3a9ee

5 files changed, 225 insertions, 1 deletions

diff --git a/plugins/AdminTools/template/admin_controller.js b/plugins/AdminTools/template/admin_controller.js
new file mode 100644
index 000000000..73f7b1096
--- /dev/null
+++ b/plugins/AdminTools/template/admin_controller.js
@@ -0,0 +1,118 @@
+var AdminTools = function($) {
+  var __this = this;
+
+  this.urlWS;
+  this.urlSelf;
+  this.multiView;
+
+  var $ato = $('#ato_container');
+
+  // fill multiview selects
+  // data came from AJAX request or sessionStorage
+  function populateMultiView() {
+    var $multiview = $ato.find('.multiview');
+
+    if ($multiview.data('init')) return;
+
+    var render = function(data) {
+      var html = '';
+      $.each(data.users, function(i, user) {
+        if (user.status == 'webmaster' || user.status == 'admin') {
+          html+= '<option value="'+ user.id +'">'+ user.username +'</option>';
+        }
+      });
+      $multiview.find('select[data-type="view_as"]').html(html)
+        .val(__this.multiView.view_as);
+
+      html = '';
+      $.each(['clear','roma'], function(i, theme) {
+        html+= '<option value="'+ theme +'">'+ theme +'</option>';
+      });
+      $multiview.find('select[data-type="theme"]').html(html)
+        .val(__this.multiView.theme);
+
+      html = '';
+      $.each(data.languages, function(i, language) {
+        html+= '<option value="'+ language.id +'">'+ language.name +'</option>';
+      });
+      $multiview.find('select[data-type="lang"]').html(html)
+        .val(__this.multiView.lang);
+
+      $multiview.data('init', true);
+
+      $multiview.find('.switcher').show();
+    };
+
+    if ('sessionStorage' in window && window.sessionStorage.multiView != undefined) {
+      render(JSON.parse(window.sessionStorage.multiView));
+    }
+    else {
+      $.ajax({
+        method: 'POST',
+        url: __this.urlWS + 'multiView.getData',
+        dataType: 'json',
+        success: function(data) {
+          render(data.result);
+          if ('sessionStorage' in window) {
+            window.sessionStorage.multiView = JSON.stringify(data.result);
+          }
+        },
+        error: function(xhr, text, error) {
+          alert(text + ' ' + error);
+        }
+      });
+    }
+  }
+
+  // delete session cache
+  this.deleteCache = function() {
+    if ('sessionStorage' in window) {
+      window.sessionStorage.removeItem('multiView');
+    }
+  };
+
+  // attach jquery handlers
+  this.init = function(open) {
+    $('.multiview').appendTo($ato);
+
+    /* <!-- sub menus --> */
+    $ato.on({
+      'click': function(e) {
+        populateMultiView();
+        $(this).find('ul').toggle();
+      },
+      'mouseleave': function(e) {
+        if (e.target.tagName.toLowerCase() != "select") {
+          $(this).find('ul').hide();
+        }
+      }
+    });
+    $ato.find('>a').on('click', function(e) {
+      e.preventDefault();
+    });
+    $ato.find('ul').on('mouseleave', function(e) {
+      if (e.target.tagName.toLowerCase() != "select") {
+        $(this).hide();
+      }
+    });
+
+    /* <!-- select boxes --> */
+    $ato.find('.switcher').on({
+      'change': function() {
+        if ($(this).data('type') == 'theme') {
+          if ($(this).val() != __this.multiView.theme) {
+            window.location.href = __this.urlSelf + 'change_theme=1';
+          }
+        }
+        else {
+          window.location.href = __this.urlSelf + 'ato_'+ $(this).data('type') +'='+ $(this).val();
+        }
+      },
+      'click': function(e) {
+        e.stopPropagation();
+      }
+    });
+  };
+
+  return this;
+}(jQuery);
\ No newline at end of file
diff --git a/plugins/AdminTools/template/admin_controller.tpl b/plugins/AdminTools/template/admin_controller.tpl
new file mode 100644
index 000000000..ddc0bc2c9
--- /dev/null
+++ b/plugins/AdminTools/template/admin_controller.tpl
@@ -0,0 +1,39 @@
+{strip}
+{combine_css path=$ADMINTOOLS_PATH|cat:'template/admin_style.css'}
+{combine_css path=$ADMINTOOLS_PATH|cat:'template/fontello/css/fontello-ato.css'}
+{combine_script id='admintools.controller' load='footer' require='jquery' path=$ADMINTOOLS_PATH|cat:'template/admin_controller.js'}
+{/strip}
+
+{footer_script require='admintools.controller'}
+AdminTools.urlWS = '{$ROOT_URL}ws.php?format=json&method=';
+AdminTools.urlSelf = '{$ato.U_SELF}';
+
+AdminTools.multiView = {
+  view_as: {$ato.MULTIVIEW.view_as},
+  theme: '{$themeconf.name}',
+  lang: '{$ato.MULTIVIEW.lang}'
+};
+
+{if $ato.DELETE_CACHE}
+  AdminTools.deleteCache();
+{/if}
+  AdminTools.init();
+{/footer_script}
+
+<ul class="multiview">
+  <li><label>{'View as'|translate}</label>
+    <select class="switcher" data-type="view_as"></select>
+  </li>
+  <li><label>{'Theme'|translate}</label>
+    <select class="switcher" data-type="theme"></select>
+  </li>
+  <li><label>{'Language'|translate}</label>
+    <select class="switcher" data-type="lang"></select>
+  </li>
+  <li><a class="icon-check{if !$ato.MULTIVIEW.show_queries}-empty{/if}" href="{$ato.U_SELF}ato_show_queries={(int)!$ato.MULTIVIEW.show_queries}">{'Show SQL queries'|translate}</a></li>
+  <li><a class="icon-check{if !$ato.MULTIVIEW.debug_l10n}-empty{/if}" href="{$ato.U_SELF}ato_debug_l10n={(int)!$ato.MULTIVIEW.debug_l10n}">{'Debug languages'|translate}</a></li>
+  <li><a class="icon-check{if !$ato.MULTIVIEW.debug_template}-empty{/if}" href="{$ato.U_SELF}ato_debug_template={(int)!$ato.MULTIVIEW.debug_template}">{'Debug template'|translate}</a></li>
+  <li><a class="icon-check{if !$ato.MULTIVIEW.template_combine_files}-empty{/if}" href="{$ato.U_SELF}ato_template_combine_files={(int)!$ato.MULTIVIEW.template_combine_files}">{'Combine JS&CSS'|translate}</a></li>
+  <li><a class="icon-check{if $ato.MULTIVIEW.no_history}-empty{/if}" href="{$ato.U_SELF}ato_no_history={(int)!$ato.MULTIVIEW.no_history}">{'Save visit in history'|translate}</a></li>
+  <li><a class="icon-ato-null" href="{$ato.U_SELF}ato_purge_template=1">{'Purge compiled templates'|translate}</a></li>
+</ul>
\ No newline at end of file
diff --git a/plugins/AdminTools/template/admin_style.css b/plugins/AdminTools/template/admin_style.css
new file mode 100644
index 000000000..e15f4aead
--- /dev/null
+++ b/plugins/AdminTools/template/admin_style.css
@@ -0,0 +1,67 @@
+.icon-ato-null:before { content:' '; }
+
+#ato_container {
+  display:inline-block;
+  position:relative;
+}
+
+.multiview {
+  display:none;
+}
+
+#ato_container>ul {
+  position:absolute;
+  top:27px;
+  left:auto;
+  right:0;
+  background:#fefefe;
+  padding:0;
+  margin:0;
+  box-shadow:3px 3px 5px rgba(0,0,0,0.5);
+}
+  #ato_container>ul li {
+    list-style:none;
+    line-height:16px;
+    font-size:13px;
+    white-space:nowrap;
+  }
+    #ato_container>ul li>* {
+      display:inline-block;
+      padding:5px 10px;
+      border:none;
+      text-decoration:none;
+      color:#444;
+      text-shadow:1px 1px 0px #eee;
+    }
+      #ato_container>ul li>*:before {
+        font-size:16px;
+        margin-right:0.5em;
+      }
+    #ato_container>ul li:hover {
+      background:#dedede;
+    }
+  #ato_container>ul label {
+    font-weight:bold;
+    color:#777;
+    display:inline-block;
+    width:80px;
+    padding:5px;
+    text-align:right;
+    font-size:11px;
+  }
+  #ato_container>ul select, #ato_container>ul option {
+    font-size:13px;
+    line-height:15px;
+    color:#444;
+    background:#fefefe;
+    border-radius:2px;
+    text-shadow:none;
+  }
+    #ato_container>ul select {
+      border:1px solid #777;
+      height:22px;
+      padding:2px 3px;
+    }
+  #ato_container .switcher {
+    display:none;
+  }
\ No newline at end of file
diff --git a/plugins/AdminTools/template/public_controller.tpl b/plugins/AdminTools/template/public_controller.tpl
index 8fd12dcf0..f234880df 100644
--- a/plugins/AdminTools/template/public_controller.tpl
+++ b/plugins/AdminTools/template/public_controller.tpl
@@ -1,5 +1,5 @@
 {strip}
-{combine_css path=$ADMINTOOLS_PATH|cat:'template/style.css'}
+{combine_css path=$ADMINTOOLS_PATH|cat:'template/public_style.css'}
 {combine_css path='admin/themes/default/fontello/css/fontello.css'}
 {combine_css path=$ADMINTOOLS_PATH|cat:'template/fontello/css/fontello-ato.css'}
 
diff --git a/plugins/AdminTools/template/style.css b/plugins/AdminTools/template/public_style.css
index 9b10158c2..9b10158c2 100644
--- a/plugins/AdminTools/template/style.css
+++ b/plugins/AdminTools/template/public_style.css