add user-options dialog functionality; port webm-settings to it; make a basic general settings applet; make it work on mobiles

js/expand-video.js

@@ -218,7 +218,8 @@ function setupVideosIn(element) {
 
 onready(function(){
     // Insert menu from settings.js
-    if (typeof settingsMenu != "undefined") document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]);
+    if (typeof settingsMenu != "undefined" && typeof Options == "undefined")
+      document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]);
 
     // Setup Javascript events for videos in document now
     setupVideosIn(document);

js/options.js

@@ -0,0 +1,126 @@
+/*
+ * options.js - allow users choose board options as they wish
+ *
+ * Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/options.js';
+ */
+
++function(){
+
+var options_button, options_handler, options_background, options_div
+  , options_close, options_tablist, options_tabs, options_current_tab;
+
+var Options = {};
+window.Options = Options;
+
+var first_tab = function() {
+  for (var i in options_tabs) {
+    return i;
+  }
+  return false;
+};
+
+Options.show = function() {
+  if (!options_current_tab) {
+    Options.select_tab(first_tab(), true);
+  }
+  options_handler.fadeIn();
+};
+Options.hide = function() {
+  options_handler.fadeOut();
+};
+
+options_tabs = {};
+
+Options.add_tab = function(id, icon, name, content) {
+  var tab = {};
+
+  if (typeof content == "string") {
+    content = $("<div>"+content+"</div>");
+  }
+
+  tab.id = id;
+  tab.name = name;
+  tab.icon = $("<div class='options_tab_icon'><i class='fa fa-"+icon+"'></i><div>"+name+"</div></div>");
+  tab.content = $("<div class='options_tab'></div>").css("display", "none");
+
+  tab.content.appendTo(options_div);
+
+  tab.icon.on("click", function() {
+    Options.select_tab(id);
+  }).appendTo(options_tablist);
+
+  $("<h2>"+name+"</h2>").appendTo(tab.content);
+
+  if (content) {
+    content.appendTo(tab.content);
+  }
+  
+  options_tabs[id] = tab;
+
+  return tab;
+};
+
+Options.get_tab = function(id) {
+  return options_tabs[id];
+};
+
+Options.extend_tab = function(id, content) {
+  if (typeof content == "string") {
+    content = $("<div>"+content+"</div>");
+  }
+
+  content.appendTo(options_tabs[id].content);
+
+  return options_tabs[id];
+};
+
+Options.select_tab = function(id, quick) {
+  if (options_current_tab) {
+    if (options_current_tab.id == id) {
+      return false;
+    }
+    options_current_tab.content.fadeOut();
+    options_current_tab.icon.removeClass("active");
+  }
+  var tab = options_tabs[id];
+  options_current_tab = tab;
+  options_current_tab.icon.addClass("active");
+  tab.content[quick? "show" : "fadeIn"]();
+
+  return tab;
+};
+
+options_handler = $("<div id='options_handler'></div>").css("display", "none");
+options_background = $("<div id='options_background'></div>").on("click", Options.hide).appendTo(options_handler);
+options_div = $("<div id='options_div'></div>").appendTo(options_handler);
+options_close = $("<a id='options_close' href='javascript:void(0)'><i class='fa fa-times'></i></div>")
+  .on("click", Options.hide).appendTo(options_div);
+options_tablist = $("<div id='options_tablist'></div>").appendTo(options_div);
+
+
+$(function(){
+  options_button = $("<a href='javascript:void(0)' title='"+_("Options")+"'>["+_("Options")+"]</a>").css("float", "right");
+
+  if ($(".boardlist.compact-boardlist").length) {
+    options_button.addClass("cb-item cb-fa").html("<i class='fa fa-gear'></i>");
+  }
+
+  if ($(".boardlist:first").length) {
+    options_button.appendTo($(".boardlist:first"));
+  }
+  else {
+    options_button.prependTo($(document.body));
+  }
+
+  options_button.on("click", Options.show);
+
+  options_handler.appendTo($(document.body));
+});
+
+
+
+}();

js/options/general.js

@@ -0,0 +1,44 @@
+/*
+ * options/general.js - general settings tab for options panel
+ *
+ * Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/options.js';
+ *   $config['additional_javascript'][] = 'js/style-select.js';
+ *   $config['additional_javascript'][] = 'js/options/general.js';
+ */
+
++function(){
+
+var tab = Options.add_tab("general", "home", _("General"));
+
+$(function(){
+  var stor = $("<div>"+_("Storage: ")+"</div>");
+  stor.appendTo(tab.content);
+
+  $("<button>"+_("Export")+"</button>").appendTo(stor).on("click", function() {
+    var str = JSON.stringify(localStorage);
+
+    $(".output").remove();
+    $("<input type='text' class='output'>").appendTo(stor).val(str);
+  });
+  $("<button>"+_("Import")+"</button>").appendTo(stor).on("click", function() {
+    var str = prompt(_("Paste your storage data"));
+    if (!str) return false;
+    var obj = JSON.parse(str);
+    if (!obj) return false;
+
+    localStorage.clear();
+    for (var i in obj) {
+      localStorage[i] = obj[i];
+    }
+
+    document.location.reload();
+  });
+
+  $("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content);
+});
+
+}();

js/webm-settings.js

@@ -36,15 +36,25 @@ function changeSetting(name, value) {
 
 // Create settings menu
 var settingsMenu = document.createElement("div");
-settingsMenu.style.textAlign = "right";
+var prefix = "", suffix = "", style = "";
-settingsMenu.style.background = "inherit";
+if (window.Options) {
+  var tab = Options.add_tab("webm", "video-camera", _("WebM"));
+  $(settingsMenu).appendTo(tab.content);
+}
+else {
+  prefix = '<a class="unimportant" href="javascript:void(0)">'+_('WebM Settings')+'</a>';
+  settingsMenu.style.textAlign = "right";
+  settingsMenu.style.background = "inherit";
+  suffix = '</div>';
+  style = 'display: none; text-align: left; position: absolute; right: 1em; margin-left: -999em; margin-top: -1px; padding-top: 1px; background: inherit;';
+}
 
-settingsMenu.innerHTML = '<a class="unimportant" href="javascript:void(0)">'+_('WebM Settings')+'</a>'
+settingsMenu.innerHTML = prefix
-    + '<div style="display: none; text-align: left; position: absolute; right: 1em; margin-left: -999em; margin-top: -1px; padding-top: 1px; background: inherit;">'
+    + '<div style="'+style+'">'
     + '<label><input type="checkbox" name="videoexpand">'+_('Expand videos inline')+'</label><br>'
     + '<label><input type="checkbox" name="videohover">'+_('Play videos on hover')+'</label><br>'
     + '<label><input type="range" name="videovolume" min="0" max="1" step="0.01" style="width: 4em; height: 1ex; vertical-align: middle; margin: 0px;">'+_('Default volume')+'</label><br>'
-    + '</div>';
+    + suffix;
 
 function refreshSettings() {
     var settingsItems = settingsMenu.getElementsByTagName("input");
@@ -74,7 +84,7 @@ for (var i = 0; i < settingsItems.length; i++) {
     setupControl(settingsItems[i]);
 }
 
-if (settingsMenu.addEventListener) {
+if (settingsMenu.addEventListener && !window.Options) {
     settingsMenu.addEventListener("mouseover", function(e) {
         refreshSettings();
         settingsMenu.getElementsByTagName("a")[0].style.fontWeight = "bold";

stylesheets/style.css

@@ -636,3 +636,76 @@ form.ban-appeal textarea {
 .new-threads {
   text-align: center;
 }
+
+/* options.js */
+#options_handler {
+  position: fixed;
+  top: 0px; left: 0px; right: 0px; bottom: 0px;
+  width: 100%; height: 100%;
+  text-align: center;
+  z-index: 9900;
+}
+#options_background {
+  background: black;
+  opacity: 0.5;
+  position: absolute;
+  top: 0px; left: 0px; right: 0px; bottom: 0px;
+  width: 100%; height: 100%;
+  z-index: -1;
+}
+#options_div {
+  background-color: #d6daf0;
+  border: 1px solid black;
+  display: inline-block;
+  position: relative; 
+  margin-top: 20px;
+  width: 600px;
+  height: 300px;
+}
+#options_close {
+  top: 0px; right: 0px;
+  position: absolute;
+  margin-right: 3px;
+  font-size: 20px; z-index: 100;
+}
+#options_tablist {
+  padding: 0px 5px;
+  left: 0px;
+  width: 70px;
+  top: 0px;
+  bottom: 0px;
+  height: 100%;
+  border-right: 1px solid black;
+}
+.options_tab_icon {
+  padding: 5px;
+  color: black;
+}
+.options_tab_icon.active {
+  color: red;
+}
+.options_tab_icon i {
+  font-size: 20px;
+}
+.options_tab_icon div {
+  font-size: 11px;
+}
+.options_tab {
+  padding: 10px;
+  position: absolute;
+  top: 0px; bottom: 0px;
+  left: 81px; right: 0px;
+  text-align: left;
+  font-size: 12px;
+}
+.options_tab h2 {
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+.mobile-style #options_div {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin-top: 0px;
+}