Toggler
.png "Toggler")
A package(atleast the code) to toggle properties of tags.
I mostly use toggle classes while making a switch theme method, button interaction etc.
New feature:
Toggle images too:
- Now toggle images with an ease.
- No more InteractionCount().
Syntax:
const toggler = new Toggler;
toggler.toggleImage('elementID', 'fromImage', 'toImage');
- Create a new object using
const toggler = new Toggler.
Toggle slides:
- You can now toggle slides(an element).
- You can select upto 2 types of slide one is vertical side and horizontal slide.
- Vertical toggle is coded and can be used.
Syntax:
const toggler = new Toggler;
toggler.toggleSlide('elementID', 'direction', speed);
Direction:
- Direction says about in what direction the slide to start either horizontal slide or vertical slide. (visit docs for more info link is below.)
Speed:
- Speed defines the speed of the toggling that mean how fast it should slide.
Example:
const toggler = new Toggler;
toggler.toggleSlide('testElement', 'horizontal', 60);//toggles the slide horizontally i.e from left to right or right to left
toggler.toggleSlide('testElement2', 'vertical', 60);//toggles the slide vertical i.e from bottom to top or top to bottom
Note: To avoid problems use left:30px or top:30px instead of margin-left:30px or margin-top:30px because the code calculats the offset values.
Future planned improvements:
- Add a
toggleProperty()to toggle between properties of the elements or tags. - Optimise code.
- Release a CDN.
- Make the code more stable.
- Improve toggleSlide() for vertical toggles.
Optimizations:
- Now Toggler is a class.
- Removed
InteractionCount()which sometimes doesn't work properly. - Added vertical slide support.
How to download:
Downloading:
- Click on the code dropdown and click 'Download zip' to download.
Cloning using cmd(only for contribution purpose)
- To clone the repo click on the code dropdown and there you can copy the link.
- Then open cmd in your pc and type
$ git clone url
- Replace 'url' with the copied link and click enter.
- Repository will be cloned and you can use Toggler.js in your code.
- If you want to contribute changes can be pushed(check the code before pushing to origin or push to 'other' branch).
Or else:
- Just copy paste the code.
Note: While using Toggler.js please make sure you have a backup because if something goes wrong and you pushed the changes then things will become tedious to handle.
How to use:
- You can clone the project or just download the Toggler.js. (Will release a npm package later)
- include this script before including your main script.
for example:
<script src = "Toggler.js"></script>
<script src = "myscript.js"></script>
- After this you can use
toggler.toggleClass(elementId, fromClass, toClass)method to toggle between classestoggler.toggleImage(elementID, fromImage, toImage)to toggle between images in your main script.
Syntax:
In HTML file:
<head>
<script src = "Toggler.js"></script>
<script src = "myscript.js"></script>
</head>
- You can use these in
<body></body>too.
Your main JavaScript file:
const toggler = new Toggler;
toggler.toggleClass('elementID', 'fromClass', 'toClass');
For example:
const toggler = new Toggler;
toggler.toggleClass('elementID', 'fromClass', 'toClass');
toggler.toggleImage('elementID', 'fromImage', 'toImage');
toggler.toggleSlide('elementID', 'direction', speed)
elementID:
ID of the element to which you want to change the class.
fromClass:
element's current class name.
toClass:
New class name to the given element.
Direction:
- Direction says about in what direction the slide to start either horizontal slide or vertical slide. (visit docs for more info link is below.)
Speed:
-
Speed defines the speed of the toggling that mean how fast it to slide.
-
Note that speed is int literal.
Note: Remember all the arguments are strings except speed.
Remember to use this syntax in your main script not in Toggler.js
Note: Don't try to manipulate the Toggler.js unless you know javascript.
For more info about the 'Toggler' visit Toggler Docs.
Contribution:
- You can contribute to this repo by creating a pull request for features and issue for bug reports
license:
- This repository is licensed under MIT.
Contact us:
- You can join our official discord server The Atelier
- You can support us on The Atelier team patreon
3 Oct 11, 2022
2 Feb 9, 2021
2 Jun 21, 2022
277 Nov 25, 2022
2 Mar 29, 2022
4 May 17, 2022
1.5k Dec 27, 2022
1 Dec 25, 2021
9 May 30, 2022
17 Aug 17, 2022