Welcome to the jKit community. This is the place to discuss everything on and around jKit. Be friendly and I’m sure other members will be friendly with you, too.
The way to version 1.2
  • 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.

    Creator of jKit – www.fredibach.ch
  • A little preview of the upcoming jKit Events:

    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.

    Creator of jKit – www.fredibach.ch
  • 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.

    Creator of jKit – www.fredibach.ch
  • 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. 🙂

    Creator of jKit – www.fredibach.ch
    Thanked by 1DaDa
  • 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 …

    Creator of jKit – www.fredibach.ch
    Thanked by 1DaDa
  • 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.

    Creator of jKit – www.fredibach.ch
    Thanked by 1chule143
  • 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:

    • jKit Complete or just jKit: Contains everything, it’s the main version where all the commands and features are available from the start! This is the perfect version if you’re using a lot of different jKit stuff on your page and want to have every feature at hand without further thinking.
    • jKit Custom: Only contains exactly what you need, with a builder on the jKit page that lets you construct your very own version with only the features you really need.
    • jKit Automatic: This version has a very small core that is able to load features and commands as they are needed. It’s the version you should use if you don’t use many of jKits features, but you don’t know exactly which ones. You can use this version the same way as jKit Complete, but loading will be a little bit slower if you use a lot of the jKit features.

    So much for the moment. A lot of work ahead, but it will be worth it. 🙂

    Creator of jKit – www.fredibach.ch
  • 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.

    Creator of jKit – www.fredibach.ch
  • What to expect from the minified sizes of each version:

    • jKit Complete: ~60k
    • jKit Automatic: ~10k
    • jKit Custom: something between those numbers

    And maybe for a future version with all kind of super nice visual effects:

    • jKit Extended: 100k+
    Creator of jKit – www.fredibach.ch
  • 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

    Creator of jKit – www.fredibach.ch
  • Looks great Fredi – well done. And thanks for putting in the effort!