Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
baseframe-js
Advanced tools
baseframe-js - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
| { | ||
| "name": "baseframe-js", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "Common Javascript plugins and functions to help with Front-end Development on websites", | ||
@@ -5,0 +5,0 @@ "repository": { |
@@ -11,5 +11,9 @@ # Base_Frame Plugins & Common JS | ||
| __For Example:__ all have options that can be plugged in as a data attribute, in JSON format (loosely written somehat) | ||
| ### Pass in parameter options with a `data-` attribute | ||
| The data attribute is always the `data-` (of course) and then the plugin name `pluginName` followed by `-options`. | ||
| __For Example:__ all have options that can be plugged in as a data attribute, in object literal format. | ||
| ```html | ||
| <div id="your-plugin-elem" data-plugin-name="{option:'text',option2: true, etc: 'you get the idea'}"></div> | ||
| <div id="your-plugin-elem" data-pluginName-options="{option:'text',option2: true, etc: 'you get the idea'}"></div> | ||
| ``` | ||
@@ -60,13 +64,40 @@ | ||
| Name | Description | Jump To Link | ||
| ---- | ---- | ---- | ||
| Collapse | Its basically like an Accordion, but more configurable | [View](#collapse) | ||
| Navigation Desktop | This plugin just adds a delay to the desktop navigation for the nestled levels of a `<ul>`. Also, features an edge detection on the drop-downs, and uses corresponding CSS to position, so it stays on the page. | [View](#nav-desktop) | ||
| Navigation Mobile | Neat little mobile navigation plugin | [View](#nav-mobile) | ||
| Equalize Content | When Flexbox, or other options won’t work, use this to equalize content | [View](#equalize) | ||
| Marketo Form | Have you tried to style a Marketo form? It is a disaster! This should help slimplify the process so you won’t pull your hair out. | [View](#marketo-form) | ||
| Parallax Background | For making a parallaxing background | [View](#parallax) | ||
| Popup | There is like a few dozen of these, right?! Well this is easy to style and configurable. | [View](#popup) | ||
| Responsive Dropdown | Turn your left secondary navigation (or list of options) into a dropdown for mobile!| [View](#responsive-dropdown) | ||
| Tabs | Tabs in tabs, change onhashchange, dream big, become starry-eyed, this does it all :-) | [View](#tabs) | ||
| ## Plugin Names and What They Do. | ||
| ### Collapse | ||
| Its basically like an Accordion, but more configurable | ||
| __[View](#collapse)__ | ||
| ### Navigation Desktop | ||
| This plugin just adds a delay to the desktop navigation for the nestled levels of a `<ul>`. Also, features an edge detection on the drop-downs, and uses corresponding CSS to position, so it stays on the page. | ||
| __[View](#nav-desktop)__ | ||
| ### Navigation Mobile | ||
| Neat little mobile navigation plugin | ||
| __[View](#nav-mobile)__ | ||
| ### Equalize Content | ||
| When Flexbox, or other options won’t work, use this to equalize content | ||
| __[View](#equalize)__ | ||
| ### Marketo Form | ||
| Have you tried to style a Marketo form? It is a disaster! This should help slimplify the process so you won’t pull your hair out. | ||
| __[View](#marketo-form)__ | ||
| ### Parallax Background | ||
| For making a parallaxing background | ||
| __[View](#parallax)__ | ||
| ### Popup | ||
| There is like a few dozen of these, right?! Well this is easy to style and configurable. | ||
| __[View](#popup)__ | ||
| ### Responsive Dropdown | ||
| Turn your left secondary navigation (or list of options) into a dropdown for mobile! | ||
| __[View](#responsive-dropdown)__ | ||
| ### Tabs | ||
| Tabs in tabs, change onhashchange, dream big, become starry-eyed, this does it all :-) | ||
| __[View](#tabs)__ | ||
| <br> | ||
@@ -104,3 +135,3 @@ <br> | ||
| #### libraryExtend | ||
| Pass in an `array` for the first argument, and `notify` is optional defaulted to false. `notify` console log's when parameters get updated on an instance. | ||
| Pass in an `array` for the first argument, or a single plugin class, and `notify` is optional defaulted to false. `notify` console log's when parameters get updated on an instance. | ||
@@ -154,8 +185,27 @@ ```javascript | ||
| First parameter is the HTMLElement to scroll to, the second is the speed. Default speed is 100. This uses the `window.scroll` so should work cross-browser. This stops scrolling if the previous pixel is the same as the next, if the scroll tries to get broken, or if it can't scroll to anymore. | ||
| First parameter is the HTMLElement's top to scroll to position top, the second is the speed. Default speed is 100. This uses the `window.scroll` so should work cross-browser. This stops scrolling if the previous pixel is the same as the next, if the scroll tries to get broken, or if it can't scroll to anymore. | ||
| ```javascript | ||
| smoothScroll(scrollToElement:HTMLElement | $(HTMLElement), speed:number); | ||
| smoothScroll(scrollToTop :number [,speed: number]); | ||
| ``` | ||
| #### cookies | ||
| __params__ | ||
| Option | Description | ||
| ------ | ---- | ||
| path | path to the cookie, default is the current `location.pathname` | ||
| expires | set in minutes. Time the cookie will expire. | ||
| secure | if it can only be accessed via https. This gets set automatically when `sameSite` is set to `None` | ||
| sameSite | `Lax`, `Strict` or `None` are the options | ||
| ```javascript | ||
| //setting a cookie | ||
| cookies.set(name:string,value:string, params:object); | ||
| //getting a cookie | ||
| cookies.get(name,{path: '/'}) | ||
| ``` | ||
| <br> | ||
@@ -162,0 +212,0 @@ <br> |
@@ -16,3 +16,4 @@ //cash dom or jquery are a dependency | ||
| import ResponsiveDropDown from './src/assets/js/responsive-dropdowns'; | ||
| import formInputs from './src/assets/js/form-input' | ||
| import formInputs from './src/assets/js/form-input'; | ||
| import cookies from './src/assets/js/cookies'; | ||
@@ -35,3 +36,4 @@ // this is needed for all to operate | ||
| formInputs, | ||
| smoothScroll | ||
| smoothScroll, | ||
| cookies | ||
| } |
@@ -15,3 +15,4 @@ //lets bring it all on in | ||
| formInputs, | ||
| smoothScroll | ||
| smoothScroll, | ||
| cookies | ||
| } from '../../../scripts-all'; | ||
@@ -32,5 +33,7 @@ | ||
| ResponsiveDropDown, | ||
| Tabs, | ||
| Tabs | ||
| ]); | ||
| $.extend({cookies: cookies}); | ||
| $('body').on('click', 'a.smooth-scroll', function(e){ | ||
@@ -37,0 +40,0 @@ const $topElem = $($(this).attr('href')); |
@@ -11,5 +11,9 @@ # Base_Frame Plugins & Common JS | ||
| __For Example:__ all have options that can be plugged in as a data attribute, in JSON format (loosely written somehat) | ||
| ### Pass in parameter options with a `data-` attribute | ||
| The data attribute is always the `data-` (of course) and then the plugin name `pluginName` followed by `-options`. | ||
| __For Example:__ all have options that can be plugged in as a data attribute, in object literal format. | ||
| ```html | ||
| <div id="your-plugin-elem" data-plugin-name="{option:'text',option2: true, etc: 'you get the idea'}"></div> | ||
| <div id="your-plugin-elem" data-pluginName-options="{option:'text',option2: true, etc: 'you get the idea'}"></div> | ||
| ``` | ||
@@ -62,13 +66,38 @@ | ||
| Name | Description | Jump To Link | ||
| ---- | ---- | ---- | ||
| Collapse | Its basically like an Accordion, but more configurable | [View](#collapse) | ||
| Navigation Desktop | This plugin just adds a delay to the desktop navigation for the nestled levels of a `<ul>`. Also, features an edge detection on the drop-downs, and uses corresponding CSS to position, so it stays on the page. | [View](#nav-desktop) | ||
| Navigation Mobile | Neat little mobile navigation plugin | [View](#nav-mobile) | ||
| Equalize Content | When Flexbox, or other options won’t work, use this to equalize content | [View](#equalize) | ||
| Marketo Form | Have you tried to style a Marketo form? It is a disaster! This should help slimplify the process so you won’t pull your hair out. | [View](#marketo-form) | ||
| Parallax Background | For making a parallaxing background | [View](#parallax) | ||
| Popup | There is like a few dozen of these, right?! Well this is easy to style and configurable. | [View](#popup) | ||
| Responsive Dropdown | Turn your left secondary navigation (or list of options) into a dropdown for mobile!| [View](#responsive-dropdown) | ||
| Tabs | Tabs in tabs, change onhashchange, dream big, become starry-eyed, this does it all :-) | [View](#tabs) | ||
| ### Collapse | ||
| Its basically like an Accordion, but more configurable | ||
| __[View](#collapse)__ | ||
| ### Navigation Desktop | ||
| This plugin just adds a delay to the desktop navigation for the nestled levels of a `<ul>`. Also, features an edge detection on the drop-downs, and uses corresponding CSS to position, so it stays on the page. | ||
| __[View](#nav-desktop)__ | ||
| ### Navigation Mobile | ||
| Neat little mobile navigation plugin | ||
| __[View](#nav-mobile)__ | ||
| ### Equalize Content | ||
| When Flexbox, or other options won’t work, use this to equalize content | ||
| __[View](#equalize)__ | ||
| ### Marketo Form | ||
| Have you tried to style a Marketo form? It is a disaster! This should help slimplify the process so you won’t pull your hair out. | ||
| __[View](#marketo-form)__ | ||
| ### Parallax Background | ||
| For making a parallaxing background | ||
| __[View](#parallax)__ | ||
| ### Popup | ||
| There is like a few dozen of these, right?! Well this is easy to style and configurable. | ||
| __[View](#popup)__ | ||
| ### Responsive Dropdown | ||
| Turn your left secondary navigation (or list of options) into a dropdown for mobile! | ||
| __[View](#responsive-dropdown)__ | ||
| ### Tabs | ||
| Tabs in tabs, change onhashchange, dream big, become starry-eyed, this does it all :-) | ||
| __[View](#tabs)__ | ||
| <br> | ||
@@ -106,3 +135,3 @@ <br> | ||
| #### libraryExtend | ||
| Pass in an `array` for the first argument, and `notify` is optional defaulted to false. `notify` console log's when parameters get updated on an instance. | ||
| Pass in an `array` for the first argument, or a single plugin class, and `notify` is optional defaulted to false. `notify` console log's when parameters get updated on an instance. | ||
@@ -156,8 +185,27 @@ ```javascript | ||
| First parameter is the HTMLElement to scroll to, the second is the speed. Default speed is 100. This uses the `window.scroll` so should work cross-browser. This stops scrolling if the previous pixel is the same as the next, if the scroll tries to get broken, or if it can't scroll to anymore. | ||
| First parameter is the HTMLElement's top to scroll to position top, the second is the speed. Default speed is 100. This uses the `window.scroll` so should work cross-browser. This stops scrolling if the previous pixel is the same as the next, if the scroll tries to get broken, or if it can't scroll to anymore. | ||
| ```javascript | ||
| smoothScroll(scrollToElement:HTMLElement | $(HTMLElement), speed:number); | ||
| smoothScroll(scrollToTop :number [,speed: number]); | ||
| ``` | ||
| #### cookies | ||
| __params__ | ||
| Option | Description | ||
| ------ | ---- | ||
| path | path to the cookie, default is the current `location.pathname` | ||
| expires | set in minutes. Time the cookie will expire. | ||
| secure | if it can only be accessed via https. This gets set automatically when `sameSite` is set to `None` | ||
| sameSite | `Lax`, `Strict` or `None` are the options | ||
| ```javascript | ||
| //setting a cookie | ||
| cookies.set(name:string,value:string, params:object); | ||
| //getting a cookie | ||
| cookies.get(name,{path: '/'}) | ||
| ``` | ||
| <br> | ||
@@ -164,0 +212,0 @@ <br> |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.12%
264267
- Number of package files
- increased by0.92%
110
- Lines of code
- increased by2.25%
2359
- Number of lines in readme file
- increased by5.71%
925
No dependency changes