Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
materialize-stepper
Advanced tools
materialize-stepper - npm Package Compare versions
Comparing version 2.1.4 to 3.0.0-beta.1
| Date format: d/m/y | ||
| ### 3.0.0-beta.1 (?/?/?) | ||
| In this version a master refactoring was made. Total modularization of CSS (with SASS), refacoring of all the javascript, | ||
| * Total modularization and partial refactoring of CSS: | ||
| * Everything in SASS; | ||
| * Everything modularized; | ||
| * Now all the transitions are CSS powered! | ||
| * The horizontal transition is triggered by just adding/removing the class `active` on the step; | ||
| * Now the steps use padding-bottom instead of margin-bottom to make the height calculation easier; | ||
| * Refactoring of the JS code: | ||
| * No longer requires jQuery or any other dependency; | ||
| * Now it requires you to create an instance with `new`; | ||
| * Removal of the integration with jQuery Validate, since there's A LOT of plugins and you may want to use some other one. To validate the steps, just define a `validationFunction` in the options and return a boolean (more in the [docs](https://kinark.github.io/Materialize-stepper/)); | ||
| * Removal of parallel stepper due to the adding of the validation function; | ||
| * Some methods/options such as `resetStepper` and `autoFocusInput` are still missing; | ||
| * Custom events and `showError` function were removed; | ||
| * Added more events and removed some other ones. Check the [docs](https://kinark.github.io/Materialize-stepper/) for more information; | ||
| * prevStep() now destroyes feedback preloader; | ||
| * Adding of gulp to make the development easier; | ||
| * Moved docs to the gh-pages, instead of the readme. | ||
| ### 2.1.5 (only on github for now) (01/12/17) | ||
| * Bug fixes. | ||
| * Added parallel stepper. | ||
| ### 2.1.4 (14/06/17) | ||
@@ -4,0 +28,0 @@ * Added NPM package. |
| { | ||
| "name": "materialize-stepper", | ||
| "version": "2.1.4", | ||
| "description": "A little plugin, inspired by MDL-Stepper, that implements a stepper to Materializecss framework.", | ||
| "main": "materialize-stepper.js", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/Kinark/Materialize-stepper.git" | ||
| }, | ||
| "keywords": [ | ||
| "materialize", | ||
| "stepper" | ||
| ], | ||
| "author": { | ||
| "name": "Kinark", | ||
| "url": "https://github.com/Kinark" | ||
| }, | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/Kinark/Materialize-stepper/issues" | ||
| }, | ||
| "homepage": "https://github.com/Kinark/Materialize-stepper#readme" | ||
| "name": "materialize-stepper", | ||
| "version": "3.0.0-beta.1", | ||
| "description": "A little plugin, inspired by MDL-Stepper, that implements a stepper to Materializecss framework.", | ||
| "main": "dist/js/mstepper.js", | ||
| "style": "dist/css/mstepper.css", | ||
| "sass": "src/scss/mstepper.scss", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/Kinark/Materialize-stepper.git" | ||
| }, | ||
| "files": [ | ||
| "dist", | ||
| "src/js/**/*.js", | ||
| "src/scss/**/*.scss", | ||
| "gulpfile.js", | ||
| "LICENSE" | ||
| ], | ||
| "keywords": [ | ||
| "materialize", | ||
| "material", | ||
| "stepper", | ||
| "plugin" | ||
| ], | ||
| "author": "Kinark", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/Kinark/Materialize-stepper/issues" | ||
| }, | ||
| "homepage": "https://kinark.github.io/Materialize-stepper/", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.1.2", | ||
| "@babel/plugin-proposal-class-properties": "^7.1.0", | ||
| "@babel/preset-env": "^7.1.0", | ||
| "babel-eslint": "10.0.1", | ||
| "eslint": "^5.8.0", | ||
| "gulp": "^3.9.1", | ||
| "gulp-autoprefixer": "^6.0.0", | ||
| "gulp-babel": "^8.0.0", | ||
| "gulp-clean-css": "^3.10.0", | ||
| "gulp-concat": "^2.6.1", | ||
| "gulp-file-include": "^2.0.1", | ||
| "gulp-header": "^2.0.5", | ||
| "gulp-line-ending-corrector": "^1.0.3", | ||
| "gulp-rename": "^1.4.0", | ||
| "gulp-replace": "^1.0.0", | ||
| "gulp-sass": "^4.0.2", | ||
| "gulp-sourcemaps": "^2.6.4", | ||
| "gulp-uglify": "^3.0.1", | ||
| "pump": "^3.0.0" | ||
| } | ||
| } |
406
README.md
@@ -0,6 +1,12 @@ | ||
| ## IMPORTANT! | ||
| #### Do. Or do not. There is no try. | ||
| ###### This is a total refactoring of materialize-stepper. For a year this project has been abandoned, but since a lot of people uses it, I decided to make everything from scratch. Since the latest stable version don't work anymore, this is the beta and the official working version right now. When it gets stable enough, I'll release it as a stable version. | ||
| # Materialize-stepper | ||
| [](https://badge.fury.io/gh/Kinark%2FMaterialize-stepper) | ||
| [](https://badge.fury.io/js/materialize-stepper) | ||
| [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RZYQNQ394RE3S) | ||
|  | ||
|  | ||
@@ -12,385 +18,9 @@ A little plugin, inspired by [MDL-Stepper](https://ahlechandre.github.io/mdl-stepper/), that implements a stepper to [Materializecss framework](http://materializecss.com/). | ||
| ## Getting Started | ||
| ## [Documentation](https://github.com/Kinark/Materialize-stepper) | ||
| First of all, not native english speaker. Also, I don't know how to work with github yet. Yeah. | ||
| The documentation once belonged to this readme, before the force's sleep. However, it's awaken once more, in the gh-pages this time. | ||
| The plugin is simple (really simple), small and has lack of resources, so... Wait for more (???) and... HELP ME!!! | ||
| [Go check it out!](https://github.com/Kinark/Materialize-stepper) | ||
| ### Prerequisities | ||
| Since it's an implementation to [Materializecss framework](http://materializecss.com/), you'll need it. If you want the stepper to verify required inputs, you'll need [jQuery Validation Plugin](https://jqueryvalidation.org/), but it's optional since 2.0.1: | ||
| ``` | ||
| - jQuery (obviously) | ||
| - Materializecss framework | ||
| - Google Material Icons | ||
| - jQuery Validation Plugin (optional) | ||
| ``` | ||
| ### Installing | ||
| ### Download (zip) | ||
| You can [download](https://github.com/Kinark/Materialize-stepper/archive/master.zip) the current version of repository compacted. | ||
| ### NPM | ||
| ```bash | ||
| npm install --save materialize-stepper | ||
| ``` | ||
| You just need to import the .css and the .js files **after** you import the prerequisites listed above: | ||
| ```html | ||
| <!-- Materializecss compiled and minified CSS --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> | ||
| <!--Import Google Icon Font--> | ||
| <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
| <!--Import Materialize-Stepper CSS (after importing materialize.css) --> | ||
| <link rel="stylesheet" href="materialize-stepper.min.css"> | ||
| <!-- jQuery --> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> | ||
| <!-- Materializecss compiled and minified JavaScript --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> | ||
| <!-- jQueryValidation Plugin --> | ||
| <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> | ||
| <!--Import Materialize-Stepper JavaScript (after the jquery.validate.js and materialize.js) --> | ||
| <script src="materialize-stepper.min.js"></script> | ||
| ``` | ||
| ## Usage | ||
| It does have an horizontal version already (you can check it in the first topic of usage section). The HTML base (a three steps example) is like this: | ||
| ```html | ||
| <ul class="stepper linear"> | ||
| <li class="step active"> | ||
| <div class="step-title waves-effect">E-mail</div> | ||
| <div class="step-content"> | ||
| <div class="row"> | ||
| <div class="input-field col s12"> | ||
| <input id="email" name="email" type="email" class="validate" required> | ||
| <label for="first_name">Your e-mail</label> | ||
| </div> | ||
| </div> | ||
| <div class="step-actions"> | ||
| <button class="waves-effect waves-dark btn next-step">CONTINUE</button> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="step"> | ||
| <div class="step-title waves-effect">Passo 2</div> | ||
| <div class="step-content"> | ||
| <div class="row"> | ||
| <div class="input-field col s12"> | ||
| <input id="password" name="password" type="password" class="validate" required> | ||
| <label for="password">Your password</label> | ||
| </div> | ||
| </div> | ||
| <div class="step-actions"> | ||
| <button class="waves-effect waves-dark btn next-step">CONTINUE</button> | ||
| <button class="waves-effect waves-dark btn-flat previous-step">BACK</button> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="step"> | ||
| <div class="step-title waves-effect">Fim!</div> | ||
| <div class="step-content"> | ||
| Finish! | ||
| <div class="step-actions"> | ||
| <button class="waves-effect waves-dark btn" type="submit">SUBMIT</button> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| ``` | ||
| After that you'll need to initialize it through: | ||
| ```html | ||
| <script> | ||
| $(function(){ | ||
| $('.stepper').activateStepper(); | ||
| }); | ||
| </script> | ||
| ``` | ||
| ## Explanation | ||
| Every class explains very well it's function, so... Everything runs inside a ul with ".stepper" class: | ||
| ```html | ||
| <ul class="stepper linear"> | ||
| ``` | ||
| Each step runs inside a li tag with the class ".step": | ||
| ```html | ||
| <li class="step"> | ||
| ``` | ||
| Inside each step there is two divs. The ".step-title", where you put the title of... guess what... | ||
| ```html | ||
| <div class="step-title waves-effect waves-dark">First step</div> | ||
| ``` | ||
| And the ".step-content", that holds the information: | ||
| ```html | ||
| <div class="step-content"></div> | ||
| ``` | ||
| There's the ".step-actions" container inside step-content, which holds the buttons: | ||
| ```html | ||
| <div class="step-actions"></div> | ||
| ``` | ||
| And finally there's the buttons, which proceed (.next-step) or return (.previous-step): | ||
| ```html | ||
| <button class="waves-effect waves-dark btn next-step">CONTINUE</button> | ||
| <button class="waves-effect waves-dark btn-flat previous-step">BACK</button> | ||
| ``` | ||
| ## Options | ||
| ### JS initialization setting(s) | ||
| If you are using linear stepper, clicking on the next and the previous step will work just like the buttons. | ||
| Since 2.1 you can adjust some options. Here they are, with their respective defaults: | ||
| ```html | ||
| <script> | ||
| $(function(){ | ||
| $('.stepper').activateStepper({ | ||
| linearStepsNavigation: true, //allow navigation by clicking on the next and previous steps on linear steppers | ||
| autoFocusInput: true, //since 2.1.1, stepper can auto focus on first input of each step | ||
| autoFormCreation: true, //control the auto generation of a form around the stepper (in case you want to disable it) | ||
| showFeedbackLoader: true //set if a loading screen will appear while feedbacks functions are running | ||
| }); | ||
| }); | ||
| </script> | ||
| ``` | ||
| ### Horizontal and non-horizontal | ||
| You can make your stepper horizontal just adding a ".horizontal" class to your primary "ul" tag. Since version 2.1 horizontal steppers are responsive and turns to vertical from **992px** (width) down: | ||
| ```html | ||
| <ul class="stepper horizontal">...</ul> | ||
| ``` | ||
| For now, horizontal stepper contents doesn't have an automatic height. You can change the default size (458px) of your primary "ul" class with CSS: | ||
| ```html | ||
| ul.stepper.horizontal { | ||
| min-height: 458px; | ||
| } | ||
| ``` | ||
| or inline: | ||
| ```html | ||
| <ul class="stepper horizontal" style="min-height:458px">...</ul> | ||
| ``` | ||
| **IMPORTANT: THE HEIGHT OF THE ".stepper-content" TAG IS SUBTRACTED BY 84PX. SO, FOR EXAMPLE, IF YOU WANT YOUR CONTENT TO HAVE 400PX HEIGHT, YOU'LL NEED TO SET THE "min-height" OF YOUR PRIMARY "ul" TAG TO 484PX!** | ||
| ### Linear and non-linear | ||
| If you want users to change between steps freely (without validations or the obligation to advance a step at a time), just remove .linear class from the primary ul: | ||
| ```html | ||
| <ul class="stepper">...</ul> | ||
| ``` | ||
| ### Form and inputs | ||
| If there is no "form" tag wrapping the ul, JS spawns it for the validate.js to work with the inputs (can be disabled). Since the primary funcion of stepper is to split some kind of form, for now, the only way to make a step required is to add "required" attribute to an input inside the .step-content container: | ||
| ```html | ||
| <input id="email" name="email" type="email" class="validate" required /> | ||
| ``` | ||
| If the input is not valid, the icon will turn red until all required inputs become valid. | ||
| If you want to define your own attributes, just wrap the "ul" with a default "form", using any attributes you need: | ||
| ```html | ||
| <form action="youraction" method="yourmethod"> | ||
| <ul class="stepper linear">...</ul> | ||
| </form> | ||
| ``` | ||
| If you want to submit your stepper, just create a submit button with "submit" type and no feedback or "next/previous-step" class: | ||
| ```html | ||
| <button class="waves-effect waves-dark btn" type="submit">SUBMIT</button> | ||
| ``` | ||
| Ooooor, if you want to do it programatically, just call "submitStepper()" function: | ||
| ```html | ||
| $('.stepper').submitStepper(); | ||
| ``` | ||
| ### Step labels | ||
| You can add you own step labels by adding a "data-step-label" to your "step-titles" tags. Just like that: | ||
| ```html | ||
| <div data-step-label="OMG, they're so small and cute!" class="step-title waves-effect">Step title</div> | ||
| ``` | ||
| ### Navigate | ||
| There is three ways to navigate through steps. | ||
| 1. By clicking on them, if you are not using the ".linear" class. If you are, clicking on the next and the previous step will work just like the buttons (what you can disable with the JS initialization setting(s) listed above). | ||
| 2. By the buttons inside the steps: | ||
| ```html | ||
| <!-- If you want the button to proceed, give it a .next-step class --> | ||
| <button class="waves-effect waves-dark btn next-step">CONTINUE</button> | ||
| <!-- If you want the button to return, give it a .previous-step class --> | ||
| <button class="waves-effect waves-dark btn-flat previous-step">BACK</button> | ||
| <!-- If you want the button to submit the form, give it no additional classes and define type="submit" --> | ||
| <button class="waves-effect waves-dark btn" type="submit">SUBMIT</button> | ||
| ``` | ||
| 3. By navigating programatically and, for that, there is three jQuery functions: | ||
| To proceed one step: | ||
| ```html | ||
| $('.stepper').nextStep(callback); | ||
| ``` | ||
| To return one step: | ||
| ```html | ||
| $('.stepper').prevStep(callback); | ||
| ``` | ||
| And to jump to a specific step: | ||
| ```html | ||
| //Just pass the number (int) of the wanted step as a parameter | ||
| $('.stepper').openStep(2, callback); | ||
| ``` | ||
| ### Callback/feedback | ||
| There's a way to make the buttons run a function instead of proceeding, just add a data-feedback attribute with the function name to a ".next-step" classified button. Just like that: | ||
| ```html | ||
| <button class="waves-effect waves-dark btn next-step" data-feedback="checkEmailDB">CONTINUE</button> | ||
| ``` | ||
| When the user press the button, a loading screen will overlay everything (can be disabled), making the user unable to proceed until you trigger the nextStep function manually. It's useful when you need to check if an e-mail exists in database through AJAX, for example. | ||
| To dimiss the feedback loading screen and proceed, you just need, as I said, to trigger nextStep function: | ||
| ```html | ||
| $('.stepper').nextStep(callback); | ||
| ``` | ||
| Or trigger "openStep()" funtion, which will dimiss it too: | ||
| ```html | ||
| $('.stepper').openStep(/*some step*/); | ||
| ``` | ||
| If you want to dimss it but doesn't proceed, you just call: | ||
| ```html | ||
| $('.stepper').destroyFeedback(); | ||
| ``` | ||
| And if for some reason you want to activate the feedback screen on the active step, just call: | ||
| ```html | ||
| $('.stepper').activateFeedback(); | ||
| ``` | ||
| It's also useful if you don't want to submit the form in the end. | ||
| If you want to trigger an error with a message in one of the steps, just use this function: | ||
| ```html | ||
| $('selector').showError('error message'); | ||
| ``` | ||
| That is a shorthand with additions to showErrors function of jQueryValidation plugin. | ||
| ### Custom Events | ||
| Materialize Stepper has custom events for you to bind actions to stepper events. | ||
| Here they are: | ||
| * When there was a step changing: '**stepchange**' | ||
| * When the next step was triggered: '**nextstep**' | ||
| * When the prev step was triggered: '**prevstep**' | ||
| * When some step was activated (like, step 3): '**step3**' -- (just change the number) | ||
| Just use them like this: | ||
| ```html | ||
| $('.stepper').on('putherethecustomevent', function(){ | ||
| /*Something happening!*/ | ||
| }); | ||
| ``` | ||
| You can also add your custom custom events. For that to happen, you just need to add a "data-event" to any step: | ||
| ```html | ||
| <li data-event="yourcustomcustomevent" class="step active">...</li> | ||
| ``` | ||
| ### Dynamically adding steps | ||
| If you want to activate steps dinamically, you just need to add a step without the class .step and with display:none css property: | ||
| ```html | ||
| <li class="activate-after" style="display:none;">...</li> | ||
| <li class="activate-after" style="display:none;">...</li> | ||
| ``` | ||
| And to activate it, you just need to run activateStep() function on the elements you want to add: | ||
| ```html | ||
| $('.activate-after').activateStep(callback); | ||
| ``` | ||
| To deactivate them, guess what? | ||
| ```html | ||
| $('.activate-after').deactivateStep(callback); | ||
| ``` | ||
| Ps.: unfortunately there is a bug with the animation if you add dinamically a last step on the horizontal stepper. I'm working to fix it :) | ||
| ## Extra | ||
| To end it, there is some extra features for you to use: | ||
| ### Reset stepper | ||
| If you want to reset your stepper (all inputs and thing), you can call "resetStepper" function: | ||
| ```html | ||
| // In the step parameter, you can pass a step (int) for the stepper to open after the reset. Otherwise it'll open the first one. | ||
| $('.stepper').resetStepper(step); | ||
| ``` | ||
| ### Get active step number | ||
| If you need to get the active step number for some reason, you can use "getActiveStep()" function, that will return a int with the index of the step: | ||
| ```html | ||
| // The function sums 1 to the index, so it starts on one instead of zero. | ||
| if($('.stepper').getActiveStep() == 4) {/*do something...*/}; | ||
| ``` | ||
| ### Change step-number background color: | ||
| Just use this long line of CSS with your own color: | ||
| ```html | ||
| ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .step.done::before, ul.stepper.horizontal .step.active .step-title::before, ul.stepper.horizontal .step.done .step-title::before { | ||
| background-color: #2196f3 !important; | ||
| } | ||
| ``` | ||
| ## Limitations | ||
@@ -412,5 +42,6 @@ | ||
| * Atom - ergaerga | ||
| * Atom (before) | ||
| * VSCode | ||
| ## Authors | ||
| ## Authors and collaborators | ||
@@ -427,1 +58,12 @@ * **Igor Marcossi** - *Initial work* - [Kinark](https://github.com/Kinark) | ||
| * THANK YOU [MDL-Stepper](https://ahlechandre.github.io/mdl-stepper/) FOR IDEAS AND A LITTLE OF CSS! | ||
| <p align="center"> | ||
| <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RZYQNQ394RE3S"><img src="https://coperni.design/files/coffe.svg" width="48" ></a> | ||
| </p> | ||
| <p align="center"> | ||
| Hey!<br />Did you like the stepper? I hope you did!<br />If you did, why not buy me a coffe? :D | ||
| </p> | ||
| <p align="center"> | ||
| <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RZYQNQ394RE3S"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" ></a> | ||
| </p> |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
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
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 2 instances in 1 package
Improved metrics
- Lines of code
- increased by82.21%
1536
- Number of medium supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-88.04%
111681
- Dev dependency count
- increased byInfinity%
19
- Number of package files
- decreased by-45.71%
19
- Number of low quality alerts
- increased byInfinity%
2
- Number of lines in readme file
- decreased by-84.24%
67
No dependency changes