first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* Framework7 Keypad 1.0.3
|
||||
* Keypad plugin extends Framework7 with additional custom keyboards
|
||||
*
|
||||
* http://www.idangero.us/framework7/plugins/
|
||||
*
|
||||
* Copyright 2015, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: August 22, 2015
|
||||
*/
|
||||
.picker-keypad.picker-modal-inline {
|
||||
height: 200px;
|
||||
}
|
||||
.picker-keypad.picker-modal-inline.picker-keypad-type-calculator {
|
||||
height: 260px;
|
||||
}
|
||||
@media (orientation: landscape) and (max-height: 415px) {
|
||||
.picker-keypad:not(.picker-modal-inline) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
.picker-keypad .picker-modal-inner:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: rgba(92, 94, 96, 0.35);
|
||||
display: block;
|
||||
z-index: 15;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-2 .picker-keypad .picker-modal-inner:before {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-3 .picker-keypad .picker-modal-inner:before {
|
||||
-webkit-transform: scaleY(0.33);
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
.picker-keypad.picker-modal-inline .picker-modal-inner:before,
|
||||
.popover.popover-picker-keypad .picker-keypad .picker-modal-inner:before {
|
||||
display: none;
|
||||
}
|
||||
i.icon-keypad-delete {
|
||||
width: 22px;
|
||||
height: 16px;
|
||||
background-size: 22px 16px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M18,0h-8C8.9,0,7.9,0.5,7.1,1.2c0,0,0,0,0,0L1,7.2C0.6,7.7,0.6,8.4,1,8.8l4.9,4.7L7,14.6c0,0,0,0,0,0c0.7,0.9,1.8,1.4,3,1.4 h8c2.2,0,4-1.8,4-4V4C22,1.8,20.2,0,18,0z M17.3,11.2l-0.7,0.7l-3.2-3.2l-3.2,3.2l-0.7-0.7L12.8,8L9.6,4.8l0.7-0.7l3.2,3.2l3.2-3.2 l0.7,0.7L14.2,8L17.3,11.2z' fill='%23000000'/></svg>");
|
||||
}
|
||||
.picker-keypad-buttons {
|
||||
color: #000;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-lines: multiple;
|
||||
-moz-box-lines: multiple;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.picker-keypad-button {
|
||||
background: #fcfcfd;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
width: 33.33333333%;
|
||||
width: -webkit-calc(100% / 3);
|
||||
width: calc(100% / 3);
|
||||
height: 25%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.picker-keypad-button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: rgba(92, 94, 96, 0.35);
|
||||
display: block;
|
||||
z-index: 15;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-2 .picker-keypad-button:after {
|
||||
-webkit-transform: scaleX(0.5);
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-3 .picker-keypad-button:after {
|
||||
-webkit-transform: scaleX(0.33);
|
||||
transform: scaleX(0.33);
|
||||
}
|
||||
.picker-keypad-button:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: rgba(92, 94, 96, 0.35);
|
||||
display: block;
|
||||
z-index: 15;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-2 .picker-keypad-button:before {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
html.ios-gt-6.pixel-ratio-3 .picker-keypad-button:before {
|
||||
-webkit-transform: scaleY(0.33);
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
html:not(.watch-active-state) .picker-keypad-button:not(.picker-keypad-dummy-button):active,
|
||||
.picker-keypad-button:not(.picker-keypad-dummy-button).active-state {
|
||||
background: #bcc0c5;
|
||||
}
|
||||
.picker-keypad-button.picker-keypad-button-dark {
|
||||
background: #bcc0c5;
|
||||
}
|
||||
html:not(.watch-active-state) .picker-keypad-button.picker-keypad-button-dark:not(.picker-keypad-dummy-button):active,
|
||||
.picker-keypad-button.picker-keypad-button-dark:not(.picker-keypad-dummy-button).active-state {
|
||||
background: #fcfcfd;
|
||||
}
|
||||
.picker-keypad-button.picker-keypad-dummy-button {
|
||||
cursor: default;
|
||||
}
|
||||
.picker-keypad-type-numpad .picker-keypad-button:nth-child(3n):after {
|
||||
display: none;
|
||||
}
|
||||
.picker-keypad-type-numpad .picker-keypad-button:nth-child(-n + 3):before {
|
||||
display: none;
|
||||
}
|
||||
.picker-keypad-type-numpad .picker-keypad-button.picker-keypad-button-double {
|
||||
width: 66.66666667%;
|
||||
width: -webkit-calc(100% / 3 * 2);
|
||||
width: calc(100% / 3 * 2);
|
||||
}
|
||||
.picker-keypad-type-calculator .picker-keypad-button {
|
||||
width: 25%;
|
||||
height: 20%;
|
||||
font-weight: 300;
|
||||
}
|
||||
.picker-keypad-type-calculator .picker-keypad-button:nth-child(4n):after {
|
||||
display: none;
|
||||
}
|
||||
.picker-keypad-type-calculator .picker-keypad-button:nth-child(-n + 4):before {
|
||||
display: none;
|
||||
}
|
||||
.picker-keypad-type-calculator .picker-keypad-button.picker-keypad-button-double {
|
||||
width: 50%;
|
||||
}
|
||||
.picker-keypad-button.calc-operator-button {
|
||||
color: #fff;
|
||||
background: #ff9500;
|
||||
}
|
||||
html:not(.watch-active-state) .picker-keypad-button.calc-operator-button:active,
|
||||
.picker-keypad-button.calc-operator-button.active-state {
|
||||
background: #e0750e;
|
||||
}
|
||||
.picker-keypad-button.calc-operator-button.calc-operator-active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.picker-keypad-button-number,
|
||||
.picker-keypad-button-letters {
|
||||
display: block;
|
||||
}
|
||||
.picker-keypad-button-number {
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
.picker-keypad-button-letters {
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.list-block input[type="numpad"],
|
||||
.list-block input[type="calculator"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 0 0 0 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
padding: 0 0 0 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
color: #000;
|
||||
font-size: 17px;
|
||||
font-family: inherit;
|
||||
}
|
||||
@@ -0,0 +1,648 @@
|
||||
/**
|
||||
* Framework7 Keypad 1.0.3
|
||||
* Keypad plugin extends Framework7 with additional custom keyboards
|
||||
*
|
||||
* http://www.idangero.us/framework7/plugins/
|
||||
*
|
||||
* Copyright 2015, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: August 22, 2015
|
||||
*/
|
||||
Framework7.prototype.plugins.keypad = function (app) {
|
||||
'use strict';
|
||||
var $ = window.Dom7;
|
||||
var t7 = window.Template7;
|
||||
|
||||
var Keypad = function (params) {
|
||||
var p = this;
|
||||
|
||||
var defaults = {
|
||||
type: 'numpad', //or 'calculator' or 'custom',
|
||||
valueMaxLength: null,
|
||||
dotButton: true,
|
||||
dotCharacter: '.',
|
||||
buttons: (function () {
|
||||
var dotCharacter = params.dotCharacter || '.';
|
||||
if (typeof params.type === 'undefined' || params.type === 'numpad') {
|
||||
// numpad
|
||||
var dotButton = params.dotButton === undefined ? true : params.dotButton;
|
||||
return [
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">1</span><span class="picker-keypad-button-letters"></span>',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">2</span><span class="picker-keypad-button-letters">ABC</span>',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">3</span><span class="picker-keypad-button-letters">DEF</span>',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">4</span><span class="picker-keypad-button-letters">GHI</span>',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">5</span><span class="picker-keypad-button-letters">JKL</span>',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">6</span><span class="picker-keypad-button-letters">MNO</span>',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">7</span><span class="picker-keypad-button-letters">PQRS</span>',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">8</span><span class="picker-keypad-button-letters">TUV</span>',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">9</span><span class="picker-keypad-button-letters">WXYZ</span>',
|
||||
value: 9
|
||||
},
|
||||
{
|
||||
html: dotButton ? '<span class="picker-keypad-button-number">' + dotCharacter + '</span>' : '',
|
||||
value: dotButton ? dotCharacter : undefined,
|
||||
dark: true,
|
||||
cssClass: dotButton ? '' : 'picker-keypad-dummy-button'
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">0</span>',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
html: '<i class="icon icon-keypad-delete"></i>',
|
||||
cssClass: 'picker-keypad-delete',
|
||||
dark: true
|
||||
},
|
||||
];
|
||||
}
|
||||
else if (params.type === 'calculator') {
|
||||
// calculator
|
||||
return [
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">C</span>',
|
||||
value: 'C',
|
||||
dark:true,
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">±</span>',
|
||||
value: '±',
|
||||
dark:true,
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">%</span>',
|
||||
value: '%',
|
||||
dark:true,
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">÷</span>',
|
||||
value: '÷',
|
||||
cssClass: 'calc-operator-button'
|
||||
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">7</span>',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">8</span>',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">9</span>',
|
||||
value: 9
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">×</span>',
|
||||
value: '×',
|
||||
cssClass: 'calc-operator-button'
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">4</span>',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">5</span>',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">6</span>',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">-</span>',
|
||||
value: '-',
|
||||
cssClass: 'calc-operator-button'
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">1</span>',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">2</span>',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">3</span>',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">+</span>',
|
||||
value: '+',
|
||||
cssClass: 'calc-operator-button'
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">0</span>',
|
||||
value: 0,
|
||||
cssClass: 'picker-keypad-button-double'
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">.</span>',
|
||||
value: dotCharacter
|
||||
},
|
||||
{
|
||||
html: '<span class="picker-keypad-button-number">=</span>',
|
||||
value: '=',
|
||||
cssClass: 'calc-operator-button calc-operator-button-equal'
|
||||
},
|
||||
];
|
||||
}
|
||||
else {
|
||||
// custom
|
||||
return [];
|
||||
}
|
||||
})(),
|
||||
// Common settings
|
||||
closeByOutsideClick: true,
|
||||
scrollToInput: true,
|
||||
inputReadOnly: true,
|
||||
convertToPopover: true,
|
||||
onlyInPopover: false,
|
||||
toolbar: true,
|
||||
toolbarCloseText: 'Done',
|
||||
toolbarTemplate:
|
||||
'<div class="toolbar">' +
|
||||
'<div class="toolbar-inner">' +
|
||||
'<div class="left"></div>' +
|
||||
'<div class="right">' +
|
||||
'<a href="#" class="link close-picker">{{closeText}}</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
};
|
||||
params = params || {};
|
||||
for (var def in defaults) {
|
||||
if (typeof params[def] === 'undefined') {
|
||||
params[def] = defaults[def];
|
||||
}
|
||||
}
|
||||
p.params = params;
|
||||
p.cols = [];
|
||||
p.initialized = false;
|
||||
|
||||
// Inline flag
|
||||
p.inline = p.params.container ? true : false;
|
||||
|
||||
// 3D Transforms origin bug, only on safari
|
||||
var originBug = app.device.ios || (navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && navigator.userAgent.toLowerCase().indexOf('chrome') < 0) && !app.device.android;
|
||||
|
||||
// Should be converted to popover
|
||||
function isPopover() {
|
||||
var toPopover = false;
|
||||
if (!p.params.convertToPopover && !p.params.onlyInPopover) return toPopover;
|
||||
if (!p.inline && p.params.input) {
|
||||
if (p.params.onlyInPopover) toPopover = true;
|
||||
else {
|
||||
if (app.device.ios) {
|
||||
toPopover = app.device.ipad ? true : false;
|
||||
}
|
||||
else {
|
||||
if ($(window).width() >= 768) toPopover = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return toPopover;
|
||||
}
|
||||
function inPopover() {
|
||||
if (p.opened && p.container && p.container.length > 0 && p.container.parents('.popover').length > 0) return true;
|
||||
else return false;
|
||||
}
|
||||
// Calculator
|
||||
var calcValues = [];
|
||||
var calcOperations = [];
|
||||
var lastWasNumber = false;
|
||||
p.calculator = function (value) {
|
||||
var operators = ('+ - = × ÷ ± %').split(' ');
|
||||
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.'];
|
||||
var reset = 'C';
|
||||
var invert = '±';
|
||||
var perc = '%';
|
||||
function calc () {
|
||||
var toEval = '';
|
||||
for (var i = 0; i < calcOperations.length; i++) {
|
||||
var operation = calcOperations[i];
|
||||
if (i === calcOperations.length - 1 && operators.indexOf(operation) >= 0) {
|
||||
|
||||
}
|
||||
else if (operation) {
|
||||
if (operation === '.') {
|
||||
operation = 0;
|
||||
}
|
||||
toEval += (operation.toString() + '')
|
||||
.replace('×', '*')
|
||||
.replace('÷', '/');
|
||||
}
|
||||
}
|
||||
toEval = toEval.replace(/--/g, '+');
|
||||
p.setValue(eval.call(window, toEval));
|
||||
}
|
||||
if (!p.value) p.value = 0;
|
||||
if (value === reset) {
|
||||
p.setValue(0);
|
||||
calcValues = [];
|
||||
calcOperations = [];
|
||||
return;
|
||||
}
|
||||
if (numbers.indexOf(value) >= 0) {
|
||||
if (value === '.') {
|
||||
if (lastWasNumber && p.value.toString().indexOf('.') >= 0) return;
|
||||
}
|
||||
if (operators.indexOf(calcValues[calcValues.length - 1]) >= 0) {
|
||||
p.setValue(value);
|
||||
}
|
||||
else {
|
||||
p.setValue(p.value ? p.value + '' + value : value);
|
||||
}
|
||||
lastWasNumber = true;
|
||||
}
|
||||
if (operators.indexOf(value) >= 0) {
|
||||
if (value === invert) {
|
||||
if (p.value === '.') return;
|
||||
p.setValue(-1 * p.value);
|
||||
lastWasNumber = true;
|
||||
}
|
||||
else if (value === perc) {
|
||||
if (calcOperations[calcOperations.length - 2]) {
|
||||
var percents = p.value / 100;
|
||||
p.setValue(calcOperations[calcOperations.length - 2] * percents);
|
||||
}
|
||||
lastWasNumber = true;
|
||||
}
|
||||
else {
|
||||
var lastOperation = calcOperations[calcOperations.length - 1];
|
||||
if (value === '=') {
|
||||
if (calcOperations[calcOperations.length - 1] === '=') {
|
||||
if (calcOperations.length < 2) return;
|
||||
calcOperations.pop();
|
||||
var val1 = calcOperations[calcOperations.length - 2];
|
||||
var val2 = calcOperations[calcOperations.length - 1];
|
||||
calcOperations.push(val1);
|
||||
calcOperations.push(val2);
|
||||
}
|
||||
else {
|
||||
calcOperations.push(p.value);
|
||||
}
|
||||
calcOperations.push('=');
|
||||
calc();
|
||||
}
|
||||
else if (['-', '+', '×', '÷', '='].indexOf(lastOperation) >= 0) {
|
||||
if (lastOperation === '=') {
|
||||
calcOperations = [p.value, value];
|
||||
}
|
||||
if (['-', '+', '×', '÷'].indexOf(lastOperation) >= 0) {
|
||||
if (lastWasNumber) {
|
||||
if (['-', '+'].indexOf(lastOperation) >= 0 && ['×', '÷'].indexOf(value) >= 0) {
|
||||
calcOperations.push(p.value);
|
||||
calcOperations.push(value);
|
||||
}
|
||||
else {
|
||||
calcOperations.push(p.value);
|
||||
calcOperations.push(value);
|
||||
calc();
|
||||
}
|
||||
}
|
||||
else {
|
||||
calcOperations[calcOperations.length - 1] = value;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
calcOperations.push(p.value);
|
||||
calcOperations.push(value);
|
||||
calc();
|
||||
}
|
||||
lastWasNumber = false;
|
||||
}
|
||||
}
|
||||
if (value !== invert && value !== perc) calcValues.push(value);
|
||||
};
|
||||
// Value
|
||||
p.setValue = function (value) {
|
||||
p.updateValue(value);
|
||||
};
|
||||
p.updateValue = function (newValue) {
|
||||
p.value = newValue;
|
||||
if (p.params.valueMaxLength && p.value.length > p.params.valueMaxLength) {
|
||||
p.value = p.value.substring(0, p.params.valueMaxLength);
|
||||
}
|
||||
if (p.params.onChange) {
|
||||
p.params.onChange(p, p.value);
|
||||
}
|
||||
if (p.input && p.input.length > 0) {
|
||||
$(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value) : p.value);
|
||||
$(p.input).trigger('change');
|
||||
}
|
||||
};
|
||||
|
||||
// Columns Handlers
|
||||
p.initKeypadEvents = function () {
|
||||
var buttonsContainer = p.container.find('.picker-keypad-buttons');
|
||||
|
||||
function handleClick(e) {
|
||||
var buttonContainer = $(e.target);
|
||||
if (!buttonContainer.hasClass('picker-keypad-button')) {
|
||||
buttonContainer = buttonContainer.parents('.picker-keypad-button');
|
||||
}
|
||||
if (buttonContainer.length === 0) return;
|
||||
var button = p.params.buttons[buttonContainer.index()];
|
||||
var buttonValue = button.value;
|
||||
var currentValue = p.value;
|
||||
|
||||
if (p.params.type === 'numpad') {
|
||||
if (typeof currentValue === 'undefined') currentValue = '';
|
||||
if (buttonContainer.hasClass('picker-keypad-delete')) {
|
||||
currentValue = currentValue.substring(0, currentValue.length - 1);
|
||||
}
|
||||
else {
|
||||
if (typeof buttonValue !== 'undefined') {
|
||||
if (buttonValue === '.' && currentValue.indexOf('.') >= 0) {
|
||||
buttonValue = '';
|
||||
}
|
||||
currentValue += buttonValue;
|
||||
}
|
||||
}
|
||||
if (typeof currentValue !== 'undefined') p.setValue(currentValue);
|
||||
}
|
||||
if (p.params.type === 'calculator') {
|
||||
p.calculator(button.value);
|
||||
buttonsContainer.find('.calc-operator-active').removeClass('calc-operator-active');
|
||||
if (buttonContainer.hasClass('calc-operator-button') && !buttonContainer.hasClass('calc-operator-button-equal')) {
|
||||
buttonContainer.addClass('calc-operator-active');
|
||||
}
|
||||
}
|
||||
if (p.params.type === 'custom') {
|
||||
|
||||
}
|
||||
if (button.onClick) {
|
||||
button.onClick(p, button);
|
||||
}
|
||||
}
|
||||
|
||||
buttonsContainer.on('click', handleClick);
|
||||
|
||||
p.container[0].f7DestroyKeypadEvents = function () {
|
||||
buttonsContainer.off('click', handleClick);
|
||||
};
|
||||
|
||||
};
|
||||
p.destroyKeypadEvents = function (colContainer) {
|
||||
if ('f7DestroyKeypadEvents' in p.container[0]) p.container[0].f7DestroyKeypadEvents();
|
||||
};
|
||||
|
||||
// HTML Layout
|
||||
p.buttonsHTML = function () {
|
||||
var buttonsHTML = '', buttonClass, button;
|
||||
for (var i = 0; i < p.params.buttons.length; i++) {
|
||||
button = p.params.buttons[i];
|
||||
buttonClass = 'picker-keypad-button';
|
||||
if (button.dark) buttonClass += ' picker-keypad-button-dark';
|
||||
if (button.cssClass) buttonClass += ' ' + button.cssClass;
|
||||
buttonsHTML += '<span class="' + buttonClass + '">' + (button.html || '') + '</span>';
|
||||
}
|
||||
return buttonsHTML;
|
||||
};
|
||||
p.layout = function () {
|
||||
var pickerHTML = '';
|
||||
var pickerClass = '';
|
||||
var i;
|
||||
var buttonsHTML = p.buttonsHTML();
|
||||
pickerClass = 'picker-modal picker-keypad picker-keypad-type-' + p.params.type + ' ' + (p.params.cssClass || '');
|
||||
pickerHTML =
|
||||
'<div class="' + (pickerClass) + '">' +
|
||||
(p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText) : '') +
|
||||
'<div class="picker-modal-inner picker-keypad-buttons">' +
|
||||
buttonsHTML +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
p.pickerHTML = pickerHTML;
|
||||
};
|
||||
|
||||
// Input Events
|
||||
function openOnInput(e) {
|
||||
e.preventDefault();
|
||||
if (p.opened) return;
|
||||
p.open();
|
||||
if (p.params.scrollToInput && !isPopover()) {
|
||||
var pageContent = p.input.parents('.page-content');
|
||||
if (pageContent.length === 0) return;
|
||||
|
||||
var paddingTop = parseInt(pageContent.css('padding-top'), 10),
|
||||
paddingBottom = parseInt(pageContent.css('padding-bottom'), 10),
|
||||
pageHeight = pageContent[0].offsetHeight - paddingTop - p.container.height(),
|
||||
pageScrollHeight = pageContent[0].scrollHeight - paddingTop - p.container.height(),
|
||||
newPaddingBottom;
|
||||
var inputTop = p.input.offset().top - paddingTop + p.input[0].offsetHeight;
|
||||
if (inputTop > pageHeight) {
|
||||
var scrollTop = pageContent.scrollTop() + inputTop - pageHeight;
|
||||
if (scrollTop + pageHeight > pageScrollHeight) {
|
||||
newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom;
|
||||
if (pageHeight === pageScrollHeight) {
|
||||
newPaddingBottom = p.container.height();
|
||||
}
|
||||
pageContent.css({'padding-bottom': (newPaddingBottom) + 'px'});
|
||||
}
|
||||
pageContent.scrollTop(scrollTop, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
function closeOnHTMLClick(e) {
|
||||
if (inPopover()) return;
|
||||
if (p.input && p.input.length > 0) {
|
||||
if (e.target !== p.input[0] && $(e.target).parents('.picker-modal').length === 0) {
|
||||
p.close();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ($(e.target).parents('.picker-modal').length === 0) p.close();
|
||||
}
|
||||
}
|
||||
|
||||
if (p.params.input) {
|
||||
p.input = $(p.params.input);
|
||||
if (p.input.length > 0) {
|
||||
if (p.params.inputReadOnly) p.input.prop('readOnly', true);
|
||||
if (!p.inline) {
|
||||
p.input.on('click', openOnInput);
|
||||
}
|
||||
if (p.params.inputReadOnly) {
|
||||
p.input.on('focus mousedown', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!p.inline && p.params.closeByOutsideClick) $('html').on('click', closeOnHTMLClick);
|
||||
|
||||
// Open
|
||||
function onPickerClose() {
|
||||
p.opened = false;
|
||||
if (p.input && p.input.length > 0) {
|
||||
p.input.parents('.page-content').css({'padding-bottom': ''});
|
||||
if (app.params.material) p.input.trigger('blur');
|
||||
}
|
||||
if (p.params.onClose) p.params.onClose(p);
|
||||
|
||||
// Destroy events
|
||||
p.container.find('.picker-items-col').each(function () {
|
||||
p.destroyPickerCol(this);
|
||||
});
|
||||
}
|
||||
|
||||
p.opened = false;
|
||||
p.open = function () {
|
||||
var toPopover = isPopover();
|
||||
|
||||
if (!p.opened) {
|
||||
|
||||
// Layout
|
||||
p.layout();
|
||||
|
||||
// Append
|
||||
if (toPopover) {
|
||||
p.pickerHTML = '<div class="popover popover-picker-keypad"><div class="popover-inner">' + p.pickerHTML + '</div></div>';
|
||||
p.popover = app.popover(p.pickerHTML, p.params.input, true);
|
||||
p.container = $(p.popover).find('.picker-modal');
|
||||
$(p.popover).on('close', function () {
|
||||
onPickerClose();
|
||||
});
|
||||
}
|
||||
else if (p.inline) {
|
||||
p.container = $(p.pickerHTML);
|
||||
p.container.addClass('picker-modal-inline');
|
||||
$(p.params.container).append(p.container);
|
||||
}
|
||||
else {
|
||||
p.container = $(app.pickerModal(p.pickerHTML));
|
||||
$(p.container)
|
||||
.on('close', function () {
|
||||
onPickerClose();
|
||||
});
|
||||
}
|
||||
|
||||
// Store picker instance
|
||||
p.container[0].f7Keypad = p;
|
||||
|
||||
// Init Events
|
||||
p.initKeypadEvents();
|
||||
|
||||
// Set value
|
||||
if (!p.initialized) {
|
||||
if (p.params.value) {
|
||||
p.setValue(p.params.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (p.value) p.setValue(p.value);
|
||||
}
|
||||
|
||||
// Material Focus
|
||||
if (p.input && p.input.length > 0 && app.params.material) {
|
||||
p.input.trigger('focus');
|
||||
}
|
||||
}
|
||||
|
||||
// Set flag
|
||||
p.opened = true;
|
||||
p.initialized = true;
|
||||
|
||||
if (p.params.onOpen) p.params.onOpen(p);
|
||||
};
|
||||
|
||||
// Close
|
||||
p.close = function () {
|
||||
if (!p.opened || p.inline) return;
|
||||
if (inPopover()) {
|
||||
app.closeModal(p.popover);
|
||||
return;
|
||||
}
|
||||
else {
|
||||
app.closeModal(p.container);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Destroy
|
||||
p.destroy = function () {
|
||||
p.close();
|
||||
if (p.params.input && p.input.length > 0) {
|
||||
p.input.off('click focus', openOnInput);
|
||||
}
|
||||
$('html').off('click', closeOnHTMLClick);
|
||||
};
|
||||
|
||||
if (p.inline) {
|
||||
p.open();
|
||||
}
|
||||
|
||||
return p;
|
||||
};
|
||||
|
||||
app.keypad = function (params) {
|
||||
return new Keypad(params);
|
||||
};
|
||||
function pageInit(page) {
|
||||
$(page.container).find('input[type="numpad"], input[type="calculator"]').each(function () {
|
||||
var input = $(this);
|
||||
input[0].f7Keypad = new Keypad({
|
||||
input: input,
|
||||
type: input.attr('type'),
|
||||
value: input.val() || 0,
|
||||
valueMaxLength: input.attr('maxlength') || undefined,
|
||||
toolbar: input.attr('data-toolbar') === 'false' ? false : true,
|
||||
toolbarCloseText: input.attr('data-toolbarCloseText') || undefined
|
||||
});
|
||||
});
|
||||
$(page.container).find('.numpad-init, .calculator-init').each(function () {
|
||||
var inline = $(this);
|
||||
var type;
|
||||
if (inline.hasClass('calculator-init')) type = 'calculator';
|
||||
if (inline.hasClass('numpad-init')) type = 'numpad';
|
||||
inline[0].f7Keypad = new Keypad({
|
||||
input: inline.attr('data-input') || undefined,
|
||||
type: type,
|
||||
value: inline.attr('data-value') || undefined,
|
||||
valueMaxLength: input.attr('maxlength') || undefined,
|
||||
toolbar: input.attr('data-toolbar') === 'false' ? false : true,
|
||||
toolbarCloseText: input.attr('data-toolbarCloseText') || undefined
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
hooks : {
|
||||
pageInit: pageInit,
|
||||
}
|
||||
};
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user