libj-core

Installation

npm i libj-core

NPM

import { <some modules> } 'libj-core';

Browser

<script src="path to libj-core.min.js or libj-core.js"></script>

//Then all exports are under libjcore global variable

<script>
    libjcore.guid or libjcore.browserFileApiSupport or ....
</script>

Test

Showcase

• Run this in a separate command line to start node server

node server.js

• Run one of the following to re-create bundles

npm run dev
npm run dev:watch

• Navigate to http://localhost:3000

Build

npm run build
npm run build:watch

Modules:

GUID (UUID V4)

Helps you create unique ids like C# Guid type.

Browser support: IE9+

Usage

import { guid } from 'libj-core'

var guidWithoutHyphen = guid.create();
//aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee


var guidWithHyphen = guid.create(true);
//aaaaaaaabbbbccccddddeeeeeeeeeeee


var emptyGuid = guid.empty();
//00000000-0000-0000-0000-000000000000

var emptyGuidNoHyphen = guid.emptyNoHyphen();
//00000000000000000000000000000000


var id = guid.newId();
//e_aaaaaaaabbbbccccddddeeeeeeeeeeee

BrowserFileApiSupport

Checks browser support for File api

Browser support: IE9+

Usage

import { browserFileApiSupport } from 'libj-core'
console.log(`file api: ${browserFileApiSupport.supportsFileApi()}`)
console.log(`file input: ${browserFileApiSupport.supportsFileInput()}`);

In-browser database

Browser support: IE9+

Usage

import { db } from 'libj-core'
db.set('key', 'value')
db.get('key') // returns 'value'
.
.
.

Countries and flagsPath

Copy flags folder somewhere on your server

Adds flagsPath and countries variables (see usage) to window.libj namespace.

Browser support: IE9+

Usage

import { countryHelper } from 'libj-core'

countryHelper.setOptions({
    flagsPath: '/flags'         //or some other directory which contains flags svgs
})

countryHelper.getFlagsPath()
// returns '/flags'

countryHelper.getCountries()
// returns an object with keys like "en", "fa", "ar", "fr", ... and values like array of this:
{
    "code":"AD",
    "name":"Andorra"
}

Search objects

This is used to search in objects' properties

Browser support: IE9+

Usage

import { searchObjects } from 'libj-core'
var list = [
    { name: 'ali', family: 'farahi' },
    { name: 'monir', family: 'marahi' },
    { name: 'hasan', family: 'farahmanesh' },
]

it('all properties', function () {
    var res = searchObjects('arahi', list)
    assert.deepEqual(res, [
        { name: 'ali', family: 'farahi' },
        { name: 'monir', family: 'marahi' },
    ])
})

it('name with no results : arahi', function () {
    var res = searchObjects('arahi', list, ['name'])
    assert.deepEqual(res, [])
})

it('family: arahi', function () {
    var res = searchObjects('arahi', list, ['family'])
    assert.deepEqual(res, [
        { name: 'ali', family: 'farahi' },
        { name: 'monir', family: 'marahi' },
    ])
})

it('family : farah', function () {
    var res = searchObjects('farah', list, ['family'])
    assert.deepEqual(res, [
        { name: 'ali', family: 'farahi' },
        { name: 'hasan', family: 'farahmanesh' },
    ])
})

Sort objects

This is used to sort objects

Browser support: IE9+

Usage

import { sortObjects } from 'libj-core'
var list = [
    { id: 1, name: 'reza', parentId: 0 },
    { id: 2, name: 'ali', parentId: 1 },
    { id: 3, name: 'hasan', parentId: 1 },
    { id: 4, name: 'mehdi', parentId: 1 },
    { id: 5, name: 'ahmad', parentId: 1 },
    { id: 6, name: 'saeid', parentId: 1 },
    { id: 7, name: 'masoud', parentId: 1 },
    { id: 10, name: 'mahbod', parentId: 3 },
    { id: 11, name: 'bardiya', parentId: 4 },
    { id: 12, name: 'mahdiyar', parentId: 5 },
    { id: 13, name: 'alireza', parentId: 5 },
    { id: 8, name: 'niyayesh', parentId: 2 },
    { id: 9, name: 'amir hosein', parentId: 2 },
];
var k = sortObjects(list, [
    {
        column: 'parentId',
        ascending: true
    },
    {
        column: 'id',
        ascending: false
    }
])

assert.deepEqual(
    [
        { id: 1, name: 'reza', parentId: 0 },
        { id: 7, name: 'masoud', parentId: 1 },
        { id: 6, name: 'saeid', parentId: 1 },
        { id: 5, name: 'ahmad', parentId: 1 },
        { id: 4, name: 'mehdi', parentId: 1 },
        { id: 3, name: 'hasan', parentId: 1 },
        { id: 2, name: 'ali', parentId: 1 },
        { id: 9, name: 'amir hosein', parentId: 2 },
        { id: 8, name: 'niyayesh', parentId: 2 },
        { id: 10, name: 'mahbod', parentId: 3 },
        { id: 11, name: 'bardiya', parentId: 4 },
        { id: 13, name: 'alireza', parentId: 5 },
        { id: 12, name: 'mahdiyar', parentId: 5 }
    ], k)

Url parser

Contains logic for parsing and manipulating urls

Browser support: IE9+

Usage

import { urlParser } from 'libj-core'
var o = urlParser.parse('/api/authentication/login?user_name=admin&password=pass 1#anchor')

/*
returns the following object
{
    protocol: 'http:' or 'https:'   // based on the current url
    host: 'localhost:1234'          // based on the current url
    hostname: 'localhost'           // based on the current url
    port: '1234'                    // based on the current url
    pathname: '/api/authentication/login'
    search: '?user_name=admin&password=pass 1'
    query: {
        'user_name': 'admin',
        'password': 'pass 1'
    },
    hash: '#anchor'
}
*/

var urlAbsolute = o.toAbsolute()

/*
returns 'http://localhost:1234/api/authentication/login?user_name=admin&password=pass%201#anchor'
*/

var urlRelative = o.toRelative()

/*
returns '/api/authentication/login?user_name=admin&password=pass%201#anchor'
*/

var query = urlParser.parseQueryString('user_name=admin&password=pass 1');
/*
returns 
{
    "user_name":"admin",
    "password":"pass 1"
}
*/

var search = urlParser.stringifyQueryString(query)

/*
returns 'user_name=admin&password=pass%201'
*/

Mime helper

Copy file-icon-set folder somewhere on your server

• Checking mime types and showing related file icons.
• Giving associated file icon image file for a file extension or media type

Browser support: IE9+

Usage

import { mimeHelper } from 'libj-core'

//We must set options one time
var o = {
    fileIconPath: '/file-icon-set'
};
mimeHelper.setOptions(o)

it('set options', function() {
    
    assert.deepEqual(o, mimeHelper.options);

})

it('get extension from media type', function() {

    var k = mimeHelper.getExtension('image/png');
    assert.equal('.png', k)

})

it('get media type from extension', function() {

    var k = mimeHelper.getMediaType('png')
    assert.equal('image/png', k)

    k = mimeHelper.getMediaType('.png')
    assert.equal('image/png', k)

})

it('get icon path for extension', function() {
    var k = mimeHelper.getIconPathForExtension('.png', 24)
    assert.equal(`${o.fileIconPath}/png-icon-24x24.png`, k)
})

it('get icon path for url', function() {
    var k = mimeHelper.getIconPathForUrl('/some-folder/some-file.png', 24)
    assert.deepEqual(`${o.fileIconPath}/png-icon-24x24.png`, k)
})

Opacity css

Creates a cross-browser style string, for a given opacity value a float number between 0 and 1

Browser support: IE9+

Usage

import { getOpacityCss } from "libj-core";

var el = document.getElementById('divId');
el.style.cssText += getOpacityCss('0.2');

Formdata extensions

Using this module you can put arbitrary objects (with 1 level nesting only) to a FormData object for (mainly) AJAX

Browser support: Edge+

Usage

import { formDataExtensions } from "libj-core";
var fd = new FormData();
formDataExtensions.put(fd, {
    arg1: 'value1',
    arg2: [
        'v1', 'v2'
    ]
})
formDataExtensions.print(fd)

Query media

This is used to help checking and getting callbacks for media query changes in browser just like css.

Browser support: IE10+

Usage

import { queryMedia } from 'libj-core'

queryMedia.run('(max-width: 800px)', true, isMatch => {
    console.log(`max-width ${(isMatch ? 'is' : 'is NOT')} 800px`)
})

queryMedia.runSync('(max-width: 800px)')
// return true or false

Window scrollbar

This is used to remove window's scrollbar temporarily and restore it again

Browser support: IE9+

Usage

import { windowScrollbar } from 'libj-core'

windowScrollbar.remove()
/* removes window's scrollbar */

windowScrollbar.restore()
/* restores window's scrollbar to its previous position */

Tiny scrollbar (css)

Add this file: tiny-scrollbar.css
Adding this file to your browser, will change the look and feel of the scrollbar.

Browser support: Chrome

Infinite scroll

Do you want to implement infinite scroll effect when user scrolls an element or scrolls the window?
This is it!

Browser support: IE9+

Usage

import { InfiniteScroll } from 'libj-core'

function gettingPageData() {
    console.log(`loading page ${scroller.getPage()}`)
}
function pageDataReceived() {
    console.log(`page ${scroller.getPage() - 1} data received`);
}
function onNextPage(page, callback) {
    // show data ...
    var hasMore = true;     //or false for the last page
    callback(hasMore)
}

/* if you pass null or undefined for the first argument, then the whole window will be watched for scroll */
/* if you pass $('#someDiv') that element scroll will be watched */
var scroller = new InfiniteScroll(null, onNextPage, gettingPageData, pageDataReceived);
scroller.start();

Culture manager

Supports these cultures: en (English), fa (Farsi), ar (Arabic), fr (French), de (German), es (Spanish), ru (Russian), tr (Turkish), ps (Pashto), ur (Urdu)

Browser support: IE9+

Usage

import { validCultures, cultureManager } from 'libj-core'

First set cultures (must be a subset of supported cultures above, or an exception will be thrown)

var cultures = ['en', 'fr', 'es']

cultureManager.setCultures(cultures)

Then set active culture of current page (default is en)

cultureManager.setActiveCulture('fr')

var activeCulture = cultureManager.getActiveCulture()
/*
returns an instance of Culture
{
    code: 'fr',
    name: 'Francias',
    direction: 'ltr',
    url: '/fr/<current_path>?<current_query_string>#<current_hash>' 
}
*/

Then define a fallback culture (default is en)

cultureManager.setFallbackCulture('es')

var fallbackCulture = cultureManager.getFallbackCulture()
/*
returns an instance of Culture
{
    code: 'es',
    name: 'Espanol',
    direction: 'ltr',
    url: '/es/<current_path>?<current_query_string>#<current_hash>' 
}
*/

Other methods

var isSupported = cultureManager.isCultureSupported('af')
/* will throw and exception */

isSupported = cultureManager.isCultureSupported('ru')
/* returns true */

var all = cultureManager.getAllCultures();
/*
returns an array of Culture objects
[
    { 
        code: 'en', 
        name: 'English', 
        direction: 'ltr', 
        url: '/en/<current_path>?<current_query_string>#<current_hash>' 
    },
    {
        code: 'fa',
        name: 'فارسی',
        direction: 'rtl',
        url: '/fa/<current_path>?<current_query_string>#<current_hash>' 
    },
    .
    .
    .
]
*/

Translator

Browser support: IE9+

Usage

import { Translator } from 'libj-core';

var i18nMessage = {
    en: {
        hello: 'Hello'
    },
    fa: {
        hello: 'سلام'
    }
}
var translator = new Translator(i18nMessage);
translator.t('hello', 'fa')
// prints: سلام

Thumber

Browser support: IE11+

Usage

import { thumber } from 'libj-core';

thumber.setOptions('png, jpg, jpeg, bmp', 'w', 'h', 'q');
thumber.relative('/someImagePath', 90, 120, null)
// returns: '/someImagePath?q=90&w=120'
thumber.absolute('/someImagePath', 90, null, 100)
// returns: '/someImagePath?q=90&h=100'

XsrfManager

Browser support: IE9+

Usage

import { xsrfManager } from 'libj-core';

xsrfManager.setContainerSelector('#containerId')
xsrfManager.getContainerSelector()
// returns '#containerId'

xsrfManager.setHeaderName('X-XSRF-TOKEN')
xsrfManager.getHeaderName()
// returns 'X-XSRF-TOKEN'

xsrfManager.getTagHtml()
// returns outer html of the hidden input which has the token

xsrfManager.getToken()
// returns the token itself

ServerSideTagHelper

Browser support: IE9+

Usage

import { serverSideTagHelper } from 'libj-core';

serverSideTagHelper.init();
// reads values from page's html

serverSideTagHelper.getValue('somekey')

serverSideTagHelper.getValues()
// returns an object with all server-side values

serverSideTagHelper.getResults()
// returns an array of 
// {
//     name, success, errors, messages, returnValue, duration
// }

Iran sans font (css)

Import the iran-sans file on top of your application entry javascript file. Then these font family names will be available:
IRANSansUltraLight
IRANSansLight
IRANSansMedium
IRANSansBold
IRANSans