Giter VIP home page Giter VIP logo

ui-builder's Introduction

UIBuilder

A small frontend library for quick generation and management of DOM structure blocks.

Main concept

The idea is in reusing predefined interface parts schemes for building instances of this parts. All data generated is stored in the objects and can be quickly got by reference.

Also objects that represents single DOM nodes has few very useful methods implements jQuery syntax.

Example:

Lets create classic tasks list: input field and adding button. User can input text in the field and add task by clicking button.

The tasks list interface:

UI.register({
    name : 'Tasks list',
	
    scheme : {
        wrap : {
            list : '|Task', // Task - is the name of UI that will be used as regular item of list.
            toolbar : {
                titleInput : '@input [type = text]',
                addButton : '@button [type = button] (html = Add task)'
            }
        }
    },
    
    // Some parameters
    parameters : {
        width : 400,
        height: 600
    },
	
    // Set interface appearance
    styles : {
        wrap : {
            display: 'flex',
            flexDirection : 'column',
            margin: '40px auto',
            backgroundColor: '#fff',
            boxShadow : '0 0 5px rgba(0,0,0,0.4)',
            padding: '20px'
        },
        
        // And so on...
    },
	
    // Function that will be called on each instance creation
    onrender : function(inst, params)
    {
        // Apply parameters.
        inst.wrap.css({
            width : params.width + 'px',
            height : params.height + 'px'
        });
        
        // Add click event handler to the adding button
        inst.addButton.on('click', function(){
            var text = inst.titleInput.val().trim();
            if(text === '') return;
            var newItem = inst.list.addOne().load({title : text});
            
            // Show sliding animation
            newItem.wrap.css({height:0});
            newItem.wrap.slideDown();

            // And empty input box
            inst.titleInput.val('');
        });
    }
});

Then lets describe scheme of the single task record:

UI.register({
    name : 'Task',
	
    scheme : {
        wrap : {
            checkbox : {
                chk : '@input [type = checkbox]',
                box : '@div'
            },
            title : '@span',
            deleteButton : "(html = ✕)"
        }
    },
	
    // Additional rules
    rules : {
        checkbox : '@label'
    },
	
    // Again some styles...
    styles : {
        wrap : {
            display: 'flex',
            flexShrink: 0,
            margin: '5px',
            backgroundColor: '#f6f6f6'
        },
        
        // And so on...
    },
	
    // Lets set some manipulations with newly created instances.
    onrender : function(inst)
    {
        // Add handler for deleting task.
        inst.deleteButton.on('click', function(taskInst){
            
            // Show collapsing animation.
            taskInst.wrap.animate({
                height : 0,
                opacity : 0,
                marginTop : 0,
                marginBottom : 0
            }, 250, function(){taskInst.remove();});   
        });
    }
});

Then lets we have some container node in which we want to render our interface:

<div id="container"></div>

Now we can render our tasks list:

var TasksList = UI('Tasks list').renderTo('#container', {width : 600, height : 400});

Also this lib can a lot:

  • Gathering forms (and not only forms)
  • Animating functions
  • Extensions support
  • UI extending functionality
  • Data providers (basic generator, ajax, WebSocket)
  • Loading data to the elements or whole instance structures from given data or data providers.
  • Common UI solutions such as tabs, spinner, dropdowns, dragging.
  • Themes (with CSS regeneration on the fly)
  • Validation (will be implemented later)

More documentation will be ready soon. Enjoy :)

ui-builder's People

Contributors

dependabot[bot] avatar romario5 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

ui-builder's Issues

Implement validators.

There is necessary to be able create validators built in the UI or stand alone.
They must have next properties/methods:

  • check(data)
  • checkOne(data)
  • errorsSummary()
  • hasErrors
  • errors
  • rules

The constructor of the validator accepts an object in which keys are attributes and values are the rules.
Example:

var loginFormValidator = new Validator({
    login : '> 6, required',
    pass : 'required'
});

The usage of the validator:

var data = layout.loginForm.gatherData();
if( loginFormValidator.check(data) ) {
    // Do some staff...
}else{
    layout.showAlert(loginFormValidator.errorsSummary());
}

Create methods for the UI.

UI should has user defined methods that can be called on its instances.
For example if we have "Chat box" UI, then we want to do something like this:

var chatBox = UI('Chat box').renderTo('#chat-panel');
chatBox.sendMessage('Hello world!');

The syntax should be looks like this:

UI.register({
    name : 'Chat box',

    // Scheme, styles, events ...
    
    methods : {
        sendMessage : function(text){
            this.messagesList.addOne().load({message: text});
            this.messagesList.scrollTop( this.messagesList.scrollHeight() );
        }
    }
});

Methods must be defined in the instance prototype, so on first time UI rendered if it has at least one method - the new prototype for this instance will be created.

Add localization support.

It's necessary to add functionality for switching locale on the fly.

Desired syntax is similar to the themes:

loginForm.submitBtn.text(L10n('Submit'));
L10n.switchLocaleTo('RU');

Basic select dropdown.

Must implement "Input" interface.
Also must contain next functionality:

  • Possibility to set image for each option
  • Possibility to load options from remote
  • Multiple selection

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.