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.

Metro 4.3.5

4.3.5

M4Q

• M4Q: upd to 1.0.5
• M4Q Events: fix firing events, Metro 4 issue #1476
• M4Q Events: optimize method trigger, now this is a synonym of fire

Metro 4

• Tag input: change trigger defining
• Tag input: add clear button with attributes clearButton, clsClearButton, clearButtonIcon
• Tag input: add attributes clsComponent, clsInput
• Tag input: add event onClear
• List: add attribute data-sort-initial to sorts on create component, issue #1475
• Tag input: add attribute data-static and static mode for data-static='true' or if present attribute readonly
• Tag input: add method toggleStatic([true|false])
• Select: fix clearing select-input, issue #1477
• Calendar picker: fix closing calendar when user click on overlay, issue #1478
• Select: fix styles for input-large, input-small classes
• Tag input: change keyup to keydown for tag trigger event
• Tag input: add event onTagTrigger
• Tag input: add removing last tag on current value is empty end user press Backspace, you can disable it with attribute data-backspace='false'
• Draggable: add attribute data-timeout for set timeout before creating component
• Components: creating components can be deferred with attribute data-[componentName]-deferred=[ms]. Example: <div data-role='draggable' data-draggable-deferred='2000'>...</div>
• Counter: add attribute data-start-on-viewport. If attribute value is true, counter started after element showed in viewport. You can combine this with data-timeout
• Select: fix bug with data-filter='false'
• File: fix method clear for mode dropzone
• Select: add mode button

Metro 4.3.4

4.3.4

M4Q

• M4Q: upd to 1.0.4
• M4Q Manipulation: optimise append, prepend to one definition for IE
• M4Q Script: add $.script, $.fn.script to execute scripts from element or create script object
• M4Q Manipulation: $.fn.append, $.fn.prepend now support script tag processing
• M4Q Clone: now support cloning data if second argument withDatais true - $(el).clone(true, true)
• M4Q Events: now you can define event name with hyphen or in camelCase notation. Example: mouse-down, accordionCreate
• M4Q Ajax: fix handler for sending data
• M4Q Ajax: fix $.json if returned value can't be parsed
• M4Q Ajax: fix post for object
• $: add $.serializeToArray(form), $serialize(form)
• M4Q Events: fixed removeEventListener

Metro 4

• Animations: put animations to separate less/css file metro-animations
• Object animations: add .flip-card
• Object animations: add .post-card
• Inputs: change placeholder font-size to 14px, add text-ellipsis
• Utils CSS: add class .stop-pointer
• Role naming: you can now use a hyphen to separate words in verbose component names for the data-role attribute. Example: data-role='button-group'' and data-role='buttongroup'' are equivalent.
• Drag Items: add new component, issue #1336
• Table: fix viewPath for getting view from server
• Table: fix colspan for message emptyTableTitle
• Checkbox: add using attribute readonly
• Switch: add using attribute readonly
• Table: fix viewPath for saving view on server
• Animation CSS: relocation
• AppBar: fix app-bar-menu behavior when user resize a window
• Slider: fix hint for IE11
• Window: fix interop m4q and jquery for Metro.window.create()
• Splitter: fix for IE11
• AppBar: add events onMenuOpen, onMenuClose, onMenuExpand, onMenuCollapse