pinakajs

About PinakaJs

PinakaJs is a Javascript Library with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. PinakaJs attempts to take the pain out of development by easing common tasks used in the majority of App and Web projects, such as:

• Simple, fast templating engine
• Supports Almost all Libraries Like AngularJs, ReactJs, NodeJs and All other Extensive JavaScript Libraries
• Easily Integratable in PHP Frameworks Like WordPress, Laravel, ASP.Net, Codeigniter, PinakaPHP.
• Elegent Grid System.
• Infinite Scroll, Pagination, Nested Grid Binding.
• Full Support For Rest API's Like GET, POST, PUT, DELETE.
• Fast XHR, To Build Asynchronous Applications.
• Simple and accurate Validation for Email, Phone Number, Date, Time, Password etc.

PinakaJs is accessible, yet powerful, providing tools needed for large, robust applications. A superb combination of simplicity, elegance, and innovation give you tools you need to build any application with which you are tasked.

Installation and Usage

In browser:

 <script src="https://cdn.jsdelivr.net/npm/pinakajs@1.0.2/pinaka.js"></script>

Using npm:

npm install pinakajs 

Documentation

• Ajax
• UI

Ajax

• GET
• POST
• PUT
• DELETE

GET

• GET request for within Application request

function FunctionName() {
            // api_root is your trailing route 
            pnkHttp.Get(pnk.RootController + "api_root").AttachLoader(false, "divId", 'small').Do().then(function (response) {
                // Handle response                
            });

        }

• GET request for within Application request for getting components as HTML

function FunctionName() {
            // api_root is your trailing route 
            pnkHttp.Get(pnk.RootController + "api_root").As("html").AttachLoader(false, "divId", 'small').Do().then(function (response) {
                // Handle response      
                if (response !== null) {
                    $('#divID').html(response).show();
                    /* or show in modal */
                    $('#divModalBody').html(response);
                    $('#divModal').modal('show');
                }else {
                    // else code
                }        
            });

        }

• GET Request for third party api's or with CORS

pnkHttp.GetCORS("third party api",CallbackFunction);

POST

Note: AddRequiredParams('FormId') it is compulsory to send form data.

• Post Request with data Validation

function AddNew() {
        /* Validated is used to validate form contents like Email, number etc. */
        if(Validated("formID")) {
            pnkHttp.Post(pnk.RootController + 'api_root').AddRequiredParams("formID").AttachLoader(true, "formID", 'small').Do().then(function (response) {
                // handle response
            });
        }else{
            // else code
        }
    }

• Post Request without dat validation

function AddNew() {  
    pnkHttp.Post(pnk.RootController + 'api_root').AddRequiredParams("formID").AttachLoader(true, "formID", 'small').Do().then(function (response) {
        // handle response
    });
      
}

PUT

Note: AddRequiredParams('FormId') it is compulsory to send form data.

• Put Request with data Validation

function Modify() {
        /* Validated is used to validate form contents like Email, number etc. */
        if(Validated("formID")) {
            pnkHttp.Put(pnk.RootController + 'api_root').AddRequiredParams("formID").AttachLoader(true, "formID", 'small').Do().then(function (response) {
                // handle response
            });
        }else{
            // else code
        }
    }

• Put Request without data validation

function Modify() {  
    pnkHttp.Put(pnk.RootController + 'api_root').AddRequiredParams("formID").AttachLoader(true, "formID", 'small').Do().then(function (response) {
        // handle response
    });
      
}

Delete

function Delete(id) {
        if (confirm("Are You Sure?") == true) {
            pnkHttp.Delete(pnk.RootController + "api_root" + id).AttachLoader(true, "divId",'small').Do().then(function (response) {
                if (response.PinakaResponse.ServerStatus.value == "SUCCESS") {
                    // handle response
                    pnk.Framework.AlertModal("INFO", "Deleted"); // framework's modal  
                }
            });
        }
    }

Note: Adding additional Header in request for secure connection

• AddHeader() : Can be added in all XHR requests.

function Secure equest() {
    pnkHttp.Get(pnk.RootController + 'api_root').AddHeader('XAUTHTOKEN', 'your token')).AttachLoader(false, "formId", 'small').Do().then(function (response) {
        // handle response
    });
}

UI

• Form
• Alert Modals

Working with Forms

A form Component can be openend in two modes

• Entry
• Edit
• Form Validation on code pen : https://codepen.io/finelogicscs/pen/jxPgbZ?editors=1010

• Entry mode :

<div class="container">
  <div id="divEntryEdit" data-nw>
    <form class="form-horizontal" id="frmEntryEdit" data-pnk-componenttype="form">
        <div data-pnk-viewdatamembers="name,number,email,password">
            <div class="form-group">
                <label for="txtName" class="col-sm-4 control-label"> Name :</label>
                <div class="col-sm-6">    
                    <input class="form-control" name="txtName" id="txtName" placeholder="Enter Name" type="text" pnkvalidate="forceentry"
                           displayfieldname="Name" data-pnk-input-value="0"/>
                
                </div>
            </div>
            <div class="form-group ">
                <label for="txtNumber" class="col-sm-4 control-label"> Number :</label>
                <div class="col-sm-6">
                    <input class="form-control" name="txtNumber" id="txtNumber" value=""
                       placeholder="Enter Number" type="text" pnkvalidate="forcenumber"
                       displayfieldname="Number" data-pnk-input-value="1"/>
                </div>
            </div>
            <div class="form-group ">
                <label for="txtEmail" class="col-sm-4 control-label"> Email :</label>
                <div class="col-sm-6">
                   <input class="form-control" name="txtEmail" id="txtEmail" value=""
                       placeholder="Enter Email" type="text" pnkvalidate="forceemail"
                       displayfieldname="Email" data-pnk-input-value="2"/>
                </div>
            </div>
            <div class="form-group ">
                <label for="txtPassword" class="col-sm-4 control-label"> Password :</label>
                <div class="col-sm-6">                   
                    <input class="form-control" name="txtPassword" id="txtPassword" value=""
                           placeholder="Enter Password" type="password" pnkvalidate="forcepassword" pnk=""
                           displayfieldname="Password" />                   
                </div>
            </div>
            <div class="form-group">
                <label for="btnSubmit" class="col-sm-3 control-label"></label>
                <div class="col-sm-5">
                    <button type="button" class="btn btn-info" id="btnSubmit" name="btnSubmit" onclick="AddNew();" >Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>
</div>

###Setting things for diffrent modes

$(document).ready(function () {

        if (window.location.href.split('/').pop() === 'entry') {
            formUser = new pnk.EditEntryView("entry");
            formUser.ContainerId = "divEntryEdit";
            formUser.Bind("");
            $('#btnSubmit').attr('onclick','AddNew()');
        }else if(window.location.href.split('/').pop() === 'edit') {
                pnkHttp.Get(pnk.RootController + "api_root").AttachLoader(false, "divEntryEdit", 'small').Do().then(function (response) {
                    formUser = new pnk.EditEntryView("edit");
                    formUser.ContainerId = "divEntryEdit";
                    formUser.Bind(response.data_set);
                    $('#btnSubmit').attr('onclick','Modify()');
                });
        }
    });

• Addnew() method for sending data to server

function AddNew() {
        /* Validated is used to validate form contents like Email, number etc. */
        if(Validated("frmEntryEdit")) {
            alert("Successfully Validated");
        }else{
            // else code
        }
    }

• Modify() method for modifiying data of user

function Modify() {
        /* Validated is used to validate form contents like Email, number etc. */
        if(Validated("frmEntryEdit")) {
            pnkHttp.Put(pnk.RootController + 'modifyuser').AddRequiredParams("frmEntryEdit").AttachLoader(true, "frmEntryEdit", 'small').Do().then(function (response) {
                // handle response
                pnk.Framework.AlertModal("INFO", "Successfully Modified details"); // framework's modal
            });
        }else{
            // else code
        }
    }

PinakaJs Sponsors

Finelogics Consulting is sole owner and developer of PinakaJs. Currently we are self Sponsored And Open For Collaboration from Global market.

Contributing

Thank you for considering contributing to the PinakaJs framework! The contribution guide can be found in the PinakaJs documentation.

Security Vulnerabilities

If you discover a security vulnerability within PinakaJs, please send an e-mail to Taylor Otwell at [e-mail]. All security vulnerabilities will be promptly addressed.

License

The PinakaJs framework is open-sourced software licensed under the MIT license.