Web Windows Metro Controls je nyni plne responzivni

Rozhodl jsem se trochu ozivit WindowsMetroControls, kde jsem v cestine popsal pouzivani jednotlivych controlu v metro W8 aplikacich. Myslim ze to bylo pro W8 a ne W8.1 takze uz to je dost stare. Hlavne ale slo o to, aby to bylo konecne responzivni, aby Google oznacil cely muj web jako “optimalizovan pro mobily”..i kdyz to bych musel dat pryc ty Dart programy, jenze nevim kde, mam jen blog a 1 hosting.

Na problem jsem narazil hned na zacatku, ty utrzky kodu meli nastavene zvyrazneni primo jako html tagy, a prohlizec/javascript uz pak nedelal nic. Jako zvyraznovac jsem nove pouzil https://highlightjs.org/ . Ukazka stareho kodu s natvrdo vlozenymi HTML tagy:

<span class="title">Grid</span> 
<span class="attribute">x:Name</span>=
<span class="value">"columnGrid"</span> 
<span class="attribute">Background</span>=
<span class="value">"Black"</span> 
<span class="attribute">Width</span>=
<span class="value">"900"</span> 
<span class="attribute">Height</span>=
<span class="value">"200"</span><br> 
<span class="tag">
<span class="title">RichTextBlock</span> 
<span class="attribute">x:Name</span>=
<span class="value">"rtb1"</span> 
<span class="tag">class="title">RichTextBlock</span><br> 
<span class="tag"></
<span class="title">Grid</span>

Grid

x:Name=

"columnGrid"

Background=

"Black"

Width=

"900"

Height=

"200"

RichTextBlock

x:Name=

"rtb1"

class="title">RichTextBlock

</

Grid

Nyni ten samy kod vypada takto: <pre><code><Grid x:Name=”columnGrid” Background=”Black” Width=”900″ Height=”200″> <RichTextBlock x:Name=”rtb1″></RichTextBlock> </Grid></code></pre> Stary kod na tento novy mi vytvoril tento:

foreach (var item in htmlFiles)
{
    HtmlParser hd = new HtmlParser();
    string text = File.ReadAllText(item);
    //text = text.Replace(" <", " <").Replace(">", ">");
    text = text.Replace("> < <", ">&lt2; <").Replace(">> <", ">&gt2; <");
    hd.LoadHtml(" <wmc>" + text.Replace(" <", "&lt2;").Replace(">", "&gt2;") + " </wmc>");
    List<HtmlNode> dd = hd.ReturnTagsRek(hd.DocumentNode, "pre");
    foreach (HtmlNode item2 in dd)
    {
        HtmlParser hd2 = new HtmlParser();
        //.Replace("> < <", "> < <")
        //
        //.Replace(" <span>", "").Replace(" </span>", "")
        var item3 = item2.InnerHtml.Replace(" <", "&lt2;").Replace(">", "&gt2;");
        string ddWoHtml = " <code>" + HtmlHelper.StripAllTags(item3) + " </code>";
        item2.InnerHtml = ddWoHtml;
    }
    string nfn = item.Replace("html2", "html");
    if (File.Exists(nfn))
    {
        File.Delete(nfn);
    }
    string nl = Environment.NewLine;
    string p1 = SH.ReplaceAll(hd.DocumentNode.InnerHtml.Replace("&lt2;", " <").Replace("&gt2;", ">"), nl, "  ");
    string p2 = SH.ReplaceAll(p1, nl, nl + nl);
    string[] l = SH.GetLines(p2);
    l = CA.RemoveStringsEmpty2(l);
    File.WriteAllLines(nfn, l);
} </HtmlNode>

foreach (var item in htmlFiles)

{

HtmlParser hd = new HtmlParser();

string text = File.ReadAllText(item);

//text = text.Replace(" <", " <").Replace(">", ">");

text = text.Replace("> < <", ">&lt2; <").Replace(">> <", ">&gt2; <");

hd.LoadHtml(" <wmc>" + text.Replace(" <", "&lt2;").Replace(">", "&gt2;") + " </wmc>");

List<HtmlNode> dd = hd.ReturnTagsRek(hd.DocumentNode, "pre");

foreach (HtmlNode item2 in dd)

{

HtmlParser hd2 = new HtmlParser();

//.Replace("> < <", "> < <")

//.Replace(" ", "").Replace(" ", "")

var item3 = item2.InnerHtml.Replace(" <", "&lt2;").Replace(">", "&gt2;");

string ddWoHtml = " <code>" + HtmlHelper.StripAllTags(item3) + " </code>";

item2.InnerHtml = ddWoHtml;

}

string nfn = item.Replace("html2", "html");

if (File.Exists(nfn))

{

File.Delete(nfn);

}

string nl = Environment.NewLine;

string p1 = SH.ReplaceAll(hd.DocumentNode.InnerHtml.Replace("&lt2;", " <").Replace("&gt2;", ">"), nl, " ");

string p2 = SH.ReplaceAll(p1, nl, nl + nl);

string[] l = SH.GetLines(p2);

l = CA.RemoveStringsEmpty2(l);

File.WriteAllLines(nfn, l);

} </HtmlNode>

A tohle je vsechno. Jediny problem je ze se mi odstranilo odsazeni, ale jinak to neslo, takze nekdy budu muset pouzit nejaky XAML/C# formatter, at mi ho tam vrati. Hlavne ze to uz bude responzivni. Windows Phone:

Android:

Chrome na Windows, po staru:

Chrome na WIndows, novy vzhled:

A Google Webmaster Tools souhlasi:

http://windowsmetrocontrols.sunamo.cz/

Leave a Reply Cancel reply