User JS and User CSS functionality. fixes #29

js/options/user-css.js

@@ -0,0 +1,59 @@
+/*
+ * options/user-css.js - allow user enter custom css entries
+ *
+ * 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/options/user-css.js';
+ */
+
++function(){
+
+var tab = Options.add_tab("user-css", "css3", _("User CSS"));
+
+var textarea = $("<textarea></textarea>").css({
+  "font-size": 12,
+  position: "absolute",
+  top: 35, bottom: 35,
+  width: "calc(100% - 12px)", margin: 0, padding: 0, border: "1px solid black",
+  left: 5, right: 5
+}).appendTo(tab.content);
+var submit = $("<input type='button' value='"+_("Update custom CSS")+"'>").css({
+  position: "absolute",
+  height: 25, bottom: 5,
+  width: "calc(100% - 10px)",
+  left: 5, right: 5
+}).click(function() {
+  localStorage.user_css = textarea.val();
+  apply_css();
+}).appendTo(tab.content);
+
+var apply_css = function() {
+  $('.user-css').remove();
+  $('link[rel="stylesheet"]')
+    .last()
+    .after($("<style></style>")
+      .addClass("user-css")
+      .text(localStorage.user_css)
+    );
+};
+
+var update_textarea = function() {
+  if (!localStorage.user_css) {
+    textarea.text("/* "+_("Enter here your own CSS rules...")+" */\n" +
+                  "/* "+_("If you want to make a redistributable style, be sure to\n   have a Yotsuba B theme selected.")+" */\n" +
+                  "/* "+_("You can include CSS files from remote servers, for example:")+" */\n" +
+                  '@import "http://example.com/style.css";');
+  }
+  else {
+    textarea.text(localStorage.user_css);
+    apply_css();
+  }
+};
+
+update_textarea();
+
+
+}();

js/options/user-js.js

@@ -0,0 +1,80 @@
+/*
+ * options/user-js.js - allow user enter custom javascripts
+ *
+ * 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/options/user-js.js';
+ */
+
++function(){
+
+var tab = Options.add_tab("user-js", "code", _("User JS"));
+
+var textarea = $("<textarea></textarea>").css({
+  "font-size": 12,
+  position: "absolute",
+  top: 35, bottom: 35,
+  width: "calc(100% - 12px)", margin: 0, padding: 0, border: "1px solid black",
+  left: 5, right: 5
+}).appendTo(tab.content);
+var submit = $("<input type='button' value='"+_("Update custom Javascript")+"'>").css({
+  position: "absolute",
+  height: 25, bottom: 5,
+  width: "calc(100% - 10px)",
+  left: 5, right: 5
+}).click(function() {
+  localStorage.user_js = textarea.val();
+  document.location.reload();
+}).appendTo(tab.content);
+
+var apply_js = function() {
+  var proc = function() {
+    $('.user-js').remove();
+    $('script')
+      .last()
+      .after($("<script></script>")
+        .addClass("user-js")
+        .text(localStorage.user_js)
+      );
+  }
+
+  if (/immediate()/.test(localStorage.user_js)) {
+    proc(); // Apply the script immediately
+  }
+  else {
+    $(proc); // Apply the script when the page fully loads
+  }
+};
+
+var update_textarea = function() {
+  if (!localStorage.user_js) {
+    textarea.text("/* "+_("Enter here your own Javascript code...")+" */\n" +
+                  "/* "+_("Have a backup of your storage somewhere, as messing here\n   may render you this website unusable.")+" */\n" +
+                  "/* "+_("You can include JS files from remote servers, for example:")+" */\n" +
+                  'load_js("http://example.com/script.js");');
+  }
+  else {
+    textarea.text(localStorage.user_js);
+    apply_js();
+  }
+};
+
+update_textarea();
+
+
+// User utility functions
+window.load_js = function(url) {
+  $('script')
+    .last()
+    .after($("<script></script>")
+      .prop("type", "text/javascript")
+      .prop("src", url)
+    );
+};
+window.immediate = function() { // A dummy function.
+}
+
+}();