It's alive :D

myfrom · May 13, 2018 · a259663 · a259663
1 parent 4ac2ee4
commit a259663
Show file tree

Hide file tree

Showing 15 changed files with 2,093 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/bower_components/
+/node_modules/
+/docs/
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,19 @@
+language: node_js
+node_js: stable
+
+install:
+  - npm install bower
+  - bower install
+
+script:
+  - npm run test
+
+after_success:
+  - npm run build-docs
+
+deploy:
+  provider: pages
+  github-token: $GITHUB_TOKEN
+  local-dir: docs
+  on:
+    tags: true
diff --git a/README.md b/README.md
@@ -0,0 +1,76 @@
+[![Travis](https://img.shields.io/travis/myfrom/Notifier.svg?style=flat-square)](https://travis-ci.org/myfrom/Notifier)
+
+# Notifier
+A lightweight library to show paper-toast and paper-dialog alerts easily.
+
+![Header image](banner.png?raw=true)
+
+## Usage
+
+To use it you have to import [notifier.js](notifier.js) file anywhere in your document scope. You also must ensure that Polymer and importHref are loaded before Notifier.
+You should put something like this in your document's `<head>`:
+```html
+<link rel="import" href="bower_components/polymer/lib/utils/import-href.html">
+<script src="bower_components/notifier/notifier.js"></script>
+```
+
+When Notifier is ready, it dispatches an event `notifier-ready` on window and initialises its class on `window.Notifier`.
+
+### Custom options
+
+You can set custom options before you load Notifier by setting `NotifierOptions` on `window`. Here are the default values:
+
+```json
+{
+  "elementsImported": false, // If set to true, Notifier won't attempt to load its dependencies (check 'Loading dependencies' section).
+  "stylesLoaded": false, //  Same but it's about helper styles (check 'Helper styles section').
+  "mobileMediaQuery": ["(orientation: landscape) and (max-width: 960px)","(orientation: portrait) and (max-width: 600px)"] // To distinguish between phones and bigger devices. If changed you should also change it in styles.css
+}
+```
+
+### Loading dependencies
+
+Notifier relies on a few custom elements such as [paper-dialog](https://www.webcomponents.org/element/PolymerElements/paper-dialog) and [paper-toast](https://www.webcomponents.org/element/PolymerElements/paper-toast).
+
+By default, they will be loaded using `Polymer.importHref` function. You can ommit this loading attempt by setting `elementsImported` option to `true` (look above). However, if you do this and not import nescessary files, Notifier will throw an error.
+
+Here are all the nescessary files for each function:
+
+<details>
+  <summary>`showToast()`</summary>
+  <ul>
+    <li>paper-toast</li>
+    <li>paper-button</li> (if includes a button)
+  </ul>
+</details>
+<details>
+  <summary>`showDialog()`</summary>
+  <ul>
+    <li>paper-dialog</li>
+    <li>paper-dialog-scrollable</li>
+  </ul>
+</details>
+<details>
+  <summary>`askDialog()`</summary>
+  <ul>
+    <li>paper-dialog</li>
+    <li>paper-dialog-scrollable</li>
+    <li>paper-button</li> 
+  </ul>
+</details>
+<details>
+  <summary>Animations</summary>
+  <ul>
+    <li>neon-animation/web-animations.html</li>
+    <li>neon-animation/animations/fade-in-animation.html</li>
+    <li>neon-animation/animations/fade-out-animation.html</li>
+    <li>neon-animation/animations/slide-from-bottom-animation.html</li>
+    <li>neon-animation/animations/slide-down-animation.html</li>
+  </ul>
+</details>
+
+### Helper styles
+
+Notifer relies on a few styles applied to paper-button in paper-toast. Those styles are not mandatory but enxure there are no weird bugs such as text overlapping with button, etc.
+
+They're automatically loaded but you can skip that by setting `stylesLoaded` option to `true` (look above).
diff --git a/banner.png b/banner.png
diff --git a/bower.json b/bower.json
@@ -0,0 +1,37 @@
+{
+  "name": "notifier",
+  "authors": [
+    "Wiktor Olejniczak <myfrom.13th@gmail.com>"
+  ],
+  "description": "Easily show paper-dialog and paper-toast alerts",
+  "main": "notifier.js",
+  "keywords": [
+    "dialog",
+    "toast",
+    "alert",
+    "confirm",
+    "polymer",
+    "webcomponents",
+    "paper"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "banner.png"
+  ],
+  "dependencies": {
+    "paper-dialog": "^2.1.1",
+    "neon-animation": "^2.2.1",
+    "polymer": "^2",
+    "paper-button": "^2.1.0",
+    "paper-toast": "^2.1.0",
+    "paper-dialog-scrollable": "^2.2.0",
+    "web-animations-js": "^2.3.1"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "^2.1.0"
+  },
+  "homepage": "https://github.com/myfrom/Notifier"
+}
diff --git a/demo/demo.html b/demo/demo.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Notifier documentation | Home</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel=icon href="favicon.ico">
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+
+    <link rel="stylesheet" href="styles.css">
+
+    <link rel="import" href="bower_components/polymer/lib/utils/import-href.html">
+    <link rel="stylesheet" href="docs-styles.css">
+    <script>
+      window.NotifierOptions = { stylesLoaded: true }
+    </script>
+    <script src="notifier.js"></script>
+
+    <style>
+      #formatted-dialog .first {
+        margin-right: auto;
+      }
+    </style>
+
+</head>
+
+<body>
+
+<nav>
+  <h2><a href="index.html">Home</a></h2>
+  <h3>Classes</h3>
+  <ul><li><a href="Notifier.html">Notifier</a></li></ul>
+  <h3><a href="demo.html">Demo</a></h3>
+</nav>
+
+<div id="main">
+
+  <h1 class="page-title">Demo</h1>
+
+  <section>
+    <p>Here's the simplest functionality. Click on those buttons to see Notifier in action:</p>
+    <button id="btn-basic-toast">Show toast</button>
+    <button id="btn-basic-dialog">Show dialog</button>
+    <br>
+    <pre class="prettyprint source lang-js"><code>
+btnBasicToast.addEventListener('click', () =>
+                                                                // Target is the clicked button in the toast
+  Notifier.showToast('Hey!', { btnText: 'Hello', btnFunction: e => e.target.parentElement.close() })
+);
+
+btnBasicDialog.addEventListener('click', () =>
+  Notifier.showDialog('Hello world!', 'Look at this beautiful demo')
+);
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Here you can witness a pre-formatted dialog:</p>
+    <button id="btn-formatted-dialog">Let's get advanced</button>
+    <br>
+    <pre class="prettyprint source lang-js"><code>
+btnFormattedDialog.addEventListener('click', () =>
+  Notifier.showDialog('I\'m so well formatted', `
+    &lt;paper-dialog-scrollable&gt;
+      Such a nice content here.
+      &lt;hr noshadow&gt;
+      And there's even our banner!
+      &lt;img src="banner.png"&gt;
+    &lt;/paper-dialog-scrollable&gt;
+    &lt;div class="buttons"&gt;
+      &lt;paper-button class="first"&gt;First, lol&lt;/paper-button&gt;
+      &lt;paper-button dialog-dismiss&gt;Meh&lt;/paper-button&gt;
+      &lt;paper-button autofocus dialog-confirm&gt;I'm amazed&lt;/paper-button&gt;
+    &lt;/div&gt;
+  `, {
+    attributes: {
+      id: 'formatted-dialog'
+    },
+    formatted: true
+  })
+);
+    </code></pre>
+    <pre class="prettyprint source lang-css"><code>
+#formatted-dialog .first {
+  margin-right: auto;
+}
+    </code></pre>
+  </section>
+
+  <section>
+    <p>And at the end you can see shortcut method for question dialog:</p>
+    <button id="btn-question-dialog">Show me</button>
+    <br>
+    <pre class="prettyprint source lang-js"><code>
+btnQuestionDialog.addEventListener('click', () =>
+  Notifier.askDialog('Do you like me?')
+);
+    </code></pre>
+  </section>
+
+</div>
+
+<script>
+  if (!window.Notifier)
+    window.addEventListener('notifer-ready', setup, { once: true });
+  else
+    setup();
+
+  function setup() {
+    const btnBasicToast = document.querySelector('#btn-basic-toast'),
+          btnBasicDialog = document.querySelector('#btn-basic-dialog'),
+          btnFormattedDialog = document.querySelector('#btn-formatted-dialog'),
+          btnQuestionDialog = document.querySelector('#btn-question-dialog');
+
+    btnBasicToast.addEventListener('click', () =>
+      Notifier.showToast('Hey!', { btnText: 'Hello', btnFunction: e => e.target.parentElement.close() })
+    );
+
+    btnBasicDialog.addEventListener('click', () =>
+      Notifier.showDialog('Hello world!', 'Look at this beautiful demo')
+    );
+
+
+    btnFormattedDialog.addEventListener('click', () =>
+      Notifier.showDialog('I\'m so well formatted', `
+        <paper-dialog-scrollable>
+          Such a nice content here.
+          <hr noshadow>
+          And there's even our banner!
+          <img src="banner.png">
+        </paper-dialog-scrollable>
+        <div class="buttons">
+          <paper-button class="first">First, lol</paper-button>
+          <paper-button dialog-dismiss>Meh</paper-button>
+          <paper-button autofocus dialog-confirm>I'm amazed</paper-button>
+        </div>
+      `, {
+        attributes: {
+          id: 'formatted-dialog'
+        },
+        formatted: true
+      })
+    );
+
+    btnQuestionDialog.addEventListener('click', () =>
+      Notifier.askDialog('Do you like me?')
+    );
+  }
+</script>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+
+<link href="https://fonts.googleapis.com/css?family=Roboto:400i,700,700i" rel="stylesheet">
+</body>
+</html>