diff --git a/LICENSE.TXT b/LICENSE.TXT index f8d7956..62319f3 100644 --- a/LICENSE.TXT +++ b/LICENSE.TXT @@ -1,4 +1,4 @@ -Copyright (c) 2006-2024, Peter Borissow +Copyright (c) 2006-2025, Peter Borissow Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/src/button/Button.js b/src/button/Button.js index 4949514..7209e8e 100644 --- a/src/button/Button.js +++ b/src/button/Button.js @@ -201,7 +201,7 @@ javaxt.dhtml.Button = function(parent, config) { //Create outer div used to hold the button, mask, and menu var outerDiv = createElement('div', parent); - outerDiv.setAttribute("desc", me.className); + outerDiv.className = "javaxt-button"; outerDiv.style.display = config.display; if (config.width){ if (typeof config.width === "string"){ diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js index ab2298f..20b358d 100644 --- a/src/carousel/Carousel.js +++ b/src/carousel/Carousel.js @@ -9,6 +9,42 @@ if(!javaxt.dhtml) javaxt.dhtml={}; * can cycle through the panels using the back() and next() functions. The * carousel can store a fixed set of panels or you can create the illusion * of having infinite panels by updating panels when they are out of view. + * Example: +
+    var carousel = new javaxt.dhtml.Carousel(parent,{
+        loop: true,
+        animate: true
+    });
+ 
+ * Once the carousel is instantiated you can call any of the public methods. + * The first thing to do is to add panels. Example: +
+    var p1 = document.createElement('div');
+    p1.style.background = "#f0f8ff";
+    p1.style.height = "100%";
+    carousel.add(p1);
+
+    var p2 = document.createElement('div');
+    p2.style.background = "#96a5b2";
+    p2.style.height = "100%";
+    carousel.add(p2);
+
+    var p3 = document.createElement('div');
+    p3.style.background = "#ffd8d6";
+    p3.style.height = "100%";
+    carousel.add(p3);
+ 
+ * After panels have been added to the carousel, you can call the back() and + * next() methods to switch panels. Typically these methods are called from + * "onclick" events fired from other DOM elements (e.g. button). + * + * Finally, you can also add event listeners by overriding any of the public + * "on" or "before" methods like this: +
+    carousel.onChange = function(currPanel, prevPanel){
+        console.log("currPanel", currPanel);
+    };
+ 
* ******************************************************************************/ @@ -140,7 +176,7 @@ javaxt.dhtml.Carousel = function(parent, config) { height: "100%", position: "relative" }); - outerDiv.setAttribute("desc", me.className); + outerDiv.className = "javaxt-carousel"; me.el = outerDiv; @@ -337,6 +373,8 @@ javaxt.dhtml.Carousel = function(parent, config) { //************************************************************************** //** resize //************************************************************************** + /** Used to force the component to resize to fit the parent container + */ this.resize = function(){ var w = outerDiv.offsetWidth; if (w===0 || isNaN(w)){ @@ -528,7 +566,7 @@ javaxt.dhtml.Carousel = function(parent, config) { nextDiv = nextPanel.childNodes[0].childNodes[0]; - me.beforeChange(currDiv, nextDiv); + me.beforeChange(currDiv, nextDiv, "next"); var onChange = function(){ me.onChange(nextDiv, currDiv); @@ -574,7 +612,7 @@ javaxt.dhtml.Carousel = function(parent, config) { nextDiv = clone.childNodes[0].childNodes[0]; - me.beforeChange(currDiv, nextDiv); + me.beforeChange(currDiv, nextDiv, "next"); var onChange = function(){ innerDiv.style.left = start + "px"; @@ -682,7 +720,7 @@ javaxt.dhtml.Carousel = function(parent, config) { nextDiv = nextPanel.childNodes[0].childNodes[0]; - me.beforeChange(currDiv, nextDiv); + me.beforeChange(currDiv, nextDiv, "back"); var onChange = function(){ me.onChange(nextDiv, currDiv); @@ -729,7 +767,7 @@ javaxt.dhtml.Carousel = function(parent, config) { nextDiv = clone.childNodes[0].childNodes[0]; - me.beforeChange(currDiv, nextDiv); + me.beforeChange(currDiv, nextDiv, "back"); var onChange = function(){ me.onChange(nextDiv, currDiv); @@ -801,8 +839,9 @@ javaxt.dhtml.Carousel = function(parent, config) { /** Called before the carousel switches panels. * @param currPanel Content of the active panel * @param prevPanel Content of the next active panel + * @param direction "back" or "next" */ - this.beforeChange = function(currPanel, nextPanel){}; + this.beforeChange = function(currPanel, nextPanel, direction){}; //************************************************************************** diff --git a/src/combobox/ComboBox.js b/src/combobox/ComboBox.js index 0668246..34fbb42 100644 --- a/src/combobox/ComboBox.js +++ b/src/combobox/ComboBox.js @@ -199,7 +199,7 @@ javaxt.dhtml.ComboBox = function(parent, config) { //Create main div var mainDiv = createElement("div", parent); - mainDiv.setAttribute("desc", me.className); + mainDiv.className = "javaxt-combobox"; mainDiv.style.width = config.style.width; mainDiv.style.position = "relative"; me.el = mainDiv; @@ -501,6 +501,7 @@ javaxt.dhtml.ComboBox = function(parent, config) { * dropdown menu. */ this.reset = function(){ + me.hideMenu(); //Remove everything that's not an input var a = []; @@ -515,7 +516,8 @@ javaxt.dhtml.ComboBox = function(parent, config) { //Ensure the input is visible input.show(); - + + input.blur(); }; diff --git a/src/datagrid/DataGrid.js b/src/datagrid/DataGrid.js index 27fa0b7..8bccdf4 100644 --- a/src/datagrid/DataGrid.js +++ b/src/datagrid/DataGrid.js @@ -1,1725 +1,1796 @@ -if(!javaxt) var javaxt={}; -if(!javaxt.dhtml) javaxt.dhtml={}; - -//****************************************************************************** -//** DataGrid -//****************************************************************************** -/** - * Custom grid control based on javaxt.dhtml.Table. Supports remote loading, - * sorting, and infinite scroll. - *
- * Here's a simple example of how to instantiate a DataGrid that will render - * a list of users returned from a REST endpoint: -
-    var grid = new javaxt.dhtml.DataGrid(parent, {
-        style: config.style.table,
-        url: "/manage/users",
-        parseResponse: function(request){
-            return JSON.parse(request.responseText);
-        },
-        columns: [
-            {header: 'ID', hidden:true},
-            {header: 'Name', width:'100%'},
-            {header: 'Role', width:'240'},
-            {header: 'Enabled', width:'75', align:'center'},
-            {header: 'Last Active', width:'175', align:'right'}
-        ],
-        update: function(row, user){
-            row.set('Name', user.fullname);
-            row.set('Role', user.role);
-            var status = user.status;
-            if (status===1){
-                row.set('Enabled', createElement("i", "fas fa-check"));
-            }
-        },
-        autoload: true
-    });
- 
- * Once the grid is instantiated you can call any of the public methods. You - * can also add event listeners by overriding any of the public "on" or - * "before" methods like this: -
-    grid.onRowClick = function(row, e){
-        console.log(row.record);
-    };
- 
- * - ******************************************************************************/ - -javaxt.dhtml.DataGrid = function(parent, config) { - this.className = "javaxt.dhtml.DataGrid"; - - var me = this; - var table; - var mask; - - var currPage = 1; - var eof = false; - var pageRequests = {}; - var loading = false; - - var checkboxHeader; - var columns; - var rowHeight; //<-- Assumes all the rows are the same height! - - - //Legacy config parameters - var filterName, filter; - - - - //Create default style - var defaultStyle = {}; - if (javaxt.dhtml.style){ - if (javaxt.dhtml.style.default){ - var tableStyle = javaxt.dhtml.style.default.table; - if (tableStyle){ - defaultStyle = tableStyle; - var checkboxStyle = javaxt.dhtml.style.default.checkbox; - defaultStyle.checkbox = checkboxStyle; - } - } - } - - - - //Set default config - var defaultConfig = { - - - /** Style config. See default styles in javaxt.dhtml.Table for a list of - * options. In addition to the table styles, you can also specify a - * checkbox style - */ - style: defaultStyle, - - /** The URL endpoint that this component uses to fetch records - */ - url: "", - - /** JSON object with key/value pairs that are appended to the URL - */ - params: null, - - /** Data to send in the body of the request. This parameter is optional. - * If payload is not null, the component executes a POST request. - */ - payload: null, - - /** If true, and if the payload is empty, will sent params as a URL - * encoded string in a POST request. Otherwise the params will be - * appended to the query string in the request URL. - */ - post: false, - - /** Used to specify the page size (i.e. the maximum number records to - * fetch from the server at a time) - */ - limit: 50, - - /** If true, the server will be asked to return a total record count. - * This is a legacy feature and is NOT required for pagination. - */ - count: false, - - /** If true, the grid will automatically fetch records from the server - * on start-up - */ - autoload: false, - - /** If true, the grid will sort values in the grid locally using whatever - * data is available. If fetching data from a remote server, recommend - * setting localSort to false (default) - */ - localSort: false, - - /** Optional list of field names used to specify which database fields - * should be returned from the server. If not provided, uses the "field" - * attributes in the column definition. If both are provided, the list - * of fields are merged into a unique list. - */ - fields: [], - - /** If true, will hide the header row. Default is false. - */ - hideHeader: false, - - /** Default method used to get responses from the server. Typically, you - * do not need to override this method. - */ - getResponse: function(url, payload, callback){ - - - //Transform GET request into POST request if possible. This will - //tidy up the URLs and reduce log size - var contentType; - if (!payload && config.post==true){ - contentType = "application/x-www-form-urlencoded"; - var idx = url.indexOf("?"); - if (idx>-1){ - payload = url.substring(idx+1); - url = url.substring(0, idx); - } - } - - - //Get response - javaxt.dhtml.utils.get(url, { - payload: payload, - contentType: contentType, - success: function(text, xml, url, request){ - callback.apply(me, [request]); - }, - failure: function(request){ - callback.apply(me, [request]); - } - }); - }, - - /** Default method used to parse responses from the server. Should return - * an array of rows with an array of values in each row. Example: - * [["Bob","12/30","$5.25"],["Jim","10/28","$7.33"]] - */ - parseResponse: function(request){ - return []; - }, - - /** Default method used to update a row with values. This method can be - * overridden to render values in a variety of different ways (e.g. - * different fonts, links, icons, etc). The row.set() method accepts - * strings, numbers, and DOM elements. - */ - update: function(row, record){ - for (var i=0; i