Jeremy Newman : add loader for wysiwyg editor fields

[Jeremy Newman]

Module: appdb
Branch: master
Commit: 5988d57b8b176303a9b3ac4a6f56d3a543717396
URL:    http://source.winehq.org/git/appdb.git/?a=commit;h=5988d57b8b176303a9b3ac4a6...

Author: Jeremy Newman 
Date:   Fri Feb  3 11:04:14 2017 -0600

add loader for wysiwyg editor fields

* using redactor and codemirror
 * add dynamic css and js loader funcs
 * import sWebRoot from main website for paths

---

js/utils.js | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 114 insertions(+), 14 deletions(-)

diff --git a/js/utils.js b/js/utils.js
index 204428e..d23e964 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -7,6 +7,110 @@ console.log('Welcome to the %cWineHQ%c AppDB',
             'color: #490708; font-size: 48pt; font-style: italic; font-weight: bold;',
             'color: #95493A; font-size: 48pt; font-style: italic; font-weight: bold;');

+/*
+ * jQuery old style toggle replacement
+ * this useful object was removed in jquery 1.9
+ */
+$.fn.toggleClick = function(){
+    var functions = arguments ;
+    return this.click(function(){
+            var iteration = $(this).data('iteration') || 0;
+            functions[iteration].apply(this, arguments);
+            iteration = (iteration + 1) % functions.length ;
+            $(this).data('iteration', iteration);
+    });
+};
+
+// load javascript file
+// note: to force reload of js code, touch the dir
+(function($){
+    $.check_and_require=function(file,callback)
+    {
+        var full_path = sWebRoot + "js/" + file + '.js';
+        var options = {
+                       dataType:  'script',
+                       cache:     true,
+                       async:     false,
+                       url:       full_path,
+                       success:   callback
+                      };
+        $.ajax(options);
+    }
+})(jQuery);
+
+// load css file once (use CDN if enabled)
+var loadedCSS = [];
+(function($){
+    $.load_css_once=function(file)
+    {
+        if ($.inArray(file,loadedCSS) == -1) {
+            $('<link rel="stylesheet" type="text/css" href="' + sWebRoot + 'css/' + file + '.css" />').appendTo("head");
+            loadedCSS.push(file);
+        }
+    }
+})(jQuery);
+
+/*
+ * Load our preferred wysiwyg editor on a field
+   redactor II: http://imperavi.com/redactor/
+ */
+(function($){
+    $.fn.whq_wysiwyg = function ()
+    {
+        // save this
+        var t = this;
+
+        // calculate height
+        var iHeight = ($(t).attr("rows") ? ($(t).attr("rows") * 15) + 'px' : $(t).css('height'));
+
+        // default redactor opts
+        var redactor_opts = {
+                minHeight: iHeight,
+                maxHeight: iHeight,
+                toolbarFixed: false,
+                focus: false,
+                overrideStyles: false,
+                pastePlainText: true,
+                dragImageUpload: false,
+                clipboardImageUpload: false,
+                multipleImageUpload: false,
+                imageResizable: true,
+                imagePosition: true,
+                imageCaption: true,
+                imageTag: 'figure',
+                script: false,
+                plugins: ['codemirror','alignment','table','fontcolor','fontfamily','fontsize','fullscreen','iconic'],
+                buttons: ['fullscreen', 'html', 'format', 'bold', 'italic', 'underline', 'deleted',
+                          'table', 'lists', 'alignment', 'horizontalrule','image', 'link'],
+                buttonsHideOnMobile: ['image','table'],
+                codemirror: {
+                        lineNumbers: true,
+                        lineWrapping: true,
+                        mode: 'htmlmixed',
+                        indentUnit: 4
+                }
+            };
+
+        // load and execute codemirror
+        $.check_and_require('codemirror', function()
+        {
+            // load css
+            $.load_css_once('codemirror');
+            $.load_css_once('redactor');
+
+            // load and execute redactor
+            $.check_and_require("redactor.min", function()
+            {
+                // load redactor on field
+                $(t).redactor(redactor_opts);
+            });
+        });
+
+        // return calling object
+        return this;
+    }
+})(jQuery);
+
 // execute on when document ready
 $(document).ready(function()
 {
@@ -79,6 +183,12 @@ $(document).ready(function()
         });
     });

+    // wysiwyg HTML editor
+    $("textarea.wysiwyg").each(function()
+    {
+        $(this).whq_wysiwyg();
+    });
+
     // remove alert messages by clicking
     $("#whq-alert").click(function(){ $(this).fadeOut("slow"); });

@@ -92,20 +202,10 @@ $(document).ready(function()
     {
         $('div#dlogp').slideUp();
     });
-});

-/*
- * jQuery old style toggle replacement
- * this useful object was removed in jquery 1.9
- */
-$.fn.toggleClick = function(){
-    var functions = arguments ;
-    return this.click(function(){
-            var iteration = $(this).data('iteration') || 0;
-            functions[iteration].apply(this, arguments);
-            iteration = (iteration + 1) % functions.length ;
-            $(this).data('iteration', iteration);
-    });
-};
+    // HTML editor (redactor loader)
+
+
+});

// done
\ No newline at end of file