commit eb5185b776eeaabb72e578dcdb2d5950f1d1c449
parent 7715766743a66325cf8c141868e6abc145dbe380
Author: Felicitus <felicitus@felicitus.org>
Date: Tue, 24 Apr 2012 05:08:28 +0200
Added char map to input fields
Diffstat:
4 files changed, 335 insertions(+), 0 deletions(-)
diff --git a/src/frontend/css/PartKeepr.css b/src/frontend/css/PartKeepr.css
@@ -140,4 +140,41 @@ td.o2 {
.icon-notebook {
background-image: url(../resources/fugue-icons/icons/notebook.png) !important;
+}
+
+.x-char-picker {
+ width:520px;
+ height:286px;
+ cursor:pointer
+}
+
+.x-char-picker a {
+ border:1px solid #fff;
+ float:left;
+ padding:2px;
+ text-decoration:none;
+ -moz-outline: 0 none;
+ outline:0 none;
+ cursor:pointer;
+ color: black;
+}
+
+.x-char-picker a:hover, .x-char-picker a.x-char-picker-selected {
+ border-color:#8bb8f3;
+ background-color:#deecfd;
+}
+
+.x-char-picker em {
+ display:block;
+ border:1px solid #aca899
+}
+
+.x-char-picker em span {
+ cursor:pointer;
+ display:block;
+ height:18px;
+ vertical-align: top;
+ text-align: center;
+ width:18px;
+ line-height:18px
}
\ No newline at end of file
diff --git a/src/frontend/js/Components/ContextMenu/CharPickerMenu.js b/src/frontend/js/Components/ContextMenu/CharPickerMenu.js
@@ -0,0 +1,80 @@
+Ext.define('PartKeepr.ContextMenu.CharPicker', {
+ extend: 'Ext.menu.Menu',
+
+ alias: 'widget.charpickermenu',
+
+ requires: [
+ 'PartKeepr.picker.Char'
+ ],
+
+ /**
+ * @cfg {Boolean} hideOnClick
+ * False to continue showing the menu after a date is selected.
+ */
+ hideOnClick : true,
+
+ /**
+ * @cfg {String} pickerId
+ * An id to assign to the underlying char picker.
+ */
+ pickerId : null,
+
+ /**
+ * @cfg {Number} maxHeight
+ * @hide
+ */
+
+ /**
+ * @property {PartKeepr.picker.Char} picker
+ * The {@link PartKeepr.picker.Char} instance for this char picker
+ */
+
+ /**
+ * @event click
+ * @hide
+ */
+
+ /**
+ * @event itemclick
+ * @hide
+ */
+
+ initComponent : function(){
+ var me = this,
+ cfg = Ext.apply({}, me.initialConfig);
+
+ // Ensure we don't get duplicate listeners
+ delete cfg.listeners;
+ Ext.apply(me, {
+ plain: true,
+ showSeparator: false,
+ items: Ext.applyIf({
+ cls: Ext.baseCSSPrefix + 'menu-char-item',
+ id: me.pickerId,
+ xtype: 'charpicker'
+ }, cfg)
+ });
+
+ me.callParent(arguments);
+
+ me.picker = me.down('charpicker');
+
+ /**
+ * @event select
+ * @alias PartKeepr.picker.Char#select
+ */
+ me.relayEvents(me.picker, ['select']);
+
+ if (me.hideOnClick) {
+ me.on('select', me.hidePickerOnSelect, me);
+ }
+ },
+
+ /**
+ * Hides picker on select if hideOnClick is true
+ * @private
+ */
+ hidePickerOnSelect: function() {
+ Ext.menu.Manager.hideAll();
+ }
+ });
diff --git a/src/frontend/js/Components/Picker/CharPicker.js b/src/frontend/js/Components/Picker/CharPicker.js
@@ -0,0 +1,177 @@
+Ext.define('PartKeepr.picker.Char', {
+ extend: 'Ext.Component',
+ requires: 'Ext.XTemplate',
+ alias: 'widget.charpicker',
+
+ /**
+ * @cfg {String} [componentCls='x-char-picker']
+ * The CSS class to apply to the containing element.
+ */
+ componentCls : Ext.baseCSSPrefix + 'char-picker',
+
+ /**
+ * @cfg {String} [selectedCls='x-char-picker-selected']
+ * The CSS class to apply to the selected element
+ */
+ selectedCls: Ext.baseCSSPrefix + 'char-picker-selected',
+
+ /**
+ * @cfg {String} value
+ * The initial char to highlight.
+ */
+ value : null,
+
+ /**
+ * @cfg {String} clickEvent
+ * The DOM event that will cause a char to be selected. This can be any valid event name (dblclick, contextmenu).
+ */
+ clickEvent :'click',
+
+ /**
+ * @cfg {Boolean} allowReselect
+ * If set to true then reselecting a char that is already selected fires the {@link #select} event
+ */
+ allowReselect : false,
+
+ /**
+ * @property {String[]} chars
+ */
+ chars : [
+ ' ', '&', '"', '¢', '€', '£', '¥', '©', '®', '™', '‰', 'µ', '·', '•', '…', '′', '″', '§', '¶', 'ß',
+ '‹', '›', '«', '»', '‘', '’', '“', '”', '‚', '„', '<', '>', '≤', '≥', '–', '—', '¯', '‾', '¤', '¦',
+ '¨', '¡', '¿', 'ˆ', '˜', '°', '−', '±', '÷', '⁄', '×', '¹', '²', '³', '¼', '½', '¾', 'ƒ', '∫', '∑',
+ '∞', '√', '≈', '≠', '≡', '∏', '¬', '∩', '∂', '´', '¸', 'ª', 'º', '†', '‡', 'À', 'Á', 'Â', 'Ã', 'Ä',
+ 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Œ',
+ 'Š', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'Ÿ', 'Þ', 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë',
+ 'ì', 'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'œ', 'š', 'ù', 'ú', 'û', 'ü', 'ý', 'þ',
+ 'ÿ', 'Α', 'Β', 'Γ', 'Δ', 'Ε', 'Ζ', 'Η', 'Θ', 'Ι', 'Κ', 'Λ', 'Μ', 'Ν', 'Ξ', 'Ο', 'Π', 'Ρ', 'Σ', 'Τ',
+ 'Υ', 'Φ', 'Χ', 'Ψ', 'Ω', 'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ', 'ν', 'ξ', 'ο',
+ 'π', 'ρ', 'ς', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω', '←', '↑', '→', '↓', '↔', '◊', '♠', '♣', '♥', '♦',
+ '⌀', '∅'
+ ],
+
+ /**
+ * @cfg {Function} handler
+ * A function that will handle the select event of this picker. The handler is passed the following parameters:
+ *
+ * - `picker` : CharPicker
+ *
+ * - `char` : String
+ */
+
+ /**
+ * @cfg {Object} scope
+ * The scope (`this` reference) in which the `{@link #handler}` function will be called. Defaults to this
+ * Char picker instance.
+ */
+
+ renderTpl: [
+ '<tpl for="chars">',
+ '<a href="#" hidefocus="on">',
+ '<em><span unselectable="on">{.}</span></em>',
+ '</a>',
+ '</tpl>'
+ ],
+
+ // private
+ initComponent : function(){
+ var me = this;
+
+ me.callParent(arguments);
+ me.addEvents(
+ /**
+ * @event select
+ * Fires when a char is selected
+ * @param {Ext.picker.Char} this
+ * @param {String} char The char
+ */
+ 'select');
+
+ if (me.handler) {
+ me.on('select', me.handler, me.scope, true);
+ }
+ },
+
+
+ // private
+ onRender : function(container, position){
+ var me = this,
+ clickEvent = me.clickEvent;
+
+ Ext.apply(me.renderData, {
+ itemCls: me.itemCls,
+ chars: me.chars
+ });
+ me.callParent(arguments);
+
+ me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
+ // always stop following the anchors
+ if(clickEvent != 'click'){
+ me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});
+ }
+ },
+
+ // private
+ afterRender : function(){
+ var me = this,
+ value;
+
+ me.callParent(arguments);
+ if (me.value) {
+ value = me.value;
+ me.value = null;
+ me.select(value, true);
+ }
+ },
+
+ // private
+ handleClick : function(event, target){
+ var me = this;
+
+ event.stopEvent();
+ if (!me.disabled) {
+ var el = Ext.get(target);
+ me.select(el.down("span").dom.textContent);
+ }
+ },
+
+ /**
+ * Selects the specified char in the picker (fires the {@link #select} event)
+ * @param {String} char The char
+ * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to false.
+ */
+ select : function(chr, suppressEvent){
+
+ var me = this,
+ selectedCls = me.selectedCls,
+ value = me.value,
+ el;
+
+ if (!me.rendered) {
+ me.value = chr;
+ return;
+ }
+
+
+ if (chr != value || me.allowReselect) {
+ /*el = me.el;
+
+ if (me.value) {
+ el.down('a.char-' + value).removeCls(selectedCls);
+ }
+ el.down('a.char-' + chr).addCls(selectedCls);*/
+ me.value = chr;
+ if (suppressEvent !== true) {
+ me.fireEvent('select', me, chr);
+ }
+ }
+ },
+
+ /**
+ * Get the currently selected char value.
+ * @return {String} value The selected value. Null if nothing is selected.
+ */
+ getValue: function(){
+ return this.value || null;
+ }
+});+
\ No newline at end of file
diff --git a/src/frontend/js/ExtJS/Enhancements/Ext.input.CharContextMenu.js b/src/frontend/js/ExtJS/Enhancements/Ext.input.CharContextMenu.js
@@ -0,0 +1,39 @@
+/**
+ * Overrides Ext.form.field.Text so that it provides a context menu with a character picker.
+ */
+Ext.override(Ext.form.field.Text, {
+ initComponent: function () {
+ this.callOverridden(arguments);
+
+ // Create the char selector
+ this.charSelector = Ext.create("PartKeepr.ContextMenu.CharPicker", {
+ listeners: {
+ select: function (a,chr) {
+ this.setValue(this.getValue() + chr);
+ },
+ scope: this
+ }
+ });
+
+ // Create the context menu
+ this.menu = Ext.create('widget.menu', {
+ items: [
+ {
+ text: i18n("Insert special character"),
+ menu: this.charSelector
+ }
+ ]
+ });
+ },
+ // Injects the event to the inputEl
+ onRender: function () {
+ this.callOverridden(arguments);
+
+ this.inputEl.on("contextmenu", this.onItemContextMenu, this);
+ },
+ // Display the context menu
+ onItemContextMenu: function (event, el) {
+ event.stopEvent();
+ this.menu.showAt(event.getXY());
+ }
+});+
\ No newline at end of file
