metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 implements several useful functions that are accessible through the special object."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Functions - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-done="console.log(arguments[0])" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Functions</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Functions</h1> <p class="text-leader"> Metro 4 implements several useful functions that are accessible through the special object. </p>  <h3>About</h3> <p> All special utilities functions stored in <code>Metro.utils</code> object. </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>isUrl(v)</code></td> <td>Checks if value is url</td> </tr> <tr> <td><code>isTag(v)</code></td> <td>Checks if value is tag.</td> </tr> <tr> <td><code>isColor(v)</code></td> <td>Checks if value is hex color. #fff, #ffffff - true</td> </tr> <tr> <td><code>isEmbedObject(v)</code></td> <td>Checks if value is embed object, value to check - html string</td> </tr> <tr> <td><code>isVideoUrl(v)</code></td> <td>Checks if value is youtube or vimeo video link</td> </tr> <tr> <td><code>isDate(v)</code></td> <td>Checks if value is valid date string</td> </tr> <tr> <td><code>isInt(v)</code></td> <td>Checks if value is integer</td> </tr> <tr> <td><code>isFloat(v)</code></td> <td>Checks if value is float</td> </tr> <tr> <td><code>isTouchDevice()</code></td> <td>Checks if device is touchable</td> </tr> <tr> <td><code>isFunc(v)</code></td> <td>Checks if value is function</td> </tr> <tr> <td><code>isObject(v)</code></td> <td>Checks if value is object</td> </tr> <tr> <td><code>isArray(v)</code></td> <td>Checks if value is array</td> </tr> <tr> <td><code>isType(v, t)</code></td> <td>Checks if value is a type: isType(v, 'function')</td> </tr> <tr> <td><code>isMetroObject(el, type)</code></td> <td>Checks if element is a Metro component</td> </tr> <tr> <td><code>isJQueryObject(el)</code></td> <td>Checks if element is a jQuery object</td> </tr> <tr> <td><code>embedObject(el)</code></td> <td>Insert element into embed container. Return html string</td> </tr> <tr> <td><code>embedUrl(el)</code></td> <td>Insert youtube link into embed container. Return html string</td> </tr> <tr> <td><code>secondsToTime(seconds)</code></td> <td>Return object {hours, minutes, seconds}</td> </tr> <tr> <td><code>hex2rgba(hex, alpha)</code></td> <td>Return string 'rgba(x, x, x, a)'</td> </tr> <tr> <td><code>random(from, to)</code></td> <td>Return random value</td> </tr> <tr> <td><code>uniqueId()</code></td> <td>Return string in format <span class="no-wrap">xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx</span></td> </tr> <tr> <td><code>elementId(prefix)</code></td> <td>Return string. Based in datetime</td> </tr> <tr> <td><code>secondsToFormattedString(seconds)</code></td> <td>Return string "hh:mm:ss"</td> </tr> <tr> <td><code>callback(f, args, context)</code></td> <td>Synonym to exec function</td> </tr> <tr> <td><code>exec(f, args, context)</code></td> <td>Exec function or code with arguments and context</td> </tr> <tr> <td><code>isOutsider(el)</code></td> <td>Check element to outside of the view</td> </tr> <tr> <td><code>inViewport(el)</code></td> <td>Check element in viewport</td> </tr> <tr> <td><code>objectLength(el)</code></td> <td>Return object length.</td> </tr> <tr> <td><code>percent(a, b, r)</code></td> <td>Return percent value for b from a. If r is true, returned value is integer else - real</td> </tr> <tr> <td><code>camelCase(str)</code></td> <td>Return 'data-on-value' as 'dataOnValue'</td> </tr> <tr> <td><code>objectShift(obj)</code></td> <td>Return shifted object. Remove element with first key</td> </tr> <tr> <td><code>objectDelete(obj, key)</code></td> <td>Delete key from object and return it</td> </tr> <tr> <td><code>objectClone(obj)</code></td> <td>Copy object to clone and return it</td> </tr> <tr> <td><code>arrayDelete(arr, val)</code></td> <td>Delete from array by value and return it</td> </tr> <tr> <td><code>arrayDeleteByKey(arr, key)</code></td> <td>Delete key from array and return it</td> </tr> <tr> <td><code>arrayDeleteByMultipleKeys(arr, keys_array)</code></td> <td>Delete key from array and return new array</td> </tr> <tr> <td><code>nvl(data, other)</code></td> <td>Check data for null value and return other if null</td> </tr> <tr> <td><code>github(repo, callback)</code></td> <td>Get information from github and put then in callback</td> </tr> <tr> <td><code>detectIE()</code></td> <td>Detect if browser is Internet explorer or Edge</td> </tr> <tr> <td><code>detectChrome()</code></td> <td>Detect if browser is Chrome</td> </tr> <tr> <td><code>md5(str)</code></td> <td>Encode string with md5 algorithm</td> </tr> <tr> <td><code>encodeUri(str)</code></td> <td>Fix to base eencodeUri function</td> </tr> <tr> <td><code>pageHeight()</code></td> <td>Return real page height</td> </tr> <tr> <td><code>cleanPreCode(selector)</code></td> <td>Remove white spaces from code</td> </tr> <tr> <td><code>coords(el)</code></td> <td>Return element coordinates as object {top, left}</td> </tr> <tr> <td><code>positionXY(event, type)</code></td> <td>Return position for type: screen, page, client</td> </tr> <tr> <td><code>clientXY(event)</code></td> <td>Return position</td> </tr> <tr> <td><code>pageXY(event)</code></td> <td>Return position</td> </tr> <tr> <td><code>screenXY(event)</code></td> <td>Return position</td> </tr> <tr> <td><code>isRightMouse(event)</code></td> <td>Check if user click on right mouse button</td> </tr> <tr> <td><code>hiddenElementSize(el, includeMargin)</code></td> <td>Return element size as object {width, height}</td> </tr> <tr> <td><code>getStyle(el, pseudo)</code></td> <td>Return element calculated styles</td> </tr> <tr> <td><code>getStyleOne(el, property)</code></td> <td>Return element calculated styles for specified property</td> </tr> <tr> <td><code>getTransformMatrix(el)</code></td> <td>Return element transform matrix</td> </tr> <tr> <td><code>computedRgbToHex(rgb)</code></td> <td>Return hex value for computed element color.</td> </tr> <tr> <td><code>computedRgbToHex(rgb)</code></td> <td>Return hex value for rgb string 'rgb(x, x, x)' => #xxxxxx</td> </tr> <tr> <td><code>computedRgbToRgba(rgb, alpha)</code></td> <td>Return rgba string for rgb string 'rgb(x, x, x)' => 'rgba(x, x, x, a)'</td> </tr> <tr> <td><code>computedRgbToArray(rgb)</code></td> <td>Return array for string 'rgb(x, x, x)' => [x, x, x]</td> </tr> <tr> <td><code>hexColorToArray(c)</code></td> <td>Convert hex color value to array</td> </tr> <tr> <td><code>hexColorToRgbA(c, a)</code></td> <td>Convert hex color value rgba string: '#xxxxxx' => 'rgba(x, x, x, a)'</td> </tr> <tr> <td><code>getInlineStyles(el)</code></td> <td>Return element inline styles as array</td> </tr> <tr> <td><code>updateURIParameter(uri, key, val)</code></td> <td>Update parameter in Uri</td> </tr> <tr> <td><code>getURIParameter(uri, key)</code></td> <td>get parameter from Uri</td> </tr> <tr> <td><code>getLocales()</code></td> <td>Get registered metro locales</td> </tr> <tr> <td><code>addLocale(data)</code></td> <td>Register metro locale in runtime</td> </tr> <tr> <td><code>strToArray(str, delimiter)</code></td> <td>Convert string to array</td> </tr> <tr> <td><code>aspectRatioH(width, ratio)</code></td> <td>Return height for specific ratio</td> </tr> <tr> <td><code>aspectRatioW(height, ratio)</code></td> <td>Return width for specific ratio</td> </tr> <tr> <td><code>valueInObject(obj, value)</code></td> <td>Check if value exist in object</td> </tr> <tr> <td><code>keyInObject(obj, key)</code></td> <td>Check if key exist in object</td> </tr> <tr> <td><code>newCssSheet(media)</code></td> <td>Create css sheet object</td> </tr> <tr> <td><code>addCssRule(sheet, selector, rules, index)</code></td> <td>Add rule to css sheet object</td> </tr> <tr> <td><code>media(query)</code></td> <td>Check media query</td> </tr> <tr> <td><code>mediaModes()</code></td> <td>Get current media points</td> </tr> <tr> <td><code>mediaExist(m)</code></td> <td>Return true if point exist in current medias</td> </tr> <tr> <td><code>inMedia(m)</code></td> <td>Check if point is current media</td> </tr> <tr> <td><code>isValue(val)</code></td> <td>Return true if val not in [undefined, null, ""]</td> </tr> <tr> <td><code>isNegative(val)</code></td> <td>Return true if val less then 0</td> </tr> <tr> <td><code>isPositive(val)</code></td> <td>Return true if val more then 0</td> </tr> <tr> <td><code>isZero(val)</code></td> <td>Return true if val is 0 (int or float)</td> </tr> <tr> <td><code>between(val, bottom, top, equals)</code></td> <td>Return true if val between bottom and top</td> </tr> <tr> <td><code>parseMoney(val)</code></td> <td>Return numeric value from any money format. Ex: $5,640.63 -> 5640.63</td> </tr> <tr> <td><code>func(string)</code></td> <td>Return function object</td> </tr> <tr> <td><code>nearest(val, precision, down)</code></td> <td>search for the nearest integer, a multiple of required. Ex: Metro.utils.nearest(37, 5, false) -> 40, Metro.utils.nearest(37, 5, true) -> 35</td> </tr> <tr> <td><code>copy(el)</code></td> <td>Copy element to clipboard</td> </tr> <tr> <td><code>isLocalhost()</code></td> <td>Check if current location is localhost</td> </tr> <tr> <td><code>getCursorPosition(element, event)</code></td> <td>Return mouse or pointer position as x, y</td> </tr> <tr> <td><code>getCursorPositionX(element, event)</code></td> <td>Return mouse or pointer position x</td> </tr> <tr> <td><code>getCursorPositionY(element, event)</code></td> <td>Return mouse or pointer position y</td> </tr> <tr> <td><code>formData(form)</code></td> <td>Return named inputs as obj as pairs <code>name: value</code></td> </tr> </tbody> </table> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>