Skip to content

Instantly share code, notes, and snippets.

@jeffreyvr

jeffreyvr/index.html Secret

Last active December 29, 2017 07:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffreyvr/fdce47a7c89ef12d07263b2349ecb5eb to your computer and use it in GitHub Desktop.
Save jeffreyvr/fdce47a7c89ef12d07263b2349ecb5eb to your computer and use it in GitHub Desktop.
Download ZIP
Framework7
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>App Name</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- This template defaults to the iOS CSS theme. To support both iOS and material design themes, see the Framework7 Tutorial at the link below:
http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html
-->
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only open-panel"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<div class="center brand sliding"><img src="images/logo.jpg"> <span>App Name</span></div>
<div class="right">
<a href="search.html" class="link icon-only"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="item-overview"></div>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>
<!-- template7 templates -->
<script id="itemsTemplate" type="text/template7">
{{#each this}}
<div class="item-summary">
<div class="item-details">
<span class="title">{{title.rendered}}</span>
</div>
<div class="item-image" style="background-image:url({{thumbnail_image_url}});"></div>
<a class="item-anchor" href="item.html?id={{id}}"></a>
</div>
{{/each}}
</script>
<script id="itemTemplate" type="text/template7">
<div class="item">
<div class="item-image" style="background-image:url({{thumbnail_image_url}});"></div>
<div class="item-wrap">
<h1 class="item-heading">{{title.rendered}}</h1>
<div class="item-content">
{{pretty_date}}
{{content.rendered}}
</div>
{{#if tags_extended}}
<div class="item-tags pill-block">
<span class="label">Getagged met</span>
<div class="pills">
{{#each tags_extended}}
<a class="pill" href="tag.html?id={{this.term_id}}">{{this.name}}</a>
{{/each}}
</div>
</div>
{{/if}}
{{#if categories_extended}}
<div class="item-categories pill-block">
<span class="label">Geplaatst in</span>
<div class="pills">
{{#each categories_extended}}
<a class="pill" href="category.html?id={{this.term_id}}">{{this.name}}</a>
{{/each}}
</div>
</div>
{{/if}}
</div>
</div>
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
Raw
my-app.js
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;
// Initialize app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true,
pushState: true
});
var apiurl ='';
var ptrContent = $$('.pull-to-refresh-content');
// Add view
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function(page) {
console.log("Device is ready!");
});
myApp.onPageInit('about', function (page) {
console.log('Init about');
});
myApp.onPageInit('category', function (page) {
console.log('Init category');
});
myApp.onPageInit('tag', function (page) {
console.log('Init tag');
});
myApp.onPageInit('item', function (page) {
console.log('Init item');
$$.getJSON(apiurl + '/posts/' + page.query.id, function( post ){
console.log(post);
$$('.page[data-page="item"] .page-content').html(Template7.templates.itemTemplate(post));
});
});
myApp.onPageInit('index', function (page) {
console.log('Init index');
$$.getJSON(apiurl + '/posts/', function( posts ){
console.log(posts);
$$('.page[data-page="index"] .page-content .item-overview').html(Template7.templates.itemsTemplate(posts));
});
ptrContent.on('refresh', function (e) {
console.log('Init index Refresh');
$$.getJSON(apiurl + '/posts/', function( posts ){
$$('.page[data-page="index"] .page-content .item-overview').html(Template7.templates.itemsTemplate(posts));
myApp.pullToRefreshDone();
});
});
}).trigger();
Raw
routes.js
/* Routing example for Framework7 v2 */
routes = [
{
path: '/',
url: './index.html',
},
{
path: '/items/',
async: function (routeTo, routeFrom, resolve, reject) {
app.preloader.show();
app.request({
url: apiurl + '/posts/',
dataType: 'json',
method: "GET",
crossDomain: true,
success: function(response) {
resolve(
{
componentUrl: './pages/items.html',
},
{
context: {
items: response,
},
}
);
}
});
app.preloader.hide();
}
}
};
@siddhesh-tamhanekar
Copy link

what's your /pages/items.html content and if routes code was written is myqpp.paginit code is needed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment