├── example
    ├── logo.gif
    ├── pushToUrl.js
    └── index.html
├── .npmignore
├── .babelrc
├── .editorconfig
├── .gitignore
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── LICENSE
├── README.md
├── .eslintrc
├── package.json
├── .nuspec
├── CODE_OF_CONDUCT.md
└── src
    └── pushToUrl.js


/example/logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baralmanish/PushDataToUrl/HEAD/example/logo.gif


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | *.log
 2 | npm-debug.log*
 3 | 
 4 | # Dependency directories
 5 | node_modules
 6 | 
 7 | # npm package lock
 8 | package-lock.json
 9 | yarn.lock
10 | 
11 | # project files
12 | src
13 | examples
14 | CHANGELOG.md
15 | .editorconfig
16 | .eslintignore
17 | .eslintrc
18 | .babelrc
19 | .gitignore
20 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "development": {
 4 |       "presets": ["env"],
 5 |       "plugins": [
 6 |         "add-module-exports"
 7 |       ]
 8 |     },
 9 |     "production": {
10 |       "presets": ["env", "minify"],
11 |       "plugins": [
12 |         "add-module-exports"
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain
 2 | # consistent coding styles between different editors and IDEs.
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Compiled binary addons (http://nodejs.org/api/addons.html)
 7 | build/Release
 8 | 
 9 | # Dependency directories
10 | node_modules
11 | jspm_packages
12 | 
13 | # Optional npm cache directory
14 | .npm
15 | 
16 | # Editors
17 | .idea
18 | 
19 | # Lib
20 | lib
21 | 
22 | # npm package lock
23 | package-lock.json
24 | yarn.lock
25 | 
26 | # others
27 | .DS_Store
28 | *.nupkg
29 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Manish Baral <mail.aarman@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Push to URL parameters
 2 | This is a plugin to add, update and remove data to url params without reloading the webpage.
 3 | 
 4 | 
 5 | ## Setup Commands
 6 | - `npm install` - Install npm packages
 7 | - `npm run build` - Babel will transpile ES6 => ES5 and minify the code.
 8 | - `npm run prepublish` - Hook for npm. Do all the checks before publishing your module.
 9 | 
10 | 
11 | ## Installation
12 | ### [NPM](https://www.npmjs.com/package/push-data-to-url)
13 |   `npm i push-data-to-url`
14 | ### [Nuget](https://www.nuget.org/packages/PushDataToUrl)
15 |   - Package Manager: `PM> Install-Package PushDataToUrl`
16 |   - .Net CLI: `> dotnet add package PushDataToUrl`
17 |   - Paket CLI: `> paket add PushDataToUrl`
18 | 
19 | ## DEMO
20 | To view the demo please click [here](https://push2url.netlify.app)
21 | 
22 | ## Implementation
23 | ### Initialize
24 |   ```javascript
25 |   var pushToUrl = new pushToUrl();
26 |   ```
27 | ### Add
28 |   ```javascript
29 |   pushToUrl.add({key: 'name', value: 'John'});
30 |   ```
31 | ### Get Value of Selected Key
32 |   ```javascript
33 |   pushToUrl.get('name');
34 |   ```
35 | ### Remove Selected Key
36 |   ```javascript
37 |   pushToUrl.remove('name');
38 |   ```
39 | ### Remove All
40 |   ```javascript
41 |   pushToUrl.removeAll();
42 |   ```
43 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "env": {
 3 |       "browser": true,
 4 |       "jquery": true
 5 |   },
 6 |   "extends": ["eslint:recommended", "google", "plugin:react/recommended"],
 7 |   "plugins": [
 8 |     "react"
 9 |   ],
10 |   "rules": {
11 |     "keyword-spacing": 1,
12 |     "no-var": "off",
13 |     "camelcase": "off",
14 |     "max-len": "off",
15 |     "indent": "off",
16 |     "quotes": [2, "single", "avoid-escape"],
17 |     "linebreak-style": [
18 |       "error",
19 |       "unix"
20 |     ],
21 |   },
22 |   "settings": {
23 |     "react": {
24 |       "createClass": "createReactClass", // Regex for Component Factory to use,
25 |                                          // default to "createReactClass"
26 |       "pragma": "React",  // Pragma to use, default to "React"
27 |       "version": "15.0", // React version, default to the latest React stable release
28 |       "flowVersion": "0.53" // Flow version
29 |     },
30 |     "propWrapperFunctions": [ "forbidExtraProps" ] // The names of any functions used to wrap the
31 |                                                    // propTypes object, e.g. `forbidExtraProps`.
32 |                                                    // If this isn't set, any propTypes wrapped in
33 |                                                    // a function will be skipped.
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "push-data-to-url",
 3 |   "version": "2.0.0",
 4 |   "description": "This is a plugin to add, update and remove data to url params without reloading the webpage.",
 5 |   "main": "src/pushToUrl.js",
 6 |   "scripts": {
 7 |     "clean": "rimraf lib",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "build": "cross-env BABEL_ENV=production babel src --out-dir lib",
10 |     "prepublish": "npm run clean && npm run build"
11 |   },
12 |   "files": [
13 |     "lib",
14 |     "src"
15 |   ],
16 |   "directories": {
17 |     "example": "example"
18 |   },
19 |   "author": "Manish Baral",
20 |   "license": "MIT",
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git+https://github.com/baralmanish/push-data-to-url.git"
24 |   },
25 |   "keywords": [
26 |     "push data to url",
27 |     "npm",
28 |     "module",
29 |     "node",
30 |     "javascript",
31 |     "JS"
32 |   ],
33 |   "bugs": {
34 |     "url": "https://github.com/baralmanish/push-data-to-url/issues"
35 |   },
36 |   "homepage": "https://github.com/baralmanish/push-data-to-url#readme",
37 |   "devDependencies": {
38 |     "babel-cli": "^6.26.0",
39 |     "babel-eslint": "^10.0.1",
40 |     "babel-plugin-add-module-exports": "^1.0.2",
41 |     "babel-polyfill": "^6.26.0",
42 |     "babel-preset-env": "^1.7.0",
43 |     "babel-preset-minify": "^0.5.0",
44 |     "cross-env": "^5.2.0",
45 |     "eslint": "^5.16.0"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/.nuspec:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <package>
 3 |     <metadata>
 4 |         <!-- The identifier that must be unique within the hosting gallery -->
 5 |         <id>PushDataToUrl</id>
 6 |         
 7 |         <!-- The package version number that is used when resolving dependencies -->
 8 |         <version>2.0.0</version>
 9 | 
10 |         
11 |         <title>PushDataToUrl</title>
12 | 
13 |         <!-- Authors contain text that appears directly on the gallery -->
14 |         <authors>Manish Baral</authors>
15 | 
16 |         <!--
17 |             Owners are typically nuget.org identities that allow gallery
18 |             users to easily find other packages by the same owners.
19 |         -->
20 |         <owners>Manish Baral</owners>
21 | 
22 |         <!-- License information is displayed on the gallery -->
23 |         <license type="expression">Apache-2.0</license>
24 | 
25 |         <!-- Project URL provides a link for the gallery -->
26 |         <projectUrl>https://github.com/baralmanish/push-data-to-url/</projectUrl>
27 | 
28 |         <!-- The icon is used in Visual Studio's package manager UI -->
29 |         <iconUrl>https://github.com/baralmanish/push-data-to-url/blob/master/example/logo.gif</iconUrl>
30 | 
31 |         <!--
32 |             If true, this value prompts the user to accept the license when
33 |             installing the package.
34 |         -->
35 |         <requireLicenseAcceptance>false</requireLicenseAcceptance>
36 | 
37 |         <!--
38 |             The description can be used in package manager UI. Note that the
39 |             nuget.org gallery uses information you add in the portal.
40 |         -->
41 |         <description>This is a plugin to add, update and remove data to url params without reloading the webpage.</description>
42 | 
43 |         <!-- Any details about this particular release -->
44 |         <releaseNotes>Update from jQuery to Javascript</releaseNotes>
45 | 
46 |         <!-- Copyright information -->
47 |         <copyright>Copyright ©2019 Manish Baral</copyright>
48 | 
49 |         <!-- Tags appear in the gallery and can be used for tag searches -->
50 |         <tags>web utility npm-package plugin urlparams url-parameters javascript</tags>
51 |     </metadata>
52 | 
53 |     <!-- A README.md to display when the package is installed -->
54 |     <files>
55 |         <file src="README.md" target="" />
56 |     </files>
57 | </package>
58 | 


--------------------------------------------------------------------------------
/example/pushToUrl.js:
--------------------------------------------------------------------------------
 1 | 'use strict';var _typeof='function'==typeof Symbol&&'symbol'==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&'function'==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?'symbol':typeof a};/*
 2 |  * JavaScript PushToUrl
 3 |  * Author: Manish Baral
 4 |  * Version: 2.0.0
 5 |  * Copyright © 2019
 6 | */(function(a){'object'==('undefined'==typeof module?'undefined':_typeof(module))&&'object'==_typeof(module.exports)?module.exports=a():'object'==('undefined'==typeof window?'undefined':_typeof(window))?window.pushToUrl=a():console.error('To use this library you need to either use browser or node.js [require()]')})(function(){'use strict';// Private function to initialize
 7 | function a(){console.table([['initialize','var pushToUrl = new pushToUrl()'],['add key and value to url params','pushToUrl.add({key: \'name\', value: \'John\'});'],['get selected key from url params','pushToUrl.get(\'name\');'],['delete selected key from url params','pushToUrl.remove(\'name\');'],['remove all url params','pushToUrl.removeAll();']])}// Private function to detect url query string
 8 | function b(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null,b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,c=window.location.href;if(a||b){var e=new URLSearchParams(location.search);return e.set(a,b),e.toString()}// regex pattern for detecting ? character
 9 | var d=new RegExp(/\?+/g);return d.test(c)}// Private function to count the url query parameters
10 | function c(){var a=window.location.href,b=a.match(/[a-z\d]+=[a-z\d]+/gi);return b?b.length:0}var d=void 0,e=location.protocol+'//'+location.host+location.pathname,f=function(){a()};// Plugin Constructor
11 | // Add
12 | return f.prototype.add=function(a){var c=a.key,f=a.value;if(c&&f){d=b()?b(c,f):c+'='+f;var g=e+'?'+d;return window.history.pushState({path:g},'',g),a}},f.prototype.get=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;if(a){var b=null,c=[];return location.search.substr(1).split('&').forEach(function(d){c=d.split('='),c[0]===a&&(b=decodeURIComponent(c[1]))}),b}},f.prototype.remove=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;if(a){var b=c(),d=e;if(b)return 1<b&&(d=location.href.split('?').map(function(b,c){return c?b.replace(new RegExp('&'+a+'=[^&]*|'+a+'=[^&]*&'),''):b}).join('?')),window.history.pushState({path:d},'',d),a}},f.prototype.removeAll=function(){return window.history.pushState({path:e},'',e),e},f});


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at mail.aarman@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/src/pushToUrl.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JavaScript PushToUrl
  3 |  * Author: Manish Baral
  4 |  * Version: 2.0.0
  5 |  * Copyright © 2019
  6 | */
  7 | 
  8 | (function( factory){
  9 | 
 10 |   if(typeof module == 'object' && typeof module.exports == 'object' )
 11 |       module.exports = factory();
 12 |   else if( typeof window == 'object')
 13 |       window.pushToUrl = factory();
 14 |   else
 15 |       console.error('To use this library you need to either use browser or node.js [require()]');
 16 | 
 17 | })(function(){
 18 |   "use strict"
 19 | 
 20 |   let urlParams;
 21 |   const BASE_URL = location.protocol + '//' + location.host + location.pathname;
 22 | 
 23 | 
 24 |   // Plugin Constructor
 25 |   let pushToUrl = function() {
 26 |     init();
 27 |   }
 28 | 
 29 |   // Add
 30 |   pushToUrl.prototype.add = function(options) {
 31 |     const key = options.key;
 32 |     const value = options.value;
 33 |     if (key && value) {
 34 |       if (detectQueryString()) {
 35 |         urlParams = detectQueryString(key, value);
 36 |       } else {
 37 |         urlParams = key + '=' + value;
 38 |       }
 39 |       const newUrl = BASE_URL + '?' + urlParams;
 40 |       window.history.pushState({path: newUrl}, '', newUrl);
 41 |       return options;
 42 |     }
 43 |   }
 44 | 
 45 |   pushToUrl.prototype.get = function(key = null) {
 46 |     if (key) {
 47 |       let result = null;
 48 |       let tmp = [];
 49 |       location.search
 50 |           .substr(1)
 51 |           .split("&")
 52 |           .forEach(function (item) {
 53 |               tmp = item.split("=");
 54 |               if (tmp[0] === key) result = decodeURIComponent(tmp[1]);
 55 |           });
 56 |       return result;
 57 |     }
 58 |   }
 59 | 
 60 |   // remove selected key
 61 |   pushToUrl.prototype.remove = function(key = null) {
 62 |     if (key) {
 63 |       const count = countUrlParams();
 64 |       let newUrl = BASE_URL;
 65 |       if (count) {
 66 |         if (count > 1) {
 67 |           newUrl = location.href.split('?')
 68 |                                 .map((url, i) => !i ? url : url
 69 |                                 .replace(new RegExp(`&${key}=[^&]*|${key}=[^&]*&`), ''))
 70 |                                 .join('?');
 71 | 
 72 |         }
 73 |         window.history.pushState({path: newUrl}, '', newUrl);
 74 |         return key;
 75 |       }
 76 |     }
 77 |   }
 78 | 
 79 |   // remove all
 80 |   pushToUrl.prototype.removeAll = function() {
 81 |     window.history.pushState({path: BASE_URL}, '', BASE_URL);
 82 |     return BASE_URL;
 83 |   }
 84 | 
 85 |   // Private function to initialize
 86 |   function init(){
 87 |     let codeDoc = [
 88 |       ["initialize", "var pushToUrl = new pushToUrl()"],
 89 |       ["add key and value to url params", "pushToUrl.add({key: 'name', value: 'John'});"],
 90 |       ["get selected key from url params", "pushToUrl.get('name');"],
 91 |       ["delete selected key from url params", "pushToUrl.remove('name');"],
 92 |       ["remove all url params", "pushToUrl.removeAll();"]
 93 |     ]
 94 |     console.table(codeDoc);
 95 |   }
 96 | 
 97 |   // Private function to detect url query string
 98 |   function detectQueryString(key = null, value = null) {
 99 |     const currentUrl = window.location.href;
100 |     if (key || value) {
101 |       let urlParams = new URLSearchParams(location.search);
102 |       urlParams.set(key, value);
103 |       return urlParams.toString();
104 |     } else {
105 |       // regex pattern for detecting ? character
106 |       const pattern = new RegExp(/\?+/g);
107 |       return pattern.test(currentUrl);
108 |     }
109 |   }
110 | 
111 |   // Private function to count the url query parameters
112 |   function countUrlParams() {
113 |     let cUrl = window.location.href;
114 |     let matches = cUrl.match(/[a-z\d]+=[a-z\d]+/gi);
115 |     return matches? matches.length : 0;
116 |   }
117 | 
118 |   return pushToUrl;
119 | });
120 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |   <meta name="description" content="">
  7 |   <title>Push To Url Javascript Plugin</title>
  8 | 
  9 |   <link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 11 | 
 12 |   <style>
 13 |     .bd-placeholder-img {
 14 |       font-size: 1.125rem;
 15 |       text-anchor: middle;
 16 |       -webkit-user-select: none;
 17 |       -moz-user-select: none;
 18 |       -ms-user-select: none;
 19 |       user-select: none;
 20 |     }
 21 | 
 22 |     @media (min-width: 768px) {
 23 |       .bd-placeholder-img-lg {
 24 |         font-size: 3.5rem;
 25 |       }
 26 |     }
 27 |   </style>
 28 | 
 29 |   <!-- Custom styles for this template -->
 30 |   <link href="https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
 31 | 
 32 | </head>
 33 | <body class="d-flex flex-column h-100">
 34 |   <header>
 35 |     <!-- Fixed navbar -->
 36 |     <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 37 |       <a class="navbar-brand" href="https://github.com/baralmanish/PushDataToUrl" target="_blank">
 38 |         <i class="fab fa-github"></i>
 39 |         PUSH VALUE TO URL PARAMETERS
 40 |       </a>
 41 |       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 42 |         <span class="navbar-toggler-icon"></span>
 43 |       </button>
 44 |       <!-- <div class="collapse navbar-collapse" id="navbarCollapse">
 45 |         <ul class="navbar-nav mr-auto">
 46 |           <li class="nav-item active">
 47 |             <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
 48 |           </li>
 49 |           <li class="nav-item">
 50 |             <a class="nav-link" href="example.html">Example</a>
 51 |           </li>
 52 |         </ul>
 53 |       </div> -->
 54 |     </nav>
 55 |   </header>
 56 | 
 57 |   <!-- Begin page content -->
 58 |   <main role="main" class="flex-shrink-0">
 59 |       <div class="container">
 60 |         <h1 class="mt-5">Installation</h1>
 61 |         <h2 class="mt-5"><a href="https://www.npmjs.com/package/push-data-to-url" target="_blank">NPM</a></h2>
 62 |         <p class="lead">
 63 |           <code>npm i push-data-to-url</code>
 64 |         </p>
 65 | 
 66 |         <hr/>
 67 | 
 68 |         <h1 class="mt-5">Documentation</h1>
 69 | 
 70 |         <h2 class="mt-5">Initialize</h2>
 71 |         <p class="lead">
 72 |           <code>var pushToUrl = new pushToUrl();</code>
 73 |         </p>
 74 | 
 75 |         <h2 class="mt-5">Add key and value to url params</h2>
 76 |         <p class="lead">
 77 |           <code>pushToUrl.add({key: 'name', value: 'John'});</code>
 78 |         </p>
 79 |         <div class="row">
 80 |           <div class="col-md-4">
 81 |             <div class="form-group">
 82 |               <label>Key</label>
 83 |               <input type="text" name="key" value="name" id="akey" class="form-control" required />
 84 |             </div>
 85 |           </div>
 86 |           <div class="col-md-4">
 87 |             <div class="form-group">
 88 |               <label>Value</label>
 89 |               <input type="text" name="value" value="John" id="value" class="form-control" required />
 90 |             </div>
 91 |           </div>
 92 |           <div class="col-md-4">
 93 |             <div class="form-group">
 94 |               <button type="button" id="add" class="btn btn-primary" style="margin-top: 32px;">
 95 |                 Add
 96 |               </button>
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 | 
101 |         <h2 class="mt-5">Get selected key value from url params</h2>
102 |         <p class="lead">
103 |           <code>pushToUrl.get('name');</code>
104 |         </p>
105 |         <div class="row">
106 |           <div class="col-md-4">
107 |             <div class="form-group">
108 |               <label>Key</label>
109 |               <input type="text" name="key" value="name" id="gkey" class="form-control" required />
110 |             </div>
111 |           </div>
112 |           <div class="col-md-4">
113 |             <div class="form-group">
114 |               <button type="button" id="get" class="btn btn-primary" style="margin-top: 32px;">
115 |                 Get Value
116 |               </button>
117 |             </div>
118 |           </div>
119 |         </div>
120 |         <p class="lead" id="getResult"></p>
121 | 
122 |         <h2 class="mt-5">Delete selected key from url params</h2>
123 |         <p class="lead">
124 |           <code>pushToUrl.remove('name');</code>
125 |         </p>
126 |         <div class="row">
127 |           <div class="col-md-4">
128 |             <div class="form-group">
129 |               <label>Key</label>
130 |               <input type="text" name="key" value="name" id="rkey" class="form-control" required />
131 |             </div>
132 |           </div>
133 |           <div class="col-md-4">
134 |             <div class="form-group">
135 |               <button type="button" id="removeSelected" class="btn btn-primary" style="margin-top: 32px;">
136 |                 Remove Selected
137 |               </button>
138 |             </div>
139 |           </div>
140 |         </div>
141 | 
142 |         <h2 class="mt-5">Remove all url params</h2>
143 |         <p class="lead mb-5">
144 |           <code>pushToUrl.removeAll();</code>
145 |           <br/><br/>
146 |           <button type="button" id="removeAll" class="btn btn-primary">
147 |               Remove All
148 |             </button>
149 |         </p>
150 |       </div>
151 |     </main>
152 | 
153 |     <footer class="footer mt-auto py-3">
154 |       <div class="container">
155 |         <span class="text-muted">
156 |             Copyright (c) 2019 Manish Baral <a href="mailto:mail.aarman@gmail.com">mail.aarman@gmail.com</a>
157 |             &nbsp; | &nbsp;
158 |             <a href="https://github.com/baralmanish/" target="_blank">
159 |               <i class="fab fa-github"></i>
160 |               Github
161 |             </a>
162 |         </span>
163 |       </div>
164 |     </footer>
165 | 
166 |   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
167 |   <script type="text/javascript" src="./pushToUrl.js"></script>
168 |   <script type="text/javascript">
169 |     // Initialize pushToUrl
170 |     var pushToUrl = new pushToUrl();
171 | 
172 |     $('#add').click(function () {
173 |       var key = $('#akey').val();
174 |       var value = $('#value').val();
175 |       pushToUrl.add({
176 |         key: key,
177 |         value: value,
178 |       });
179 |     });
180 | 
181 |     $('#get').click(function () {
182 |       var key = $('#gkey').val();
183 |       var res = pushToUrl.get(key);
184 |       var html;
185 |       if (res) {
186 |         html = '<span class="text-success">The value for <span class="text-uppercase font-weight-bold">' + key + '</span> is <span class="text-uppercase font-weight-bold">' + res + '</span></span>';
187 |       } else {
188 |         html = '<span class="text-danger"><span class="text-uppercase font-weight-bold">' + key + '</span> is not found in url parameter</span>'
189 |       }
190 |       getResult = $(getResult);
191 |       getResult.show();
192 |       getResult.html(html);
193 |     });
194 | 
195 |     $('#removeSelected').click(function () {
196 |       var key = $('#rkey').val();
197 |       pushToUrl.remove(key);
198 |     });
199 | 
200 |     $('#removeAll').click(function () {
201 |       pushToUrl.removeAll();
202 |     });
203 |   </script>
204 | </body>
205 | </html>
206 | 


--------------------------------------------------------------------------------