Skip to content

Commit

Permalink
Update Mobile extension & demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mottie
Mottie committed May 29, 2014
1 parent 0243ba2 commit 3cfe798
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 137 deletions.
46 changes: 23 additions & 23 deletions css/keyboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.ui-keyboard { padding: .3em; z-index: 16000; }
.ui-keyboard-has-focus { z-index: 16001; }
.ui-keyboard div { font-size: 1.1em; }
.ui-keyboard-button { height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; -moz-user-focus: ignore; }
.ui-keyboard-button { min-height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; -moz-user-focus: ignore; }
.ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; display: inline-block; }
.ui-keyboard-button-endrow { clear: left; }
.ui-keyboard-widekey { min-width: 4em; width: auto; }
Expand All @@ -12,7 +12,7 @@
.ui-keyboard-preview { text-align: left; margin: 0 0 3px 0; display: inline; width: 99%;} /* width is calculated in IE, since 99% = 99% full browser width =( */
.ui-keyboard-keyset { text-align: center; white-space: nowrap; }
.ui-keyboard-input { text-align: left; }
.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #00f; -webkit-box-shadow: 1px 1px 10px #00f; box-shadow: 1px 1px 10px #00f; }
.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #5e9ed6; -webkit-box-shadow: 1px 1px 10px #5e9ed6; box-shadow: 1px 1px 10px #5e9ed6; }
.ui-keyboard-placeholder { color: #888; }
.ui-keyboard-nokeyboard { color: #888; border-color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
.ui-keyboard-button.disabled { opacity: 0.5; filter: alpha(opacity=50); } /* used by the acceptValid option to make the accept button appear faded */
Expand All @@ -29,47 +29,47 @@ button.ui-keyboard-accept.ui-keyboard-invalid-input:hover { background: #a00; }

/*** jQuery Mobile definitions ***/
/* jQuery Mobile styles - need wider buttons because of font size and text-overflow:ellipsis */
.ui-bar .ui-keyboard-button { width: 3em; display: inline-block; }
.ui-bar .ui-keyboard-widekey { width: 5.5em; }
.ui-bar .ui-keyboard-space { width: 15em; }
.ui-bar .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */
.ui-bar .ui-keyboard-keyset { line-height: 0.5em; }
.ui-bar input.ui-input-text, .ui-bar textarea.ui-input-text { width: 95%; }
.ui-body .ui-keyboard-button { width: 3em; display: inline-block; }
.ui-body .ui-keyboard-widekey { width: 5.5em; }
.ui-body .ui-keyboard-space { width: 15em; }
.ui-body .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */
.ui-body .ui-keyboard-keyset { line-height: 0.5em; }
.ui-body input.ui-input-text, .ui-body textarea.ui-input-text { width: 95%; }

/* over-ride padding set by mobile ui theme - needed because the mobile script wraps button text with several more spans */
.ui-bar .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; }
.ui-bar .ui-btn { margin: 0; font-size: 13px; } /* mobile default size is 13px */
.ui-body .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; }
.ui-body .ui-btn { margin: 0; font-size: 13px; } /* mobile default size is 13px */

/* Media Queries (optimized for jQuery UI themes; may be slightly off in jQuery Mobile themes) */
/* 240 x 320 (small phone) */
@media all and (max-width: 319px) {
.ui-keyboard div { font-size: 9px; }
.ui-keyboard .ui-keyboard-input { font-size: 12px; }
/* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */
.ui-bar .ui-btn { margin: 0; font-size: 9px; }
.ui-bar .ui-keyboard-button { width: 1.8em; height: 2.5em; }
.ui-bar .ui-keyboard-widekey { width: 4em; }
.ui-bar .ui-keyboard-space { width: 8em; }
.ui-bar .ui-btn-inner { height: 2.5em; padding: 0.3em 0; }
.ui-body .ui-btn { margin: 0; font-size: 9px; }
.ui-body .ui-keyboard-button { width: 1.8em; height: 2.5em; }
.ui-body .ui-keyboard-widekey { width: 4em; }
.ui-body .ui-keyboard-space { width: 8em; }
.ui-body .ui-btn-inner { height: 2.5em; padding: 0.3em 0; }
}

/* 320 x 480 (iPhone) */
@media all and (min-width: 320px) and (max-width: 479px) {
.ui-keyboard div { font-size: 9px; }
.ui-keyboard .ui-keyboard-input { font-size: 14px; }
/* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */
.ui-bar .ui-btn { margin: 0; font-size: 11px; }
.ui-bar .ui-keyboard-button { width: 1.8em; height: 3em; }
.ui-bar .ui-keyboard-widekey { width: 4.5em; }
.ui-bar .ui-keyboard-space { width: 10em; }
.ui-bar .ui-btn-inner { height: 3em; padding: 0.7em 0; }
.ui-body .ui-btn { margin: 0; font-size: 11px; }
.ui-body .ui-keyboard-button { width: 1.8em; height: 3em; }
.ui-body .ui-keyboard-widekey { width: 4.5em; }
.ui-body .ui-keyboard-space { width: 10em; }
.ui-body .ui-btn-inner { height: 3em; padding: 0.7em 0; }
}

/* 480 x 640 (small tablet) */
@media all and (min-width: 480px) and (max-width: 767px) {
.ui-keyboard div { font-size: 13px; }
.ui-keyboard .ui-keyboard-input { font-size: 14px; }
.ui-bar .ui-btn { margin: 0; font-size: 10px; }
.ui-bar .ui-keyboard-button { height: 2.5em; }
.ui-bar .ui-btn-inner { height: 2.5em; padding: 0.5em 0; }
.ui-body .ui-btn { margin: 0; font-size: 10px; }
.ui-body .ui-keyboard-button { height: 2.5em; }
.ui-body .ui-btn-inner { height: 2.5em; padding: 0.5em 0; }
}
3 changes: 1 addition & 2 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,9 @@ textarea, input { width: 260px; background: #333; color: #ddd; border: #777 1px
#mobile #switcher fieldset { text-align: center; white-space: nowrap; margin: 0; height: 20px; }
#mobile #switcher input { visibility: hidden; }
#mobile .ui-icon-radio-on, #mobile .ui-icon-radio-off { display: none; }
#mobile #switcher .ui-btn-active { box-shadow: 0 1px 5px rgba(255, 255, 255, 0.7); }
#mobile #switcher .ui-controlgroup-label { display: block; margin: 0 0 15px 0; width: auto; }
#mobile #switcher .ui-btn-inner { padding: 0; }
#mobile #switcher .ui-radio, #mobile #switcher .ui-radio label { font-size: 10px; width: 20px; height: 20px; margin: 0; display: inline-block; }
#mobile #switcher .ui-radio, #mobile #switcher .ui-radio label { font-size: 10px; margin: 0; display: inline-block; }
#mobile #switcher .ui-btn-text { position: relative; top: 2px; left: 5px; width: 10px; }

#footer { height: 150px; }
Expand Down
13 changes: 9 additions & 4 deletions jquery-mobile-1.4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
by Brandon White (https://github.com/BrandonLWhite)
*/
$.widget("bw.virtualNumericKeyboard", {
initSelector: "input[type='number']",
initSelector: "input.numeric",

_create: function () {
var self = this;
Expand Down Expand Up @@ -180,24 +180,29 @@
<h1><a data-ajax="false" href="https://github.com/Mottie/Keyboard">Virtual Keyboard jQuery Mobile v1.4 Demo</a></h1>
<h4>by Brandon White</h4>

<!--
Modified inputs to be type="text" as caret positioning is no longer supported in type="number".
See https://github.com/Mottie/Keyboard/issues/241
-->

<div class="block">
<label>
Numeric:
<input type="number" />
<input class="numeric" type="text" />
</label>
</div>

<div class="block">
<label>
Numeric Integer:
<input type="number" step="1"/>
<input class="numeric" type="text" step="1"/>
</label>
</div>

<div class="block">
<label>
Numeric Positive Integer:
<input type="number" min="0" step="1"/>
<input class="numeric" type="text" min="0" step="1"/>
</label>
</div>

Expand Down
73 changes: 45 additions & 28 deletions js/jquery.keyboard.extension-mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,19 @@ $.fn.addMobile = function(options){

var o, defaults = {
// keyboard wrapper theme
container : { theme:'a' },
container : { theme:'b', cssClass:'ui-body' },
// keyboard duplicate input
input : { theme:'b', cssClass:'' },
// theme added to all regular buttons
buttonMarkup : { theme:'a', shadow:'true', corners:'true' },
buttonMarkup : { theme:'b', cssClass:'ui-btn', shadow:'true', corners:'true' },
// theme added to all buttons when they are being hovered
buttonHover : { theme:'c' },
buttonHover : { theme:'b', cssClass:'ui-btn-hover' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'b' },
buttonAction : { theme:'b', cssClass:'ui-btn-active' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'e' }
buttonActive : { theme:'b', cssClass:'ui-btn-active' }
};

return this.each(function(){
Expand All @@ -49,7 +51,7 @@ $.fn.addMobile = function(options){
// Stop if no keyboard attached or if jQuery Mobile isn't loaded
if (!base || typeof($.fn.textinput) === 'undefined') { return; }

base.mobile_options = o = $.extend({}, defaults, options);
base.mobile_options = o = $.extend(true, {}, defaults, options);

// Setup
base.mobile_init = function(){
Expand All @@ -63,12 +65,13 @@ $.fn.addMobile = function(options){
}

// Setup mobile theme on keyboard once it is visible.
// Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'.
// Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'.
// Since we are restyling here, the user will experience FlashOfUnstyledContent (FOUC).
// This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we
// This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we
// set it visible.
//
base.$el.on('beforeVisible.keyboard', function () {
base.$el
.on('beforeVisible.keyboard', function () {
base.$keyboard.css("visibility", "hidden");
})
.on('visible.keyboard', function () {
Expand All @@ -80,50 +83,64 @@ $.fn.addMobile = function(options){
};

base.mobile_setup = function(){
var p, actn = $.extend({}, o.buttonMarkup, o.buttonAction);
var p,
opts = base.options,
markup = o.buttonMarkup.cssClass || '',
actions = opts.css.buttonAction;

opts.css.buttonAction += ' ' + o.buttonAction.cssClass;

base.$keyboard
// 'ui-bar ui-bar-a' classes to apply swatch theme
.addClass('ui-bar ui-bar-' + o.container.theme)
.addClass( base.modOptions(o.container, o.container) )
// preview input
.find('.ui-keyboard-preview').addClass( base.modOptions(o.input, o.input) ).end()
// removing 'ui-widget-content' will prevent jQuery UI theme from applying to the keyboard
.removeClass('ui-widget ui-widget-content')
.find('.' + actions).addClass( base.modOptions(o.buttonAction, o.buttonMarkup) ).end()
// apply jQuery Mobile button markup
// removed call to jQuery Mobile buttonMarkup function; replaced with base.modButton
.find('button:not(.' + base.options.css.buttonAction + ')').addClass( base.modButton(o.buttonMarkup) ).end()
.find('.' + base.options.css.buttonAction).addClass( base.modButton(actn) ).end()
.find('button').removeClass('ui-corner-all ui-state-default')
// removed call to jQuery Mobile buttonMarkup function; replaced with base.modOptions
.find('button')
.removeClass('ui-corner-all ui-state-default')
.addClass( base.modOptions(o.buttonMarkup) )
.hover(function(){
$(this).addClass('ui-btn-hover-' + o.buttonHover.theme);
$(this)
.removeClass( markup ? markup + '-' + o.buttonMarkup.theme : '' )
.addClass( base.modOptions(o.buttonHover, o.buttonMarkup) );
},function(){
$(this).removeClass('ui-btn-hover-' + o.buttonHover.theme);
$(this)
.removeClass( markup ? markup + '-' + o.buttonHover.theme : '' )
.addClass( base.modOptions(o.buttonMarkup, o.buttonMarkup) );
});

// set actionClass (default for jQuery UI = 'ui-state-active'),
// which is the active state of the button (shift is down)
base.options.css.buttonAction = 'ui-btn-down-' + o.buttonActive.theme;

// update keyboard width if preview is showing... after applying mobile theme
if (base.msie && base.$preview[0] !== base.el) {
base.$preview.hide();
base.$keyboard.css('width','');
base.width = base.$keyboard.outerWidth();
base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10)); // add about 1em to input width for extra padding
// add about 1em to input width for extra padding
base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10));
base.$preview.width(base.width);
base.$preview.show();
}

// adjust keyboard position after applying mobile theme
p = base.options.position;
p.of = p.of || base.$el.data('keyboardPosition') || base.$el;
p.collision = (base.options.usePreview) ? p.collision || 'fit fit' : 'flip flip';
base.$keyboard.position(p);
if ($.ui && $.ui.position) {
p = opts.position;
p.of = p.of || base.$el.data('keyboardPosition') || base.$el;
p.collision = p.collision || 'flipfit flipfit';
base.$keyboard.position(p);
}

};

base.modButton = function(t){
base.modOptions = function(t, btn){
var css = ' ' + ( t.cssClass || '' );
// Using this instead of the jQuery Mobile buttonMarkup because it is expecting <a>'s instead of <button>
// theme:'a', shadow:'true', inline:'true', corners:'false'
return 'ui-btn ui-btn-up-' + t.theme + ' ui-btn-' + t.theme + (t.shadow == 'true' ? ' ui-shadow' : '') + (t.corners == 'true' ? ' ui-btn-corner-all' : '');
return css + ' ' + (btn && btn.cssClass ? btn.cssClass + '-' + (t.theme || '') : '') +
(t.shadow == 'true' ? ' ui-shadow' : '') +
(t.corners == 'true' ? ' ui-corner-all' : '');
};

base.mobile_init();
Expand Down
Loading

0 comments on commit 3cfe798

Please sign in to comment.