alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
317 lines (270 loc) • 10.5 kB
JavaScript
(function (factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function ($) {
$.extend($.summernote.plugins, {
'specialchars': function (context) {
var self = this;
var ui = $.summernote.ui;
var $editor = context.layoutInfo.editor;
var options = context.options;
var lang = options.langInfo;
var KEY = {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,
ENTER: 13
};
var COLUMN_LENGTH = 15;
var COLUMN_WIDTH = 35;
var currentColumn, currentRow, totalColumn, totalRow = 0;
// special characters data set
var specialCharDataSet = [
'"', '&', '<', '>', '¡', '¢',
'£', '¤', '¥', '¦', '§',
'¨', '©', 'ª', '«', '¬',
'®', '¯', '°', '±', '²',
'³', '´', 'µ', '¶', '·',
'¸', '¹', 'º', '»', '¼',
'½', '¾', '¿', '×', '÷',
'ƒ', 'ˆ', '˜', '–', '—',
'‘', '’', '‚', '“', '”',
'„', '†', '‡', '•', '…',
'‰', '′', '″', '‹', '›',
'‾', '⁄', '€', 'ℑ', '℘',
'ℜ', '™', 'ℵ', '←', '↑',
'→', '↓', '↔', '↵', '⇐',
'⇑', '⇒', '⇓', '⇔', '∀',
'∂', '∃', '∅', '∇', '∈',
'∉', '∋', '∏', '∑', '−',
'∗', '√', '∝', '∞', '∠',
'∧', '∨', '∩', '∪', '∫',
'∴', '∼', '≅', '≈', '≠',
'≡', '≤', '≥', '⊂', '⊃',
'⊄', '⊆', '⊇', '⊕', '⊗',
'⊥', '⋅', '⌈', '⌉', '⌊',
'⌋', '◊', '♠', '♣', '♥',
'♦'
];
context.memo('button.specialCharacter', function () {
return ui.button({
contents: '<i class="fa fa-font fa-flip-vertical">',
tooltip: lang.specialChar.specialChar,
click: function () {
self.show();
}
}).render();
});
/**
* Make Special Characters Table
*
* @member plugin.specialChar
* @private
* @return {jQuery}
*/
this.makeSpecialCharSetTable = function () {
var $table = $('<table/>');
$.each(specialCharDataSet, function (idx, text) {
var $td = $('<td/>').addClass('note-specialchar-node');
var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr/>') : $table.find('tr').last();
var $button = ui.button({
callback : function ($node) {
$node.html(text);
$node.attr('title', text);
$node.attr('data-value', encodeURIComponent(text));
$node.css({
width: COLUMN_WIDTH,
'margin-right' : '2px',
'margin-bottom' : '2px'
});
}
}).render();
$td.append($button);
$tr.append($td);
if (idx % COLUMN_LENGTH === 0) {
$table.append($tr);
}
});
totalRow = $table.find('tr').length;
totalColumn = COLUMN_LENGTH;
return $table;
};
this.initialize = function () {
var $container = options.dialogsInBody ? $(document.body) : $editor;
var body = '<div class="form-group row-fluid">' + this.makeSpecialCharSetTable()[0].outerHTML + '</div>';
this.$dialog = ui.dialog({
title: lang.specialChar.select,
body: body
}).render().appendTo($container);
};
this.show = function () {
var text = context.invoke('editor.getSelectedText');
context.invoke('editor.saveRange');
this.showSpecialCharDialog(text).then(function (selectChar) {
context.invoke('editor.restoreRange');
// build node
var $node = $('<span></span>').html(selectChar)[0];
if ($node) {
// insert video node
context.invoke('editor.insertNode', $node);
}
}).fail(function () {
context.invoke('editor.restoreRange');
});
};
/**
* show image dialog
*
* @param {jQuery} $dialog
* @return {Promise}
*/
this.showSpecialCharDialog = function (text) {
return $.Deferred(function (deferred) {
var $specialCharDialog = self.$dialog;
var $specialCharNode = $specialCharDialog.find('.note-specialchar-node');
var $selectedNode = null;
var ARROW_KEYS = [KEY.UP, KEY.DOWN, KEY.LEFT, KEY.RIGHT];
var ENTER_KEY = KEY.ENTER;
function addActiveClass($target) {
if (!$target) {
return;
}
$target.find('button').addClass('active');
$selectedNode = $target;
}
function removeActiveClass($target) {
$target.find('button').removeClass('active');
$selectedNode = null;
}
// find next node
function findNextNode(row, column) {
var findNode = null;
$.each($specialCharNode, function (idx, $node) {
var findRow = Math.ceil((idx + 1) / COLUMN_LENGTH);
var findColumn = ((idx + 1) % COLUMN_LENGTH === 0) ? COLUMN_LENGTH : (idx + 1) % COLUMN_LENGTH;
if (findRow === row && findColumn === column) {
findNode = $node;
return false;
}
});
return $(findNode);
}
function arrowKeyHandler(keyCode) {
// left, right, up, down key
var $nextNode;
var lastRowColumnLength = $specialCharNode.length % totalColumn;
if (KEY.LEFT === keyCode) {
if (currentColumn > 1) {
currentColumn = currentColumn - 1;
} else if (currentRow === 1 && currentColumn === 1) {
currentColumn = lastRowColumnLength;
currentRow = totalRow;
} else {
currentColumn = totalColumn;
currentRow = currentRow - 1;
}
} else if (KEY.RIGHT === keyCode) {
if (currentRow === totalRow && lastRowColumnLength === currentColumn) {
currentColumn = 1;
currentRow = 1;
} else if (currentColumn < totalColumn) {
currentColumn = currentColumn + 1;
} else {
currentColumn = 1;
currentRow = currentRow + 1;
}
} else if (KEY.UP === keyCode) {
if (currentRow === 1 && lastRowColumnLength < currentColumn) {
currentRow = totalRow - 1;
} else {
currentRow = currentRow - 1;
}
} else if (KEY.DOWN === keyCode) {
currentRow = currentRow + 1;
}
if (currentRow === totalRow && currentColumn > lastRowColumnLength) {
currentRow = 1;
} else if (currentRow > totalRow) {
currentRow = 1;
} else if (currentRow < 1) {
currentRow = totalRow;
}
$nextNode = findNextNode(currentRow, currentColumn);
if ($nextNode) {
removeActiveClass($selectedNode);
addActiveClass($nextNode);
}
}
function enterKeyHandler() {
if (!$selectedNode) {
return;
}
deferred.resolve(decodeURIComponent($selectedNode.find('button').attr('data-value')));
$specialCharDialog.modal('hide');
}
function keyDownEventHandler(event) {
event.preventDefault();
var keyCode = event.keyCode;
if (keyCode === undefined || keyCode === null) {
return;
}
// check arrowKeys match
if (ARROW_KEYS.indexOf(keyCode) > -1) {
if ($selectedNode === null) {
addActiveClass($specialCharNode.eq(0));
currentColumn = 1;
currentRow = 1;
return;
}
arrowKeyHandler(keyCode);
} else if (keyCode === ENTER_KEY) {
enterKeyHandler();
}
return false;
}
// remove class
removeActiveClass($specialCharNode);
// find selected node
if (text) {
for (var i = 0; i < $specialCharNode.length; i++) {
var $checkNode = $($specialCharNode[i]);
if ($checkNode.text() === text) {
addActiveClass($checkNode);
currentRow = Math.ceil((i + 1) / COLUMN_LENGTH);
currentColumn = (i + 1) % COLUMN_LENGTH;
}
}
}
ui.onDialogShown(self.$dialog, function () {
$(document).on('keydown', keyDownEventHandler);
self.$dialog.find('button').tooltip();
$specialCharNode.on('click', function (event) {
event.preventDefault();
deferred.resolve(decodeURIComponent($(event.currentTarget).find('button').attr('data-value')));
ui.hideDialog(self.$dialog);
});
});
ui.onDialogHidden(self.$dialog, function () {
$specialCharNode.off('click');
self.$dialog.find('button').tooltip('destroy');
$(document).off('keydown', keyDownEventHandler);
if (deferred.state() === 'pending') {
deferred.reject();
}
});
ui.showDialog(self.$dialog);
});
};
}
});
}));