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

libj-core

v2.0.1

Published

``` npm i libj-core ```

Downloads

10

Readme

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