Skip to content

Commit 1f194ac

Browse files
nolimits4webnolimits4web
committed
feat: Framework7 v7 support
1 parent e509be1 commit 1f194ac

28 files changed

+10518
-5547
lines changed

‎.eslintrc.js

+9-29
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,15 @@
11
module.exports = {
2-
'extends': 'airbnb-base',
3-
'plugins': [
4-
"import"
5-
],
6-
'globals': {
7-
"window": true,
8-
"document": true,
9-
"XMLHttpRequest": true,
10-
"Blob": true,
11-
"Document": true,
12-
"FormData": true,
2+
extends: ['airbnb', 'prettier'],
3+
plugins: ['import'],
4+
globals: {
5+
window: true,
6+
document: true,
7+
XMLHttpRequest: true,
8+
Blob: true,
9+
Document: true,
10+
FormData: true,
1311
},
1412
rules: {
15-
'max-len': ['error', 1000, 2, {
16-
ignoreUrls: true,
17-
ignoreComments: false,
18-
ignoreRegExpLiterals: true,
19-
ignoreStrings: true,
20-
ignoreTemplateLiterals: true,
21-
}],
22-
'object-curly-newline': ['error', {
23-
ObjectExpression: { minProperties: 9, multiline: true, consistent: true },
24-
ObjectPattern: { minProperties: 9, multiline: true, consistent: true }
25-
}],
26-
'comma-dangle': ['error', {
27-
arrays: 'always-multiline',
28-
objects: 'always-multiline',
29-
imports: 'always-multiline',
30-
exports: 'always-multiline',
31-
functions: 'never',
32-
}],
3313
'prefer-destructuring': ['off'],
3414
},
3515
};

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.DS_Store
22
node_modules
33
build
4-
demo/framework7
4+
demo/www

‎.prettierrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"htmlWhitespaceSensitivity": "css",
5+
"insertPragma": false,
6+
"jsxBracketSameLine": false,
7+
"jsxSingleQuote": false,
8+
"printWidth": 80,
9+
"proseWrap": "preserve",
10+
"quoteProps": "as-needed",
11+
"requirePragma": false,
12+
"endOfLine": "auto",
13+
"semi": true,
14+
"singleQuote": true,
15+
"tabWidth": 2,
16+
"trailingComma": "all",
17+
"useTabs": false,
18+
}

‎.vscode/settings.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode"
4+
}

‎demo/app.css

Whitespace-only changes.

‎demo/app.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Framework7Keypad from '../src/framework7-keypad.js';
2+
import '../src/framework7-keypad.less';
3+
4+
import AutoInit from './auto-init.f7';
5+
import PassCode from './passcode.f7';
6+
7+
Framework7.use(Framework7Keypad);
8+
9+
const app = new Framework7({
10+
el: '#app',
11+
routes: [
12+
{
13+
path: '/passcode/',
14+
component: PassCode,
15+
},
16+
{
17+
path: '/auto-init/',
18+
component: AutoInit,
19+
},
20+
],
21+
});
22+
23+
app.keypad.create({
24+
inputEl: '#demo-numpad',
25+
dark: true,
26+
});
27+
app.keypad.create({
28+
inputEl: '#demo-numpad-limited',
29+
valueMaxLength: 2,
30+
dotButton: false,
31+
});
32+
app.keypad.create({
33+
inputEl: '#demo-calculator',
34+
type: 'calculator',
35+
toolbar: false,
36+
});

‎demo/auto-init.f7

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="page" data-page="calculator">
3+
<div class="navbar">
4+
<div class="navbar-bg"></div>
5+
<div class="navbar-inner sliding">
6+
<div class="left">
7+
<a href="index.html" class="back link">
8+
<i class="icon icon-back"></i>
9+
<span class="if-not-md">Back</span>
10+
</a>
11+
</div>
12+
<div class="title">Automatic Initialization</div>
13+
</div>
14+
</div>
15+
<div class="page-content">
16+
<div class="block block-strong">
17+
<p>Such predefined Numpad and Calculator keypads could be initialized automatically. Just use usual inputs but
18+
with special <code>type</code> attributes:<br />
19+
<b>${'<'}input type="numpad" ${'>'}</b><br />
20+
<b>${'<'}input type="calculator" ${'>'}</b>
21+
</p>
22+
</div>
23+
<div class="block-title">Numpad</div>
24+
<div class="list">
25+
<ul>
26+
<li>
27+
<div class="item-content item-input">
28+
<div class="item-inner">
29+
<div class="item-input-wrap">
30+
<input type="numpad" placeholder="Enter number" readonly="readonly" />
31+
</div>
32+
</div>
33+
</div>
34+
</li>
35+
</ul>
36+
</div>
37+
<div class="block-title">Calculator</div>
38+
<div class="list">
39+
<ul>
40+
<li>
41+
<div class="item-content item-input">
42+
<div class="item-inner">
43+
<div class="item-input-wrap">
44+
<input type="calculator" data-toolbar="false" placeholder="Calc something" readonly="readonly" />
45+
</div>
46+
</div>
47+
</div>
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
</div>
53+
</template>

‎demo/auto-init.html

-50
This file was deleted.

‎demo/index.html

+16-40
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
68
<meta name="apple-mobile-web-app-capable" content="yes">
79
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
810
<meta name="theme-color" content="#2196f3">
911
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
1012
<title>Framework7 Keypad</title>
11-
<link rel="stylesheet" href="framework7/css/framework7.bundle.min.css">
12-
<link rel="stylesheet" href="../dist/framework7-keypad.min.css">
13+
<link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
1314
</head>
15+
1416
<body>
1517
<div id="app">
1618
<div class="view view-main view-init">
@@ -23,7 +25,11 @@
2325
</div>
2426
<div class="page-content">
2527
<div class="block block-strong">
26-
<p>Keypad plugin extends Framework7 with additional custom keyboards. By default it comes with predefined <b>Numpad</b> and <b>Calculator</b> keyboards, but it also can be used to create custom keyboards with custom buttons.</p>
28+
<input type="tel" />
29+
<p>Keypad plugin extends Framework7 with additional custom keyboards. By default it comes with predefined
30+
<b>Numpad</b> and <b>Calculator</b> keyboards, but it also can be used to create custom keyboards with
31+
custom buttons.
32+
</p>
2733
</div>
2834
<div class="block-title">Numpad</div>
2935
<div class="list no-hairlines-md">
@@ -32,7 +38,7 @@
3238
<div class="item-content item-input">
3339
<div class="item-inner">
3440
<div class="item-input-wrap">
35-
<input type="text" placeholder="Enter number" readonly="readonly" id="demo-numpad"/>
41+
<input type="text" placeholder="Enter number" readonly="readonly" id="demo-numpad" />
3642
</div>
3743
</div>
3844
</div>
@@ -47,7 +53,7 @@
4753
<div class="item-content item-input">
4854
<div class="item-inner">
4955
<div class="item-input-wrap">
50-
<input type="text" placeholder="Enter your age" readonly="readonly" id="demo-numpad-limited"/>
56+
<input type="text" placeholder="Enter your age" readonly="readonly" id="demo-numpad-limited" />
5157
</div>
5258
</div>
5359
</div>
@@ -62,7 +68,7 @@
6268
<div class="item-content item-input">
6369
<div class="item-inner">
6470
<div class="item-input-wrap">
65-
<input type="text" placeholder="Enter number" readonly="readonly" id="demo-calculator"/>
71+
<input type="text" placeholder="Enter number" readonly="readonly" id="demo-calculator" />
6672
</div>
6773
</div>
6874
</div>
@@ -93,39 +99,9 @@
9399
</div>
94100
</div>
95101

96-
<script src="framework7/js/framework7.bundle.min.js"></script>
97-
<script src="../dist/framework7-keypad.min.js"></script>
98-
<script>
99-
Framework7.use(Framework7Keypad);
100-
101-
var app = new Framework7({
102-
root: '#app',
103-
routes: [
104-
{
105-
path: '/passcode/',
106-
componentUrl: './passcode.html',
107-
},
108-
{
109-
path: '/auto-init/',
110-
url: './auto-init.html',
111-
},
112-
],
113-
});
102+
<script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
103+
<script type="module" src="./app.js"></script>
114104

115-
var numpad = app.keypad.create({
116-
inputEl: '#demo-numpad'
117-
});
118-
var numpadLimited = app.keypad.create({
119-
inputEl: '#demo-numpad-limited',
120-
valueMaxLength: 2,
121-
dotButton: false
122-
});
123-
var calculator = app.keypad.create({
124-
inputEl: '#demo-calculator',
125-
type: 'calculator',
126-
toolbar: false
127-
});
128-
129-
</script>
130105
</body>
106+
131107
</html>

0 commit comments

Comments
 (0)