framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/apps/todo7/css/todo7.css

@@ -0,0 +1,208 @@
+body {
+  background: #000;
+}
+.view-main {
+  background: url(../img/bg.jpg) no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  -webkit-transform: translate3d(0, 0, 0) scale(1);
+  -moz-transform: translate3d(0, 0, 0) scale(1);
+  -ms-transform: translate3d(0, 0, 0) scale(1);
+  -o-transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, 0, 0) scale(1);
+  -webkit-transition-duration: 400ms;
+  -moz-transition-duration: 400ms;
+  -ms-transition-duration: 400ms;
+  -o-transition-duration: 400ms;
+  transition-duration: 400ms;
+}
+.pages,
+.page {
+  background: none;
+}
+html.ios .page {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+html.ios .page-content {
+  margin-bottom: 1px;
+}
+.view-main .navbar {
+  border-bottom: none;
+  background: #cc0442;
+  color: #fff;
+}
+i.icon-plus {
+  color: #fff;
+}
+.todo-items-list {
+  margin: 0;
+  color: #fff;
+  font-weight: 300;
+}
+.todo-items-list ul {
+  background: none;
+  border: none;
+}
+.todo-items-list .item-title {
+  font-size: 18px;
+}
+.todo-items-list .swipeout-content {
+  background: none;
+}
+.todo-items-list .item-inner {
+  padding-top: 18px;
+  padding-bottom: 16px;
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+.todo-items-list .label-checkbox.active-state {
+  background: rgba(255, 255, 255, 0.2);
+}
+.todo-items-list .item-content {
+  border-left: 5px solid;
+}
+.todo-items-list li[data-color="orange"] .item-content {
+  border-left-color: #ff8400;
+}
+.todo-items-list li[data-color="blue"] .item-content {
+  border-left-color: #089efe;
+}
+.todo-items-list li[data-color="green"] .item-content {
+  border-left-color: #2df523;
+}
+.todo-items-list li[data-color="white"] .item-content {
+  border-left-color: #fff;
+}
+.todo-items-list li[data-color="yellow"] .item-content {
+  border-left-color: #eaff00;
+}
+.todo-items-list li[data-color="pink"] .item-content {
+  border-left-color: #cc0442;
+}
+.todo-items-list li[data-color="purple"] .item-content {
+  border-left-color: #ff00f0;
+}
+.todo-items-list li[data-color="cyan"] .item-content {
+  border-left-color: #00fff6;
+}
+.popup {
+  background: rgba(54, 1, 17, 0.7);
+}
+.popup .navbar {
+  color: #fff;
+  background: #680222;
+  border: none;
+}
+.popup a.link {
+  color: #fff;
+}
+.popup .list-block ul {
+  background: none;
+  border: none;
+  color: #fff;
+}
+.popup .list-block input {
+  color: #fff;
+}
+.popup .item-inner {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.popup .button {
+  border-color: #fff;
+  color: #fff;
+}
+.popup .button.active-state {
+  background: rgba(255, 255, 255, 0.1);
+}
+.popup span.color {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: #000;
+  vertical-align: middle;
+  margin-right: 2px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 100%;
+  cursor: pointer;
+  position: relative;
+  -webkit-transition-duration: 200ms;
+  -moz-transition-duration: 200ms;
+  -ms-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  transition-duration: 200ms;
+}
+.popup span.color:last-child {
+  margin-right: 0;
+}
+.popup span.color[data-color="orange"] {
+  background: #ff8400;
+}
+.popup span.color[data-color="pink"] {
+  background: #cc0442;
+}
+.popup span.color[data-color="blue"] {
+  background: #089efe;
+}
+.popup span.color[data-color="green"] {
+  background: #2df523;
+}
+.popup span.color[data-color="yellow"] {
+  background: #eaff00;
+}
+.popup span.color[data-color="white"] {
+  background: #fff;
+}
+.popup span.color[data-color="purple"] {
+  background: #ff00f0;
+}
+.popup span.color[data-color="cyan"] {
+  background: #00fff6;
+}
+.popup span.color.selected {
+  -webkit-transform: translate3d(0, 0, 0) scale(1.25);
+  -moz-transform: translate3d(0, 0, 0) scale(1.25);
+  -ms-transform: translate3d(0, 0, 0) scale(1.25);
+  -o-transform: translate3d(0, 0, 0) scale(1.25);
+  transform: translate3d(0, 0, 0) scale(1.25);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+@media all and (min-width: 568px) {
+  .popup span.color {
+    margin-right: 10px;
+  }
+}
+body.with-popup .view-main {
+  -webkit-transform: translate3d(0, 0px, 0) scale(0.85);
+  -moz-transform: translate3d(0, 0px, 0) scale(0.85);
+  -ms-transform: translate3d(0, 0px, 0) scale(0.85);
+  -o-transform: translate3d(0, 0px, 0) scale(0.85);
+  transform: translate3d(0, 0px, 0) scale(0.85);
+  -webkit-filter: blur(5px);
+}
+body.with-popup .statusbar-overlay {
+  background: #680222;
+}
+@media all and (max-width: 629px) and (max-height: 629px) {
+  body.with-popup .statusbar-overlay {
+    z-index: 11000;
+  }
+}
+.statusbar-overlay {
+  background: #cc0442;
+}
+.modal-inner {
+  background: #cc0442;
+  color: #fff;
+  border-bottom: 1px solid #9a0332;
+}
+.modal-button {
+  background: #cc0442;
+  border-right-color: #9a0332;
+  color: #fff;
+}
+.modal-button.active-state {
+  background: #9a0332;
+}

data/Framework7-0.9.6/apps/todo7/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html manifest="manifest.php" class="with-statusbar-overlay">
+  <head>
+    <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-translucent">
+    <title>ToDo7</title>
+    <link rel="stylesheet" href="../../dist/css/framework7.min.css">
+    <link rel="stylesheet" href="css/todo7.css">
+    <!-- Favicon-->
+    <link href="img/icon-57.png" rel="shortcut icon"> 
+    <!-- iOS 7 iPad (retina) -->
+    <link href="img/icon-152.png" sizes="152x152" rel="apple-touch-icon">
+    <!-- iOS 6 iPad (retina) -->
+    <link href="img/icon-144.png" sizes="144x144" rel="apple-touch-icon">
+    <!-- iOS 7 iPhone (retina) -->
+    <link href="img/icon-120.png" sizes="120x120" rel="apple-touch-icon">
+    <!-- iOS 6 iPhone (retina) -->
+    <link href="img/icon-114.png" sizes="114x114" rel="apple-touch-icon">
+    <!-- iOS 7 iPad -->
+    <link href="img/icon-76.png" sizes="76x76" rel="apple-touch-icon">
+    <!-- iOS 6 iPad -->
+    <link href="img/icon-72.png" sizes="72x72" rel="apple-touch-icon">
+    <!-- iOS 6 iPhone -->
+    <link href="img/icon-57.png" sizes="57x57" rel="apple-touch-icon">
+  </head>
+  <body>
+    <!-- Statusbar overlay-->
+    <div class="statusbar-overlay"></div>
+    <!-- Views-->
+    <div class="views">
+      <div class="view view-main navbar-fixed">
+        <div class="navbar">
+          <div class="navbar-inner">
+            <div class="left"></div>
+            <div class="center sliding">ToDo7</div>
+            <div class="right"><a href="#" class="link icon-only open-popup"><i class="icon icon-plus">+</i></a></div>
+          </div>
+        </div>
+        <div class="pages">
+          <div data-page="index" class="page">
+            <div class="page-content">
+              <div class="list-block todo-items-list theme-pink"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Popup to add new task           -->
+    <div class="popup">
+      <div class="view view-popup navbar-fixed">
+        <div class="navbar">
+          <div class="navbar-inner">
+            <div class="left"></div>
+            <div class="center sliding">New Task</div>
+            <div class="right"><a href="#" class="link close-popup">Cancel</a></div>
+          </div>
+        </div>
+        <div class="pages">
+          <div class="page">
+            <div class="page-content">
+              <div class="list-block">
+                <ul>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-inner">
+                        <div class="item-title label">Task</div>
+                        <div class="item-input">
+                          <input type="text" name="title">
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-inner">
+                        <div class="item-title label">Color</div>
+                        <div class="item-input"><span data-color="orange" class="color selected"></span><span data-color="green" class="color"></span><span data-color="blue" class="color"></span><span data-color="yellow" class="color"></span><span data-color="white" class="color"></span><span data-color="pink" class="color"></span><span data-color="purple" class="color"></span><span data-color="cyan" class="color"></span></div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <div class="content-block"><a class="button add-task">Add Task</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Template-->
+    <script id="todo-item-template" type="text/template">
+      <ul>{{#each this}}
+        <li data-color="{{color}}" data-id="{{id}}" class="swipeout">
+          <div class="swipeout-content">
+            <label class="label-checkbox item-content"><input type="checkbox" {{checked}}>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">{{title}}</div>
+              </div>
+            </label>
+          </div>
+          <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
+        </li>{{/each}}
+      </ul>
+    </script>
+    <!-- Path to Framework7 Library JS-->
+    <script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
+    <!-- Path to your app js-->
+    <script type="text/javascript" src="js/todo7.js"></script>
+  </body>
+</html>

data/Framework7-0.9.6/apps/todo7/jade/index.jade

@@ -0,0 +1,99 @@
+doctype
+html.with-statusbar-overlay(manifest="manifest.php")
+  head
+    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-translucent")
+    title ToDo7
+    link(rel="stylesheet", href="../../dist/css/framework7.min.css")
+    link(rel="stylesheet", href="css/todo7.css")
+    // Favicon
+    link(href="img/icon-57.png", rel="shortcut icon")
+    | 
+    <!-- iOS 7 iPad (retina) -->
+    <link href="img/icon-152.png" sizes="152x152" rel="apple-touch-icon">
+    <!-- iOS 6 iPad (retina) -->
+    <link href="img/icon-144.png" sizes="144x144" rel="apple-touch-icon">
+    <!-- iOS 7 iPhone (retina) -->
+    <link href="img/icon-120.png" sizes="120x120" rel="apple-touch-icon">
+    <!-- iOS 6 iPhone (retina) -->
+    <link href="img/icon-114.png" sizes="114x114" rel="apple-touch-icon">
+    <!-- iOS 7 iPad -->
+    <link href="img/icon-76.png" sizes="76x76" rel="apple-touch-icon">
+    <!-- iOS 6 iPad -->
+    <link href="img/icon-72.png" sizes="72x72" rel="apple-touch-icon">
+    <!-- iOS 6 iPhone -->
+    <link href="img/icon-57.png" sizes="57x57" rel="apple-touch-icon">
+  body
+    // Statusbar overlay
+    .statusbar-overlay
+    // Views
+    .views
+      .view.view-main.navbar-fixed
+        .navbar
+          .navbar-inner
+            .left
+            .center.sliding ToDo7
+            .right
+                a(href="#").link.icon-only.open-popup
+                  i.icon.icon-plus +
+        .pages
+          .page(data-page="index")
+            .page-content
+              .list-block.todo-items-list.theme-pink
+    // Popup to add new task           
+    .popup
+      .view.view-popup.navbar-fixed
+        .navbar
+          .navbar-inner
+            .left
+            .center.sliding New Task
+            .right
+                a(href="#").link.close-popup Cancel
+        .pages
+          .page
+            .page-content
+              .list-block
+                ul
+                  li
+                    .item-content
+                      .item-inner 
+                        .item-title.label Task
+                        .item-input
+                          input(type="text", name="title")
+                  li
+                    .item-content
+                      .item-inner 
+                        .item-title.label Color
+                        .item-input
+                          span(data-color="orange").color.selected
+                          span(data-color="green").color
+                          span(data-color="blue").color
+                          span(data-color="yellow").color
+                          span(data-color="white").color
+                          span(data-color="pink").color
+                          span(data-color="purple").color
+                          span(data-color="cyan").color
+              .content-block
+                a.button.add-task Add Task
+    // Template
+    script(id="todo-item-template", type="text/template")
+      ul
+        {{#each this}}
+        li.swipeout(data-color="{{color}}", data-id="{{id}}")
+          .swipeout-content
+            label.label-checkbox.item-content
+              | <input type="checkbox" {{checked}}>
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title {{title}}
+          .swipeout-actions-right
+            a(href="#").swipeout-delete Delete
+        {{/each}}
+
+    // Path to Framework7 Library JS
+    script(type="text/javascript", src="../../dist/js/framework7.min.js")
+    // Path to your app js
+    script(type="text/javascript", src="js/todo7.js")

data/Framework7-0.9.6/apps/todo7/js/todo7.js

@@ -0,0 +1,102 @@
+// Initialize your app
+var myApp = new Framework7({
+    modalTitle: 'ToDo7'
+});
+
+// Export selectors engine
+var $$ = Dom7;
+
+// Add views
+var mainView = myApp.addView('.view-main', {
+    // Because we use fixed-through navbar we can enable dynamic navbar
+    dynamicNavbar: true
+});
+
+var todoData = localStorage.td7Data ? JSON.parse(localStorage.td7Data) : [];
+
+$$('.popup').on('open', function () {
+    $$('body').addClass('with-popup');
+});
+$$('.popup').on('opened', function () {
+    $$(this).find('input[name="title"]').focus();
+});
+$$('.popup').on('close', function () {
+    $$('body').removeClass('with-popup');
+    $$(this).find('input[name="title"]').blur().val('');
+});
+
+// Popup colors
+$$('.popup .color').on('click', function () {
+    $$('.popup .color.selected').removeClass('selected');
+    $$(this).addClass('selected');
+});
+
+
+// Add Task
+$$('.popup .add-task').on('click', function () {
+    var title = $$('.popup input[name="title"]').val().trim();
+    if (title.length === 0) {
+        return;
+    }
+    var color = $$('.popup .color.selected').attr('data-color');
+    todoData.push({
+        title: title,
+        color: color,
+        checked: '',
+        id: (new Date()).getTime()
+    });
+    localStorage.td7Data = JSON.stringify(todoData);
+    buildTodoListHtml();
+    myApp.closeModal('.popup');
+});
+
+// Build Todo HTML using Template7 template engine
+var todoItemTemplateSource = $$('#todo-item-template').html();
+var todoItemTemplate = Template7.compile(todoItemTemplateSource);
+function buildTodoListHtml() {
+    var renderedList = todoItemTemplate(todoData);
+    $$('.todo-items-list').html(renderedList);
+}
+// Build HTML on App load
+buildTodoListHtml();
+
+// Mark checked
+$$('.todo-items-list').on('change', 'input', function () {
+    var input = $$(this);
+    var item = input.parents('li');
+    var checked = input[0].checked;
+    var id = item.attr('data-id') * 1;
+    for (var i = 0; i < todoData.length; i++) {
+        if (todoData[i].id === id) todoData[i].checked = checked ? 'checked' : '';
+    }
+    localStorage.td7Data = JSON.stringify(todoData);
+});
+
+// Delete item
+$$('.todo-items-list').on('delete', '.swipeout', function () {
+    var id = $$(this).attr('data-id') * 1;
+    var index;
+    for (var i = 0; i < todoData.length; i++) {
+        if (todoData[i].id === id) index = i;
+    }
+    if (typeof(index) !== 'undefined') {
+        todoData.splice(index, 1);
+        localStorage.td7Data = JSON.stringify(todoData);
+    }
+});
+
+// Update app when manifest updated 
+// http://www.html5rocks.com/en/tutorials/appcache/beginner/
+// Check if a new cache is available on page load.
+window.addEventListener('load', function (e) {
+    window.applicationCache.addEventListener('updateready', function (e) {
+        if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+            // Browser downloaded a new app cache.
+            myApp.confirm('A new version of ToDo7 is available. Do you want to load it right now?', function () {
+                window.location.reload();
+            });
+        } else {
+            // Manifest didn't changed. Nothing new to server.
+        }
+    }, false);
+}, false);