Metro 4.5.0

4.5.0

• Tabs Material: fixed jump to the anchors, issue #1794
• Table: fixed create Instpector when table data loaded with method loadData(), issue #1796
• Tabs Material: added mouse wheel support for scrolling tabs, issue #1795
• Select: added event data-on-clear, fixed firing event data-on-change when user click on the clear button, issue #1802
• Switch: fixed method toggleState(), issue #1799
• Select: fixed API method data() for selecting option when defined, issue #1755
• Select: added API methods addOptions(values = [] || {}), removeOptions(values = [])
• Select: added API methods addOption(val, title, selected), removeOption(val)
• Select: fixed clear button work, issue #1716
• Master: fixed for quick switching panes, issue #1787
• Important: IE is dead and no more supported!
• M4Q: version updated to 1.1.0
• M4Q: removed polyfills for Promise, CustomEvent (IE is dead)
• Datetime: version 1.0.1, new global type Datetime, and factory datetime()
• Cake: version 1.0.0, new global type Cake, and factory cake()
• Ajax: switched from $.ajax ($.json, $.post, ...) to fetch (IE is dead)
• Tag input: switched from $.ajax to fetch
• Input: switched from $.ajax to fetch
• Html container: switched from $.ajax to fetch
• Cookie disclaimer: switched from $.ajax to fetch
• Table: _create(), _buid(), _saveTableView(), loadData() now use fetch, and send data to server as json
• Streamer: now use fetch for loading data
• List: now use fetch for loading data
• Calendar: fixed showing week numbers
• Calendar: rewritten with Datetime
• Calendar picker: rewritten with Datetime
• Countdown: updated for using with Datetime
• Chat: updated for using with Datetime
• Chat: changed messages style
• Validator: updated method date for using with Datetime
• Table: updated for using with Datetime (change toDate() to Datetime.from())
• List: updated for using with Datetime (change toDate() to Datetime.from())
• Datepicker: updated for using with Datetime
• Utils: updated for using with Datetime
• Extensions: removed extension for Date, use Datetime
• Extensions: removed extension for Object - Object.create(), Object.values() (IE is dead)
• Extensions: removed methods from extension for String, Array
• Any: added using Cake.lpad where need
• Utils: removed functions lpad, rpad. If you need these functions, use Cake.pad, Cake.lpad, Cake.rpad
• Select: added attributes data-drop-full-size=true|false (default: false), data-drop-width=int_value to set drop container width
• Hint: added attribute hintDeferred if value of this > 0, a hint will display with delay.
• ActionButton: fixed vertical-align for multi-action class
• Activity: change default style to color
• Keylock: added new component
• Calendar: fixed bug issue #1732
• Window: fixed event onMaxClick, issue #1735
• DoubleSelectBox: added new component, request from Patreon patron
• M4Q: fixed setting css number props order, zoom with method css()
• CalendarPicker: added API method clear()
• CalendarPicker: fixed API method val(), if you set argument as empty string val(""), you clear calendar picker value
• M4Q Ajax: fixed method $.get for url with ?, issue #1745
• List: updated for using with different tags. For example: now you can use list with div.grid role=list > div.row > div.cell structure
• List: added attribute data-cls-template-tag to set class(es) for item children
• List: added attribute data-default-template-tag to set wrapper element for item children, when template is not defined
• List: improved work with an attribute data-cls-template-tag. Now you can set many classes separated with comma to applying to elements with linked index
• Grid: fixed no-gap class, now padding cancels for .grid.no-gap .row > .cell* and .row.no-gap > .cell*
• Utils: fixed function Utils.isObject(), issue #1755
• Switch: To show on-off label you must set attribute data-show-on-off='true' and use attributes: data-on, data-text-on, data-off, data-text-off or i18n configs with attribute data-locale
• Switch: added i18n support with props locale.switch.on, locale.switch.off
• Switch: added changing on-off text in runtime with API method i18n(locale_name), issue #1761
• M4Q: added property $.dark
• Accordion: added API method open(index)
• Accordion: added attributes data-cls-accordion, data-cls-frame, data-cls-heading, data-cls-content, data-cls-active-frame, data-cls-active-frame-heading, data-cls-active-frame-content
• Table: added attribute data-use-current-slice. If this attribute has a value true, click on select-all checkbox will only apply to the current (visible) data slice, issue #1778
• Sidebar: added attribute data-close-outside="true|false" to close sidebar by a click outside the sidebar, issue #1777
• Marquee: added method setItems([...])

Metro UI 4.4.3 - Last version with IE support

4.4.3

M4Q

• Attributes: fixed method attr when user defining one argument
• Animation: added methods stopAll(), pause(id), pauseAll(), resume(id), resumeAll()

Metro 4

• Color selector: added new component
• Color picker: added new a component
• Marquee: added new component
• NavView: fixed navview-pane item height and hover state, issue #1661
• Metro: improved function makePlugin(...), now you can use it for set of elements.
• Slider: fixed work vertical slider for touchable devices
• Colors: improve work with hsl, hsv
• Spinner: fixed input not a number value, value more or less than defined in options.
• Keypad: fixed internal value type mismatch.
• InfoBox: added attribute data-overlay-click-close=true|false, default false, issue #1668
• Table: added localization from i18n files, issue #1671
• Dropdown: fixed closing others when open current
• Timepicker: fixed error when step is not equals to 0, issue #1676
• Select: fixed clear button icon position in input-small mode, issue #1675
• Select: added attribute data-cls-group-name
• Select: for option added attribute data-display, issue #1677
• Input: added support for getting autocomplete list items with ajax, issue #1682
• Locales: added Croatian locale, thanks to dugi007
• Calendar: added showing events count in days, issue #1621
• Tag Input: added autocomplete feature, issue #1500
• Table: added showing inspector button with attributes data-show-inspector-button=true|false, data-inspector-button-icon.
• Table: set default value for data-cell-wrapper to true
• Table: improve table styles for table-contaner
• Table: fixed working with attribute data-horizontal-scroll-stop
• Metro: added method pluginExists(name) to check if specified plugin registered in registry
• Colors: fixed primitives RGBA, HSLA to create with specified alpha
• Utils: added lpad(), rpad() functions
• Calendar: improve visibility, fixed for using Utils.lpad()
• Calendar picker: fixed for using Utils.lpad()
• Metro: added method Component._fireEvents(...)
• Security alert: fixed from issue #1687
• Date extension: fixed method getWeek(), used in calendar for showing week numbers.
• Tag input: added closing autocomplete list on user click outside.
• Window: fixed holds zIndex when draggable, issue #1689
• i18n: fixed a chinese locales name, issue #1691
• Countdown: changed prop name data-animate-func to data-ease
• Additional colors: for opacity added op-*-hi, op-*-low classes
• Additional colors: default opacity changed to 0.5
• Keypad: added attributes data-except-keys, data-key-separator, data-key-delimiter, data-trim-separator.
• Table: fixed using attribute data-sortable for th.

Metro 4.4.2

4.4.2

Metro 4

• Button: fixed content position, issue #1648.
• Split-button: improved the layout, added subclass no-gap for split-button.
• Select: fixed minor bug for showing group name, when value sets with method val(...), issue #1652
• GradientBox: refactoring.
• ImageBox: fixed work of attribute data-repeat.
• Window: improve work with window content, now no require content wrapping into the block when defining content property.
• ImagePlaceholder: new component to create image placeholders.
• Button: added a button with loading state.
• Color: improved method parse().
• Validator: improved validating function color, now you can use any color string format: rgb, hex, ...
• Default icons: optimized styles.
• Media players: optimized default icons.
• Activity: added two new activity bars, atom.
• Tabs material: fixed tabs position.
• Utils: removed functions: hex2rgba(), getTransformMatrix(), computedRgbToHex(), computedRgbToRgba(), computedRgbToArray(), hexColorToArray(), hexColorToRgbA()
• i18n: added tr-TR turkish locale.
• Third party plugins: removed support for select2, datatables
• AppBar: added event onBeforeMenuOpen, onBeforeMenuClose, fixed firing events onMenuOpen, onMenuClose.
• Timepicker: added attributes data-cls-button, data-cls-ok-button, data-cls-cancel-button to modify picker buttons style, issue #1659.
• Datepicker: added attributes data-cls-button, data-cls-ok-button, data-cls-cancel-button to modify picker buttons style, issue #1659.
• TreeView: fixed ul default position to initial, issue #1660
• Dropdown: added classes .drop-down-left, .drop-down-right, .drop-up-left, .drop-up-right.
• Position: split position into position, position-ext, z-index.
• Utilities: removed function isColor(...), if need, use Metro.colors.isColor().
• Utilities: removed function embedObject(...), if need, use $(...).wrap().
• Utilities: removed function randomColor(...), if need, use Metro.colors.random().
• Utilities: updated function isVideoUrl(...), added twitch.

Metro 4.4.1

4.4.1

M4Q

• M4Q: updated to 1.0.9
• M4Q Core: added function $.isLocalhost([hostname]), true if host is localhost.
• M4Q Core: added property $.localhost, true if current location is localhost.
• M4Q Core: added property $.touchable, true if device detected as touchable.
• M4Q Manipulation: added methods appendText(...any_text...), prependText(...any_text...).

Metro 4

• Licensing: return MIT unified licensing model
• Tile: fixed double firing click event. Component internal event onClick renamed to onTileClick (attribute data-on-click => data-on-tile-click), issue #1636
• Export: added method arrayToCSV(array, filename, options).
• Utils: removed function isLocalhost, if you need, use $.localhost or $.isLocalhost([host]).
• Utils: removed function isArray.
• Utils: removed function isTouchDevice. if you need, use $.touchable.
• Tag input: improve method val(). Now you can use for new value(s) array or simple value.
• Tag input: added method append(val). For append tag(s) to existing value.
• Select: fixed using attribute data-cls-option-group, issue #1640
• Carousel: fixed usage attribute data-width, now this attribute applied to max-width css property, issue #1647
• ImageBox: added new component for issue #1647
• GradientBox: added new component for issue #1645
• ViewportCheck: added new component for check if element in viewport
• Shadows: added class shadowed, class defined in shadow.less, issue #1643
• Select: added attributes data-show-group-name="true|false" (default - false), data-short-tag="true|false" (default - true), issue #1642

Metro 4.4.0

4.4.0

M4Q

• M4Q: updated to 1.0.8
• M4Q Constructor: added short-tag for selecting by data-role with $('@rolename')
• M4Q Visibility: fixed method hide for detecting initial display value
• M4Q Init: improve init method
• M4Q: added property $.device, true for mobile a device.

Metro 4

• Components: switch to Component._fireEvent(...) method for firing component events data-on-*
• Calendar: added firing event onMonthChange when user clicks on outside day, issue #1589
• Window: added API methods pos(top, left), top(v), left(v), width(v), height(v), issue #1590
• Metro.window: added methods pos(top, left), top(v), left(v), width(v), height(v)
• Switch: added data-on, data-off attributes to show switch text state
• Checkbox: added API method toggle(state). The state must be -1 (indeterminate), 0 (unchecked), 1 (checked) or undefined (toggle between checked and unchecked), issue #1586
• Switch: added API method toggle(state). The state must be 0 (unchecked), 1 (checked) or undefined (toggle between checked and unchecked), issue #1586
• Double slider: fixed right-hand button moves when grabbing the left-hand hint, issue #1591
• Window: added property attr to custom button definition. This attribute must be a object with pairs key: value where key - attribute name, value - attribute value, issue #1592
• Input: added property attr to custom button definition
• Panel: added property attr to custom button definition
• Lightbox: new component to create a modal image gallery
• ImageGrid: new component to create a simple beautiful image grid
• Draggable: added attribute data-boundary-restriction="true|false", issue #1595
• Tokenizer: new component to create tokenized text
• Carousel: fixed active slide z-index, issue #1605
• Dropdown: added attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: false), issue #1604
• Select: added attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: true), issue #1604
• Table: fixed using template, issue #1606
• Select: fixed clear button work, issue #1610
• Input: remove metro style from input without role input. To added metro style to input without role input, use class metro-input.
• Textarea: remove metro style from input without role input. To added metro style to input without role input, use class metro-input.
• Utils Css: remove classes .neb, .neb2, .h-center, .v-center
• Input: added event onAutocompleteSelect. You can define this event with an attribute data-on-autocomplete-select. The event receives a one argument - selected value. issue #1615.
• Validator: fixed validating radio buttons with a name as indexed array, issue #1620
• Textarea: added attribute data-max-height=0..n, now you can set max height for textarea component.
• Components: now, you can use components without common styles from metro-common.css, metro-reset.css, issue #1609
• Window: disable a window maximized/minimized action when attribute data-btn-max=false and user use double-click on then window caption, issue #1625
• Input: added style prop min-width=0, issue #1626
• Component: fixed method _runtime() for updating attribute data-role.
• Input: added attribute data-label. If this attribute defined, label element for input will be created automatically.
• Calendar picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.
• Time picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.
• Date picker: added attribute data-label. If this attribute defined, label element for input will be created automatically.
• Input mask: added new component. Currently, only for desktop browsers.
• Icons: new icons external, new-tab
• Countdown: fixed draw function, issue #1632
• Color: added ColorPrimitive with color primitive objects
• Color: fixed color type constructor for creating colors from string
• Color: added method mix(...): ColorType.mix(color) and Colors.mix(color1, color2). This method allows you to mix colors.
• Color: added methods channel(channelName, val), channels(obj). This method change specified color channel. Color must be a required format.
• Date picker: added methods enable(), disable()), toggleState(), added observing for prop disabled, issue #1633
• Time picker: added methods enable(), disable()), toggleState(), added observing for prop disabled, issue #1633

Metro 4.3.10

4.3.10

• Input: add API method setAutocompleteList(array|string), issue #1576
• Scrollbars: add styles with classes .scrollbar-type-1, .scrollbar-type-2, .scrollbar-type-3, .scrollbar-type-4
• NavView: fix pane close on mobile devices when inputs, inside a pane, receive a focus, issue #1580
• NavView: add now caption for navview-menu for compacted mode dsplayed on the left of icon when user hovering item
• Grid: fix offset-*-0 are missing in the grid system, issue #1583
• Grid: add gaps with classes gap-*, where * is one of 0, 8, 16, 24, 32, 40 in pixels
• NavView: fix scrolling menu in compact mode, issue #1579
• NavView: add API method toggleMode() to toggle between expanded and compacted modes, issue #1538
• Select: for API method data(newOptions, selected, delimiter) added second argument. Must be a string or array, if selected is a string, you can use delimiter argument to split string into array, issue #1497

Metro 4.3.9

4.3.9

• Component: _fireEvent push __this to arguments. __this contains HTMLElement
• Utils: fix function github() for executing callback
• Counter: fix for starting when page scrolls
• Counter: add attributes data-from, data-prefix, data-suffix. Prefix and suffix must be a plain text.
• Observer: add firing event attrchange when component attribute was ben changed. e.detail contains an object {attr, newValue, oldValue, __this}.
• General: add firing event hotkeybonded when hotkey for component was ben bonded. e.detail contains an object {__this, hotkey, fn}.
• General: all components fired event create when init. The e.detail contains an object {name, __this}.
• General: the document fired event component-create when a component was ben initialized. The e.detail contains an object {element, name}.
• Window: fix makeRuntime calling, issue #1574
• Window: fix make window resizable
• Typography: add italic and underline text classes, issue #1577

Metro 4.3.8

4.3.8

M4Q

• Animation: fixed using String.includes for IE11. Change to String.indexOF.
• Animation: add operator / to _getRelativeValue().
• Events: fix fire. Now main is constructor CustonEvent, for old - createEvent
• Manipulation: add method wrap, wrapAll, wrapInner. The method puts elements inside the wrapper and return wrapper(s).
• Init: change throw Error to console.warn when selector is # or .
• setImmediate: add support for process and web workers

Metro 4

• General: new module system. All components now defined as alone IIFE modules.
• Validator: fixed functions compare, equals, notequals to work not inside a form, issue #1542
• Rtl: remove form-rtl, accordion-rtl less files. RTL Styles moved to component style.
• Locales: added pt-BR Brazilian Portuguese language
• Toast: added method Metro.createToast(). This eq to Metro.toast.create()
• Components: event on[Component]Create now have context a HTMLElement and receive $(HTMLElement) as argument
• Keypad: fix Keypad backspace button click behavior on keypad, created at runtime, issue #1547
• Utils: improve function isType
• Utils: remove functions camelCase(), dashedName(). Use String.camelCase or $.camelCase() and String.dashedName()) or $.dashedName().
• Clock: add events onTick, onSecond
• String: add extensions includes(), camelCase(), dashedName(), shuffle()
• Array: add extensions includes()
• ListView: fixed event onNodeDblclick, issue #1453
• Ribbon menu: fix hovering when button disabled, issue #1551
• Components: new constructor function
• Colors: full refactoring, now its full equals to ColorJS
• ColorType: new custom type for color variable. Var can be defined as var c = new Color(...) or var c = new Metro.Color(...)
• Material Tabs: update to work in all browsers
• Animation: redesign module
• Animation: add effects zoom, swirl
• Tiles: remove prefix animate-* for values for attribute data-effect
• Core: removed meta attribute metro4:init:mode. Now Metro is ALWAYS initialized after the content has been loaded.
• IE: removed file ie.less. Styles moved to components styles.
• ListView: add method selectByAttribute(attrName, attrValue, true|false) for select/deselect items, issue #1554
• Template: new component. This component allows you to use javascript templates inside HTML elements.
• Table: fix using wrapper for skip, issue #1557
• Calendar picker: fix using attribute clsPrepend, issue #1558
• Toast: add new arguments format Metro.createToast(message, options). Where options is a plain object.
• Draggable: add attribute dragContext, you can set it for access to any object with drag events, issue #1565
• Window: add second argument context for events onDragStart, onDragStop, onDragMove, issue #1565
• Calendar picker: fix work in dialog-mode
• Tabs: fix work attribute clsTabsListItemActive, issue #1568
• Locales: add danish locale da-DK, issue #1570

Metro 4.3.7

4.3.7

M4Q

• Animation: a new engine for animation. The animate function changed. Now function receives one argument. Also, you can use old syntax :)
• Init: fix minor bug for creating elements in context
• Ajax: add parameter contentType. If this param has value false, Content-type can't be defined.
• Contains: add checks with :visible to method is. Example: $(...).is(':visible')
• Utils: add methods $.random(array | a, b), $.getUnit(a), $.strip(where, what), $.hasProp(obj, prop), $.dashedName(val)
• Classes: add method $(...).removeClassBy(mask)

Metro 4

• Source: reposition source code
• Builder: new builder config, and new builder version 2020.1. New version not compatibility with 4.3.6
• Input: fix append size and padding, issue #1512
• Ripple: added ripple call for any element, issue #1515
• Splitter: added event onResizeWindow. Setup this event with prop data-on-resize-window or event $(...).on('resizewindow', ...), issue #1516
• Table: add skip to page functionality, issue #1511
• Table: add attributes data-show-skip, data-table-skip-title, data-skip-wrapper, data-cls-table-skip, data-cls-table-skip-input, data-cls-table-skip-button
• Table: add event data-on-skip
• Common css: optimize lists, reset
• UtilsJS: improve isFloat function, issue #1518
• Icons: add whatsapp icon, issue #1510
• AudioButton: add new component for the button with role audio-button
• Select: fix prepend, append for input-small, input-large. With multiple, append and prepend will not displayed.
• Input: fix prepend, append for input-small, input-large. Issue #1522
• Counter: fix start if element already in viewport
• CSS: added metro-reset.css, metro-common.css, metro-components.css as standalone.
• Image magnifier: fix glass image when user resize original image
• Notifies: minor improve notify create method
• Donut: update for using new animate function to draw stroke-dasharray
• Counter: update for using new animate function to draw
• File: fix clear when user fire reset on form in drop mode, issue #1524
• Adblock: a new component for hunting on the ads blockers
• Core: refactoring for new component definition
• Audio: rename component to audio-player
• Video: rename component to video-player
• Calendar: minor upd for action buttons
• i18n: refactoring definition. Now each lang defined in own file
• Third party: third party components styles select2, datatables move to components and include to main
• Container: remove prop display: block
• Select: add using empty value for option, issue #1527
• Action button: fix sub actions position
• Additional colors: refactoring
• Utils: remove method random, to get random value from an array or two values, use $.random(array | a, b) from m4q
• Utils: remove method uniqueID, to get unique GUID, use $.uniqueID(prefix) from m4q
• Utils: remove method formData, to get form data as array, use $.serializeToArray(form) from m4q and $.serialize(form) to get stringify value with & divider
• Utils: remove method strToArray, to transform string to array, use String.prototype method String.prototype.toArray(delimiter, type, format)
• Utils: remove method callback, execute function or code, use method Utils.exec(fn, args, context)
• Sidebar: add attribute data-menu-scrollbar="true|false". Attribute enable or disable scrollbar in the sidebar menu, issue #1528
• Tag: new component. Used in tag-input, select, can be used as standalone.
• Ribbon menu: fix sizes and positions for ribbon-icon-button, ribbon-tool-button
• Menus: removed text-decoration for anchors (a) inside any types of menus
• Cookie: new class for cookie manipulation Metro.cookie. Contains methods: setCookie(), getCookie(), delCookie()
• Cookie disclaimer: new component for accept cookies for GDPR, and not only, issue #1530
• Metro icon font: add 65 new icons cross-light, document-file-* (64)
• Select: improved performance for creating options, issue #1534
• Select: remove dependency from d-menu
• Navview: add scrollable to navview-menu in compacted mode

Metro 4.3.6

4.3.6

M4Q

• M4Q: upd to 1.0.6
• M4Q Init: fix minor bug for creating elements in context
• M4Q Ajax: add parameter contentType. If this param has value false, Content-type can't be defined.

Metro 4

• ColorJS: fix functions RGB, RGBA
• Select: add focus state, issue #1488
• Checkbox: add focus state
• Radio: add focus state
• Select: add attribute data-cls-drop-container
• Dropdown: add important to .drop-left, .drop-right, .drop-up classes
• Table: add support formatMask for fields defined in table head thead
• ResetCSS: remove duplicate declarations
• Toast: add global setup. Related to issue #1493
• Streamer: now you can set event time up to a minute
• Streamer: now you can use for event size half and one-third constants
• Streamer: add events onDrawEvent, onDrawGlobalEvent, onDrawStream
• TreeView: fix attribute data-show-child-count
• CalendarPicker: add attribute data-value to set init input value, issue #1506
• Streamer: data-wheel now true by default
• Streamer: add attribute data-wheel-step to define scroll step for horizontal scrolling with mouse
• Streamer: fix horizontal scrolling with mouse.