xp-dev.com Git - namibia/blob - public/js/vendor/bootstrap-wysiwyg.js

   1 /* http://github.com/mindmup/bootstrap-wysiwyg */
   2 /*global jQuery, $, FileReader*/
   3 /*jslint browser:true*/
   4 (function ($) {
   5         'use strict';
   6         var readFileIntoDataUrl = function (fileInfo) {
   7                 var loader = $.Deferred(),
   8                         fReader = new FileReader();
   9                 fReader.onload = function (e) {
  10                         loader.resolve(e.target.result);
  11                 };
  12                 fReader.onerror = loader.reject;
  13                 fReader.onprogress = loader.notify;
  14                 fReader.readAsDataURL(fileInfo);
  15                 return loader.promise();
  16         };
  17         $.fn.cleanHtml = function () {
  18                 var html = $(this).html();
  19                 return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, '');
  20         };
  21         $.fn.wysiwyg = function (userOptions) {
  22                 var editor = this,
  23                         selectedRange,
  24                         options,
  25                         toolbarBtnSelector,
  26                         updateToolbar = function () {
  27                                 if (options.activeToolbarClass) {
  28                                         $(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
  29                                                 var command = $(this).data(options.commandRole);
  30                                                 if (document.queryCommandState(command)) {
  31                                                         $(this).addClass(options.activeToolbarClass);
  32                                                 } else {
  33                                                         $(this).removeClass(options.activeToolbarClass);
  34                                                 }
  35                                         });
  36                                 }
  37                         },
  38                         execCommand = function (commandWithArgs, valueArg) {
  39                                 var commandArr = commandWithArgs.split(' '),
  40                                         command = commandArr.shift(),
  41                                         args = commandArr.join(' ') + (valueArg || '');
  42                                 document.execCommand(command, 0, args);
  43                                 updateToolbar();
  44                         },
  45                         bindHotkeys = function (hotKeys) {
  46                                 $.each(hotKeys, function (hotkey, command) {
  47                                         editor.keydown(hotkey, function (e) {
  48                                                 if (editor.attr('contenteditable') && editor.is(':visible')) {
  49                                                         e.preventDefault();
  50                                                         e.stopPropagation();
  51                                                         execCommand(command);
  52                                                 }
  53                                         }).keyup(hotkey, function (e) {
  54                                                 if (editor.attr('contenteditable') && editor.is(':visible')) {
  55                                                         e.preventDefault();
  56                                                         e.stopPropagation();
  57                                                 }
  58                                         });
  59                                 });
  60                         },
  61                         getCurrentRange = function () {
  62                                 var sel = window.getSelection();
  63                                 if (sel.getRangeAt && sel.rangeCount) {
  64                                         return sel.getRangeAt(0);
  65                                 }
  66                         },
  67                         saveSelection = function () {
  68                                 selectedRange = getCurrentRange();
  69                         },
  70                         restoreSelection = function () {
  71                                 var selection = window.getSelection();
  72                                 if (selectedRange) {
  73                                         try {
  74                                                 selection.removeAllRanges();
  75                                         } catch (ex) {
  76                                                 document.body.createTextRange().select();
  77                                                 document.selection.empty();
  78                                         }
  79
  80                                         selection.addRange(selectedRange);
  81                                 }
  82                         },
  83                         insertFiles = function (files) {
  84                                 editor.focus();
  85                                 $.each(files, function (idx, fileInfo) {
  86                                         if (/^image\//.test(fileInfo.type)) {
  87                                                 $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
  88                                                         execCommand('insertimage', dataUrl);
  89                                                 }).fail(function (e) {
  90                                                         options.fileUploadError("file-reader", e);
  91                                                 });
  92                                         } else {
  93                                                 options.fileUploadError("unsupported-file-type", fileInfo.type);
  94                                         }
  95                                 });
  96                         },
  97                         markSelection = function (input, color) {
  98                                 restoreSelection();
  99                                 if (document.queryCommandSupported('hiliteColor')) {
 100                                         document.execCommand('hiliteColor', 0, color || 'transparent');
 101                                 }
 102                                 saveSelection();
 103                                 input.data(options.selectionMarker, color);
 104                         },
 105                         bindToolbar = function (toolbar, options) {
 106                                 toolbar.find(toolbarBtnSelector).click(function () {
 107                                         restoreSelection();
 108                                         editor.focus();
 109                                         execCommand($(this).data(options.commandRole));
 110                                         saveSelection();
 111                                 });
 112                                 toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
 113
 114                                 toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
 115                                         var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
 116                                         this.value = '';
 117                                         restoreSelection();
 118                                         if (newValue) {
 119                                                 editor.focus();
 120                                                 execCommand($(this).data(options.commandRole), newValue);
 121                                         }
 122                                         saveSelection();
 123                                 }).on('focus', function () {
 124                                         var input = $(this);
 125                                         if (!input.data(options.selectionMarker)) {
 126                                                 markSelection(input, options.selectionColor);
 127                                                 input.focus();
 128                                         }
 129                                 }).on('blur', function () {
 130                                         var input = $(this);
 131                                         if (input.data(options.selectionMarker)) {
 132                                                 markSelection(input, false);
 133                                         }
 134                                 });
 135                                 toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
 136                                         restoreSelection();
 137                                         if (this.type === 'file' && this.files && this.files.length > 0) {
 138                                                 insertFiles(this.files);
 139                                         }
 140                                         saveSelection();
 141                                         this.value = '';
 142                                 });
 143                         },
 144                         initFileDrops = function () {
 145                                 editor.on('dragenter dragover', false)
 146                                         .on('drop', function (e) {
 147                                                 var dataTransfer = e.originalEvent.dataTransfer;
 148                                                 e.stopPropagation();
 149                                                 e.preventDefault();
 150                                                 if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
 151                                                         insertFiles(dataTransfer.files);
 152                                                 }
 153                                         });
 154                         };
 155                 options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
 156                 toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
 157                 bindHotkeys(options.hotKeys);
 158                 if (options.dragAndDropImages) {
 159                         initFileDrops();
 160                 }
 161                 bindToolbar($(options.toolbarSelector), options);
 162                 editor.attr('contenteditable', true)
 163                         .on('mouseup keyup mouseout', function () {
 164                                 saveSelection();
 165                                 updateToolbar();
 166                         });
 167                 $(window).bind('touchend', function (e) {
 168                         var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
 169                                 currentRange = getCurrentRange(),
 170                                 clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
 171                         if (!clear || isInside) {
 172                                 saveSelection();
 173                                 updateToolbar();
 174                         }
 175                 });
 176                 return this;
 177         };
 178         $.fn.wysiwyg.defaults = {
 179                 hotKeys: {
 180                         'ctrl+b meta+b': 'bold',
 181                         'ctrl+i meta+i': 'italic',
 182                         'ctrl+u meta+u': 'underline',
 183                         'ctrl+z meta+z': 'undo',
 184                         'ctrl+y meta+y meta+shift+z': 'redo',
 185                         'ctrl+l meta+l': 'justifyleft',
 186                         'ctrl+r meta+r': 'justifyright',
 187                         'ctrl+e meta+e': 'justifycenter',
 188                         'ctrl+j meta+j': 'justifyfull',
 189                         'shift+tab': 'outdent',
 190                         'tab': 'indent'
 191                 },
 192                 toolbarSelector: '[data-role=editor-toolbar]',
 193                 commandRole: 'edit',
 194                 activeToolbarClass: 'btn-info',
 195                 selectionMarker: 'edit-focus-marker',
 196                 selectionColor: 'darkgrey',
 197                 dragAndDropImages: true,
 198                 fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
 199         };
 200 }(window.jQuery));