From 3766aa9935b1cc4b069744c313c9b667c9061ec0 Mon Sep 17 00:00:00 2001
From: mistic100 <mistic@piwigo.org>
Date: Mon, 4 Aug 2014 21:07:41 +0000
Subject: 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
---
 plugins/AdminTools/template/admin_controller.js   | 118 ++++++++++
 plugins/AdminTools/template/admin_controller.tpl  |  39 ++++
 plugins/AdminTools/template/admin_style.css       |  67 ++++++
 plugins/AdminTools/template/public_controller.tpl |   2 +-
 plugins/AdminTools/template/public_style.css      | 251 ++++++++++++++++++++++
 plugins/AdminTools/template/style.css             | 251 ----------------------
 6 files changed, 476 insertions(+), 252 deletions(-)
 create mode 100644 plugins/AdminTools/template/admin_controller.js
 create mode 100644 plugins/AdminTools/template/admin_controller.tpl
 create mode 100644 plugins/AdminTools/template/admin_style.css
 create mode 100644 plugins/AdminTools/template/public_style.css
 delete mode 100644 plugins/AdminTools/template/style.css

(limited to 'plugins/AdminTools/template')

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/public_style.css b/plugins/AdminTools/template/public_style.css
new file mode 100644
index 000000000..9b10158c2
--- /dev/null
+++ b/plugins/AdminTools/template/public_style.css
@@ -0,0 +1,251 @@
+.icon-ato-null:before { content:' '; }
+
+.token-input-dropdown {
+  z-index:10000 !important;
+}
+
+#ato_header, #ato_header_closed {
+  display:none;
+}
+#ato_header {
+  width:100%;
+}
+#ato_header, #ato_header_closed:not(.smartpocket) {
+  position:fixed;
+  top:0;
+  left:0;
+  background:#464646;
+  background-image:linear-gradient(to bottom, #383838 0%, #464646 20%, #464646 80%, #383838 100%);
+  z-index:1000;
+}
+
+#ato_header>ul {
+  padding:0;
+  margin:0;
+}
+
+#ato_header>ul li {
+  list-style:none;
+  line-height:16px;
+  font-size:13px;
+  white-space:nowrap;
+}
+  #ato_header>ul li>*, #ato_header_closed:not(.smartpocket)>* {
+    display:inline-block;
+    padding:5px 10px;
+    border:none;
+    text-decoration:none;
+  }
+  #ato_header>ul li>*:before {
+    font-size:16px;
+    margin-right:0.5em;
+  }
+
+#ato_header>ul>li {
+  float:left;
+  display:inline-block;
+  position:relative;
+  overflow:visible;
+}
+  #ato_header>ul>li a {
+    color:white;
+  }
+  #ato_header>ul>li.right {
+    float:right;
+  }
+  #ato_header>ul>li {
+    border-left:1px solid #666;
+  }
+  #ato_header>ul>li {
+    border-right:1px solid #222;
+  }
+  #ato_header>ul>li>*, #ato_header_closed:not(.smartpocket)>* {
+    color:#ddd;
+    text-shadow:1px 1px 0px #222;
+  }
+  #ato_header>ul>li.disabled [class*="icon-"] {
+    color:#888;
+    text-shadow:none;
+  }
+  #ato_header>ul>li:not(.disabled):hover, #ato_header_closed:not(.smartpocket):hover {
+    background:#222;
+    background-image:linear-gradient(to bottom, #222, #353535);
+  }
+
+#ato_header>ul ul {
+  display:none;
+  position:absolute;
+  top:27px;
+  left:0;
+  min-width:100%;
+  background:#fefefe;
+  padding:0;
+  margin:0;
+  box-shadow:3px 3px 5px rgba(0,0,0,0.5);
+}
+  #ato_header>ul>li.right ul {
+    left:auto;
+    right:0;
+  }
+  #ato_header>ul ul li {
+  }
+  #ato_header>ul ul li:hover {
+    background:#dedede;
+  }
+  #ato_header>ul ul li>* {
+    color:#444;
+    text-shadow:1px 1px 0px #eee;
+  }
+  #ato_header>ul ul label {
+    font-weight:bold;
+    color:#777;
+    display:inline-block;
+    width:80px;
+    padding:5px;
+    text-align:right;
+    font-size:11px;
+  }
+  #ato_header>ul ul select, #ato_header>ul ul option {
+    font-size:13px;
+    line-height:15px;
+    color:#444;
+    background:#fefefe;
+    border-radius:2px;
+    text-shadow:none;
+  }
+    #ato_header>ul ul select {
+      border:1px solid #777;
+      height:22px;
+      padding:2px 3px;
+    }
+  #ato_header .switcher {
+    display:none;
+  }
+
+#ato_header_closed:not(.smartpocket) {
+  left:10px;
+  font-size:20px;
+  border-radius:0 0 20% 20%;
+  box-shadow:1px 1px 1px rgba(0,0,0,0.5);
+  width:35px;
+  height:35px;
+}
+  #ato_header_closed:not(.smartpocket).right {
+    left:auto;
+    right:10px;
+  }
+  #ato_header_closed:not(.smartpocket)>* {
+    padding:4px;
+  }
+#ato_header_closed.smartpocket {
+  float:left;
+  margin-right:10px;
+}
+  #ato_header_closed.smartpocket .ui-btn-inner {
+    display:none;
+  }
+
+#ato_header>ul .close-panel {
+  padding:6px 1px 4px 5px;
+}
+#ato_header>ul .close-panel:hover {
+  color:#d00;
+}
+#ato_header>ul .saved {
+  display:none;
+  border:none !important;
+  -webkit-animation:blink 0.8s infinite;
+  animation:blink 0.8s infinite;
+}
+  #ato_header>ul .saved>* {
+    color:#5f5;
+  }
+
+#ato_quick_edit {
+  padding:10px;
+}
+  #ato_quick_edit fieldset {
+    margin:0;
+    padding:0;
+    border:none;
+  }
+  #ato_quick_edit fieldset.left {
+    float:left;
+    width:100px;
+    text-align:center;
+  }
+    #ato_quick_edit fieldset.left img {
+      border-radius:2px;
+      border:1px solid #111;
+    }
+  #ato_quick_edit fieldset.main {
+    margin:0 0 0 110px;
+  }
+    #ato_quick_edit label {
+      display:block;
+      font-weight:bold;
+    }
+    #ato_quick_edit input, #ato_quick_edit textarea, #ato_quick_edit select {
+      width:100%;
+      margin:0 0 1em 0;
+      border-radius:2px;
+      padding:2px;
+      -moz-box-sizing:border-box;
+      box-sizing:border-box;
+    }
+    #ato_quick_edit textarea {
+      height:110px;
+    }
+    #ato_quick_edit input[type="submit"] {
+      margin:1.5em 0;
+      cursor:pointer;
+      background:#e60;
+      border:none;
+      color:#fff;
+    }
+      #ato_quick_edit input[type="submit"]:hover {
+        background:#EF962F;
+      }
+    #ato_quick_edit ul.token-input-list {
+      width:100%;
+      margin:0 0 1em 0;
+    }
+
+@-webkit-keyframes blink {
+  0% { opacity:0; }
+  50% { opacity:1; }
+  100% { opacity:0; }
+}
+@keyframes blink {
+  0% { opacity:0; }
+  50% { opacity:1; }
+  100% { opacity:0; }
+}
+
+@media (max-width:900px) {
+  #ato_header .ato-min-1 {
+    font-size:0px;
+    line-height:0px;
+  }
+  #ato_header .ato-min-1:before {
+    margin-right:0;
+  }
+
+  #ato_header .ato-hide-1 {
+    display:none;
+  }
+}
+
+@media (max-width:750px) {
+  #ato_header .ato-min-2 {
+    font-size:0px;
+    line-height:0px;
+  }
+  #ato_header .ato-min-2:before {
+    margin-right:0;
+  }
+
+  #ato_header .ato-hide-2 {
+    display:none;
+  }
+}
\ No newline at end of file
diff --git a/plugins/AdminTools/template/style.css b/plugins/AdminTools/template/style.css
deleted file mode 100644
index 9b10158c2..000000000
--- a/plugins/AdminTools/template/style.css
+++ /dev/null
@@ -1,251 +0,0 @@
-.icon-ato-null:before { content:' '; }
-
-.token-input-dropdown {
-  z-index:10000 !important;
-}
-
-#ato_header, #ato_header_closed {
-  display:none;
-}
-#ato_header {
-  width:100%;
-}
-#ato_header, #ato_header_closed:not(.smartpocket) {
-  position:fixed;
-  top:0;
-  left:0;
-  background:#464646;
-  background-image:linear-gradient(to bottom, #383838 0%, #464646 20%, #464646 80%, #383838 100%);
-  z-index:1000;
-}
-
-#ato_header>ul {
-  padding:0;
-  margin:0;
-}
-
-#ato_header>ul li {
-  list-style:none;
-  line-height:16px;
-  font-size:13px;
-  white-space:nowrap;
-}
-  #ato_header>ul li>*, #ato_header_closed:not(.smartpocket)>* {
-    display:inline-block;
-    padding:5px 10px;
-    border:none;
-    text-decoration:none;
-  }
-  #ato_header>ul li>*:before {
-    font-size:16px;
-    margin-right:0.5em;
-  }
-
-#ato_header>ul>li {
-  float:left;
-  display:inline-block;
-  position:relative;
-  overflow:visible;
-}
-  #ato_header>ul>li a {
-    color:white;
-  }
-  #ato_header>ul>li.right {
-    float:right;
-  }
-  #ato_header>ul>li {
-    border-left:1px solid #666;
-  }
-  #ato_header>ul>li {
-    border-right:1px solid #222;
-  }
-  #ato_header>ul>li>*, #ato_header_closed:not(.smartpocket)>* {
-    color:#ddd;
-    text-shadow:1px 1px 0px #222;
-  }
-  #ato_header>ul>li.disabled [class*="icon-"] {
-    color:#888;
-    text-shadow:none;
-  }
-  #ato_header>ul>li:not(.disabled):hover, #ato_header_closed:not(.smartpocket):hover {
-    background:#222;
-    background-image:linear-gradient(to bottom, #222, #353535);
-  }
-
-#ato_header>ul ul {
-  display:none;
-  position:absolute;
-  top:27px;
-  left:0;
-  min-width:100%;
-  background:#fefefe;
-  padding:0;
-  margin:0;
-  box-shadow:3px 3px 5px rgba(0,0,0,0.5);
-}
-  #ato_header>ul>li.right ul {
-    left:auto;
-    right:0;
-  }
-  #ato_header>ul ul li {
-  }
-  #ato_header>ul ul li:hover {
-    background:#dedede;
-  }
-  #ato_header>ul ul li>* {
-    color:#444;
-    text-shadow:1px 1px 0px #eee;
-  }
-  #ato_header>ul ul label {
-    font-weight:bold;
-    color:#777;
-    display:inline-block;
-    width:80px;
-    padding:5px;
-    text-align:right;
-    font-size:11px;
-  }
-  #ato_header>ul ul select, #ato_header>ul ul option {
-    font-size:13px;
-    line-height:15px;
-    color:#444;
-    background:#fefefe;
-    border-radius:2px;
-    text-shadow:none;
-  }
-    #ato_header>ul ul select {
-      border:1px solid #777;
-      height:22px;
-      padding:2px 3px;
-    }
-  #ato_header .switcher {
-    display:none;
-  }
-
-#ato_header_closed:not(.smartpocket) {
-  left:10px;
-  font-size:20px;
-  border-radius:0 0 20% 20%;
-  box-shadow:1px 1px 1px rgba(0,0,0,0.5);
-  width:35px;
-  height:35px;
-}
-  #ato_header_closed:not(.smartpocket).right {
-    left:auto;
-    right:10px;
-  }
-  #ato_header_closed:not(.smartpocket)>* {
-    padding:4px;
-  }
-#ato_header_closed.smartpocket {
-  float:left;
-  margin-right:10px;
-}
-  #ato_header_closed.smartpocket .ui-btn-inner {
-    display:none;
-  }
-
-#ato_header>ul .close-panel {
-  padding:6px 1px 4px 5px;
-}
-#ato_header>ul .close-panel:hover {
-  color:#d00;
-}
-#ato_header>ul .saved {
-  display:none;
-  border:none !important;
-  -webkit-animation:blink 0.8s infinite;
-  animation:blink 0.8s infinite;
-}
-  #ato_header>ul .saved>* {
-    color:#5f5;
-  }
-
-#ato_quick_edit {
-  padding:10px;
-}
-  #ato_quick_edit fieldset {
-    margin:0;
-    padding:0;
-    border:none;
-  }
-  #ato_quick_edit fieldset.left {
-    float:left;
-    width:100px;
-    text-align:center;
-  }
-    #ato_quick_edit fieldset.left img {
-      border-radius:2px;
-      border:1px solid #111;
-    }
-  #ato_quick_edit fieldset.main {
-    margin:0 0 0 110px;
-  }
-    #ato_quick_edit label {
-      display:block;
-      font-weight:bold;
-    }
-    #ato_quick_edit input, #ato_quick_edit textarea, #ato_quick_edit select {
-      width:100%;
-      margin:0 0 1em 0;
-      border-radius:2px;
-      padding:2px;
-      -moz-box-sizing:border-box;
-      box-sizing:border-box;
-    }
-    #ato_quick_edit textarea {
-      height:110px;
-    }
-    #ato_quick_edit input[type="submit"] {
-      margin:1.5em 0;
-      cursor:pointer;
-      background:#e60;
-      border:none;
-      color:#fff;
-    }
-      #ato_quick_edit input[type="submit"]:hover {
-        background:#EF962F;
-      }
-    #ato_quick_edit ul.token-input-list {
-      width:100%;
-      margin:0 0 1em 0;
-    }
-
-@-webkit-keyframes blink {
-  0% { opacity:0; }
-  50% { opacity:1; }
-  100% { opacity:0; }
-}
-@keyframes blink {
-  0% { opacity:0; }
-  50% { opacity:1; }
-  100% { opacity:0; }
-}
-
-@media (max-width:900px) {
-  #ato_header .ato-min-1 {
-    font-size:0px;
-    line-height:0px;
-  }
-  #ato_header .ato-min-1:before {
-    margin-right:0;
-  }
-
-  #ato_header .ato-hide-1 {
-    display:none;
-  }
-}
-
-@media (max-width:750px) {
-  #ato_header .ato-min-2 {
-    font-size:0px;
-    line-height:0px;
-  }
-  #ato_header .ato-min-2:before {
-    margin-right:0;
-  }
-
-  #ato_header .ato-hide-2 {
-    display:none;
-  }
-}
\ No newline at end of file
-- 
cgit v1.2.3