Changelog History
Page 4
-
v5.0.1 Changes
November 19, 2020- โ Added attribute
data-filter-search-text
tojs/web-components/input-filter.js
based on Framework version fromjs/plugins/filter.js
.
- โ Added attribute
-
v5.0.0 Changes
November 19, 2020Credits / Thanks!
- Thanks ElevateBart for helping with the idea and API proposal related to
jsxLoader
updates with this release: https://github.com/elevatebart- https://github.com/dataformsjs/dataformsjs/issues/16
- The result is that jsxLoader can not be used from both node and webpack without side effects. Originally jsxLoader was intended only for browser use and it would always check if polyfills or babel standalone were needed based on the browser environment. Now this can be turned off.
๐ Release Overview
โก๏ธ Many updates have been made for overall improvement of DataFormsJS Web Components
- The updates are significant and make using the Web Components much easier for complex apps and sites; and provide for wider browser support.
- The new features make for an easier to use API for customizing content on page after data is displayed. Previously the places demo required a lot of custom JavaScript on the page in order to display flag icons, format table data, and additional items.
- Added ability to polyfill Web Components for older browsers using the standard Framework that gets loaded from a single file and then that file
polyfill.js
loads additional framework files as needed. - Web Components have been updated for full support with React (16 and 17) and React Router. Additionally Web Components have been tested and have partial support for Vue 2 and Vue 3 when using Vue Router.
- Web Component Examples:
- https://www.dataformsjs.com/examples/hello-world/en/web.htm
- https://www.dataformsjs.com/examples/hello-world/en/web-url-router.htm
- https://www.dataformsjs.com/examples/places-demo-web.htm
- https://www.dataformsjs.com/examples/log-table-web.htm#/10
- https://www.dataformsjs.com/examples/countries-no-spa-web.htm
- https://www.dataformsjs.com/examples/image-gallery-web.htm
http://127.0.0.1:8080/image-classification-web
http://127.0.0.1:8080/web-components-with-react
http://127.0.0.1:8080/web-components-with-vue
http://127.0.0.1:8080/web-components-template
http://127.0.0.1:8080/web-components-data-list
http://127.0.0.1:8080/web-components-format
http://127.0.0.1:8080/hacker-news-web
- Added new easier to use API for
<url-router>
and<json-data>
Web Components - Added ability to define custom
<template>
for table<tr>
in<data-table>
- Improvements for
<json-data>
- Added option for formatting text from (date, time, number, custom functions, etc)
- Added ability to use new attribute
click-selector
for search forms similar to the main Framework. - Added
data-show="js-expression"
to show or hide items. It works similar to Vuev-show
. - Added ability to include global variables from window scope using
{variable}
syntax<json-data url="{rootApiUrl}/web-service">
window.rootApiUrl = 'http...';
- This allows an SPA site that contains many different HTML files with the same Root URL to point to the server from one location rather than updating each file.
- Any variable name can be used as long as it is defined. This allows for rapid testing or changes to point to a different server when using
<json-data>
. - The actual update exists in
[utils.js].buildUrl()
. - A similar update has been made for the main DataFormsJS Framework
app.buildUrl()
.
- Added new attribute
[transform-data]
that allows for a JavaScript function to be specified and used to transform the downloaded data before it is passed to other elements. - Added new Web Component
<nav is="spa-links">
. Previously SPA Nav Links were handled from custom JavaScript code on the page. Now this functionality is much easier for a site to include as only HTML is needed. <url-router>
and<url-hash-router>
are now combined into one component<url-router>
and<url-hash-router>
has been removed.<url-router>
now has the ability to lazy load scripts (CSS and JavaScript) per route in a similar manner to the main framework using the newwindow.lazyLoad
option and related HTML Attributes.- New Class
WebComponentService
which can be used to define "service" Web Components - The term "service" is used here because the intended use is that components created with this class do not render content but rather provide a service that updates other elements on the page based on HTML attributes element class names, etc. and that the service needs to run when content on the page changes from SPA routes or JSON Services.
- This is a similar concept to the DataFormsJS Framework Plugins feature allowing for custom functionality to be defined easily and with little API code outside of standard DOM and JavaScript.
- This will be used by all DataFormsJS Web Components that end with "service" in the component name.
- Added new Web Component
<data-view>
and related Framework JavaScript Control for viewing data from<json-data>
or other web components. - Added new Web Component
<keydown-action-service>
. Based on Framework Pluginjs/plugins/keydownAction.js
- Added new Web Component
<html-import-service>
. Based on standard framework features for[data-template-url]
and[data-template-id]
. - Added new Web Component
<show-errors-service>
. Based on standard framework features for<html data-show-errors>
. - Added new Web Component
<prism-service>
. Based on Framework Pluginjs/plugins/prism.js
- Added ability to style errors using CSS from
utils.js
when callingshowError(element, message)
orshowErrorAlert(message)
. - New functions in
utils.js
:loadCss(id, css)
,isAttachedToDom(element)
- Added
[X]
Close Button forjs/web-components/old-browser-warning.js
so that users can close the alert. With the new close button usingjs/web-components/safari-nomodule.js
is no longer needed, however the file is still being kept for reference and sites that want to customize and use it. js\web-components\data-list.js
- Added HTML attribute
root-attr
which allows for any attribute to be set on the root element. Previously only theclass
could be set fromroot-class
. The attributeroot-class
is still supported. - For
<url-router>
and DataFormsJS Framework when using HTMl5 History Mode (pushState, popstate) the MacCommand
Key is now supported so users can open SPA links in a separate tab. Previously the only the{Control}
key worked which is used on Windows for new tags and on Mac for a context menu (right-click menu).
โก๏ธ DataFormsJS React Components and jsxLoader Updates
- Minor bug fix where empty data props were not parsed correctly in a specific condition if this previous prop was not empty; this was found when updating Web Components for full React Support.
- Added Node Support for jsxLoader
- Added ability for jsxLoader to run from webpack (or in a browser) without any side effects if only the compiler is needed. Documentation will be updated after npm release on how this can be handled.
- Previously
jsxLoader
only worked in a browser. - jsxLoader is now available as a node API and it works in the browser.
- Added new compiler settings and options:
~~~js
jsxLoader.compiler.pragma = 'React.createElement';
jsxLoader.compiler.pragmaFrag = 'React.Fragment';
jsxLoader.compiler.maxRecursiveCalls = 1000;
// The above setting replaces
jsxLoader.maxRecursiveCalls
so it's a breaking // change, however it's mostly just an internal property for unit testing and // for safety in the event of an unexpected error.
jsxLoader.compiler.addUseStrict = true; // By default "use strict"; is now added to the top of compiled JS code if // does not already exist. This can be turned off by setting
addUseStrict = false
. // This behavior is similar to the latest version of Babel 7.// Added new code hint that is supported by Babel: /* @jsxFrag Vue.Fragment */
* Updated the CDN version of Babel Standalone used for old browsers from `7.10.4` to `7.12.6` * Added improved error message for compile errors where the number of opening tags did not match the number of closing tags. Previously some of these errors were only caught at runtime and not compile time. * Updated `.eslintrc.js` for improved syntax validation when using VS Code with `*.jsx` example and test files * When calling `jsxLoader.usePreact` a global `React` variable pointing to `preact` will be assigned to `window` by default if not already set and Preact is loaded. * ES6 `*.min.js` Components can now be loaded in a web browser using `[type="module"]`. Previously only the ES5 min files could be loaded in a browser. ~~~html <!-- Previous Release typical CDN usage --> <script src="dataformsjs/js/react/es5/DataFormsJS.min.js"></script> <!-- With the latest release of DataFormsJS modern browsers can use the smaller files with modern code syntax while legacy browsers still the es5 build. --> <script type="module" src="dataformsjs/js/react/es6/DataFormsJS.min.js"></script> <script nomodule src="dataformsjs/js/react/es5/DataFormsJS.min.js"></script>
Format
class has several functions added that were previously private scoped in the module:isNumber(n)
formatDateTime(dateTime, options)
formatNumber(value, options)
- They are mostly internal so for usage view the source code.
- โจ Enhancements for DataFormsJS Framework files and general updates:
Added
app.updateTemplatesForIE(rootElement)
. IE 11 considers<template>
elements as valid elements so it appliesquerySelector()
and related methods to elements under<templates>
's so replace with them<script type="text/x-template">
. This avoids issues of<template>
elements that contain embedded content. Previously this was only handled once per page load but now is handled (for IE only) when views are rendered.Added features in
js/plugins/dataBind.js
based on the Web Components version.New file
js/extensions/format.js
which is used with the Web Components PolyfillUpdated
js/plugins/filter.js
so that it shows 0 count for empty tables. Previously it expected the table to have at least one<tbody>
element. A similar update was made forjs/web-components/input-filter.js
Previously if using
<template>
withjsonData
page types all.is-loading, .has-error, .is-loaded
elements could quickly flash on screen during page changes. This has been fixed.Routes and JavaScript controls will have empty data HTML attributes mapped to
true
by default instead of an empty string. Previouslydata-load-only-once="true"
was used on many pages but now onlydata-load-only-once
is required. Additionallynull
is now supported as an option.js/plugins/i18n.js
- Added
app.plugins.i18n.getUserDefaultLang()
- The following global API was added so that it can be used easily with templating or by app custom logic. This was based on the Web Component verison which uses simple JavaScript templating and basic functions. ~~~js window.i18n_Locale = 'en|fr|es|zh-CN'; // Selected language, updated on each page change window.i18nText(key) // Returns I18n content for the current page ~~~
- Added
data-load-only-once="true"
- โจ Enhancements for "JavaScript Controls" in the standard Framework. The Framework JavaScript Controls are a similar concept to Web Components but work with all Browsers.
Added ability to easily reload by calling
app.activeJsControls(control)
. Updating already loaded controls is not common but can be used in very specific scenarios. For example the new Web Components Polyfill uses it.Update API to include
model
as a parameter incontrol.onLoad(element, model)
Specific controls
<data-table>
and<data-list>
have significant new functionality based on the matching Web Components that allows for basic templating from HTML. The template syntax is based on JavaScript template literals (template strings) and with the new features basic sites or apps that previously required Handlebars or Vue for templating could possibly use these instead. Use of templating requires using a new filejs/extensions/jsTemplate.js
.Data Attributes for JavaScript controls will not use boolean data types when "true" or "false" are specified. This was created for the new
data-load-only-once
attribute added tojs/controls/json-data.js
for compatability with the Web Components version. A newfromCache
option was added as a parameter toonFetch
based on this change.Added new functions
app.unloadUnattachedJsControls()
andapp.unloadJsControl(jsControl)
. They are mostly for internal use but are available for advanced usage if needed.- โก๏ธ Image Gallery Update for Overlay when
title/alt
is not used:
- โก๏ธ Image Gallery Update for Overlay when
All versions updated (Web Component, Framework Plugin, React)
By default if title is not used the position
{index}/{end}
is displayed. Previously it aligned to the left of the screen. Now it will be aligned in the right of the screen only if title is missing which matches the behavior if the title is includedTo change position see the following CSS examples (works in all browsers included IE):
.image-gallery-overlay div.no-title { justify-content: flex-start; }
.image-gallery-overlay div.no-title { justify-content: center; }
- ๐ Bug fix for
js/pages/entryForm.js
where thesaveUrl
did not allow for variables from the model if the URL of the page did not include any URL parameters. - โก๏ธ All Leaflet code has been updated to download map images using
https
instead ofhttp
; originally when DataFormsJS was publishedhttps
was not available as a free option for leaflet.
Additionally error messages have been improved for Leaflet.
Files updates:
<leaflet-map>
Web ComponentLeafletMap
React Component and mainDataFormsJS.js
React fileleaflet
Framework plugin.- โก๏ธ Updated dependencies used for building the
*.min.js
files
@babel/standalone
updated from7.7.7
to7.12.6
, used to build es5 version of React Componentsuglify-js
updated from3.7.3
to3.11.6
eslint
updated from7.3.1
to7.13.0
- ๐ Replaced
uglify-es
withterser
for the minification of React Components and Web Components
- ๐ Replaced
*.min.js
files are generated fromnpm run build
. Only changed files get updatedBuild Script
scripts/build.js
uglify-es
is an abandon projects andterser
is a widely used fork.
๐ฅ Breaking Changes
โก๏ธ For the standard Framework most breaking changes are minor and only expected to affect internal API's and examples. Several Framework "JavaScript Controls" were updated to match behavior of the Web Components in order to provide more features and so they can be used with the new Web Components Polyfill. If you developed a site or app with any of the breaking changes they are quick to update and if you need help please open an issue.
๐ For React Components one component
LeafletMap
and one classI18n
that would not be commonly used in most apps have been dropped from the core ES5 build filejs/react/es5/DataFormsJS.js
. However new options exist so they (along with all other components and classes) have improved options for loading.๐ <!-- Previous Release included [I18n, LeafletMap] and was ES5 sytnax only for CDN --> <script src="../js/react/es5/DataFormsJS.min.js"></script> <!-- In the places demo the above script was replaced with the following. --> <script type="module" src="../js/react/es6/DataFormsJS.min.js"></script> <script type="module" src="../js/react/es6/I18n.min.js"></script> <script type="module" src="../js/react/es6/LeafletMap.min.js"></script> <script nomodule src="../js/react/es5/DataFormsJS.min.js"></script> <script nomodule src="../js/react/es5/I18n.min.js"></script> <script nomodule src="../js/react/es5/LeafletMap.min.js"></script> <!-- However for most sites this will be enough and it results in a smaller download size for the end user and modern code for most users. --> <script type="module" src="../js/react/es6/DataFormsJS.min.js"></script> <script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
โก๏ธ The Web Components have the most complex breaking changes related to API usage however due to the complexity of the earlier API it's unlikely to affect any site. If a site did use the earlier API it is generally quick to update as well.
- โ Removed
<url-hash-router>
- This can now be replaced with
<url-router>
<url-router>
previously only worked with HTML5 History RoutespushState/popstate
. To use history routes now use<url-router mode="history">
- This can now be replaced with
- ๐
js/web-components/utils.js
- Removed
showOldBrowserWarning()
. The feature has been replaced with the newjs/web-components/polyfill.js
and also the filejs/web-components/old-browser-warning.js
now includes a [X] close button so it it runs on Safari 10.1 or an old Chromium browser that doesn't support [nomodule] the user can simply close the alert. - Removed
componentsAreSetup()
. This function is no longer needed and the logic related to it's usage prevented Web Components from working with React and was not fully valid based on Custom Element specs because elements were writing HTML attributes on theirconstructor()
.
- Removed
- ๐ Web Components API for
<json-data>
,<url-router>
have been changed significantly. Previously the API requiredasync/await
from module JavaScript and was complex to use. It has now been simplified so that events bubble up to the document can be handled easily from the root document event listener and so standard JavaScript functions can be called from HTML attributes. - Framework JavaScript Controls
- Dropped support for replacing the control element with a basic element. Example, previously
<json-data>
would have been converted to<div data-control="json-data">
. Now thedata-control
attribute is added but the element is not converted. - This behavior allows for easier to use API from sites and apps that use the
<json-data>
Web Component and Polyfill.
- Dropped support for replacing the control element with a basic element. Example, previously
- ๐
js/plugins/filter.js
- Removed error alert for textColumn filter requires a table to be correctly defined
that happened if a table was missing when the filter was loaded. The reason is that it makes sense for certain apps to have a defined filter and only optionally include the table. - ๐
js/controls/data-table.js
- Replaceddata-source
withdata-bind
and now<data-table>
will be converted to a<div>
with a<table>
in the<div>
instead of converting to a<table>
directly. Additionally<template>
support has been added.- Code before Update: ~~~html ~~~
- Code after Update: ~~~html ~~~
- See code comments in examples for more:
http://127.0.0.1:8080/places-demo-js
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/places-demo-js.htm
js/controls/data-list.js
- Replaced
data-source
withdata-bind
and now<data-list>
will be converted to a<div>
with a<ul>
in the<div>
instead of converting to a<ul>
directly. <template>
support has been added.
- Replaced
- ๐ Rename
jsPlugins.js
functionrefreshJsPlugins()
torefreshPlugins()
so it matches the standard Framework.- Affects Web Components and React
js/web-components/jsPlugins.js
js/react/jsPlugins.js
- ๐ Combined Framework Plugins
js/plugins/navList.js
andjs/plugins/navLinks.js
- All demos used
navLinks.js
and only the main site usednavList.js
navList.js
has been deleted but the functionality can now be handled by usingnavLinks.js
and setting the following option from JavaScript:app.plugins.navLinks.itemSelector = 'nav li';
- All demos used
- Thanks ElevateBart for helping with the idea and API proposal related to
-
v4.8.0 Changes
October 05, 2020- โ Added new API function for Framework plugins for reloading plugin.
app.plugins[name].reload()
- This makes using plugins easier for basic HTML pages that are not Single Page Apps (SPA).
- Example usage, before the update if an basic HTML app make content changes and needed to reload a plugin it would look like this for plugins that needed to call
onRouteUnload()
: js app.plugins.imageGallery.onRouteUnload(); app.refreshPlugins();
* or: *js app.plugins.imageGallery.onRouteUnload(); app.plugins.imageGallery.onRendered();
- Now a single easier to read line can be used:
js app.plugins.imageGallery.reload();
- The function gets defined and added automatically by the root
DataFormsJS|app
object whenapp.addPlugin()
is called. If a reload function or property already exists on the plugin the no change is made to the plugin. - File updated:
js/DataFormsJS.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js
- โ Added default
cursor: pointer
for React and Framework Image Gallery Controls.- Files Updated:
js/plugins/imageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.jsjs/react/es6/ImageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js- The Web Component Version
js/web-components/image-gallery.js
already had this behavior.
- โ Added new API function for Framework plugins for reloading plugin.
-
v4.7.1 Changes
October 01, 2020- ๐ Fixed warnings that showed up on React DevTools when using development builds. The errors didn't affect production builds of React so it wasn't caught earlier.
js/react/es6/JsonData.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/JsonData.jsjs/react/es6/ImageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js- Also related updated all React Examples to not have warnings. Example, replaced
class
withclassName
in HTML examples.
- ๐ Fixed warnings that showed up on React DevTools when using development builds. The errors didn't affect production builds of React so it wasn't caught earlier.
-
v4.7.0 Changes
October 01, 2020- ๐
js/plugins/clickUrlAction.js
- Added actions
refresh-plugins
andcall-function
refresh-plugins
can be used on Vue apps instead ofupdate-view
which only works for Handlebars and other templating enginesrefresh-plugins
is used on the Vue Entry Form Demo https://www.dataformsjs.com/examples/entry-form-demo-vue.htmcall-function
is generic and allows an app to call any global JavaScript function
- Added actions
- ๐
-
v4.6.3 Changes
September 30, 2020- Image Gallery Controls
- Added opacity change on forward and back button hover for desktop users
- Reason is because the pointer cursor shows for the entire screen so having opacity change on the button hover provides better indication that the button action is different than the image or overlay.
- All controls updated:
js/web-components/image-gallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/image-gallery.jsjs/plugins/imageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.jsjs/react/es6/ImageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js
- Image Gallery Controls
-
v4.6.2 Changes
September 30, 2020- ๐
js/plugins/listEditor.js
- Bug fix where<input type="checkbox">
or<input type="radio">
did not track changes on some modern browsersSamsung Internet for Android
andUC Browser - Windows Desktop
. The reason is becauseoninput
was used instead ofonchange
. Previouslyonchange
was only used forIE 11
but now it's used for all browsers on checkboxes and radio controls. - ๐ Fixed Local development issue (localhost only) with
UC Browser
wherehttps://polyfill.io
was not included in the CSP (Content Security Policy)
- ๐
-
v4.6.1 Changes
September 30, 2020- ๐
js/plugins/filter.js
- Previous release included improved filter for<select>
and<textarea>
but did not include them on the optimization check if<input>
was missing. - ๐
js/web-components/url-router.js
- Removed old commented out functions that were never used but accidently left in code. Fix invalid query selectora[href^="/"]:not([data-no-pushstate])
that was missing that last)
. This didn't cause an error on any tested browsers. It would cause an error on IE or older iOS/Safari however those browsers don't support Web Components anyways. - โ Additionally the JSX Loader Docs have been updated with additional info on using
<LazyLoad>
- ๐
-
v4.6.0 Changes
September 29, 2020๐ Release Overview
- ๐ This release contains many small updates, in general:
- Framework Entry Form Scripts now work with Vue. The existing Handlebars demo has been updated and a new Vue demo created.
- Vue 3.0.0 has been confirmed to work with DataFormsJS. No changes needed from previous release, however some new functions are available for working with Vue.
- Image Gallery controls are updated for improved User Experience (UX) and better Accessibility on Desktop Computers.
- Image Gallery now includes support for next-gen images (AVIF and WebP)
๐ Release Details
- โ Added features and additional examples pages for Vue
- All Handlebar Examples now have a corresponding Vue Example
- All Standard Framework files now support Vue
- Originally DataFormsJS was created to use Handlebars so until this release not all Framework scripts worked with Vue
- ๐ Confirmed Vue 3.0.0 Release works with the Framework, previously earlier Beta and Release Candidate versions were confirmed.
- https://www.dataformsjs.com/unit-testing/vue-3
- Most pages currently point to the latest release of Vue 2
2.6.12
so that they work with IE and older mobile devices
- โ Added Vue support for the Framework
entryForm
page object and related plugins- Both Vue 2 and Vue 3 are supported
- Scripts Updated:
js/pages/entryForm.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/pages/entryForm.jsjs/plugins/listEditor.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/listEditor.jsjs/plugins/clickUrlAction.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/clickUrlAction.js- New Demo is available for Vue, previously these scripts only worked with template engines such as Handlebars.
- https://www.dataformsjs.com/examples/entry-form-demo-vue.htm
- Added support for
hidden
attribute on theentryForm
page object when usingclass="show-after-form-load"
elements. Peviouslystyle="display:none;"
was required on the element.
- โก๏ธ
entryForm.js
- Additional Updates:- Improved IE 11 support so that
null
values to not get displayed as"null"
strings in input elements when adding new records. - Replaced Internal Model Prop
textMessages: { savingRecord: 'Saving Record...', deletingRecord, recordSaved, recordDeleted, confirmDelete, }
withsavingRecordText: 'Saving Record...'
and related properties so that apps can overwrite the default action text from an HTML template.
- Improved IE 11 support so that
- โ Add Vue Directive
format-yes-no
tojs/extensions/vue-directives.js
- If the case-insensitive value to bind is one of the following
[true, 1, yes]
thenYes
will be displayed otherwiseNo
will be displayed.
- If the case-insensitive value to bind is one of the following
js/DataFormsJS.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js- Added new helper functions for working with Vue
app.isUsingVue()
app.isUsingVue2()
app.isUsingVue3()
- These function would generally be used by page objects, plugins, etc that need to support both Vue and other templating engines such as Handlebars.
- Added a helpful
console.error()
message for developers if adata-lazy-load="name"
script was not found - Converted two
console.info
statements toconsole.warn
js/extensions/events.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/events.js- Converted two
console.log
statements toconsole.error()
statements and added an additionalconsole.error()
. These provide helpful messages to developers.
- Converted two
js/extensions/validation.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/validation.js- Added seperate text message for integer validation:
app.validation.text.typeNumberInt = '[{field}] needs to be entered as a integer.'
. This can be overwritten by an app. - Bug fix were
data-type="int|float"
would returntrue
for invalid numbers whenparseInt()
andparseFloat()
failed. This didn't affect the numbers sent to the server and only client-side validation messages.
- Added seperate text message for integer validation:
- โก๏ธ Entry Form and List Editor Updates for IE
- Example Page was previously broken on IE due to
js/pages/entryForm.js
being loaded without a polyfill forObject.assign
. Usingapp.LazyLoad
in the page HTML fixed the example. They entry form and related code worked with IE, simply the example was not working. - https://www.dataformsjs.com/examples/entry-form-demo-hbs.htm
js/plugins/listEditor.js
- Fix so that checkbox and radio changes would be tracked. This affected IE 11 because IE 11 was not trackingelement.oninput
for checkboxes and radio inputs.
- Example Page was previously broken on IE due to
- โ Added Framework Plugin for pickadate.js - https://amsul.ca/pickadate.js/
js/plugins/pickadate.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/pickadate.js- Example is included on the entry form demos
- ๐
js/plugins/filter.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/filter.js- Added new attribute
data-filter-search-text="{{search text}}"
that can be used to specify the text that should be filter rather than the element'stextContent
and<input>
elements - Example usage is on the main site's quick reference page. Previously all text was included in the filter which resulted in too many code templates being returned.
- With the new feature only the Title text is included in the feature which results in a better user experience (UX).
- https://www.dataformsjs.com/en/quick-reference
- Added new attribute
- ๐
js/web-components/data-list.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/data-list.js- Added support for
index
enumeration variable in the rendered template. - This can be used to add a
tabindex
to the rendered HTML or used with other actions needed by the page. - If the list item object already contains and
index
property it will be used instead. - Template errors will now show on screen
- New attribute
error-class
that allows for control over how errors are displayed. If not included they will use a basic style (white text, red background, margin, padding). - Updated Example: https://www.dataformsjs.com/examples/web-components-data-list.htm
- Added support for
- โก๏ธ Image Gallery Updates
js/web-components/image-gallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/image-gallery.jsjs/plugins/imageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.jsjs/react/es6/ImageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js- Update for improved User Experience (UX) on Desktop Computers:
- All updates are for better Accessibility so that the image gallery can now fully function from either the keyboard or a mouse.
- Added ability to show the overlay from a press of the spacebar on the keyboard. Previously a mouse click was required to show the overlay.
- Added
Back
andForward
Buttons to the overlay that appear by default for Desktop computers. Previously navigation only worked through the keyboard left and right arrow keys. Back
andForward
Buttons will only show by default on desktop computers when the user clicks the thumbnail image. By default on Mobile devices (determine fromuserAgent
) or if using the keyboard spacebar to start the overlay the buttons will now show. The reason is that the buttons can overlap the image so if using a keyboard or swiping on mobile they are not needed (or desired).Back
andForward
Button visibility and other features can be easily changed through CSS from the page.- Added support for for next-gen images (AVIF and WebP)
- See DataFormsJS examples for usage
- Image Format Details:
- ๐
js/plugins/modalAlert.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/modalAlert.js- Removed un-needed
console.log
statement that was left from development
- Removed un-needed
- โ Added example with code comments for documentation of using CSP (Content Security Policy) with DataFormsJS for the examples when running from localhost
- ๐ Fix Date Formatting in templating functions to use no Timezone with a basic date format
YYYY-MM-DD
.- Previously the value would be parsed from
new Date(value)
which resulted in local timezone conversion depending on browser. - Updated:
- React Class
Format.date()
-js/react/es6/Format.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/Format.js - Handlebars Helper
formatDate
-js/extensions/handlebars-helpers.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/handlebars-helpers.js - Vue Directive
v-format-date
-js/extensions/vue-directives.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/vue-directives.js
- Previously the value would be parsed from
- ๐
js/plugins/filter.js
- Improved filter selection for tables that contain
<input> <select> <textarea>
in the cell nodes
- Improved filter selection for tables that contain
- โก๏ธ Click To Highlight Plugin and Related Updates
js/plugins/clickToHighlight.js
- Prevent highlight changes when a<a>
element is clicked. The reason is because it causes a quick flash of the highlighted style on the row before the page changes. Since the user is clicking to another page rather than highlighting a row the style change is not desired.js/web-components/data-table.js
- Added similar functionality using new attributehighlight-class
.- React Places Demos have been updated with similar functionality using basic JavaScript functions.
- โก๏ธ Updated Places Demo App for Web Components and plain JavaScript version to include custom JS code on the main page to show how Date and Number formatting can be handled
- ๐ This release contains many small updates, in general:
-
v4.5.5 Changes
September 11, 2020- Minor Bug Fix for Image Gallery Controls.
- A console error could occur on some cases if the user was on a slow device and the image had partialy loaded but they clicked off the overlay because the
Loading...
label was being set with ahidden
attribute after it was unloaded. An actual error alert would show on the standard framework when using<html data-show-errors>
. - All Versions updated:
- Framework Plugin:
js/plugins/imageGallery.js
- Web Component:
js/web-components/image-gallery.js
- React Component:
js/react/es6/ImageGallery.js
- A console error could occur on some cases if the user was on a slow device and the image had partialy loaded but they clicked off the overlay because the
- Confirmed Vue 3 (RC 10) works with the Framework, previously RC 8 was confirmed
- Minor Bug Fix for Image Gallery Controls.