<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PUBLOG &#187; html</title>
	<atom:link href="http://blog.webkitchen.cz/tag/html/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.webkitchen.cz</link>
	<description></description>
	<lastBuildDate>Sun, 25 Jul 2010 03:10:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>„Zobrazit zdrojový kód výběru“ pro Operu</title>
		<link>http://blog.webkitchen.cz/zdrojovy-kod-vyberu</link>
		<comments>http://blog.webkitchen.cz/zdrojovy-kod-vyberu#comments</comments>
		<pubDate>Fri, 05 Dec 2008 15:02:11 +0000</pubDate>
		<dc:creator>Jakub</dc:creator>
				<category><![CDATA[Česky]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[opera]]></category>
		<category><![CDATA[userjs]]></category>
		<category><![CDATA[webdev]]></category>

		<guid isPermaLink="false">http://blog.webkitchen.cz/?p=147</guid>
		<description><![CDATA[ &#8220;Zobrazit zdrojový kód výběru&#8221; (View Selection Source) — jednoduchý bookmarklet (favelet) nebo uživatelský JavaScript, který umožní zobrazení zdrojového kódu libovolné části HTML nebo XML stránky. Velmi užitečné zejména při tvorbě webu.

Zkuste si to!
Stačí označit nějaký text na této stránce, vybrat barevné schéma (nebo ponechat výchozí &#8220;Mozilla&#8221;) a kliknout na tlačitko níže:

 Mozilla  
 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-medium wp-image-90" title="Opera logo" src="http://blog.webkitchen.cz/wp-content/uploads/2008/11/ologo_wback.gif" alt="" width="138" height="52" /> &#8220;Zobrazit zdrojový kód výběru&#8221; (View Selection Source) — jednoduchý bookmarklet (favelet) nebo uživatelský JavaScript, který umožní zobrazení zdrojového kódu libovolné části HTML nebo XML stránky. Velmi užitečné zejména při tvorbě webu.</p>
<p><span id="more-147"></span></p>
<h3>Zkuste si to!</h3>
<p><strong>Stačí označit nějaký text na této stránce, vybrat barevné schéma (nebo ponechat výchozí &#8220;Mozilla&#8221;) a kliknout na tlačitko níže:</strong></p>
<p><label for="moz"></p>
<input id="moz" checked="checked" name="scheme" type="radio" value="mozilla" /> Mozilla </label> <label for="desert"></p>
<input id="desert" name="scheme" type="radio" value="desert" /> Desert</label> <label for="opera"></p>
<input id="opera" name="scheme" type="radio" value="opera" /> Opera</label></p>
<p><button id="view-selection-source-demo">View Selection Source!</button></p>
<h3>Tři způsoby instalace</h3>
<h4>1. User JavaScript (Uživatelský JavaScript)</h4>
<p>Nejkomplikovanější instalace, ale nejkomfortnější používání s možností přizpůsobení.</p>
<h5>Krok 1: Povolení uživatelských scriptů v Opeře</h5>
<p>Pro povolení použijte Nástroje &gt; Nastavení &gt; Pokročilé &gt; Obsah &gt; JavaScript options. Zde vyberte adresář, kde chcete mít uloženy scripty. Opera pak bude nahrávat všechny soubory s příponou .js jako uživatelské JavaScripty.</p>
<h5>Krok 2. Instalace &#8220;View Selection Source&#8221;</h5>
<p>Stáhněte si  <a href="http://www.webkitchen.cz/lab/opera/view-selection-source/js/view-selection-source.js">&#8220;View Selection Source&#8221;</a>User JS soubor. Uložte ho do adresáře, který jste zvolili v předchozím kroku. (Jeho umístění se můžete dozvědět též na interní stránce prohlížeče <a href="opera:about">opera:about</a>.</p>
<h5>Krok 3: Přidání položky &#8220;Zobrazit zdrojový kód výběru&#8221; do kontextového menu Opery</h5>
<p>Je potřeba lokalizovat soubor s nastavení menu. Běžte do Nástroje &gt; Nastavení &gt; Pokročilé &gt; Nástrojové lišty. Pokud zde v boxu Nastavení menu vidíte pouze položku Opera Standard, tak jí označte a klikněte na tlačítko <button>Duplikovat</button>.<br />
<img src="http://www.webkitchen.cz/lab/opera/view-selection-source/menu-configuration.png" alt="Menu configuration" width="455" height="114" /><br />
Jděte na stránku <a href="opera:about">opera:about</a> a nalezněte <em>Opera directory</em>. Jděte do podadresáře <em>menu</em> a otevřete soubor s příponou .ini ve své oblíbeném textovém editoru (např. Poznámkový blok, Vim, Textmate, jEdit, apod.). <strong>Před úpravami Operu vypněte.</strong><br />
V souboru vyhledejte sekci <em>Hotclick Popup Menu</em>. Na konec této sekce přidejte:</p>

<div class="wp_syntax"><div class="code"><pre class="ini" style="font-family:monospace;">Item, <span style="color: #933;">&quot;View selection source&quot;</span><span style="color: #000066; font-weight:bold;">=</span><span style="color: #933;">&quot;Go to page, &quot;</span>javascript:opera.getSelectionSource<span style="">&#40;</span><span style="">&#41;</span><span style="color: #933;">&quot;&quot;</span></pre></div></div>

<p><strong>Po úpravě by tato sekce měla vypadat nějak takto:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="ini" style="font-family:monospace;"><span style="color: #000066; font-weight:bold;"><span style="">&#91;</span>Hotclick Popup Menu<span style="">&#93;</span></span>
Item, <span style="">50872</span>         <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Copy</span>
Item, <span style="">67652</span>         <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Copy to note</span>
Platform Win2000-Unix-Mac, Feature Voice, Item, <span style="">70494</span> <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Speak selection</span>
--------------------<span style="">1</span>
Item, <span style="">65184</span>             <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Hotclick search, 200</span>
<span style="color: #666666; font-style: italic;">;Submenu, 291920, Search with menu</span>
Submenu, <span style="">291920</span>, Internal Search With
Item, <span style="">65187</span>         <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Hotclick search, 50</span>
Item, <span style="">65188</span>         <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Hotclick search, 51</span>
--------------------<span style="">2</span>
Submenu, <span style="">291960</span>, Translate menu
<span style="color: #666666; font-style: italic;">;Item, 65186        = Hotclick search, 52</span>
--------------------<span style="">3</span>
Item, <span style="">67394</span>             <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Go to page, </span><span style="color: #933;">&quot;%t&quot;</span>
Item, <span style="">65218</span>         <span style="color: #000066; font-weight:bold;">=</span><span style="color: #660066;"> Send text in mail</span>
--------------------<span style="">4</span>
Item, <span style="color: #933;">&quot;View selection source&quot;</span><span style="color: #000066; font-weight:bold;">=</span><span style="color: #933;">&quot;Go to page, &quot;</span>javascript:opera.getSelectionSource<span style="">&#40;</span><span style="">&#41;</span><span style="color: #933;">&quot;&quot;</span></pre></div></div>

<p>A výsledek:</p>
<p><img src="http://www.webkitchen.cz/lab/opera/view-selection-source/usage1.png" alt="View Selection Source in menu" width="372" height="229" /></p>
<h4>2. Favelet v konfiguračním souboru pro menu</h4>
<p>Toto je velmi podobné předchozí variatně, ale není potřeba soubor s uživatelským JavaScriptem, celý kód se přidá do definice menu. Prosím následujte kroky 1 a 3 z předchozí varianty instalace. Ve třetím kroku vložte do menu místo kódu z předchozí varianty kód z <a href="http://www.webkitchen.cz/lab/opera/view-selection-source/js/view-selection-source-menu-item.js.txt">tohoto souboru</a>.</p>
<h4>3. Klasický bookmarklet</h4>
<p>Nejjednodušší způsob instalace. Vytvořte novou položku v &#8220;Oblíbených&#8221; a do políčka pro adresu vložte kód z <a href="http://www.webkitchen.cz/lab/opera/view-selection-source/js/view-selection-source-bookmarklet.js.txt">tohoto souboru</a>.<br />
<img src="http://www.webkitchen.cz/lab/opera/view-selection-source/favelet.png" alt="Create favelet" /></p>
<h3 id="cust">Přizpůsobení</h3>
<p>Pokud jste zvolili instalaci jako uživatelský JavaScript, tak si můžete zvolit jedno ze tří připravený barevných schémat zvýrazňování syntaxe, případně si napsat schéma vlastní. Např. definice výchozího schéma &#8220;Mozilla&#8221; vypadá takto:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">schemes.<span style="color: #660066;">mozilla</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span>     <span style="color: #3366CC;">'White'</span><span style="color: #339933;">,</span>
    fontFamily<span style="color: #339933;">:</span>     <span style="color: #3366CC;">'monospace'</span><span style="color: #339933;">,</span>
    fontSize<span style="color: #339933;">:</span>           <span style="color: #3366CC;">'12px'</span><span style="color: #339933;">,</span>
    stringColor<span style="color: #339933;">:</span>        <span style="color: #3366CC;">'Black'</span><span style="color: #339933;">,</span>
    bracketColor<span style="color: #339933;">:</span>       <span style="color: #3366CC;">'Black'</span><span style="color: #339933;">,</span>
    tagNameColor<span style="color: #339933;">:</span>       <span style="color: #3366CC;">'Purple'</span><span style="color: #339933;">,</span>
    tagNameBold<span style="color: #339933;">:</span>        <span style="color: #3366CC;">'bold'</span><span style="color: #339933;">,</span>
    attrNameColor<span style="color: #339933;">:</span>      <span style="color: #3366CC;">'Black'</span><span style="color: #339933;">,</span>
    attrNameBold<span style="color: #339933;">:</span>       <span style="color: #3366CC;">'bold'</span><span style="color: #339933;">,</span>
    attrValueColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Blue'</span><span style="color: #339933;">,</span>
    attrValueBold<span style="color: #339933;">:</span>      <span style="color: #3366CC;">'normal'</span><span style="color: #339933;">,</span>
    quoteColor<span style="color: #339933;">:</span>     <span style="color: #3366CC;">'Blue'</span><span style="color: #339933;">,</span>
    quoteBold<span style="color: #339933;">:</span>      <span style="color: #3366CC;">'bold'</span><span style="color: #339933;">,</span>
    commentColor<span style="color: #339933;">:</span>       <span style="color: #3366CC;">'Green'</span><span style="color: #339933;">,</span>
    commentBold<span style="color: #339933;">:</span>        <span style="color: #3366CC;">'normal'</span><span style="color: #339933;">,</span>
    cdataMarkColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#ff6600'</span><span style="color: #339933;">,</span>
    cdataMarkBold<span style="color: #339933;">:</span> <span style="color: #3366CC;">'bold'</span><span style="color: #339933;">,</span>
    cdataContentColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#ff6600'</span><span style="color: #339933;">,</span>
    cdataContentBold<span style="color: #339933;">:</span> <span style="color: #3366CC;">'normal'</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Další nastavení lze provést prostřednictví proměnné conf, ve zdrojovém kódu scriptu, výchozí hodnoty jsou tyto:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> conf <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// window settings</span>
    wWidth<span style="color: #339933;">:</span>            <span style="color: #CC0000;">700</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// window width</span>
    wHeight<span style="color: #339933;">:</span>           <span style="color: #CC0000;">300</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// window height</span>
    wTop<span style="color: #339933;">:</span>              <span style="color: #CC0000;">100</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// window position Y</span>
    wLeft<span style="color: #339933;">:</span>              <span style="color: #CC0000;">50</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// window position X</span>
    closeOnKeystroke<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
    closeKeyCode<span style="color: #339933;">:</span>       <span style="color: #CC0000;">27</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// ESC</span>
    toggleWrapKeyCode<span style="color: #339933;">:</span> <span style="color: #CC0000;">13</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// ENTER</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// syntax highligthing settings</span>
    scheme<span style="color: #339933;">:</span> schemes.<span style="color: #660066;">desert</span> <span style="color: #006600; font-style: italic;">// set to the your prefered color scheme</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<h3>Licence</h3>
<p>Tento program je volný software; můžete jej šířit a modifikovat podle ustanovení Obecné veřejné licence GNU, vydávané Free Software Foundation; a to buď verze 2 této licence anebo (podle vašeho uvážení) kterékoli pozdější verze.</p>
<p><script src="/js/view-selection-source-demo.js" type="text/javascript"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.webkitchen.cz/zdrojovy-kod-vyberu/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
