first commit

massets/vendor/framework7-plugins/toast/README.md

@@ -0,0 +1,86 @@
+# Toast for Framework7
+
+A plugin for Framwork7 to show little black toasts iOS-style
+
+## Screenshot
+
+![Confirmbox screenshot](http://www.timo-ernst.net/wp-content/uploads/2015/04/toast-screenshot-169x300.png)
+
+## Video
+
+https://www.youtube.com/watch?v=1qCRmpyQCuw&feature=youtu.be
+
+## Live demo
+
+http://www.timo-ernst.net/misc/toastdemo/
+
+## How to use
+
+### 1. Add the script to your project (after Framework7 script!) and also add CSS reference:
+
+```html
+<link rel="stylesheet" href="toast.css">
+<script src="toast.js"></script>
+```
+
+### 2. Create a new toast
+
+You can create a new toast with a icon:
+
+```javascript
+var app = new Framework7();
+var options = {};
+var toast = app.toast('Marked star', '<div>☆</div>', options);
+```
+
+As first parameter you set the message which gets displayed at the bottom of the toast. As 2nd parameter you have to set the icon. You can use free HTML here so set what ever you want (ASCii, Font-Icon, Images, SVG...). Third is reserved for options.
+
+If you just want to show a message, let 2nd parameter empty:
+
+```javascript
+var app = new Framework7();
+var options = {};
+var toast = app.toast('A long long message', '', options);
+```
+
+### 3. Now you can show or hide the box:
+
+```javascript
+// show
+toast.show();
+
+// hide
+toast.hide();
+```
+
+***Note:*** *In older versions of this plugin these methods were `toast.show(true)` and `toast.show(false)` but these were replaced by `toast.show()` and `toast.hide()` which is a little more convenient. You might have to change this in your code though if you upgrade from an older version.*
+
+You can also change what message is displayed **after** initialization:
+
+```javascript
+toast.show("message");
+```
+
+### 4. Options & Callbacks
+
+You can set the following options:
+
+```javascript
+var app = new Framework7();
+var options = {
+  // Callback gets called when toast is hidden
+  onHide: function () {
+    console.log('hidden');
+  },
+  duration: 2000 // Hide toast after 2 seconds
+};
+var toast = app.toast('Marked star', '<div>☆</div>', options);
+```
+
+You're done :D
+
+Made with <3 by www.timo-ernst.net
+
+## License
+
+MIT - Do what ever you want ;-)

massets/vendor/framework7-plugins/toast/toast.css

@@ -0,0 +1,34 @@
+.toast-container {
+  position: fixed;
+  width: 150px;
+  left: 50%;
+  top: 50%;
+  padding: 16px;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 16px;
+  z-index: 11800;
+  color: #fff;
+  font-size: 16px;
+  font-weight: normal;
+  display: none;
+  opacity: 0;
+  transition: opacity 0.8s;
+}
+
+.toast-container.show {
+  display: block;
+}
+
+.toast-container.fadein {
+  opacity: 1;
+}
+
+.toast-icon {
+  font-size: 48px;
+  text-align: center;
+}
+
+.toast-msg {
+  text-align: center;
+  font-weight: normal;
+}

massets/vendor/framework7-plugins/toast/toast.js

@@ -0,0 +1,99 @@
+/**
+ * A plugin for Framework7 to show black little toasts
+ *
+ * @author www.timo-ernst.net
+ * @license MIT
+ */
+Framework7.prototype.plugins.toast = function (app, globalPluginParams) {
+  'use strict';
+  
+  var Toast = function (text, iconhtml, options) {
+    var self = this,
+        $$ = Dom7,
+        $box;
+
+    function hideBox($curbox) {
+      if ($curbox) {
+        $curbox.removeClass('fadein').transitionEnd(function () {
+          $curbox.remove();
+          if (options && typeof options.onHide == 'function') options.onHide();
+        });
+      }
+    }
+
+    function isString(obj) {
+      return toString.call(obj) === '[object String]';
+    }
+    
+    this.show = function (message) {
+      var clientLeft,
+          $curbox,
+          html = [];
+      
+      // Remove old toasts first if there are still any
+      $$('.toast-container').off('click').off('transitionEnd').remove();
+      $box = $$('<div class="toast-container show">');
+      
+      // Add content
+      if (isString(iconhtml) && iconhtml.length > 0) {
+        html.push(
+          '<div class="toast-icon">' + 
+            iconhtml + 
+          '</div>'
+        );
+      }
+
+      if (isString(message) && message.length > 0) {
+        text = message;
+      }
+
+      if (isString(text) && text.length > 0) {
+        html.push(
+          '<div class="toast-msg">' + 
+            text + 
+          '</div>'
+        );
+      }
+
+      $box.html(
+        html.join('')
+      );
+
+      // Add to DOM
+      clientLeft = $box[0].clientLeft;
+      $$('body').append($box);
+
+      $box.css('margin-top', $box.outerHeight() / -2 + 'px')
+          .css('margin-left', $box.outerWidth() / -2 + 'px');
+      
+      // Hide box on click
+      $box.click(function () {
+        hideBox($box);
+      });
+
+      // Dirty hack to cause relayout xD
+      clientLeft = $box[0].clientLeft;
+      
+      // Fade in toast
+      $box.addClass('fadein');
+
+      var duration = options && options.duration ? options.duration : 1500;
+
+      // Automatically hide box after few seconds
+      $curbox = $box;
+      setTimeout(function () {
+        hideBox($curbox);
+    }, duration);
+    };
+
+    this.hide = function() {
+      hideBox($box);
+    };
+    
+    return this;
+  };
+  
+  app.toast = function (text, iconhtml, options) {
+    return new Toast(text, iconhtml, options);
+  };
+};