diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
deleted file mode 100644
index 3d1756a..0000000
--- a/node_modules/.package-lock.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "name": "TuneTales",
- "lockfileVersion": 3,
- "requires": true,
- "packages": {
- "node_modules/jquery-toast-plugin": {
- "version": "1.3.2",
- "resolved": "https://registry.npmjs.org/jquery-toast-plugin/-/jquery-toast-plugin-1.3.2.tgz",
- "integrity": "sha512-0j/nfqA2FHFuJXp8QL33EVVCY//TDVfq4LULhTbasZYl2aZlX6YiSF5IGrI31dQiS9S4JkXBUfX3rMJcfl/u/g=="
- }
- }
-}
diff --git a/node_modules/jquery-toast-plugin/README.md b/node_modules/jquery-toast-plugin/README.md
deleted file mode 100644
index 7fa6a42..0000000
--- a/node_modules/jquery-toast-plugin/README.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# Jquery Toast Plugin
-
-A plugin to show highly customizable notifications to the user.
-
-
-
-# How to use
-
-- You can install the plugin via Bower:
-
- ```js
- bower install jquery-toast-plugin
- ```
-
- or via `npm`
-
- ```js
- npm install jquery-toast-plugin
- ```
-
- Or directly download the repository and place the content of `dist` wherever you can access them.
-- Include the CSS and JS files.
-- Simply do ```$.toast('Toast message to be shown')``` Of course it would be the world's simplest toast message but believe me **you can do a lot more** with the options.
-
-# Demo
-For some quick demos and a detailed documentation accompanied by the demos for each of the available options can be accessed through http://kamranahmed.info/toast
-
-## Quick usage examples
-**Simple textual toast**
-```javascript
-// Non sticky version
-$.toast("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.")
-// Sticky version
-$.toast({
- text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.",
- hideAfter : false
-})
-```
-
-**Toast using HTML as a text**
-```javascript
-// Non sticky
-$.toast("Let's test some HTML stuff... github")
-// sticky
-$.toast({
- text : "Remember! You can always introduce your own × HTML and CSS in the toast.",
- hideAfter : false
-})
-```
-
-**Unordered list elements as the text of toast using array**
-```javascript
-// Non sticky version
-$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])
-// Sticky version
-$.toast({
- text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
- hideAfter : false
-})
-```
-
-**Changing the animations**
-```javascript
-$.toast({
- text : "Let's test some HTML stuff... github",
- showHideTransition : 'slide' // It can be plain, fade or slide
-})
-```
-
-**Changing the formatting**
-```javascript
-$.toast({
- text : "Let's test some HTML stuff... github",
- showHideTransition : 'slide', // It can be plain, fade or slide
- bgColor : 'blue', // Background color for toast
- textColor : '#eee', // text color
- allowToastClose : false, // Show the close button or not
- hideAfter : 5000, // `false` to make it sticky or time in miliseconds to hide after
- stack : 5, // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once
- textAlign : 'left', // Alignment of text i.e. left, right, center
- position : 'bottom-left' // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values to position the toast on page
-})
-```
-
-**Resetting the toast**
-```javascript
-var myToast = $.toast('Some toast that needs to be removed.');
-myToast.reset(); // remove the toast "Some toast that needs to be removed"
-```
-What if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:
-```javascript
-$.toast().reset('all');
-```
-
-**Updating the toast**
-Suppose, you had shown some toast upon the page, a sticky toast for example and now you want to update the toast. You can do the following
-
-```javascript
-var myToast = $.toast({
- text : 'Some toast that needs to show the success message after the ajax call.',
- hideAfter : false,
- bgColor : '#E01A31'
-});
-
-window.setTimeout(function(){
- myToast.update({
- text : 'Updated after a few seconds',
- bgColor : '#23B65D'
- });
-}, 5000);
-```
-To learn more about how to use and customize it, head to http://kamranahmed.info/toast. Also you can find a customizer there that will let you modify the look and feel of the toast however you like it.
-
-
-
-You can simply download the repo or if you are in rush the minified CSS or non-minified CSS can be found and minified JS and non minified JS can also be found.
-
-# Features
-
-
Show different types of toasts i.e. informational, warning, errors and success
-
Custom toast background color and text color
-
Ability to hack the CSS to add your own thing
-
- Text can be provided in the form of
-
-
Array (It's elements will be changed to an un ordered list)
-
Simple text
-
HTML
-
-
-
Events support i.e. beforeHide, afterHidden, beforeShow, afterShown
-
-
Fade and Slide show/hide transitions support (More to come)
-
Supports showing the loader for the toast
-
You can position the toast, wherever you want there is support for top-left, top-rightbottom-left and bottom-right, top-center, bottom-center and mid-center ...sighs! That's a whole lot of options, isn't it? No, you say. Ok then here is the most exciting thing, you can also introduce your own positioning just by passing a simple js object containing { top: - , bottom: -, left: -, right: - }
-
-
Ability to add sticky toast
-
-
Optional stack length can be defined (i.e. maximum number of toasts that can be shown at once)
$.toast({
- heading: 'Information',
- text: 'Loaders are enabled by default. Use `loader`, `loaderBg` to change the default behavior',
- icon: 'info',
- loader: true, // Change it to false to disable loader
- loaderBg: '#9EC600' // To change the background
-})
-
-
-
-
-
-
Quick Demos
-
-
To generate a most simple toast, all you have to do is
$.toast({
- heading: 'Information',
- text: 'Now you can add icons to generate different kinds of toasts',
- showHideTransition: 'slide',
- icon: 'info'
-})
$.toast({
- heading: 'Success',
- text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.',
- showHideTransition: 'slide',
- icon: 'success'
-})
-
-
-
Options
-
Of course that is not all what you can do using this plugin, there are a lot of other options. Let's start explaining each, one by one
-
You should note that, whenever you are going to use options, you have to pass an options object and specify the text as follows:
$.toast({
- heading: 'Headings',
- text: 'You can use the `heading` property to specify the heading of the toast message.',
-})
-
-
-
2. Making them sticky:
-
There will be times, when you will want to have sticky toasts. To make them sticky, all you have to do is set the hideAfter to false. Here is a sticky toast
$.toast({
- text: 'Set the `hideAfter` property to false and the toast will become sticky.',
- hideAfter: false
-})
-
-
-
*hideAfter property is basically used to set the timer after which the toast will get hidden. But you can set it to false in order to achieve the sticky toasts.
-
-
3. Changing the toast hide timer
-
You can use the property from the above option i.e. hideAfter to change the timer after which toast gets hidden. You have to specify the timer in milliseconds
$.toast({
- text: 'Set the `hideAfter` property to milliseconds and the toast will hide after the specified milli seconds.',
- hideAfter: 5000 // in milli seconds
-})
-
-
-
4. Changing the show/hide animation
-
You can use showHideTransition property to set the animation. Following are the available options:
-
-
fade for fade transitions
-
slide for slide up and down transitions
-
plain simple show from and hide to corner transition
$.toast({
- text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
- heading: 'Plain transition',
- showHideTransition: 'plain'
-})
-
-
-
5. Making the toast closeable or not
-
You can use allowToastClose to allow the user to close the toast or not. The only thing that this option does is make that little cross button show or hide itself
$.toast({
- heading: 'Closeable Toast',
- text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
- allowToastClose: true
-})
$.toast({
- heading: 'Non closeable Toast',
- text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
- allowToastClose: false
-})
-
-
-
6. Setting the toast stack
-
stack property can be used to specify how many maximum toasts you want to show at any point of time. By default this property is set to 5
$.toast().reset('all');$.toast({
- heading: 'Positioning',
- text: 'Specify the custom position object or use one of the predefined ones',
- position: 'bottom-left',
- stack: false
-})
$.toast().reset('all');$.toast({
- heading: 'Positioning',
- text: 'Specify the custom position object or use one of the predefined ones',
- position: 'bottom-right',
- stack: false
-})
$.toast().reset('all');$.toast({
- heading: 'Positioning',
- text: 'Use the predefined ones, or specify a custom position object.',
- position: {
- left: 120,
- top: 120
- },
- stack: false
-})
-
-
-
Note It should be noted that, once you change the position of toast by using the `position` property, you'll have to reset the position for the next toasts, if you want them to appear at their default position i.e. the bottom left corner. Or else, each new toast generated will be appearing at the last position i.e. where you displayed the last positioned toast. You can reset the toast position by.
$.toast({
- heading: 'Success',
- text: 'Here is some kind of success message with a success icon that you can notice at the left side.',
- icon: 'success'
-})
$.toast({
- heading: 'Error',
- text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.',
- icon: 'error'
-})
$.toast({
- text: 'Triggers the events',
-
- beforeShow: function () {
- alert('The toast is about to appear');
- },
-
- afterShown: function () {
- alert('Toast has appeared.');
- },
-
- beforeHide: function () {
- alert('Toast is about to hide.');
- },
-
- afterHidden: function () {
- alert('Toast has been hidden.');
- }
-})
-
-
-
12. Updating Toasts
-
If you have a reference to a toast and want to update that, you can do so by calling the update method on the instance.
-var myToast = $.toast({
- heading: 'Information',
- text: 'Here is some information that will be later on turned to an error',
- icon: 'info',
- hideAfter: false
-});
-
-// Update the toast after three seconds.
-window.setTimeout(function(){
- myToast.update({
- heading: 'Error',
- text: 'Here is an information that changed to error',
- icon: 'error',
- hideAfter: false
- });
-}, 3000)
-
-
-
-
-
13. Resetting Toasts
-
If you have the reference to a specific toast, you can reset that by doing the following
-
-
-
-var myToast = $.toast('Some toast that needs to be removed.');
-myToast.reset(); // remove the toast "Some toast that needs to be removed"
-
-
-
-
If you do not have the reference to a specific toast and want to reset every toast, do the following:
-$.toast({
- text: "Hey there fellas, here is a simple toast. Change the options above and then see the code that generates that toast", // Text that is to be shown in the toast
- heading: 'How to use', // Optional heading to be shown on the toast
- icon: 'warning', // Type of toast icon
- showHideTransition: 'fade', // fade, slide or plain
- allowToastClose: true, // Boolean value true or false
- hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
- stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
- position: 'bottom-left', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
- position: { left : 20, right : 20, top : 20, bottom : 20 }, // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
- bgColor: '#444', // Background color of the toast
- textColor: '#eee', // Text color of the toast
- textAlign: 'left', // Text alignment i.e. left, right or center
- loader: true, // Whether to show loader or not. True by default
- loaderBg: '#9EC600', // Background color of the toast loader
- beforeShow: function () {}, // will be triggered before the toast is shown
- afterShown: function () {}, // will be triggered after the toat has been shown
- beforeHide: function () {}, // will be triggered before the toast gets hidden
- afterHidden: function () {} // will be triggered after the toast has been hidden
-});
-
-
-# How to use
-
-- You can install the plugin via Bower:
-
- ```js
- bower install jquery-toast-plugin
- ```
-
- or via `npm`
-
- ```js
- npm install jquery-toast-plugin
- ```
-
- Or directly download the repository and place the content of `dist` wherever you can access them.
-- Include the CSS and JS files.
-- Simply do ```$.toast('Toast message to be shown')``` Of course it would be the world's simplest toast message but believe me **you can do a lot more** with the options.
-
-# Demo
-For some quick demos and a detailed documentation accompanied by the demos for each of the available options can be accessed through http://kamranahmed.info/toast
-
-## Quick usage examples
-**Simple textual toast**
-```javascript
-// Non sticky version
-$.toast("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.")
-// Sticky version
-$.toast({
- text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.",
- hideAfter : false
-})
-```
-
-**Toast using HTML as a text**
-```javascript
-// Non sticky
-$.toast("Let's test some HTML stuff... github")
-// sticky
-$.toast({
- text : "Remember! You can always introduce your own × HTML and CSS in the toast.",
- hideAfter : false
-})
-```
-
-**Unordered list elements as the text of toast using array**
-```javascript
-// Non sticky version
-$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])
-// Sticky version
-$.toast({
- text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
- hideAfter : false
-})
-```
-
-**Changing the animations**
-```javascript
-$.toast({
- text : "Let's test some HTML stuff... github",
- showHideTransition : 'slide' // It can be plain, fade or slide
-})
-```
-
-**Changing the formatting**
-```javascript
-$.toast({
- text : "Let's test some HTML stuff... github",
- showHideTransition : 'slide', // It can be plain, fade or slide
- bgColor : 'blue', // Background color for toast
- textColor : '#eee', // text color
- allowToastClose : false, // Show the close button or not
- hideAfter : 5000, // `false` to make it sticky or time in miliseconds to hide after
- stack : 5, // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once
- textAlign : 'left', // Alignment of text i.e. left, right, center
- position : 'bottom-left' // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values to position the toast on page
-})
-```
-
-**Resetting the toast**
-```javascript
-var myToast = $.toast('Some toast that needs to be removed.');
-myToast.reset(); // remove the toast "Some toast that needs to be removed"
-```
-What if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:
-```javascript
-$.toast().reset('all');
-```
-
-**Updating the toast**
-Suppose, you had shown some toast upon the page, a sticky toast for example and now you want to update the toast. You can do the following
-
-```javascript
-var myToast = $.toast({
- text : 'Some toast that needs to show the success message after the ajax call.',
- hideAfter : false,
- bgColor : '#E01A31'
-});
-
-window.setTimeout(function(){
- myToast.update({
- text : 'Updated after a few seconds',
- bgColor : '#23B65D'
- });
-}, 5000);
-```
-To learn more about how to use and customize it, head to http://kamranahmed.info/toast. Also you can find a customizer there that will let you modify the look and feel of the toast however you like it.
-
-