It looks like you’re new here. If you want to get involved, click one of these buttons!
jKit has currently over 40 commands, it’s time to work on the individual command details and the whole codebase. It’s planned to add an event and callback system that makes it possible to call your own JavaScript code on each action jKit performs. The first code to make this happen is already in the latest versions of jKit, but as long as that’s not final, you wont see me document that only to later break your code.
What else to expect? Well, there are some parts of the code that could be made faster by using native JavaScript code, so that will be something I’m sure going to do. Secondly I want to have a commented source where everyone can easily see how things are done and find out why it works. And lastly, I think there should be the possibility to generate custom versions of jKit where you select only the commands you need. While jKit is still pretty small, less than 15k GZipped, it will get bigger with time and I want to be ready for that.
Let’s say we have an element that loads the latest jKit commits with the API command. Now we don’t want to show that div till the commits are actually finished loading. To make this possible we first add a command key “commits” to the api command so that we can call a specific element command. Next we add a show command that has the new global “onevent” option. The API has an event “finished”, so with an onevent “commits.finished”, we will start this command only after the api has finished loading our commits. So now the div fades in nicely after the commits are loaded:
<div style="display:none" data-jkit="[api.commits:someoptions][show:speed=250;onevent=commits.finished]">
...
</div>
The command key is a special option of each command, you can add a key like above or by setting that option directly:
options.commandkey=commits
In the next example we are using jKit events to show some content whenever the third slide of a slideshow is shown:
<div data-jkit="[slideshow.header:interval=10000]">
...
</div>
<div data-jkit="[show:onevent=header.showslide3;execute=always][hide:onevent=header.showslide4;execute=always]">
...
</div>
The option “execute” defines how often we execute something. In this case always. Other options would be “once”, or a specific number of times.
Specially for the events there is a new special command. Similar as with the macro command, this isn’t a real command, but a way to do additional nice things. While the macro command stores the previous command in a macro, the reload command reloads the previous command on a specific event. Here’s an example:
<div data-jkit="[api.commits:someoptions][reload:delay=10000;onevent=commits.finished]">
...
</div>
This makes it possible to reload the same command after a while. In the above example the commits are again loaded ten seconds after the last commits were loaded.
Now of course this whole event system will be available with JavaScript, as well. More on that when I’m ready.
So much for the moment. This is still not finalized, so expect name changes and additional features.
The first features of the jKit events are now implemented. Have a look at the “advanced” page to get a complete explanation: https://jquery-jkit.com/pages/advanced.php
I will add a few examples to the individual command pages, too.
Just added a nice demo combining four different commands (api, template, ticker & show) together with the event system: https://jquery-jkit.com/commands/ticker.html
<div rel="jKit[template:action=set;name=commits]" style="display:none">
<ul>
<li data-jkit-api-if="data[0]" data-jkit-api="data[0].commit.message"></li>
<li data-jkit-api-if="data[1]" data-jkit-api="data[1].commit.message"></li>
<li data-jkit-api-if="data[2]" data-jkit-api="data[2].commit.message"></li>
<li data-jkit-api-if="data[3]" data-jkit-api="data[3].commit.message"></li>
<li data-jkit-api-if="data[4]" data-jkit-api="data[4].commit.message"></li>
</ul>
</div>
<div style="display:none" data-jkit="[show:speed=500;onevent=commits.complete]">
<div data-jkit="[api.commits:format=json;template=commits;url=https://api.github.com/repos/FrediBach/jQuery-jKit/commits][ticker:speed=50;delay=1500;onevent=commits.complete]">loading ...</div>
</div>
It’s the last one of the ticker examples. Really nice to see everything working together so perfectly. 🙂
Though i haven’t tried all the features of jkit yet (actually i’ve tested only zoom & lightbox in combination so far) i must say it is an awesome piece of work with some serious kick-ass effects. Easy, peasy & light, definitely hip! Thank you Fredi. I downloaded jkit just last week and played a bit with it today. Than i checked the changelog and realized: gosh! my version is already obsolete! Very progressive! It would be very helpful to announce the new versions a way more obvious & eye-catching.
Thx. I’m going to climb the Kilimanjaro in tow weeks and than fly from it with a paraglider. No update in those two weeks, obviously, so you can take some breathe for a while. 😉
Till than there are only bug fixes and small features I want to add, like finishing the event system and adding the possibility to create infinite scrolling with the ajax command.
It would be very helpful to announce the new versions a way more obvious & eye-catching.
I will think about it. Currently I’m loading the latest version info directly from Github with the API command, maybe I can do some additional styling, we’ll see …
So it’s you paragliding in those demo pics. I have some feature requests but i will write them in the dedicated section. Wish you enjoy flying.
So it’s you paragliding in those demo pics.
Mostly friends as I’m normally the one that makes the great shots. 😉
Wish you enjoy flying.
Thx … and for the inputs, as well.
Back to the original topic of this thread. 🙂
The source is now documented and I laid the ground for the custom jKit versions right inside the source. The next few updates will have some small improvements. Than the plan is to release the hash support, before I start working on the custom jKit builder. There will actually be three versions of jKit in the future:
So much for the moment. A lot of work ahead, but it will be worth it. 🙂
Some further information about the three versions. The core of all three versions will be exactly the same. Now if a command isn’t automatically registered on init because it was not included inside the plugin, jKit tries to load it from an external source (it has to be named in a certain way). So the autoloading version is basically the same as the complete version, just with zero commands inside the plugin! The custom version is just the autoloader plugin with a selection of handpicked commands. This will make the plugin extremely extensible, as you not only can create command replacements as in the current version, you can actually add completely new commands, all you have to do is put it into the “commands” directory, name it correctly and program it the same way as the other commands and it will be loaded and ready to use. I’m currently changing the whole structure of the source to make this possible.
What to expect from the minified sizes of each version:
And maybe for a future version with all kind of super nice visual effects:
Some news about the upcoming release of version 1.2. It should be out in the next few days. There’s currently one small, but hard to fix bug that has taken more time than expected, but everything is now on track for a release. There will be an overworked design of the jKit website with it, a command competition and a few new pages. Here’s a preview of the new download page: https://jquery-jkit.com/pages/download.php
