Categories
AngularJS JavaScript

Ng-notify – a simple and lightweight library for AngularJs

Ng-notify is a simple and lightweight notification library for AngularJs apps. This library doesn’t required any dependencies except angular.js. Animation is achieved with pure JS & lightweight module (~5.5 kBs. js and css combine). You can use HTML in your message. Set a global configuration for each and every notification in your app.

Installation :

Install using bower

bower install ng-notify --save

Install using npm

npm install ng-notify --save

As of v0.6.0, ng-notify is now available via the jsDelivr CDN if you’d prefer to go down that route.

//cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.js
//cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.css

Example :

//cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.js
//cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.css

Aways you can direct download the source file from this repository – files are located in dist folder, be sure to use minified version of both js and css.

Usage :

After adding ng-notify.min.js and ng-notify.min.css inject ng-notify provider into your module.

var app = angular.module('demo', ['ngNotify']);

Now you can show notification from anywhere in your app, just use set method.

ngNotify.set('Your notification message goes here!');

If you want to specify the type of notification (success, warning, info etc.) then specify it as second parameter.

ngNotify.set('Your error message goes here!', 'error');

Default Configuration :

ngNotify.config({
    theme: 'pure',
    position: 'bottom',
    duration: 3000,
    type: 'info',
    sticky: false,
    button: true,
    html: false
});

You can override the default configuration by using config method, you can also set the individual configuration for each and every notification.

ngNotify.set('Your first message.', {
    position: 'top',
    sticky: true
});

ngNotify.set('Your second message.', {
    type: 'error',
    duration: 2000
});

Sticky Notification :

This allows you to set a notification which is does not fade away, to do simply set sticky attribute to true,

ngNotify.set('This is sticky.', {
    sticky: true
});

HTML Notification :

This allows you to show html content in notification, to do this set the html attribute to true.

ngNotify.set('This has HTML content!', {
    html: true
});

Callbacks :

After a notification is completed then you can add a callback for further logic. This callback only set through set method and is passed an optional third parameter.

ngNotify.set('This message has a callback.', {}, function() {
   // your logic here
});

For more info please visit following url :

ng-notify: https://github.com/matowens/ng-notify

github: https://github.com/matowens/ng-notify

Categories
AngularJS JavaScript

jQuery File Upload Plugin

Wow…!! File Uploader with well documentation and many unexpected features with multiple file selection, drag and drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

Server Side Platform Support

  • PHP
  • Python
  • Ruby on Rails
  • Java
  • Node.js and Go

Available Features

  • Multiple file upload:
    Allows to select multiple files at once and upload them simultaneously.
  • Drag & Drop support:
    Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window.
  • Upload progress bar:
    Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
  • Cancelable uploads:
    Individual file uploads can be canceled to stop the upload progress.
  • Resumable uploads:
    Aborted uploads can be resumed with browsers supporting the Blob API.
  • Chunked uploads:
    Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
  • Client-side image resizing:
    Images can be automatically resized on client-side with browsers supporting the required JS APIs.
  • Preview images, audio and video:
    A preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs.
  • No browser plugins (e.g. Adobe Flash) required:
    The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
  • Graceful fallback for legacy browsers:
    Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
  • HTML file upload form fallback:
    Allows progressive enhancement by using a standard HTML file upload form as widget element.
  • Cross-site file uploads:
    Supports uploading files to a different domain with cross-site XMLHttpRequests or iframe redirects.
  • Multiple plugin instances:
    Allows to use multiple plugin instances on the same webpage.
  • Customizable and extensible:
    Provides an API to set individual options and define callback methods for various upload events.
  • Multipart and file contents stream uploads:
    Files can be uploaded as standard “multipart/form-data” or file contents stream (HTTP PUT file upload).
  • Compatible with any server-side application platform:
    Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

Desktop Browser Support

  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.0+
  • Opera 11.0+
  • Microsoft Internet Explorer 6.0+

MObile Browser Support

  • Apple Safari Mobile on iOS 6.0+
  • Google Chrome on Android 4.0+
  • Opera Mobile 12.0+

File Upload DemoGihubURL

Categories
AngularJS General JavaScript

RowReorder extension for DataTables

DataTables has an extensive API’s which can be used to access the data contained in a table and manipulate the table after the table initialisation has completed. The DataTables API is designed to reflect the structure of the data in the table and how you will typically interact with the table through the API. It can also be extended by the extensions and plug-ins providing additional features and operations.

The API can be accessed through the following methods:

  • $( selector ).DataTable();
  • $( selector ).dataTable().api();
  • new $.fn.dataTable.Api( selector );

The result from each, is an instance of the DataTables API object which has the tables found by the selector in its context. It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQuery object.

For general information of DataTables listed API which operates Data Tables tables are listed below.

  • DataTable Tables
  • RowRecorder
  • Scroller
  • DataTable Rows
  • DataTable Columns
  • Col Recorder
  • Fixed Columns
  • Fixed Header
  • Editor
  • Row Group 

In this post shown the example of RowReorder extension for DataTables being used with Editor. RowReorder provides the ability for end users to quickly and easily reorder items in the table by click and drag. The integration with Editor that it provides (rowReorder.editor) makes use of Editor’s multi-row editing abilities to update all rows to take account of the row ordered data.

This can make really for easy to use interface for end users, where they have data that they can place into a custom order.

Initialisation

RowReorder can be initialised on a DataTable by using the rowReorder option in the DataTables options object. This is simply a boolean true to indicate that rows should be reorderable, although it is also possible to use an object for fine grained control (see the reference documentation for full details):

$('#myTable').DataTable( {rowReorder: true} );

Features

RowReorders presents the following features:

  • Row reordering for DataTables with click and touch support
  • Full integration with Editor
  • Customisable drag start handle
  • Drag snapping
  • Full integration with Bootstrap, Foundation and the other styling libraries supported by DataTables

Further documentation is available at https://datatables.net/extensions/rowreorder/

Categories
Angular AngularJS General JavaScript

Flowjs – Angular HTML5 Uploader

Flow.js is javascript library which is provides multiple simultaneous, stable and resumable uploads via the HTML5 File API. This library allows automatic resume uploading file when internet connection is lost
either locally or to the server. Additionally its provide a facility to pause, resume and recover uploads without losing any data because flow.js upload file in chunks so only currently chuck is aborted not entire upload.

Flow.js does not depends on third party library, its use HTML 5 API. Flow.js have a ability to break / chunks file in smaller pieces, that’s why currently flow.js support is limited to Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+.

  1. Flow.js is currently available for angular.js (ng-flow)
  2. JQuery and node.js backend (link). 

How to install?

Download latest build from

http:// https://github.com/flowjs/flow.js/releases

or bower :

http://bower install flow.js#~2

or use git clone http://git clone https://github.com/flowjs/flow.js

How to use Flow.js?

var flow = new Flow({
  target:'/api/photo/redeem-upload-token', 
  query:{upload_token:'my_token'}
});
// Flow.js isn't supported, fall back on a different method
if(!flow.support) location.href = '/some-old-crappy-uploader';

User can either selected and drag-dropped, just assign drop target and a DOM item to be clicked for browsing:

flow.assignBrowse(document.getElementById('browseButton'));
flow.assignDrop(document.getElementById('dropTarget'));

After this, interaction with Flow.js is done by listening to events:

flow.on('fileAdded', function(file, event){
    console.log(file, event);
});
flow.on('fileSuccess', function(file,message){
    console.log(file,message);
});
flow.on('fileError', function(file, message){
    console.log(file, message);
});

Read full documentation on below link:

Flow.js : https://flowjs.github.io/ng-flow/

Categories
Angular AngularJS ES6 General JavaScript TypeScript

Dragula – A simple drag and drop library

In this article, we will take quick look at the process of creating drag and drop in AngularJs and Angular application using Dragula. For AngularJs and Angular there are two different Dragula library are available, i added link of all those libraries at the end of this article. Dragula gives you simple way to add advance drag and drop in your application.

Dragula includes a services, directives, events and options for easily
implementation in you application. You can easily drag and drop from one container to another also you can sort a list of order and many more are available in Dragula.

Installation : 

AngularJs : 

You can get it on npm.

npm install angularjs-dragula --save

Or bower, too.

bower install angularjs-dragula --save


Angular: 

npm install ng2-dragula# 
or
yarn add ng2-dragula

For more info please visit following links.

AngularJs: 

https://github.com/bevacqua/angularjs-dragulah

https://bevacqua.github.io/angularjs-dragula/

Angular: 

https://github.com/valor-software/ng2-dragula

https://valor-software.com/ng2-dragula/

Categories
Angular AngularJS ES6 General JavaScript TypeScript

CKEditor – Rich Text Editor

CKEditor permits you to directly add the JavaScript based codes within online applications or web pages, it is coming under commercial and open source licenses. If you want to give a more flexible area to user for write any content then CKEditor is better way over adding textarea. In CKEditor three types of preset are given full, minimal and default, these preset are responsible for defining the appearance of your CKEditor. Styles, tags, source etc. are in toolbar to use.

Why CKEditor ?

  • Easy Images : 
  • Insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. All this with virtually zero server setup.
  • CKFinder : Enrich CKEditor with image and file uploads.
  • Spell Checker : Spell checking abilities with additional languages.
  • Full control over content: HTML filtering, view source mode, Long-term support (LTS) until 2023, and many more…

Reference:  https://ckeditor.com

Categories
Angular ES6 TypeScript

NG-ZORRO – UI Library for Angular

Ng-Zorro is a UI library for angular which contains high quality components and demos for building rich and interactive user interfaces. Currently most stable version of ng-zorro is 1.8.0.  It provides good development experience to developers, it contains number of component to use and have a good documentations.

Features :

  • An enterprise-class UI design language for web applications.
  • A set of high-quality Angular components out of the box.
  • Written in TypeScript with complete defined types

Installation :

ng-zorro recommend using @angular/cli to install.

You can also install ng-zorro-antd using npm or yarn.

For more information visit at –

https://ng.ant.design/docs/introduce/en

github : https://github.com/NG-ZORRO/ng-zorro-antd

Categories
JavaScript

JQuery Fancytree – Tree View

Fancytree is tree view/tree grid package to generate the nested level of nodes is like parent child relationship. It’s Flexible, Extensible modular design, Rich object oriented API, Browser Support is too good, Handling big data structure etc…! The fancytree support for keyboard, inline editing, filtering, checkboxes, drag N drop, and lazy loading etc. Here is the list of main features.

Main features

  • Lazy loading and efficient and performant handling of large data sets
  • Keyboard navigation
  • WAI-ARIA compliant
  • Table view support (aka tree grid)
  • (Hierarchical) selection and checkboxes
  • Drag and drop (html5 or jQuery UI based)
  • Inline editing
  • Searching and filtering
  • Persistence of expansion, selection, and active state
  • Themable (comes with WinXP, Win7, Win8, OS X Lion, and Glyph samples)
  • The tree behaves like a single form control, i.e. it is ‘tabbable’
  • Rich object oriented API
  • Extensible modular design
  • and many more…

It comes with a lot of different examples, Please follow below links.

Github – fancytree

All demos – Fancytree examples

Bootstrap demo – Bootstrap Fancytree demo

Documentation – Fancytree doc

Main Concept –Fancytree-concept