User JS and User CSS functionality. fixes #29

1 files changed, 59 insertions, 0 deletions

diff --git a/js/options/user-css.js b/js/options/user-css.js
new file mode 100644
index 00000000..a6b2d137
--- /dev/null
+++ b/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();
+
+
+}();