adding more UI, rich text editor, implentation and example in post.go, as well as db insert/update and retrieval. NOTE: rich text editor content is stored as html escaped entity in DB.

1 files changed, 172 insertions, 0 deletions

diff --git a/system/admin/static/editor/js/ckMaterializeOverrides.js b/system/admin/static/editor/js/ckMaterializeOverrides.js
new file mode 100644
index 0000000..fd1b2db
--- /dev/null
+++ b/system/admin/static/editor/js/ckMaterializeOverrides.js
@@ -0,0 +1,172 @@
+(function ($) {
+    $.fn.ckTooltip = function (options) {
+        var timeout = null,
+            counter = null,
+            started = false,
+            counterInterval = null,
+            margin = 5;
+
+        // Defaults
+        var defaults = {
+            delay: 350
+        };
+        options = $.extend(defaults, options);
+
+        return this.each(function(){
+            var origin = $(this);
+
+            // Create Text span
+            var tooltip_text = $('<span></span>').text(origin.attr('data-tooltip'));
+
+            // Create tooltip
+            var newTooltip = $('<div></div>');
+            newTooltip.addClass('material-tooltip').append(tooltip_text);
+            newTooltip.appendTo($('body'));
+
+            var backdrop = $('<div></div>').addClass('backdrop');
+            backdrop.appendTo(newTooltip);
+            backdrop.css({ top: 0, left:0 });
+
+        //Destroy previously binded events
+        //$(this).off('mouseenter mouseleave');
+
+        $.event.special.destroyed = {
+            remove: function(o) {
+                if (o.handler) {
+                    o.handler();
+                }
+            }
+        };
+        $(this).bind('destroyed', function() {
+            newTooltip.remove();
+        });
+
+        // Mouse In
+        $(this).on({
+            mouseenter: function(e) {
+                var tooltip_delay = origin.data("delay");
+
+                tooltip_delay = (tooltip_delay === undefined || tooltip_delay === '') ? options.delay : tooltip_delay;
+                counter = 0;
+                counterInterval = setInterval(function(){
+                    counter += 10;
+
+                    if (counter >= tooltip_delay && started === false) {
+                        started = true;
+                        newTooltip.css({ display: 'block', left: '0px', top: '0px' });
+
+                        // Set Tooltip text
+                        newTooltip.children('span').text(origin.attr('data-tooltip'));
+
+                        // Tooltip positioning
+                        var originWidth = origin.outerWidth();
+                        var originHeight = origin.outerHeight();
+                        var tooltipPosition =  origin.attr('data-position');
+                        var tooltipHeight = newTooltip.outerHeight();
+                        var tooltipWidth = newTooltip.outerWidth();
+                        var tooltipVerticalMovement = '0px';
+                        var tooltipHorizontalMovement = '0px';
+                        var scale_factor = 8;
+
+                        if (tooltipPosition === "top") {
+                        // Top Position
+                        newTooltip.css({
+                            top: origin.offset().top - tooltipHeight - margin,
+                            left: origin.offset().left + originWidth/2 - tooltipWidth/2
+                        });
+                        tooltipVerticalMovement = '-10px';
+                        backdrop.css({
+                            borderRadius: '14px 14px 0 0',
+                            transformOrigin: '50% 90%',
+                            marginTop: tooltipHeight,
+                            marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+
+                        });
+                        }
+                        // Left Position
+                        else if (tooltipPosition === "left") {
+                            newTooltip.css({
+                                top: origin.offset().top + originHeight/2 - tooltipHeight/2,
+                                left: origin.offset().left - tooltipWidth - margin
+                            });
+                            tooltipHorizontalMovement = '-10px';
+                            backdrop.css({
+                                width: '14px',
+                                height: '14px',
+                                borderRadius: '14px 0 0 14px',
+                                transformOrigin: '95% 50%',
+                                marginTop: tooltipHeight/2,
+                                marginLeft: tooltipWidth
+                            });
+                        }
+                        // Right Position
+                        else if (tooltipPosition === "right") {
+                            newTooltip.css({
+                                top: origin.offset().top + originHeight/2 - tooltipHeight/2,
+                                left: origin.offset().left + originWidth + margin
+                            });
+                            tooltipHorizontalMovement = '+10px';
+                            backdrop.css({
+                                width: '14px',
+                                height: '14px',
+                                borderRadius: '0 14px 14px 0',
+                                transformOrigin: '5% 50%',
+                                marginTop: tooltipHeight/2,
+                                marginLeft: '0px'
+                            });
+                        }
+                        else {
+                            // Bottom Position
+                            newTooltip.css({
+                                top: origin.offset().top + origin.outerHeight() + margin,
+                                left: origin.offset().left + originWidth/2 - tooltipWidth/2
+                            });
+                            tooltipVerticalMovement = '+10px';
+                            backdrop.css({
+                                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                            });
+                        }
+
+                        // Calculate Scale to fill
+                        scale_factor = tooltipWidth / 8;
+                        if (scale_factor < 8) {
+                            scale_factor = 8;
+                        }
+                        if (tooltipPosition === "right" || tooltipPosition === "left") {
+                            scale_factor = tooltipWidth / 10;
+                            if (scale_factor < 6)
+                                scale_factor = 6;
+                        }
+
+                        newTooltip.velocity({ opacity: 1, marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 150, queue: false });
+                        backdrop.css({ display: 'block' })
+                        .velocity({opacity:1},{duration: 50, delay: 0, queue: false})
+                        .velocity({scale: scale_factor}, {duration: 150, delay: 0, queue: false, easing: 'easeInOutQuad'});
+                    }
+                }, 10); // End Interval
+
+            // Mouse Out
+            },
+            mouseleave: function(){
+                // Reset State
+                clearInterval(counterInterval);
+                counter = 0;
+
+                // Animate back
+                newTooltip.velocity({
+                    opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 150, queue: false, delay: 50 }
+                );
+                backdrop.velocity({opacity: 0, scale: 1}, {
+                    duration:150,
+                    delay: 50, queue: false,
+                    complete: function(){
+                        backdrop.css('display', 'none');
+                        newTooltip.css('display', 'none');
+                        started = false;}
+                });
+            }
+            });
+        });
+    };
+
+}(jQuery));