jsuites / jsuites Goto Github PK

jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms.

Home Page: https://jsuites.net

License: MIT License

JavaScript 78.18% CSS 21.71% HTML 0.11%

javascript javascript-library javascript-tools javascript-plugin webcomponents plugins

jsuites's Introduction

jSuites v5 - Webcomponents and JavaScript plugins.

About

jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive javascript vanilla plugins to help you bring the best user experience to your projects, independent of the platform.

The first version includes several common javascript tools in various frontend applications. jSuites is fully and easily integrated with any framework and tools. The first collection brings the following plugins:

Nice clean and responsive javascript calendar, date and time picker. This is integrated with jExcel and bring flexibility and responsiveness to your apps and web-based systems;
Our multi-purpose dropdown aims to give the user the best experience picking one or more options from a list. With a simple directive, you can render that in different modes, such as select box, search bar, mobile picker or a simple list.
The form tracker will give the chance to track changes from basic to highly dynamic forms in order to remember the user to save their form changes before leaving the page. This is basically the "Are you sure"? javascript plugin.
A simple color picker
A very straight forward responsive image thumb view
A great responsive data timeline
A simple modal, input mask javascript, mini HTMLeditor and some mobile common web components

Highlights

jSuites brings the developer many advantages, such as:

Make rich and user-friendly web interfaces and applications
You can easily handle complicated data inputs in a way users are used to
Improve your clients software experience
Create rich CRUDS and beautiful UI
Lean, fast and simple to use
One code, multiple platform

Basic demo

Create a multiple and autocomplete responsive dropdown.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id="dropdown1"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown1'), {
    data:[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
        ],
    autocomplete:true,
    multiple:true,
    width:'280px',
});
</script>
</html>

The same code can render in different ways, by directive type: default, picker or searchbar

Examples

JavaScript Image Cropper
The jSuites.crop is a lightweight JavaScript plugin that allow users load, crop and apply filters to images.
JavaScript Dropdown
Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.
Javascript Calendar
A lightweight javascript calendar, date and datetime picker full responsive and easy integration.
Javascript tags
JavaScript tags and keywords managment plugin
Javascript tabs
JavaScript tabs plugin
Javascript mask
A simple javascript mask plugin
Javascript color picker plugin
Javascript color picker plugin
Javascript contextmenu plugin
Vanilla javascript contextmenu plugin
Tracking the form changes
Track changes in a online form, apply validations and manage ajax requests.
Javascript modal plugin
Simple vanilla javascript modal plugin
JavaSript general toolbar
Micro vanilla javascript toolbar plugin
Javascript mini HTML editor plugin with filter
Simple vanilla javascript image slider plugin

Official website

jSuites Official

Community

GitHub

Copyright and license

jSuites is released under the [MIT license].

Contact

[email protected]

Other tools

LemonadeJS: Reactive Library and Two-way Data Binding
Jspreadsheet: Data Grid with Spreadsheet Controls

jsuites's People

Contributors

Stargazers

Watchers

jsuites's Issues

submenu in contextmenu

would like to have a submenu in the context menu so you can group something under one item.

is it possible, how can i accomplish that?

Multiple dropdown always show selected items

I am using remoteSearch in the dropdown, as there are many results I would like the others selected at the bottom to always be shown

Masked input has no paste ability

After:

document.addEventListener('keydown', function(e) {
    if (jSuites.mask) {
        jSuites.mask.apply(e);
    }
});

Add something like:

document.addEventListener('paste', function(e) {
    if (jSuites.mask) {
        jSuites.mask.applyClipboard(e);
    }
});

And add a function like:

obj.applyClipboard = function(e) {
	
	if (e.target && ! e.target.getAttribute('readonly')) {
		var mask = e.target.getAttribute('data-mask');
		if (mask) {		  
			// Prevent default
			e.preventDefault();
			
			var fromClipbord = (e.clipboardData || window.clipboardData).getData('text').split('');
			// Loop for apply
			for (var iii = 0; iii < fromClipbord.length; iii++) {
				
				index = 0;
				values = [];
				// Create mask token
				obj.prepare(mask);
				// Current value
				var currentValue = '';
				// Process selection
				if (e.target.tagName == 'DIV') {
					if (e.target.innerText) {
						var s = window.getSelection();
						if (s && s.anchorOffset != s.focusOffset) {
							var offset = s.anchorOffset > s.focusOffset ? s.focusOffset : s.anchorOffset;
							var currentValue = e.target.innerText.substring(0, offset);
							} else {
							var currentValue = e.target.innerText;
						}
					}
					} else {
					if (e.target.selectionStart < e.target.selectionEnd) {
						var currentValue = e.target.value.substring(0, e.target.selectionStart); 
						} else {
						var currentValue = e.target.value;
					}
				}
				
				if (currentValue) {
					// Checking current value
					for (var i = 0; i < currentValue.length; i++) {
						if (currentValue[i] != null) {
							obj.process(currentValue[i]);
						}
					}
				}
				
				// Process input
				var ret = obj.process( fromClipbord[iii] );
				
				// New value 
				var value = values.join('');
				
				// Update value to the element
				if (e.target.tagName == 'DIV') {
					if (value != e.target.innerText) {
						e.target.innerText = value;
						// Set focus
						jSuites.focus(e.target);
					}
					} else {
					e.target.value = value;
				}
				
				// Completed attribute
				if (pieces.length == values.length && pieces[pieces.length-1].length == values[values.length-1].length) {
					e.target.setAttribute('data-completed', 'true');
					} else {
					e.target.setAttribute('data-completed', 'false');
				}
			}
		}
	}
}

Number mask for negative values

I was able to use number mask for positive values. But for negative values, it removes the negative sign. The mask works perfectly. Is there a way to retain the negative sign? I am using the mask in Jexcel CE (Jexcel V3).

for every element with attribute data-href in my page even it is not related to Jexcel, actionUpControl invoke jSuites.pages(link).

obj.actionUpControl = function(e) {
        var element = null;
        if (element = jSuites.getLinkElement(e.target)) {
            var link = element.getAttribute('data-href'); //this line is invoking for all of my element with data-href
            if (link == '#back') {
                window.history.back();
            } else if (link == '#panel') {
                jSuites.panel();
            } else {
                jSuites.pages(link);
            }
        }

    }

The function actionUpControl invoke jSuites.pages(link), for every element with attribute data-href in my page even it is not related to Jexcel.

I think it should only get invoked for specific elements which are using Jsuites or Jexcel
kindly look into this issue

Select & Edit

Hi,
i love your jsuites.
i have a question about drop-box.
Is there any way to use drop-box(select) & write together?
I know you support New Options.. but i want little bit different.
i want to select dropbox and write text about cells.
so if you support this function, could you please let me know about it?
Thank you.

Jsuites input mask plugin not working on firefox browser

Jsuites input mask plugin not working on firefox browser can you fix the issue.
If you can it would be a great idea.

hh24 not working

Hello, please check hh24 issue, for ex; data-mask='yyyy-mm-dd hh24:mi'

code usus mixed end of line sequences

I get the following message when trying to make an edit for a small PR:

This results in a huge diff, which makes it impossible to review PR's.

How to set hyperlink cell

Using Jexcel Suite to how to set hyperlink cell data

New feature request for having only month and year picker

Hi Paul,

Can you please add month and year picker as a feature to the calendar plugin.

Thank you

upload/color to be responsive.

No documentation?

I see the examples but no clear API for the web components. Am I missing where the API/documentation is?

Edit Existing Calendar Issue breaks year

using the following for a column:
{type: 'calendar', title: 'BLD Date', width: 170, options: {format:'MM/DD/YYYY HH24:MI', time:true, today:1,resetButton:true,placeholder:'DD/MM/YYYY',}

If the field was blank, pulling up the calendar works fine. If a previous value is in the cell, and the calendar is brought up, it goes to year 0002

Please add highlighting the current month selection option to the month and year picker as a new feature.

Please add highlighting selected month as an option to the month and year picker as a new feature.

Toolbar Suggestions

Here are some suggestions for the toolbar for future reference

Allow state. For example, assume there is a cell is set to "bold". And assume that you click away on another cell, and then you click back on the original cell again, then the "bold" button would appear pressed when clicking back on the original cell
Allow custom icons in the toolbar (allow users to use their own icons).
Allow text instead of an icon for toolbar buttons.

Dropdown

Create from a HTML select element.

How to add urls in values of dropdown?

Hi,

How to add urls in values of dropdown? I could not find any docs on how to customize each component, what methods are available, etc.

autocomplete:true for groups and titles

Is it possible to use autocomplete also for groups and titles.
I think it worked in older jsuites version.

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<div id="dropdown2"></div>
<script>
jSuites.dropdown(document.getElementById('dropdown2'), {
    data:[
        { group:'Breads', id:'1', name:'Wholemeal', title: 'Aaa' },
        { group:'Breakfast Cereals', id:'2', name:'Wholegrain', title: 'Bbb' },
        { group:'Grains', id:'3', name:'White', title: 'Ccc' }
        ],
    autocomplete: true,
    width:'280px',
});
</script>
</html>

Uncaught DOMException on jSuites.loading.hide

Hi !
in jSpreadsheet, with the loadingSpin activated, I see an error in the javascript console when jSuites try to hide the loadingSpin :
Uncaught DOMException : The node to be removed is not a child of this node
Apparently, the code passes twice in the hide() function, so first time document.body.removeChild(loading); works, but second time (loading element still exists but is no longer a child of body element) it triggers the error.
A simple workaround is to modify the test in the hide() function : I replaced if (loading) by if (loading && loading.parentElement), maybe it could be integrated.
Bests,

rgba called with wrong number of arguments

I'm including jExcel in a Svelte app and getting an error from Sass about rgba being called with the wrong number of arguments. It looks like the problem is at line 2889 of dist/jsuites.css, it should either use rgb() or add the 4th argument to the rgba() call. Also, line 2888 appears to have a typo, 'backgroun-color' instead of 'background-color'.

getData([]) unable to work for me.

When I'm trying to feel static data in jsuites sheel. And feel data manually the in sheet then how to get cell value and cell id. Please help me to solve this.

Unable to disable jSuite Drop Down

I want to disable drop-down list control after user selection but it's not possible.
I tried several ways but can't figure it out.

Mask hh24 continues to not work

Can check here http://www.webclub.gr/mask.html

change event not working

Hello, i'm trying to use jsuites dropdown into a webpack but i dont succeed to use events...
Is there a mistake ?

this.dropdown = jSuites.dropdown(this.input, {
      data: countries,
      autocomplete: true,
      multiple: this.schema.multiple,
      lazyLoading: true,
      type: this.schema.typeInput,
      width: this.schema.width,
    });

    this.addEventListener(this.dropdown, 'change', () => {
      console.log("updated")
      this.updateValue()
    })

Add Synonyms to dropdown autocomplete search (Feature Request)

Feature Request:
When supplying the data for a dropdown, it would be very helpful to be able to include a synonym array that could be used to filter items when using the autocomplete feature. For instance, an entry in a countries list might be:

{"id":"US","name":"United States of America","synonym":["USA","US","America","USofA"]}

autocomplete dropdown data index value

Hi @paulhodel
I have seen https://bossanova.uk/jtools/dropdown-and-autocomplete, but I can't find how to set the drop-down data index value. can you help me?

I need set drop-down data index value, like as below
<div id="dropdown4"></div>
<script> myDropdown = jApp.dropdown(document.getElementById('dropdown4'), {
data:[
{ indexValue:'13', name:'apple' },
{ indexValue:'15', name:'mango'},
],
onchange:function(el,val) {
document.getElementById('log').innerHTML = 'Dropdown new value is: ' + val;
//When I selected apple this should be show 'Dropdown new value is: 13'
},
});
</script>

Wrong class name on context menu?

I tried the disabled option and tried to make it look disabled, but it still had the same color as the rest.

https://github.com/paulhodel/jsuites/blob/e5445d63065f3c8f5422dd0b57a147d11fd1eed1/dist/jsuites.js#L2169-L2171

Looking at your well written source code (since the documentation is so bad) I found out that you add the class jcontextmenu-disabled to disabled items, but there is no css selector that match that name.

https://github.com/paulhodel/jsuites/blob/e5445d63065f3c8f5422dd0b57a147d11fd1eed1/dist/jsuites.css#L1487-L1489

Input mask comma separator ","

Hello, data-mask='U$ #,##.00 (comma separator works as decimal)

Split components to multiple files

Hi, atm I'm only interested in the contextmenu plugin, i would like to only load that thing and ignore the rest

mask.run turns 0 into ""

I see now there is a PR for this already: #17, but this is the issue

jSuites.mask.run(1, "#.#", decimal)
// ==> 1

jSuites.mask.run(1, "0.0", decimal) 
// ==> ""

Date to string conversion

I've tracked down this related issue in jExcel and I figured out that it could be solved quite easily in jsuites.js:

// Helper to convert date into string
jSuites.calendar.getDateString = function(value, format) {
    ...
    if (value) {
        var d = ''+value;
        // instead of:
        // d = d.split(' ');
        var splitStr = (d.indexOf('T') !== -1) ? 'T' : ' ';
        d = d.split(splitStr);
       ...

I'll be glad to do a PR but I'm also facing a mixed line endings problem like in #34.

jsuite CSS rgb function change to rgba

4 argument passed into rgb function instead of 3. Typescript expects exact number of arguments to be passed(works in pure JS). Project build failing due to this. Request to please change the function to rgba.

ERROR in ./node_modules/jsuites/dist/jsuites.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/jsuites/dist/jsuites.css)
Module build failed:
background: rgb(255,255,255,0.95);

Time of 00 minutes will not stick after reopening the calendar

When using the DateTime picker if the minutes dropdown is set to 00 it will update the appropriate text box, however, on reopening the picker the minutes dropdown will revert to the current time.

This is viewable in the "Datetime picker" example on your site https://bossanova.uk/jsuites/date-and-datetime-picker

Steps to recreate:
Pick 12:00 leaving the date as default then click update, the text box changes to 2019-08-14 12:00 as expected.
Reopening the picker now shows 12:33 (or whatever the current minute is).
Changing the time to 12:05 and clicking update changes the text box to 2019-08-14 12:05.
Reopening the pick still shows 12:05 as expected.

Rollup: Parse Error: ./node_modules/jexcel/node_modules/jsuites/dist/jsuites.css:15:0

Hy, i´m integrated jExcel in my StencilJS component, when i do a compìlation, the terminal return next error line:

[ ERROR ] Rollup: Parse Error: ./node_modules/jexcel/node_modules/jsuites/dist/jsuites.css:15:0 Unexpected token (Note that you need plugins to import files that are not JavaScript)

i added in my file stencil.config.ts the next code to try manage a roollups:

import { Config } from '@stencil/core';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import { jsuites } from "jsuites";

export const config: Config = {
  namespace: 'excel-scib',
  rollupPlugins: {
    before: [
      nodePolyfills(),
    ],
    after: [
      // Plugins injected after commonjs()
      nodePolyfills()
    ]
  },
  taskQueue: 'async',
  commonjs:{
    namedExports: {
      'jsuites': ['jsuites']
    },
  },
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ]
};

but dont work, i dont have any ideas to continue wokring with this library.

Someone can help my plase?

Thank you.

Is the a way to reformat data when lazy loading autocomplete?

I would like to use the Dropdown with lazy loading, but my data source has another data format (a JSON, but with a more complex structure). How can load data via AJAX and add some preprocessing to transform it to key-value pairs? Maybe some sort of onLoad event? OnOpen would be fine too, but then there is no setData() method to populate the Dropdown...

bug in case numeric masking

in case of numeric, and some cell has the value '0'. the output is empty..

currentValue is 0, then don't enter to if, and also decimalValue is empty.

if u can solve it please,
Thanks Gal.

Feature request for adding valid range option to the month and year picker

Please add valid range option to the month and year picker as a new feature.

Feat request: Submenu in contextmenu

Add support for adding submenu in contextmenu

Are there CDN repo and minified files?

... found this on hacker news, love it!

Number-mask fails with numbers > 1000 with decimals

Hi!

I'm using jExcel and I've noticed, that numeric masks do not work correctly with 3-digit numbers with decimals. Just type "1000," in the demo on the jSuites homepage (https://bossanova.uk/jsuites/javascript-mask, first example) and it instantly changes to "10.001.000".

I'm using Chrome with German locale.

Unable to enter negative sign before an already entered number

When there is already a number entered like 100 and then I try to add a minus sign before it, it just takes the cursor to end and do not add the negative sign

https://jsfiddle.net/0y5pd16L/1/

In this fiddle try to add a negative sign before 100. It won't add it

Using mask with 0

Hello, there is a UK Phone +44 0000 000 000 mask in there.
When we start typing it adds +44 auto, its cool. But i want to add +40 for example. When i start with "3" it must "+40 3", in this case it becomes "+43" how can i use 0 in phone format. Also how can i "a" in string masks. Thanks in advance.

What will be the date format for 09-Mar-2020?

What will be the date format for 09-Mar-2020 for calendar?

Translate calendar's action buttons

Hello,

I have been using jExcel with jSuites at work to build a massive grid form. There is a column which contains a date so I used the calendar type, translated days and months but I looked into the source code and there doesn't appear to be a way to translate "Reset", "Done" and "Update".

Would it be possible to add options to translate these?

Thanks!

Prev arrow in calendar issue

Hello

When using the previous arrow in the calendar to navigate from Jan 2020, instead of Dec 2019, it goes to Jan 2019 and continues to go yearly instead of monthly.

Thanks

Add Definition to dropdown on hover (Feature Request)

Feature Request:
When hovering over a dropdown entity, have a "title" box that would display a "definition".

List entity:
{
"id":"apple",
"name":"Apple",
"definition":"An apple is an edible fruit produced by an apple tree (Malus domestica)."
}

dropdown groups fail on lazyload

Affects both 4.6.5 and 4.6.7
When items are grouped, lazyload fails with error
Uncaught TypeError: can't access property "appendChild", results[i].group.children[2] is undefined

From quick lookup, the block responsible for the error is the one below. With the line of error being this:
results[i].group.children[2].appendChild(results[i].element);

		for (var i = numberOfItems; i < numberOfItems + number; i++) {
			if (results[i].group) {
				if (! results[i].group.parentNode) {
					content.appendChild(results[i].group);
				}
				results[i].group.children[2].appendChild(results[i].element);
			} else {
				content.appendChild(results[i].element);
			}

			obj.numOfItems++;
		}

there is some small problem with remoteSearch

if (obj.options.remoteSearch == true) {

the url should correct from:
url: obj.options.url + '?q=' + str,
to:
url: obj.options.url + (obj.options.url.indexOf('?') > 0 ? "&" : "?") + 'q=' + str,

the Result Display Should Correct from :
obj.appendData(result);
to:
obj.setData(result);

Using git tags when releasing new versions

Hi,

it would be nice if you could use git tag to the corresponding tag when you release a new version, e.g.:

git tag -a -m "Tagging version 3.1.0.' v3.1.0
git push --tags

This would make following/tracking updates on jsuites so much easier.

Regards,
Daniel