Gathering detailed insights and metrics for ampersand-view-switcher
Gathering detailed insights and metrics for ampersand-view-switcher
A utility for swapping out views inside a container element.
Installations
npm install ampersand-view-switcherDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.1.3
NPM Version
5.3.0
Score
70.5
Supply Chain
97.3
Quality
81.2
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
ampersandjs
Download Statistics
Total Downloads
326,772
Last Day
26
Last Week
139
Last Month
871
Last Year
14,429
GitHub Statistics
MIT License
23 Stars
83 Commits
13 Forks
9 Watchers
2 Branches
23 Contributors
Updated on Jan 23, 2022
Bundle Size
1.80 kB
Minified
723.00 B
Minified + Gzipped
Maintainers
8
Package Meta Information
Latest Version
3.0.0
Package Id
ampersand-view-switcher@3.0.0
Size
6.40 kB
NPM Version
5.3.0
Node Version
8.1.3
Total Downloads
Cumulative downloads
Total Downloads
326,772
Last Day
0%
26
Compared to previous day
Last Week
-50.7%
139
Compared to previous week
Last Month
-4.8%
871
Compared to previous month
Last Year
-23.4%
14,429
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
ampersand-view-switcher
Lead Maintainer: Kamil Ogórek
##Purpose
This module does one thing: it helps you swap out views inside of an element. It's compatible with ampersand-view, backbone views and any view that has an .el, .render() and .remove()
What might you do with it?
- build a page container for your app.
- build a system for managing display of modals in your single page app.
- animate a transition between showing any two views.
What it does
- Takes an instantiated view and renders it in the container.
- Removes the existing view from the container and calls
removeon it. - Makes it easy to do custom stuff as views are added and removed.
- Works either synchronously or asynchronously depending on whether you want to animate transitions between the views.
- Makes no assumptions about what your views do or how they're structured except the following:
- Views should have an
.elproperty that is the root element of the view. - Views should have a
.remove()method that cleans up and unbinds methods accordingly. - If your view has a
.render()method it will get called before it's shown. - Beyond this, they could be any object.
- Views should have an
- IT DOES VERY LITTLE ELSE (and that is a feature)
Install
npm install ampersand-view-switcher
Example
Here's an example of how you might use the view switcher to handle page views within your ampersand app.
mainview.js
1var AmpersandView = require('ampersand-view');
2var ViewSwitcher = require('ampersand-view-switcher');
3var templates = require('./templates');
4
5module.exports = AmpersandView.extend({
6 template: templates.body,
7 render: function () {
8 // render our template
9 this.renderWithTemplate();
10
11 // grab the element without our template based on its "data-hook" attribute
12 this.pageContainer = this.queryByHook('page-container');
13
14 // set up our page switcher for that element
15 this.pageSwitcher = new ViewSwitcher({
16 el: this.pageContainer,
17 // here we provide a few things we'd like to do each time
18 // we switch pages in the app.
19 show: function (view) {
20 // set our document title
21 document.title = view.pageTitle || 'my awesome app';
22 // scroll to the top
23 document.body.scrollTop = 0;
24 // perhaps store a reference to our current page on our
25 // app global for easy access from the browser console.
26 app.currentPage = view;
27 }
28 });
29 }
30});Or if you wanted to animate them you can do it asynchronously like so:
1// set up our page switcher for that element
2this.pageSwitcher = new ViewSwitcher({
3 el: this.pageContainer,
4 // whether or not to wait for remove to be done before starting show
5 waitForRemove: true,
6 // here we provide a few things to do before the element gets
7 // removed from the DOM.
8 hide: function (oldView, cb) {
9 // it's inserted and rendered for me so we'll add a class
10 // that has a corresponding CSS transition.
11 oldView.el.classList.add('animateOut');
12 // give it time to finish (yes there are other ways to do this)
13 setTimeout(cb, 1000);
14 },
15 // here we provide a few things we'd like to do each time
16 // we switch pages in the app.
17 show: function (newView) {
18 // it's inserted and rendered for me
19 document.title = newView.pageTitle || 'app name';
20 document.body.scrollTop = 0;
21
22 // store an additional reference, just because
23 app.currentPage = newView;
24
25 newView.el.classList.add('animateIn');
26 }
27});API Reference
constructor new ViewSwitcher([options])
options{Object} [optional]el{Element} The DOM element that should contain the views.show{Function} [optional] A function that gets called when a view is being shown. It's passed the new view.hide{Function} [optional] A function that gets called when a view is being removed. It's passed the old view and a callback. If you name 2 incoming arguments for examplefunction (oldView, callback) { ... }the view switcher will wait for you to call the callback before it's considered ready. If you only use one like this:function (oldView) { ... }it won't wait for you to call a callback.waitForRemove{Boolean} [default:false] Whether or not to wait until yourhideanimation callback gets called before starting yourshowanimation.prepend{Boolean} [default:false] Whether or not to prepend the view to theelement. When this isfalse, the view is appended.empty{Function} [optional] A function that gets called any time the view switcher is empty. Including when you instantiate it without giving it a view to start with.view{View} [optional] A view instance to start with.
1var switcher = new ViewSwitcher(document.querySelector('#pageContainer')); 2 3var view = new MyView({ model: model }); 4 5switcher.set(view);
set switcher.set(viewInstance)
viewInstance{View} The new view to render.
The instantiated view switcher has this one main method. Simply call it with the new view you wish to show.
This is most likely going to be an instantiated ampersand-view or Backbone.View, but can be anything that has a .el property that represents that view's root element and .remove() method that cleans up after itself. In addition if your custom view object has a .render() method it will get called before the view is added to the DOM.
1var switcher = new ViewSwitcher({el: document.querySelector('#pageContainer')}); 2 3var view = new MyView({ model: model }); 4 5switcher.set(view);
clear switcher.clear(callback)
callback{Function} [optional] An optional callback when removed. Useful if you're doing custom animations.
Removes the current view from the view switcher. Calls callback when done if one was provided.`
1var switcher = new ViewSwitcher({el: document.querySelector('#pageContainer')}); 2 3var view = new MyView({ model: model }); 4 5switcher.set(view); 6 7switcher.clear();
Changelog
- 0.3.0 Adding empty callback, initial view option.
- 0.0.1 Initial version (prototype stage, beware)
Credits
Written by @HenrikJoreteg with inspiration and ideas from @philip_roberts and @wraithgar and other awesome Yetis.
License
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 8/19 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
112 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3v6h-hqm4-2rg6
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-hc9w-4p87-j549
- Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
- Warn: Project is vulnerable to: GHSA-g74r-ffvr-5q9f
- Warn: Project is vulnerable to: GHSA-rch9-xh7r-mqgw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-92vm-wfm5-mxvv
- Warn: Project is vulnerable to: GHSA-h452-7996-h45h
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-gpvr-g6gh-9mc2
- Warn: Project is vulnerable to: GHSA-cm5g-3pgc-8rg4
- Warn: Project is vulnerable to: GHSA-jj78-5fmv-mv28
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-mpcf-4gmh-23w8
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-9prh-257w-9277
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-jcpv-g9rr-qxrc
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-7f5c-rpf4-86p8
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
- Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-3fx5-fwvr-xrjg
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-7mc5-chhp-fmc3
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-f9cm-p3w6-xvr3
- Warn: Project is vulnerable to: GHSA-jjv7-qpx3-h62q
- Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-7xfp-9c55-5vqj
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-xwg4-93c6-3h42
- Warn: Project is vulnerable to: GHSA-jgqf-hwc5-hh37
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-qg8p-v9q4-gh34
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-8225-6cvr-8pqp
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
- Warn: Project is vulnerable to: GHSA-34r7-q49f-h37c
- Warn: Project is vulnerable to: GHSA-c9f4-xj24-8jqx
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
2.3
/10
Last Scanned on 2025-03-31
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More