Impressive component library for expressive web development

The new version (1.0) will be available in the next 2 weeks.

In new version:

• refactoring and optimization of code
• multi level dropdown menu
• new type of menus
• all windows 8 main colors (45)
• specific background colors (21) for tiles container with special outline color for tile
• all javascript plugins as jquery.widget
• new size of tile
• If possible, all issues will be considered
• .....
• input file

Hello.

First of all congratulate them for this great job.

I work with Asp.Net Core 3.1 (Razor Pages) and I have a piece of code that gives an error when I load metro.min.js.

If I comment the line that loads metro.min.js or put my piece of code before loading metro.min.js there is no error.

The error is as follows: (index):352 Uncaught SyntaxError: Invalid regular expression: / `

    function () {
        var a = this.concat();
        for (var i = 0; i < a.length; ++i) {
            for (var j = i + 1; j < a.length; ++j) {
                if (a[i] === a[j])
                    a.splice(j--, 1);
            }
        }
        return a;
    }

` /: Nothing to repeat at String.search () at (index):352

My piece of code is in _Layout.cshtml and is as follows:

`

<script src="~/_content/Comunes/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="~/_content/Comunes/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/_content/Comunes/lib/metro/js/metro.js"></script>

<script src="~/_content/Comunes/lib/jsGrid/jsgrid.min.js"></script>
<script src="~/_content/Comunes/lib/jsGrid/i18n/jsgrid-es.js"></script>

<script src="~/_content/Comunes/lib/spectrum-colorpicker/spectrum.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

<script src="~/_content/comunes/js/funciones.js" asp-append-version="true"></script>
<script src="~/_content/comunes/js/ventana.js" asp-append-version="true"></script>

<script>
    cultureInfo = '@System.Globalization.CultureInfo.CurrentCulture';
    phFecha = '@System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern';
    phFecha = phFecha.toLowerCase(); // (phFecha = d/mm/yyyy)

    let sFecha = phFecha.split("/");
    for (var i in sFecha) {
        if ("md".search(sFecha[i])) {
            if (sFecha[i].length == 1) {
                sFecha[i] = sFecha[i].repeat(2);
            }
        }
    }
    phFecha = sFecha[0] + "/" + sFecha[1] + "/" + sFecha[2];
</script>

`

I'm having trouble getting the navigation bar to work. I'm using Jquery ver 2.1.1. I've validated that jquery is working (added a little alert for window load). The navigation bar itself is rendering, but the dropdown just does not work. I'm using Visual Studio and installed the package via nuget.

JS Files included: metro.min.js jquery-2.1.1.js

CSS Files: metro-bootstrap.css metro-bootstrap-responsive.css

Please help.

Hi after yesterday's update dialogs stop working, and when I try to open dialog, I only get message "Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog". There is data-role="dialog" in dialog for sure, as dialogs worked in older versions and rollback to ver. 4.2 helped as well.

Hello sir Can i use this framework in Vue js? the datepicker and calendar seem not working in vue js but other input is working..

 <label>Calendar Picker</label>    
                    <input type="text" data-role="calendarpicker" v-model="calendar">
  <label>Date Picker</label>    
                    <input data-role="datepicker" v-model="date"> 

Describe the bug When selecting a date it chooses 2 dates.

To Reproduce https://codepen.io/RodolfoXDR/pen/YzQGzYX

Expected behavior Work as on documentation

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Metro Version 4.5.0

When I open a Dialog with setContent(), it loads onto the bottom of the screen. When i minimize and maximize the browser or change browser window width or height, the dialog centers properly.

Is there a way to redraw or refresh dialog position before opening? or is there a solution??

Thank you

Hi everybody, I'm using the class "input-control text" and I need a "" tag which has "btn-clear" class, happen that when I Click the button, doesn't clear input else submit the form. I know because I can see that the page loads and later I can see on the direction's bar the GET string. Help.. I'm using this wonderful framework into a JSPproject. Thanks.

Please consider the following code:

<div class="page-header bg-color-white" style="z-index:1000">
    <div class="page-header-content ">
        <h1>Title</h1>
        <ul class="menu">
            <li data-role="dropdown">
                <a href="#">
                    <div class="user-login">
                        <div class="name">
                            <span class="first-name">First</span>
                            <span class="last-name">Last</span>
                        </div>
                        <div class="avatar">
                            <img src="/usr/watashi/avatar100.png" />
                        </div>
                    </div>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Logoff</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

The idea is a context menu that appears when the avatar/username is clicked, but this concept seems to not work. Any thoughts?

The below code is for metro 3 and working fine. Not working in metro 4 because of backward compatibility issues. Please guide me to work with treeview in metro 4.

html.txt

Javascript

bankingQ.events.on(document, 'treeNodeToggled', 'contextItem', function (e, expanded) {

        if (event.target.parent != ".node") {
            var targetNode = event.target.offsetParent;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }
        else {
            var targetNode = event.target.parentNode;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }

        if (expanded) {
            $(targetNode).removeClass('collapsed');

            if (customerType == 2) {
                getServicesForCustomer(targetNode, customerId);
            }
            else if (customerType == 3)
                getClientsForCustomer(targetNode, customerId, false);

            event.stopPropagation();
        }
        else
            $(targetNode).addClass('collapsed');
    }, null, true);

Очень нравятся ваши работы! Пытаюсь потестить, подскажите в чем проблема с dialog выдает вот такою ошибку Uncaught ReferenceError: addTouchEvents is not defined ...и если я правильно понимаю обработка форм и прочее можно размещать, здесь: onShow: function(_dialog){ Спасибо!

Describe the bug The METRO UI Builder at https://builder.metroui.org.ua/ has switches to minify code and to include source maps. These buttons do not have an effect: The code is neither minified (I tried both switch position) nor there is a source map includes (which make sense only if the code was minified, of course)

To Reproduce Go to https://builder.metroui.org.ua/build.html and try to download minified code.

Expected behavior Minified code ad source map in the zip-file, if the appropriate switch position has been set

FYI we have notified you many months ago, by email that there is an vuln in your code, but you did not reply nor fixed the issue. So thats why i'm posting the issue here.

If you think this is already fixed, then see this ticket, as an open disclosure.

Describe the bug It is possible, to run js when triggering an notification, when the notification gets the body/value of the parameter.

 if (title) {
                t = $("<div>").addClass("notify-title").html(title);
                notify.prepend(t);
            }
            m = $("<div>").addClass("notify-message").html(message);
            m.appendTo(notify);

To Reproduce if you have an parameter that triggers an notification for metro, then just put "" into the parameter value. and you should see an alert poping up.

In our case, the problem was when searching for an url with a parameter, and the url was not found it would display the parameters content like " not found"

How to fix We fixed it, by just replacing the ".html" to ".text"

Additional context Thanks for reading, if you have any questions, then feel free to ask.

Describe the bug In the latest build, when you change the output date format from the default YYYY-mm-dd to anything else, the result is not correctly formatted.

To Reproduce Create a input with data-role="calendarpicker", set data-format="%d %b %Y" or data-format="%d %B %Y" . Now when you pick a date from the calendar, the result is %3 %b %undefined or %2 %B %undefined. The same problem can be seen in the example here: https://metroui.org.ua/calendarpicker.html

Expected behavior The date should be formatted correctly using the data-format format.

Screenshots

Describe the bug When loading the calendar the dates displayed in the month view are shifted incorrectly by one.

To Reproduce Load any of the source examples for the calendars and you will see.

Expected behavior I noticed just by checking the calendar in my computer and because it's highlighting the wrong day.

Screenshots

Describe the bug functions show()/hide toggle between display:none and display:block Unfortunately, when hidding a table row, the function show should go back to display:table-row