First commit
This commit is contained in:
30
src/js/app.js
Normal file
30
src/js/app.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// Import Vue
|
||||
import { createApp } from 'vue';
|
||||
|
||||
// Import Framework7
|
||||
import Framework7 from 'framework7/lite-bundle';
|
||||
|
||||
// Import Framework7-Vue Plugin
|
||||
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
|
||||
|
||||
// Import Framework7 Styles
|
||||
import 'framework7/css/bundle';
|
||||
|
||||
// Import Icons and App Custom Styles
|
||||
import '../css/icons.css';
|
||||
import '../css/app.css';
|
||||
|
||||
// Import App Component
|
||||
import App from '../components/app.vue';
|
||||
|
||||
// Init Framework7-Vue Plugin
|
||||
Framework7.use(Framework7Vue);
|
||||
|
||||
// Init App
|
||||
const app = createApp(App);
|
||||
|
||||
// Register Framework7 Vue components
|
||||
registerComponents(app);
|
||||
|
||||
// Mount the app
|
||||
app.mount('#app');
|
||||
161
src/js/cordova-app.js
vendored
Normal file
161
src/js/cordova-app.js
vendored
Normal file
@@ -0,0 +1,161 @@
|
||||
var cordovaApp = {
|
||||
f7: null,
|
||||
/*
|
||||
This method hides splashscreen after 2 seconds
|
||||
*/
|
||||
handleSplashscreen: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
if (!window.navigator.splashscreen) return;
|
||||
setTimeout(() => {
|
||||
window.navigator.splashscreen.hide();
|
||||
}, 2000);
|
||||
},
|
||||
/*
|
||||
This method prevents back button tap to exit from app on android.
|
||||
In case there is an opened modal it will close that modal instead.
|
||||
In case there is a current view with navigation history, it will go back instead.
|
||||
*/
|
||||
handleAndroidBackButton: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
const $ = f7.$;
|
||||
|
||||
document.addEventListener(
|
||||
'backbutton',
|
||||
function (e) {
|
||||
if ($('.actions-modal.modal-in').length) {
|
||||
f7.actions.close('.actions-modal.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.dialog.modal-in').length) {
|
||||
f7.dialog.close('.dialog.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.sheet-modal.modal-in').length) {
|
||||
f7.sheet.close('.sheet-modal.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.popover.modal-in').length) {
|
||||
f7.popover.close('.popover.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.popup.modal-in').length) {
|
||||
if ($('.popup.modal-in>.view').length) {
|
||||
const currentView = f7.views.get('.popup.modal-in>.view');
|
||||
if (currentView && currentView.router && currentView.router.history.length > 1) {
|
||||
currentView.router.back();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
f7.popup.close('.popup.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.login-screen.modal-in').length) {
|
||||
f7.loginScreen.close('.login-screen.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.page-current .searchbar-enabled').length) {
|
||||
f7.searchbar.disable('.page-current .searchbar-enabled');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.page-current .card-expandable.card-opened').length) {
|
||||
f7.card.close('.page-current .card-expandable.card-opened');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
const currentView = f7.views.current;
|
||||
if (currentView && currentView.router && currentView.router.history.length > 1) {
|
||||
currentView.router.back();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.panel.panel-in').length) {
|
||||
f7.panel.close('.panel.panel-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
/*
|
||||
This method does the following:
|
||||
- provides cross-platform view "shrinking" on keyboard open/close
|
||||
- hides keyboard accessory bar for all inputs except where it required
|
||||
*/
|
||||
handleKeyboard: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
if (!window.Keyboard || !window.Keyboard.shrinkView) return;
|
||||
var $ = f7.$;
|
||||
window.Keyboard.shrinkView(false);
|
||||
window.Keyboard.disableScrollingInShrinkView(true);
|
||||
window.Keyboard.hideFormAccessoryBar(true);
|
||||
window.addEventListener('keyboardWillShow', () => {
|
||||
f7.input.scrollIntoView(document.activeElement, 0, true, true);
|
||||
});
|
||||
window.addEventListener('keyboardDidShow', () => {
|
||||
f7.input.scrollIntoView(document.activeElement, 0, true, true);
|
||||
});
|
||||
window.addEventListener('keyboardDidHide', () => {
|
||||
if (document.activeElement && $(document.activeElement).parents('.messagebar').length) {
|
||||
return;
|
||||
}
|
||||
window.Keyboard.hideFormAccessoryBar(false);
|
||||
});
|
||||
window.addEventListener('keyboardHeightWillChange', (event) => {
|
||||
var keyboardHeight = event.keyboardHeight;
|
||||
if (keyboardHeight > 0) {
|
||||
// Keyboard is going to be opened
|
||||
document.body.style.height = `calc(100% - ${keyboardHeight}px)`;
|
||||
$('html').addClass('device-with-keyboard');
|
||||
} else {
|
||||
// Keyboard is going to be closed
|
||||
document.body.style.height = '';
|
||||
$('html').removeClass('device-with-keyboard');
|
||||
}
|
||||
});
|
||||
$(document).on(
|
||||
'touchstart',
|
||||
'input, textarea, select',
|
||||
function (e) {
|
||||
var nodeName = e.target.nodeName.toLowerCase();
|
||||
var type = e.target.type;
|
||||
var showForTypes = ['datetime-local', 'time', 'date', 'datetime'];
|
||||
if (nodeName === 'select' || showForTypes.indexOf(type) >= 0) {
|
||||
window.Keyboard.hideFormAccessoryBar(false);
|
||||
} else {
|
||||
window.Keyboard.hideFormAccessoryBar(true);
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
},
|
||||
init: function (f7) {
|
||||
// Save f7 instance
|
||||
cordovaApp.f7 = f7;
|
||||
|
||||
document.addEventListener('deviceready', () => {
|
||||
// Handle Android back button
|
||||
cordovaApp.handleAndroidBackButton();
|
||||
|
||||
// Handle Splash Screen
|
||||
cordovaApp.handleSplashscreen();
|
||||
|
||||
// Handle Keyboard
|
||||
cordovaApp.handleKeyboard();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default cordovaApp;
|
||||
83
src/js/routes.js
Normal file
83
src/js/routes.js
Normal file
@@ -0,0 +1,83 @@
|
||||
|
||||
import HomePage from '../pages/home.vue';
|
||||
import AboutPage from '../pages/about.vue';
|
||||
import FormPage from '../pages/form.vue';
|
||||
|
||||
|
||||
import DynamicRoutePage from '../pages/dynamic-route.vue';
|
||||
import RequestAndLoad from '../pages/request-and-load.vue';
|
||||
import NotFoundPage from '../pages/404.vue';
|
||||
|
||||
var routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: HomePage,
|
||||
},
|
||||
{
|
||||
path: '/about/',
|
||||
component: AboutPage,
|
||||
},
|
||||
{
|
||||
path: '/form/',
|
||||
component: FormPage,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: '/dynamic-route/blog/:blogId/post/:postId/',
|
||||
component: DynamicRoutePage,
|
||||
},
|
||||
{
|
||||
path: '/request-and-load/user/:userId/',
|
||||
async: function ({ router, to, resolve }) {
|
||||
// App instance
|
||||
var app = router.app;
|
||||
|
||||
// Show Preloader
|
||||
app.preloader.show();
|
||||
|
||||
// User ID from request
|
||||
var userId = to.params.userId;
|
||||
|
||||
// Simulate Ajax Request
|
||||
setTimeout(function () {
|
||||
// We got user data from request
|
||||
var user = {
|
||||
firstName: 'Vladimir',
|
||||
lastName: 'Kharlampidi',
|
||||
about: 'Hello, i am creator of Framework7! Hope you like it!',
|
||||
links: [
|
||||
{
|
||||
title: 'Framework7 Website',
|
||||
url: 'http://framework7.io',
|
||||
},
|
||||
{
|
||||
title: 'Framework7 Forum',
|
||||
url: 'http://forum.framework7.io',
|
||||
},
|
||||
]
|
||||
};
|
||||
// Hide Preloader
|
||||
app.preloader.hide();
|
||||
|
||||
// Resolve route to load page
|
||||
resolve(
|
||||
{
|
||||
component: RequestAndLoad,
|
||||
},
|
||||
{
|
||||
props: {
|
||||
user: user,
|
||||
}
|
||||
}
|
||||
);
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '(.*)',
|
||||
component: NotFoundPage,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
35
src/js/store.js
Normal file
35
src/js/store.js
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
import { createStore } from 'framework7/lite';
|
||||
|
||||
const store = createStore({
|
||||
state: {
|
||||
products: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Apple iPhone 8',
|
||||
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Apple iPhone 8 Plus',
|
||||
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Apple iPhone X',
|
||||
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
|
||||
},
|
||||
]
|
||||
},
|
||||
getters: {
|
||||
products({ state }) {
|
||||
return state.products;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addProduct({ state }, product) {
|
||||
state.products = [...state.products, product];
|
||||
},
|
||||
},
|
||||
})
|
||||
export default store;
|
||||
Reference in New Issue
Block a user