npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

koco-modaler

v1.4.11

Published

koco modaler is a knockout component used to display modal screen. It is an opinionated component based on the [Koco generator](https://github.com/cbcrc/generator-koco).

Downloads

20

Readme

koco modaler

koco modaler is a knockout component used to display modal screen. It is an opinionated component based on the Koco generator.

Table of contents

Installation

bower install knockout-modaler

Usage

In your startup file, we need to do a number of things in order to fully initialize the router:

startup.js

define(['knockout', 'modaler'],
    function(ko, modaler) {
        'use strict';

        // First: registering a modal.
        modaler.registerModal('modal_name', {
                title: 'modal_title'
        });

        // Second: bind the Knockout ViewModel with the modaler object.
        ko.applyBindings({
                modaler: modaler
                // other objects come here
        });

        // Third: initialize the modaler.
        modaler.init();
    });

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>
    </head>
    <body>
        <modaler class="modal fade" data-bind="visible: modaler.isModalOpen" params="{ title: modaler.currentModalTitle }"></modaler>
    </body>
</html>

Registering a modal

To register a modal, you have to use the registerModal function:

modaler.registerModal(name, options)

name parameter

The name of the knockout component being added. -modal will be appended automatically at the end.

options parameter

The options to be used when creating the modal.

{
    title: string       // defines the title of the modal when displaying.
    isBower: boolean    // defines if the component comes from bower, a default bower path will be used.
    basePath: string    // the base path to be use to find the component. It has to be the root of the default files (see below).
    htmlOnly: boolean   // when creating a modal, it is possible that there would be no JavaScript linked to this modal, it will assume so and load the html file using the naming convention (see below).
}

Creating a modal component

The creation of a modal is based on the knockout component system.

JavaScript UI handler

By convention, the name of the file has to be [name]-modal-ui.js, [name] being the name of your new modal. This file has to return a Knockout component structure.

define(["text!./test-modal.html", "knockout"], // beware of the first parameter where you have to define the html file to be used.
    function(template, ko) {
        'use strict';

        var ViewModel = function(params, componentInfo) {
            var self = this;

            self.close = function() {
                params.close();
            };

            return self;
        };

        return {
            viewModel: {
                createViewModel: function(params, componentInfo) {
                    return new ViewModel(params, componentInfo);
                }
            },
            template: template
        };
    });

HTML presentation

When using a JavaScript UI handler, the name of this file has to be defined by you. However, if using the htmlOnly option, the component will be loading [name]-modal.html by convention.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <p>One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Using a modal

Now that you created a modal, you may want to display it and possibly get data from it.

Displaying a modal

To show a modal, you have to use the show() function.

modaler.show(name)

This function returns a jQuery promise and will resolve itself when the modal is closed.

Closing and returning data from a modal

Upon displaying a modal, it will present itself in fullscreen and blocking interface. The close button and any data to be transfered to the caller have to be handled by the callee.

Returing data

The JavaScript UI handler will receive a close function in its params parameter.

close(data);

The data parameter is an object and will be passed as-is to the caller.

Since show returns a promise, you have to use the then function to claim the returned data.

modaler.show('name').then(function(data) {
        console.log(data);
    });

Closing

To close a modal, you can:

  • call close() without any parameter from inside the JavaScript UI Handler
  • call modaler.hideCurrentModal() from anywhere which will cause the currently displayed modal to close whitout sending any data.

Remark: It is impossible to have two modals displayed at the same time, modaler will close the current modal when show() is called.

Using the modal binding handler

A binding handler comes with modaler to help you display modals efficiently.

<button type="button" data-bind="modal: 'name'"></button>

The binding handler will handle clicks and set the focus back on the button once it is closed. There are several parameters that can be used:

{
    name: 'name',           // name of the modal to be shown
    params: {},             // parameters to be passed to the modal.
    shown: function,        // callback when the modal is on screen.
    closed: function(data), // callback when the modal is closed
    failed: function(err),  // callback when the modal has failed. Note that this is called when there is an actual error, not when the user click cancel.
}
<button type="button" data-bind="modal: { name: 'name', closed: callbackClosed }"></button>