dom 0.5.1 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHART.html +429 -0
- data/MANUAL.html +414 -0
- data/lib/dom.rb +67 -49
- data/license +9 -0
- data/spec +387 -0
- metadata +15 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 447e2ef66627b59d955ba506ab690c3fefd3cb1e
|
|
4
|
+
data.tar.gz: 5c012176525f08a10fbffc129122774ba300b93c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: deae27daa28f1ce5cbd46c0c7761f7fd0a9510118c4f233dc1ad499cea426462e094002178cd8c0c4ee179a23e2ed2f7f0be7bf4a1ccf598275290099ecee863
|
|
7
|
+
data.tar.gz: e1434dd53c7130fdab81d69fe4f729f0b55009e81e1708e18cbdd1fff228097ebd82959f718d1ced4df703da115b891b78b70603080c50cef91c406e39d07092
|
data/CHART.html
ADDED
|
@@ -0,0 +1,429 @@
|
|
|
1
|
+
<html><head><meta charset="UTF-8" /><style>/*Author:sawa.The default design */*{box-sizing:border-box;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}body,table{font-family:sans-serif;font-size:12px;}body{margin:0;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:row;height:100%;text-align:justify;text-rendering:optimizelegibility;color:hsl(100,0%,30%);background-color:hsl(0,0%,100%);word-break:normal;}#top,#top-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:18px;}#top *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}#top,#user #top-title{padding:2;background-color:hsl(0,0%,97%);color:hsl(0,0%,30%);}#dev #top-title{margin:1em;color:white;}#user #top-title,#dev #top{border-bottom:solid 6px hsl(211,85%,29%);}#top >span{margin-left:5;margin-right:5;display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;white-space:pre;padding-top:4;padding-bottom:4;}.separator{font-size:18px;color:hsl(60,5%,72%);margin-left:0.5em;margin-right:0.5em;}#left{padding:0 20 24 40;flex-basis:480px;flex-shrink:0;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;border-right:solid 1px hsl(60,5%,68%);background-color:#4F6B89;color:hsl(0,0%,100%);}#left .tablewrapper{max-height:32%;overflow-y:auto;border-top:solid 1px hsl(60,5%,85%);border-bottom:solid 1px hsl(60,5%,85%);}#left table{margin:0;width:100%;background-color:hsl(0,0%,100%);}#gemspec td:nth-child(1){white-space:nowrap;}#gemspec td:nth-child(2){word-break:break-all;}#files td:nth-child(3),#files td:nth-child(4){white-space:nowrap;}#files td:nth-child(4){text-align:right;}#right{display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;overflow:hidden;flex-grow:1;}#main{flex-basis:0;flex-grow:1;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;overflow-y:auto;}#user #main{padding-top:12;padding-bottom:12;padding-right:240;padding-left:240;}#dev #main{padding-top:12;padding-bottom:12;padding-right:40;padding-left:20;}#main:before{position:fixed;margin-top:20px;margin-left:-20px;content:"\25B8";/*blacktriangleright */}#user #main:before{top:234;}#dev #main:before{top:300;}[onclick]:not([folded]){cursor:pointer;}[onclick][folded="true"]{cursor:s-resize;}[onclick][folded="false"]{cursor:n-resize;}table{border-collapse:collapse;margin-top:1em;margin-bottom:1em;}tr{border-color:hsl(60,27%,78%);border-style:solid;}#left tr:first-of-type{border-left-width:1px;border-right-width:1px;border-top-width:0;border-bottom-width:1px;}#left tr:last-of-type{border-left-width:1px;border-right-width:1px;border-top-width:1px;border-bottom-width:0;}#main tr,#left tr:not(:last-of-type):not(:first-of-type){border-left-width:1px;border-right-width:1px;border-top-width:1px;border-bottom-width:1px;}td{padding-left:3px;padding-right:3px;border-style:solid;border-color:hsl(60,27%,78%);border-width:1px;}figure{text-align:center;margin-left:0;margin-right:0;}figcaption{text-align:center;margin:2;}input{vertical-align:middle;}h1,h2,h3,h4{display:flex;flex-direction:row;align-items:center;white-space:pre-wrap;word-break:break-word;font-weight:normal;/*color:hsl(180,93%,6%);*/}h1{color:hsl(9,30%,15%);}h2{font-size:163%;margin-left:1em;margin-right:0.5em;color:hsl(9,30%,15%);}h3{font-size:140%;margin-left:1em;margin-right:0.5em;padding-left:1em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}h4{font-size:120%;margin-left:1em;margin-right:0.5em;padding-left:2em;border-bottom:solid 1px hsl(0,0%,80%);font-style:oblique;color:hsl(9,30%,15%);}h5{font-size:110%;margin-left:1em;margin-right:0.5em;padding-left:3em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}h6{font-size:100%;margin-left:1em;margin-right:0.5em;padding-left:4em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}.module-header{/*Margin among `h2.module-header`does not collapse because of extra embedding level `.margin`.Hence margin needs to be set to half of other `h2`.*/margin-top:0.415em;margin-bottom:0.415em;}.feature:not(:first-child)[onclick]:hover{background-color:hsl(90,10%,97%);}.feature-name{font-size:110%;font-weight:bold;font-family:sans-serif;}[folded="true"]>h1,[folded="true"]>h2,[folded="true"]>h3,[folded="true"]>h4,[folded="true"]>h5,[folded="true"]>h6{box-shadow:inset 0px -21px 46px -26px hsla(0,0%,0%,0.2);}.feature-contents{padding-left:1em;}.head{font-weight:bold;font-family:sans-serif;font-size:15px;}.user-item,.dev-item{margin-top:1;margin-bottom:1;padding-left:0.5em;padding-right:0.5em;border-radius:5px;}#dev .user-item{background-color:hsl(180,20%,86%);padding-top:0.1px;padding-bottom:0.1px;}.diagram{text-align:left;margin:0.75em 2em;}.mixins{display:inline-block;margin:2 1;background-color:#c2ccd5;border:solid 1px #246a7d;color:#246a7d;padding:1 4;border-radius:2px;font-size:10.5px;}.mixins >div{width:100%;text-align:center;line-height:2.55ex;}.mixins >.baseline ~div{float:left;clear:both;}.p,li{font-family:serif;font-size:17px;}.p{margin-top:1em;margin-bottom:1em;}.CodeRay,table,figure{margin-top:1.33em;margin-bottom:1.33em;margin-left:2em;margin-right:2em;}.dev-text,table{font-family:sans-serif;font-size:13px;}.CodeRay{overflow-x:auto;}.CodeRay,code{font-size:12px;}.inline{padding:3px 4px;line-height:2.5ex;border-radius:0.4ex;white-space:pre-wrap;font-size:12px;background-color:hsl(50,35%,89%);color:hsl(0,0%,40%);word-break:break-all;}li{margin-top:5;margin-bottom:5;}.indent{padding-left:2.3em;}.hang-indent{margin-right:-2.3em;}.statistics{font-size:12px;}#current{color:black;font-weight:bold;}.navigation{display:inline-flex;flex-direction:row;align-items:center;}.mode.tag,.arrow.tag,.missing_doc.tag,.navigation .bad_doc.tag,.agenda.tag,.log.tag,.missing_test.tag,.bad_test.tag,.untestable.tag,.bug.tag,.success.tag,.benchmark.tag{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;white-space:pre;height:18px;margin:2 0;padding-left:5.5;padding-right:5.5;font-family:sans-serif;font-size:10px;font-weight:500;border-radius:9px;}.unimplemented.tag,.protected.tag,.private.tag,.public.tag,.constant.tag,.singleton.tag,.instance.tag,.undocumented.tag,.hidden.tag,.misplaced.tag,.moved.tag{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;white-space:pre;height:18px;margin:2 0;padding-left:5.5;padding-right:5.5;font-family:sans-serif;font-size:10px;font-weight:500;border-radius:2px;}.tag.mode,.tag.arrow{color:hsl(9,69%,16%);vertical-align:middle;line-height:100%;font-size:12px;}.constant{color:#DB7551;}.constant.tag{background-color:#DB7551;color:white;}.singleton{color:#68894F;}.singleton.tag{background-color:#68894F;color:white;}.instance{color:#4F6589;}.instance.tag{background-color:#4F6589;color:white;}.public{color:#090705;}.public.tag{background-color:#CCBBA7;border:solid 1px;}.private{color:#090705;}.private.tag{background-color:#9B7C59;border:solid 1px;}.protected{color:#D6AF86;}.protected.tag{background-color:#47160D;border:solid 1px;}.hidden,.moved{color:gray;}.hidden.tag,.moved.tag{background-color:white;color:#878787;border:solid 1px;}.agenda{color:#878787;}.agenda.tag{background-color:#878787;color:white;}.log{color:#878787;}.log.tag{background-color:white;color:#878787;border:solid 1px;}.undocumented,.misplaced,.missing_doc,.bad_doc,.missing_test,.bad_test{color:#F79833;}.navigation .bad_doc{font-weight:inherit;text-decoration:inherit;}.anchor .bad_doc{font-weight:bold;border-bottom:dotted 2px;}.undocumented.tag,.misplaced.tag,.missing_doc.tag,.navigation .bad_doc.tag,.missing_test.tag,.bad_test.tag{background-color:#F79833;color:white;}.untestable{color:hsl(54,43%,38%);}.untestable.tag{background-color:hsl(54,43%,38%);color:white;}.unimplemented,.bug{color:hsl(0,80%,50%);}.unimplemented.tag,.bug.tag{background-color:hsl(0,80%,50%);color:white;}.success{color:#00a15a;}.success.tag{background-color:#00a15a;color:white;}.backtrace col:nth-child(1){width:100%;}.backtrace td:nth-child(2)>code{white-space:nowrap;}.benchmark{color:hsl(263,43%,38%);}.benchmark.tag{background-color:hsl(263,43%,38%);color:white;}.barcharts{border-collapse:separate;border-spacing:3 0;}.barcharts col:nth-child(2){width:100%;}.barcharts td:nth-child(1)>code{float:right;font-size:73%;white-space:nowrap;}.barcharts td:nth-child(2){padding:3 0;background-color:hsl(250,7%,92%);}caption{margin:4;}.barchart{display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:row;height:21px;}.barchart .fill{padding:0 6;background-color:hsl(240,40%,50%);min-width:1;color:hsl(0,0%,63%);font-family:sans-serif;font-size:75%;text-align:right;white-space:nowrap;overflow:visible;line-height:21px;}.barchart .minedge{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:5px;border-bottom-width:5px;border-color:hsl(240,40%,50%);width:1px;}.barchart .maxedge{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:5px;border-bottom-width:5px;border-color:hsl(250,7%,92%);width:1px;}.barchart .min{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:10px;border-bottom-width:10px;border-color:hsl(240,40%,50%);}.barchart .max{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:10px;border-bottom-width:10px;border-color:hsl(250,7%,92%);}.verification{color:hsl(180,61%,50%);}.gray{color:darkgray;}.right{float:right;}.clear{clear:both;}/*Terminal decorations*/.italic{font-style:italic;}.bold{font-weight:bold;}.underline{text-decoration:underline;}.black{color:#000000;}.red{color:#c75646;}.green{color:#8eb33b;}.yellow{color:#d0b03c;}.blue{color:#72b3cc;}.magenta{color:#c8a0d1;}.cyan{color:#218693;}.white{color:#b0b0b0;}.bg-black{background-color:#5d5d5d;}.bg-red{background-color:#e09690;}.bg-green{background-color:#cdee69;}.bg-yellow{background-color:#ffe337;}.bg-blue{background-color:#9cd9f0;}.bg-magenta{background-color:#fbb1f9;}.bg-cyan{background-color:#77dfd8;}.bg-white{background-color:#f7f7f7;}</style><style>.CodeRay {background-color:#FFF;border:1px solid #CCC;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;color:#000;padding:1em 0px 1em 1em;}.CodeRay pre {margin:0px;}div.CodeRay {}span.CodeRay {white-space:pre;border:0px;padding:2px }table.CodeRay {border-collapse:collapse;width:100%;padding:2px }table.CodeRay td {padding:1em 0.5em;vertical-align:top;}.CodeRay .line-numbers,.CodeRay .no {background-color:#ECECEC;color:#AAA;text-align:right;}.CodeRay .line-numbers a {color:#AAA;}.CodeRay .line-numbers tt {font-weight:bold }.CodeRay .line-numbers .highlighted {color:red }.CodeRay .line {display:block;float:left;width:100%;}.CodeRay span.line-numbers {padding:0px 4px }.CodeRay .code {width:100%}ol.CodeRay {font-size:10pt }ol.CodeRay li {white-space:pre }.CodeRay .code pre {overflow:auto }.CodeRay .debug {color:white !important;background:blue !important;}.CodeRay .annotation {color:#007 }.CodeRay .attribute-name {color:#f08 }.CodeRay .attribute-value {color:#700 }.CodeRay .binary {color:#509;font-weight:bold }.CodeRay .comment {color:#998;font-style:italic;}.CodeRay .char {color:#04D }.CodeRay .char .content {color:#04D }.CodeRay .char .delimiter {color:#039 }.CodeRay .class {color:#458;font-weight:bold }.CodeRay .complex {color:#A08;font-weight:bold }.CodeRay .constant {color:teal;}.CodeRay .color {color:#0A0 }.CodeRay .class-variable {color:#369 }.CodeRay .decorator {color:#B0B;}.CodeRay .definition {color:#099;font-weight:bold }.CodeRay .directive {color:#088;font-weight:bold }.CodeRay .delimiter {color:black }.CodeRay .doc {color:#970 }.CodeRay .doctype {color:#34b }.CodeRay .doc-string {color:#D42;font-weight:bold }.CodeRay .escape {color:#666;font-weight:bold }.CodeRay .entity {color:#800;font-weight:bold }.CodeRay .error {color:#F00;background-color:#FAA }.CodeRay .exception {color:#C00;font-weight:bold }.CodeRay .filename {color:#099;}.CodeRay .function {color:#900;font-weight:bold }.CodeRay .global-variable {color:teal;font-weight:bold }.CodeRay .hex {color:#058;font-weight:bold }.CodeRay .integer {color:#099;}.CodeRay .include {color:#B44;font-weight:bold }.CodeRay .inline {color:black }.CodeRay .inline .inline {background:#ccc }.CodeRay .inline .inline .inline {background:#bbb }.CodeRay .inline .inline-delimiter {color:#D14;}.CodeRay .inline-delimiter {color:#D14;}.CodeRay .important {color:#f00;}.CodeRay .interpreted {color:#B2B;font-weight:bold }.CodeRay .instance-variable {color:teal }.CodeRay .label {color:#970;font-weight:bold }.CodeRay .local-variable {color:#963 }.CodeRay .octal {color:#40E;font-weight:bold }.CodeRay .operator {}.CodeRay .predefined-constant {font-weight:bold }.CodeRay .predefined {color:#369;font-weight:bold }.CodeRay .preprocessor {color:#579;}.CodeRay .pseudo-class {color:#00C;font-weight:bold }.CodeRay .predefined-type {color:#074;font-weight:bold }.CodeRay .reserved,.keyword {color:#000;font-weight:bold }.CodeRay .key {color:#808;}.CodeRay .key .delimiter {color:#606;}.CodeRay .key .char {color:#80f;}.CodeRay .value {color:#088;}.CodeRay .regexp {background-color:#fff0ff }.CodeRay .regexp .content {color:#808 }.CodeRay .regexp .delimiter {color:#404 }.CodeRay .regexp .modifier {color:#C2C }.CodeRay .regexp .function {color:#404;font-weight:bold }.CodeRay .string {color:#D20;}.CodeRay .string .string {}.CodeRay .string .string .string {background-color:#ffd0d0 }.CodeRay .string .content {color:#D14;}.CodeRay .string .char {color:#D14;}.CodeRay .string .delimiter {color:#D14;}.CodeRay .shell {color:#D14 }.CodeRay .shell .content {}.CodeRay .shell .delimiter {color:#D14 }.CodeRay .symbol {color:#990073 }.CodeRay .symbol .content {color:#A60 }.CodeRay .symbol .delimiter {color:#630 }.CodeRay .tag {color:#070 }.CodeRay .tag-special {color:#D70;font-weight:bold }.CodeRay .type {color:#339;font-weight:bold }.CodeRay .variable {color:#036 }.CodeRay .insert {background:#afa;}.CodeRay .delete {background:#faa;}.CodeRay .change {color:#aaf;background:#007;}.CodeRay .head {color:#f8f;background:#505 }.CodeRay .insert .insert {color:#080;font-weight:bold }.CodeRay .delete .delete {color:#800;font-weight:bold }.CodeRay .change .change {color:#66f;}.CodeRay .head .head {color:#f4f;}</style><title>dom Developer's Chart</title></head><body id="dev"><div id="left"><span id="top-title">“dom” Developer's Chart</span><div class="p"><span class="head">Gem Spec</span></div><div class="tablewrapper"><table id="gemspec" onmouseover="this.focus()" onmouseout="this.blur()" tabindex="0"><colgroup><col /><col /></colgroup><tbody><tr><td>extension dir</td><td></td></tr><tr><td>full gem path</td><td></td></tr><tr><td>gem dir</td><td></td></tr><tr><td>ignored</td><td></td></tr><tr><td>bin dir</td><td></td></tr><tr><td>cache dir</td><td></td></tr><tr><td>cache file</td><td></td></tr><tr><td>doc dir</td><td></td></tr><tr><td>ri dir</td><td></td></tr><tr><td>spec dir</td><td></td></tr><tr><td>spec file</td><td></td></tr><tr><td>gems dir</td><td></td></tr><tr><td>base dir</td><td></td></tr><tr><td>loaded</td><td>false</td></tr><tr><td>activated</td><td>false</td></tr><tr><td>loaded from</td><td>/home/sawa/Dropbox/implicit/gem/dom/dom.gemspec</td></tr><tr><td>original platform</td><td></td></tr><tr><td>installed by version</td><td></td></tr><tr><td>autorequire</td><td></td></tr><tr><td>description</td><td>You can describe HTML/XML structures in Ruby language seemlessly with other parts of Ruby code. Node embedding is described as method chaining, which avoids unnecessary nesting, and confirms to the Rubyistic coding style.</td></tr><tr><td>email</td><td></td></tr><tr><td>homepage</td><td>http://sawa.github.io/dom</td></tr><tr><td>name</td><td>dom</td></tr><tr><td>post install message</td><td></td></tr><tr><td>rubyforge project</td><td></td></tr><tr><td>signing key</td><td></td></tr><tr><td>summary</td><td>A library to generate HTML/XML code from Ruby commands. It replaces conventional approcaches using template engines, or certain kind of libraries with a similar purpose.</td></tr><tr><td>version</td><td>1.0.0</td></tr><tr><td>authors</td><td>sawa</td></tr><tr><td>bindir</td><td>bin</td></tr><tr><td>cert chain</td><td></td></tr><tr><td>date</td><td>2016-04-04 00:00:00 UTC</td></tr><tr><td>dependencies</td><td>htmlentities (>= 0), manager (>= 0, development)</td></tr><tr><td>executables</td><td></td></tr><tr><td>extensions</td><td></td></tr><tr><td>extra rdoc files</td><td></td></tr><tr><td>files</td><td>CHART.html, MANUAL.html, license, spec, lib/dom.rb</td></tr><tr><td>licenses</td><td>MIT</td></tr><tr><td>metadata</td><td>{}</td></tr><tr><td>platform</td><td>ruby</td></tr><tr><td>rdoc options</td><td></td></tr><tr><td>require paths</td><td>lib</td></tr><tr><td>required ruby version</td><td>>= 0</td></tr><tr><td>required rubygems version</td><td>>= 0</td></tr><tr><td>requirements</td><td></td></tr><tr><td>rubygems version</td><td>2.6.4</td></tr><tr><td>specification version</td><td>4</td></tr><tr><td>test files</td><td></td></tr><tr><td>new platform</td><td>ruby</td></tr><tr><td>full name</td><td></td></tr></tbody></table></div><div class="p"><span class="head">Base Directory</span></div><code>/home/sawa/Dropbox/implicit/gem/dom</code><div class="p"><span class="head">Files</span></div><div class="tablewrapper"><table id="files"><colgroup><col /><col /><col /><col /><col /></colgroup><tbody><tr><td>Category</td><td>Name</td><td>Version</td><td>Lines</td></tr><tr><td>Depended</td><td><code>ruby</code></td><td>2.3.1p112</td><td></td></tr><tr><td>Specification</td><td><code style="word-break:break-all;">spec</code></td><td><div>2016-05-04 16:08</div></td><td>387</td></tr><tr><td><span data-file="/home/sawa/Dropbox/implicit/gem/dom/lib/dom.rb" data-coverage=",1,1,1,,1,,1,1,1,,,,,,,,,,,,,,,,,,,,1,53,,1,29,29,,0,0,,29,29,,,,1,43,,,,1,3,,,1,1,1,1,293,3,3,1,89,,1,0,,0,,1,0,,0,,1,60,,,,,,22,3,2,2,15,,19,,60,,,,1,,,2,,,83,,,1,1,5,,1,0,,,,1,1,1,1,,,1,1,,29,,29,,,6,,35,,1,1,80,1,,,1,40,4,1,69,69,0,0,,69,,1,,,1,1,32,32,32,32,,,83,1,,,,,14,1,,,,66,29,29,29,,1,,,1" onclick="coverage(this)">90.22% Tested</span></td><td><code style="word-break:break-all;">lib/dom.rb</code></td><td><div class="bold">2016-05-04 16:12</div></td><td>176</td></tr></tbody></table></div></div><div id="right"><div id="top"><span class="navigation"><span class="tag mode" onclick="displayMode(true, true)">Modules</span><span class="tag mode" onclick="displayMode(false, true)">Features</span><span class="tag mode" onclick="displayMode(false, false)">Full</span></span><span class="separator">│</span><span class="tag mode" onclick="toggleUserItems(this)">User Items</span><span class="separator">│</span><span class="navigation"><span class="tag private" onclick="toggleFeatures(this, 'private', 'user-feature-navigation1')">private</span> <span class="private" id="tagsum-private">3</span> <span class="tag public" onclick="toggleFeatures(this, 'public', 'user-feature-navigation1')">public</span> <span class="public" id="tagsum-public">33</span> <span id="user-feature-navigation1" data-tags="unimplemented protected private public"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span> <span class="navigation"><span class="tag constant" onclick="toggleFeatures(this, 'constant', 'user-feature-navigation2')">Constant</span> <span class="constant" id="tagsum-constant">3</span> <span class="tag singleton" onclick="toggleFeatures(this, 'singleton', 'user-feature-navigation2')">Singleton method</span> <span class="singleton" id="tagsum-singleton">11</span> <span class="tag instance" onclick="toggleFeatures(this, 'instance', 'user-feature-navigation2')">Instance method</span> <span class="instance" id="tagsum-instance">15</span> <span id="user-feature-navigation2" data-tags="constant singleton instance"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span> <span class="navigation"><span class="tag hidden" onclick="toggleFeatures(this, 'hidden', 'dev-feature-navigation1')">Hidden</span> <span class="hidden" id="tagsum-hidden">21</span> <span id="dev-feature-navigation1" data-tags="undocumented hidden misplaced moved"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span> <span class="navigation"><span class="tag agenda" onclick="toggleAnchors(this, 'agenda', 'anchor-navigation1')">Agenda</span> <span class="agenda" id="tagsum-agenda">1</span> <span id="anchor-navigation1" data-tags="missing_doc bad_doc agenda log"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span> <span class="navigation"><span class="tag success" onclick="toggleAnchors(this, 'success', 'anchor-navigation2')">Success</span> <span class="success" id="tagsum-success">55</span> <span id="anchor-navigation2" data-tags="missing_test bad_test untestable bug success benchmark"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span></div><div id="main" onmouseover="this.focus()" onmouseout="this.blur()" tabindex="0"><div class="module"><div class="feature"><div></div><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature2">1. License</h2><div class="feature-contents"><div class="user-item"><div class="p">The MIT License (MIT)</div><div class="p">Copyright (c) 2013-2016 sawa</div><div class="p">Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</div><div class="p">The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</div><div class="p">THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature3">2. Overview</h2><div class="feature-contents"><div class="user-item"><div class="p">The <code class="inline">"dom"</code> gem is a library to generate HTML/XML code from Ruby commands. It replaces conventional approcaches using template engines, or certain kind of libraries with a similar purpose.</div><div class="p">With conventional template engines, you need to write HTML/XML code in a dedicated language in an external file or here document, which is then parsed. With the <code class="inline">"dom"</code> gem, you can describe HTML/XML structures in Ruby language seemlessly with other parts of Ruby code.</div><div class="p">Some conventional libraries define command names that represent the type of DOM node, which may expect an input like this:</div><div class="CodeRay">
|
|
2
|
+
<div class="code"><pre>h1{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>} <span class="comment">#=> "<h1>Hello World!</h1>"</span>
|
|
3
|
+
div{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>} <span class="comment">#=> "<div>Hello World!</div>"</span>
|
|
4
|
+
</pre></div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="p">Such notation lacks flexibility. For every type of node, the corresponding command needs to be defined in advance. A user, would also not be able to use an original node type that is not predefined in the library.</div><div class="p">Unlike such systems, <code class="inline">"dom"</code> gem makes use of a fixed method name <code class="inline">dom</code>, which takes a symbol argument representing the node type. The equivalent of the input above in <code class="inline">"dom"</code> is:</div><div class="CodeRay">
|
|
7
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:h1</span>) <span class="comment">#=> "<h1>Hello World!</h1>"</span>
|
|
8
|
+
<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:div</span>) <span class="comment">#=> "<div>Hello World!</div>"</span>
|
|
9
|
+
</pre></div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="p">Some conventional libraries take the content of a node as a block. Nested nodes would then require nested blocks:</div><div class="CodeRay">
|
|
12
|
+
<div class="code"><pre>div{p{span{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>}}}
|
|
13
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
14
|
+
</pre></div>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="p">As the structure becomes complicated, it becomes more difficult to keep the block opening paired with a closing.</div><div class="p">In <code class="inline">"dom"</code>, the content of a node is the receiver of a method. Node embedding is described as method chaining, which avoids unnecessary nesting, and confirms to the Rubyistic coding style.</div><div class="CodeRay">
|
|
17
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>).dom(<span class="symbol">:p</span>).dom(<span class="symbol">:div</span>)
|
|
18
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
19
|
+
</pre></div>
|
|
20
|
+
</div>
|
|
21
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature4">3. Usage</h2><div class="feature-contents"><div class="user-item"><div class="p">Require dom (usually at the beginning of a file) before using its methods:</div><div class="CodeRay">
|
|
22
|
+
<div class="code"><pre>require <span class="string"><span class="delimiter">"</span><span class="content">dom</span><span class="delimiter">"</span></span>
|
|
23
|
+
</pre></div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="p">To surround a string with a tag, use the <code class="inline">dom</code> method. Pass the tag name as a symbol, with an optional hash, whose keys are symbols, and values that are either <code class="inline">nil</code>, <code class="inline">true</code>, <code class="inline">false</code>, or other kinds of objects that have the <code class="inline">to_s</code> methods inmplemented.</div><div class="CodeRay">
|
|
26
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<span class=\"bar\">foo</span>"</span>
|
|
27
|
+
<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">data_1</span>: <span class="predefined-constant">nil</span>, <span class="key">data_2</span>: <span class="integer">3</span>) <span class="comment"># => "<span data-2=\"3\">foo</span>"</span>
|
|
28
|
+
</pre></div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="p">The <code class="inline">dom</code> method can be chained to generate nested structures.</div><div class="CodeRay">
|
|
31
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>).dom(<span class="symbol">:p</span>).dom(<span class="symbol">:div</span>)
|
|
32
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
33
|
+
</pre></div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="p">When <code class="inline">dom</code> applies to an array, its elements are joined.</div><div class="CodeRay">
|
|
36
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:div</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>)
|
|
37
|
+
<span class="comment"># => "<div class=\"bar\">foobar</div>"</span>
|
|
38
|
+
</pre></div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="p">When multiple tags are passed to a single <code class="inline">dom</code> method call, the tags are distributed and are percolated into the nested arrays.</div><div class="CodeRay">
|
|
41
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:table</span>)
|
|
42
|
+
<span class="comment"># => "<table><tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr></table>"</span>
|
|
43
|
+
</pre></div>
|
|
44
|
+
</div>
|
|
45
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature5"><span class="anchor" id="public1"><span class="tag public">public</span></span> module <span class="feature-name">Dom</span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div class="baseline">Dom</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< Dom</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature6"><span class="anchor" id="public2"><span class="tag public">public</span></span> <span class="anchor" id="constant1"><span class="tag constant">1</span></span> Dom::<span class="feature-name">Coder</span> <span class="anchor" id="hidden1"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><span class="head">Value</span> <code class="inline">#<HTMLEntities:0x007fc8a7ec03c0 @flavor="xhtml1"></code></div><div class="p indent"><div class="p"><span class="head">Implementation</span></div><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:55</code><code>) </code></span></span><div class="clear"></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature7"><span class="anchor" id="private1"><span class="tag private">private</span></span> <span class="anchor" id="constant2"><span class="tag constant">2</span></span> Dom::<span class="feature-name">Indent</span> <span class="anchor" id="hidden2"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><span class="head">Value</span> <code class="inline">" "</code></div><div class="p indent"><div class="p"><span class="head">Implementation</span></div></div><div class="p">Indentation internally used in <code class="inline">join</code> whem the mode is <code class="inline">nested</code> or <code class="inline">pre</code>.</div><div class="anchor" id="success1"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">1</span> <code class="inline">Dom::<span class="bold">Indent</span> <span class="verification">=~</span><span class="verification"> /\s+/</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature8"><span class="anchor" id="public3"><span class="tag public">public</span></span> <span class="anchor" id="singleton1"><span class="tag singleton">1</span></span> Dom.<span class="feature-name">compact</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">compact</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:58</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to compact mode. Usually the best for production use. It is compressed, and is not convenient for human reading.</div></div><div class="dev-item"><div class="anchor" id="success2"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">2</span> <code class="inline">Dom.<span class="bold">compact</span><span class="verification">.</span><span class="verification">succeed?</span><span class="verification"></span></code></div></div><div class="p"><span class="head">Setup code</span></div><div class="CodeRay">
|
|
46
|
+
<div class="code"><pre><span class="constant">Dom</span>.compact</pre></div>
|
|
47
|
+
</div>
|
|
48
|
+
</div><div class="user-item"><div class="CodeRay">
|
|
49
|
+
<div class="code"><pre><span class="constant">Dom</span>.compact
|
|
50
|
+
</pre></div>
|
|
51
|
+
</div>
|
|
52
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature9"><span class="anchor" id="public4"><span class="tag public">public</span></span> <span class="anchor" id="singleton2"><span class="tag singleton">2</span></span> Dom.<span class="feature-name">nested</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">nested</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:59</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to nested mode. Usually the best for development use. It may not be optimized for production use.</div></div><div class="dev-item"><div class="anchor" id="success3"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">3</span> <code class="inline">Dom.<span class="bold">nested</span><span class="verification">.</span><span class="verification">succeed?</span><span class="verification"></span></code></div></div><div class="p"><span class="head">Setup code</span></div><div class="CodeRay">
|
|
53
|
+
<div class="code"><pre><span class="constant">Dom</span>.compact</pre></div>
|
|
54
|
+
</div>
|
|
55
|
+
</div><div class="user-item"><div class="CodeRay">
|
|
56
|
+
<div class="code"><pre><span class="constant">Dom</span>.nested
|
|
57
|
+
</pre></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature10"><span class="anchor" id="public5"><span class="tag public">public</span></span> <span class="anchor" id="singleton3"><span class="tag singleton">3</span></span> Dom.<span class="feature-name">pre</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">pre</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:60</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to a mode that preserves the line numbers of the original by inserting HTML's comment expressions. This is for special usage. Normally, you will not need to to set to this mode.</div></div><div class="dev-item"><div class="anchor" id="success4"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">4</span> <code class="inline">Dom.<span class="bold">pre</span><span class="verification">.</span><span class="verification">succeed?</span><span class="verification"></span></code></div></div><div class="p"><span class="head">Setup code</span></div><div class="CodeRay">
|
|
60
|
+
<div class="code"><pre><span class="constant">Dom</span>.compact</pre></div>
|
|
61
|
+
</div>
|
|
62
|
+
</div><div class="user-item"><div class="CodeRay">
|
|
63
|
+
<div class="code"><pre><span class="constant">Dom</span>.pre
|
|
64
|
+
</pre></div>
|
|
65
|
+
</div>
|
|
66
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature11"><span class="anchor" id="public6"><span class="tag public">public</span></span> <span class="anchor" id="singleton4"><span class="tag singleton">4</span></span> Dom.<span class="feature-name">join_compact</span> <span class="anchor" id="hidden3"><span class="tag hidden">Hidden</span></span> (alias: <span class="feature-name">join</span>)</h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">join_compact</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:61</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Internally used <code class="inline">join</code> method for <code class="inline">compact</code> mode.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature12"><span class="anchor" id="public7"><span class="tag public">public</span></span> <span class="anchor" id="singleton5"><span class="tag singleton">5</span></span> Dom.<span class="feature-name">join_nested</span> <span class="anchor" id="hidden4"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">join_nested</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:64</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Internally used <code class="inline">join</code> method for <code class="inline">nested</code> mode.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature13"><span class="anchor" id="public8"><span class="tag public">public</span></span> <span class="anchor" id="singleton6"><span class="tag singleton">6</span></span> Dom.<span class="feature-name">join_pre</span> <span class="anchor" id="hidden5"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">join_pre</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:69</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Internally used <code class="inline">join</code> method for <code class="inline">pre</code> mode.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature14"><span class="anchor" id="public9"><span class="tag public">public</span></span> <span class="anchor" id="singleton7"><span class="tag singleton">7</span></span> Dom.<span class="feature-name">format</span> <span class="anchor" id="hidden6"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">format</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:74</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Converts a hash into an HTML attribute. An attribute <code class="inline">:foo</code> with value <code class="inline">true</code> and <code class="inline">false</code> will be converted to the string <code class="inline">foo=""</code> and <code class="inline">foo="none"</code>, respectively. Key-value pairs with the value <code class="inline">nil</code> will be excluded from the output. Other values will be applied <code class="inline">to_s</code>. The pairs will be joined by a space, and the whole string will be prepended by a space.</div><div class="anchor" id="success5"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">5</span> <code class="inline">Dom.<span class="bold">format</span>(:script, foo: "abcabc") <span class="verification">==</span><span class="verification"> ["script foo=\"abcabc\"", "script"]</span></code></div></div><div class="anchor" id="success6"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">6</span> <code class="inline">Dom.<span class="bold">format</span>(:div, foo: nil) <span class="verification">==</span><span class="verification"> ["div", "div"]</span></code></div></div><div class="anchor" id="success7"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">7</span> <code class="inline">Dom.<span class="bold">format</span>(:div, foo: false) <span class="verification">==</span><span class="verification"> ["div foo=\"none\"", "div"]</span></code></div></div><div class="anchor" id="success8"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">8</span> <code class="inline">Dom.<span class="bold">format</span>(:script, foo: true) <span class="verification">==</span><span class="verification"> ["script foo=\"\"", "script"]</span></code></div></div><div class="anchor" id="success9"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">9</span> <code class="inline">Dom.<span class="bold">format</span>(:div, foo: 3) <span class="verification">==</span><span class="verification"> ["div foo=\"3\"", "div"]</span></code></div></div><div class="anchor" id="success10"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">10</span> <code class="inline">Dom.<span class="bold">format</span>(:div, foo1: "abcabc", foo2: nil, foo3: false, foo4: true, foo5: 3) <span class="verification">==</span><span class="verification"> ["div foo1=\"abcabc\" foo3=\"none\" foo4=\"\" foo5=\"3\"", "div"]</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature15"><span class="anchor" id="public10"><span class="tag public">public</span></span> <span class="anchor" id="singleton8"><span class="tag singleton">8</span></span> Dom.<span class="feature-name">json_format</span> <span class="anchor" id="hidden7"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">json_format</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:93</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Creates an array to be used in JSON.</div><div class="anchor" id="success11"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">11</span> <code class="inline">Dom.<span class="bold">json_format</span>(:div, style: "foo") <span class="verification">==</span><span class="verification"> ["div", {"style"=>"foo"}]</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature16"><span class="anchor" id="public11"><span class="tag public">public</span></span> <span class="anchor" id="singleton9"><span class="tag singleton">9</span></span> Dom.<span class="feature-name">hyphenize</span> <span class="anchor" id="hidden8"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">hyphenize</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:99</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Converts underscore into hyphen. Used in <code class="inline">json_format</code>.</div><div class="anchor" id="success12"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">12</span> <code class="inline">Dom.<span class="bold">hyphenize</span>("FooBar_Baz-Foo") <span class="verification">==</span><span class="verification"> "FooBar-Baz-Foo"</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature17"><span class="anchor" id="public12"><span class="tag public">public</span></span> <span class="anchor" id="singleton10"><span class="tag singleton">10</span></span> Dom.<span class="feature-name">join</span> <span class="anchor" id="hidden9"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">join</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:61</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Joins strings in an array. Depending on the mode, either aliased to <code class="inline">join_compact</code>, <code class="inline">join_nested</code>, or <code class="inline">join_pre</code>.</div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature18"><span class="anchor" id="public13"><span class="tag public">public</span></span> class <span class="feature-name">String</span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div>Comparable</div><div>┊</div><div class="baseline">String</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< String</div></div> < <div class="mixins"><div class="baseline"><< Object</div></div> < <div class="mixins"><div class="baseline"><< BasicObject</div></div> < <div class="mixins"><div class="baseline">Class</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature19"><span class="anchor" id="public14"><span class="tag public">public</span></span> <span class="anchor" id="instance1"><span class="tag instance">1</span></span> String#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:118</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">When <code class="inline">dom</code> is called on a string, it will create a tag including that string as the content.</div><div class="CodeRay">
|
|
67
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<span class=\"bar\">foo</span>"</span>
|
|
68
|
+
</pre></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div><div class="dev-item"><div class="anchor" id="success13"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">13</span> <code class="inline">"foo".<span class="bold">dom</span>(:span, class: "bar") <span class="verification">==</span><span class="verification"> "<span class=\"bar\">foo</span>"</span></code></div></div></div><div class="user-item"><div class="p">Attributes are passed as a hash. A key <code class="inline">:foo</code> with value <code class="inline">true</code> or <code class="inline">false</code> will be converted to the string <code class="inline">foo=""</code> or <code class="inline">foo="none"</code>, respectively. Key-value pairs with the value <code class="inline">nil</code> will be excluded from the output. For other values, <code class="inline">to_s</code> will be applied. The pairs will be joined by a space, and the whole string will be prepended by a space.</div><div class="CodeRay">
|
|
71
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">data_1</span>: <span class="predefined-constant">nil</span>, <span class="key">data_2</span>: <span class="integer">3</span>) <span class="comment"># => "<span data-2=\"3\">foo</span>"</span>
|
|
72
|
+
</pre></div>
|
|
73
|
+
</div>
|
|
74
|
+
</div><div class="dev-item"><div class="anchor" id="success14"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">14</span> <code class="inline">"foo".<span class="bold">dom</span>(:span, data_1: nil, data_2: 3) <span class="verification">==</span><span class="verification"> "<span data-2=\"3\">foo</span>"</span></code></div></div></div><div class="user-item"><div class="p">HTML escaping will be automatically applied unless the <code class="inline">tag</code> is <code class="inline">:script</code> or <code class="inline">:style</code>:</div><div class="CodeRay">
|
|
75
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content"><</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>) <span class="comment"># => "<span>&lt;</span>"</span>
|
|
76
|
+
<span class="string"><span class="delimiter">"</span><span class="content">if(3 < 5){alert('foo')};</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:script</span>) <span class="comment"># => "<script>if(3 < 5){alert('foo')};</script>"</span>
|
|
77
|
+
</pre></div>
|
|
78
|
+
</div>
|
|
79
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature20"><span class="anchor" id="public15"><span class="tag public">public</span></span> <span class="anchor" id="instance2"><span class="tag instance">2</span></span> String#<span class="feature-name">mounted</span> <span class="anchor" id="hidden10"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">mounted</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:130</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Gets the state of inner elements, namely whether they are mounted once. For <code class="inline">String</code>, this is <code class="inline">nil</code>.</div><div class="anchor" id="success15"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">15</span> <code class="inline">"fresh string".<span class="bold">mounted</span><span class="verification">.</span><span class="verification">nil?</span><span class="verification"></span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature21"><span class="anchor" id="public16"><span class="tag public">public</span></span> <span class="anchor" id="instance3"><span class="tag instance">3</span></span> String#<span class="feature-name">dom_escaped</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom_escaped</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:131</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → DomString<div class="p">Marks <code class="inline">self</code> so that it will not be further HTML escaped. Internally, it is converted to an instance of <code class="inline">DomString</code> class, which is never further escaped.</div><div class="p">When a string is already HTML escaped but has not been done so via the <code class="inline">dom</code> method, further applying <code class="inline">dom</code> to that string will incorrctly doublely apply HTML marking. The string must be marked with this method to avoid HTML escape. For example, without applying <code class="inline">dom_escaped</code>, an already-escaped string is doublely escaped, giving wrong results:</div><div class="CodeRay">
|
|
80
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">3 &lt; 5</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>)
|
|
81
|
+
<span class="comment"># => "<span>3 &amp;lt; 5</span>"</span>
|
|
82
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].join.dom
|
|
83
|
+
<span class="comment">#=> "&lt;span class=&quot;bold&quot;&gt;a&lt;/span&gt;b"</span>
|
|
84
|
+
</pre></div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="p">To get the correct results, <code class="inline">dom_escaped</code> must be applied before application of <code class="inline">dom</code>:</div><div class="CodeRay">
|
|
87
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">3 &lt; 5</span><span class="delimiter">"</span></span>.dom_escaped.dom(<span class="symbol">:span</span>)
|
|
88
|
+
<span class="comment"># => "<span>3 &lt; 5</span>"</span>
|
|
89
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].join.dom_escaped.dom
|
|
90
|
+
<span class="comment">#=> "<span class=\"bold\">a</span>b"</span>
|
|
91
|
+
</pre></div>
|
|
92
|
+
</div>
|
|
93
|
+
</div><div class="dev-item"><div class="anchor" id="success16"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">16</span> <code class="inline">" 3 &lt; 5".<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">dom</span><span class="verification">(:span)</span> <span class="verification">==</span><span class="verification"> "<span> 3 &lt; 5</span>"</span></code></div></div><div class="anchor" id="success17"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">17</span> <code class="inline">"<span class=\"bold\">a</span>b".<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">dom</span><span class="verification"></span> <span class="verification">==</span><span class="verification"> "<span class=\"bold\">a</span>b"</span></code></div></div></div><div class="user-item"><div class="p">When the string is created by <code class="inline">dom</code> method, such consideration is unnecessary (although it will not harm if <code class="inline">dom_escaped</code> is redundantly applied).</div><div class="CodeRay">
|
|
94
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].dom.dom
|
|
95
|
+
<span class="comment"># => "<span class=\"bold\">a</span>b"</span>
|
|
96
|
+
</pre></div>
|
|
97
|
+
</div>
|
|
98
|
+
</div><div class="dev-item"><div class="anchor" id="success18"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">18</span> <code class="inline">" 3 &lt; 5".<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">dom</span><span class="verification">(:span)</span> <span class="verification">==</span><span class="verification"> "<span> 3 &lt; 5</span>"</span></code></div></div><div class="anchor" id="success19"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">19</span> <code class="inline">"<span class=\"bold\">a</span>b".<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">dom</span><span class="verification"></span> <span class="verification">==</span><span class="verification"> "<span class=\"bold\">a</span>b"</span></code></div></div><div class="anchor" id="success20"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">20</span> <code class="inline">"foo".<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">instance_of?</span><span class="verification">(DomString)</span></code></div></div><div class="p"><span class="head">Setup code</span></div><div class="CodeRay">
|
|
99
|
+
<div class="code"><pre>a = <span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span></pre></div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="anchor" id="success21"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">21</span> <code class="inline">a.<span class="bold">dom_escaped</span> <span class="verification">==</span><span class="verification"> a</span></code></div></div><div class="anchor" id="success22"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">22</span> <code class="inline">a.<span class="bold">dom_escaped</span> <span class="verification">===</span><span class="verification"> a</span></code></div></div><div class="anchor" id="success23"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">23</span> <code class="inline">a.<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">eql?</span><span class="verification">(a)</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature22"><span class="anchor" id="public17"><span class="tag public">public</span></span> <span class="anchor" id="instance4"><span class="tag instance">4</span></span> String#<span class="feature-name">jsonml</span> <span class="anchor" id="hidden11"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">jsonml</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:129</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature23"><span class="anchor" id="public18"><span class="tag public">public</span></span> <span class="anchor" id="constant3"><span class="tag constant">3</span></span> String::<span class="feature-name">AnsiColor</span> <span class="anchor" id="hidden12"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><span class="head">Value</span> <code class="inline">{"1"=>"bold", "4"=>"underline", "30"=>"black", "31"=>"red", "32"=>"green", "33"=>"yellow", "34"=>"blue", "35"=>"magenta", "36"=>"cyan", "37"=>"white", "40"=>"bg-black", "41"=>"bg-red", "42"=>"bg-green", "43"=>"bg-yellow", "44"=>"bg-blue", "45"=>"bg-magenta", "46"=>"bg-cyan", "47"=>"bg-white"}</code></div><div class="p indent"><div class="p"><span class="head">Implementation</span></div><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:11</code><code>) </code></span></span><div class="clear"></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature24"><span class="anchor" id="public19"><span class="tag public">public</span></span> <span class="anchor" id="instance5"><span class="tag instance">5</span></span> String#<span class="feature-name">ansi2html</span> <span class="anchor" id="hidden13"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">ansi2html</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:132</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Internally called by <code class="inline">ansi2html</code>.</div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature25"><span class="anchor" id="public20"><span class="tag public">public</span></span> class <span class="feature-name">DomString</span> <span class="anchor" id="hidden14"><span class="tag hidden">Hidden</span></span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div class="baseline">DomString</div></div> < <div class="mixins"><div>Comparable</div><div>┊</div><div class="baseline"><a href="#feature18">String</a></div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< DomString</div></div> < <div class="mixins"><div class="baseline"><< String</div></div> < <div class="mixins"><div class="baseline"><< Object</div></div> < <div class="mixins"><div class="baseline"><< BasicObject</div></div> < <div class="mixins"><div class="baseline">Class</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature26"><span class="anchor" id="public21"><span class="tag public">public</span></span> <span class="anchor" id="instance6"><span class="tag instance">6</span></span> DomString#<span class="feature-name">to_s</span> <span class="anchor" id="hidden15"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">to_s</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:136</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">A <code class="inline">DomString</code> instance behaves like a <code class="inline">String</code> except that dom escape does not modify it. This class is to mark that the instance has alrady gone under dom escaping so that further application of dom escaping does not have effect. It makes dom escaping idempotent.</div><div class="anchor" id="success24"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">24</span> <code class="inline">DomString.new.<span class="bold">to_s</span><span class="verification">.</span><span class="verification">instance_of?</span><span class="verification">(DomString)</span></code></div></div><div class="p"><span class="head">Setup code</span></div><div class="CodeRay">
|
|
102
|
+
<div class="code"><pre>a = <span class="constant">DomString</span>.new(<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>)</pre></div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="anchor" id="success25"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">25</span> <code class="inline">a.<span class="bold">to_s</span> <span class="verification">==</span><span class="verification"> a</span></code></div></div><div class="anchor" id="success26"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">26</span> <code class="inline">a.<span class="bold">to_s</span> <span class="verification">===</span><span class="verification"> a</span></code></div></div><div class="anchor" id="success27"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">27</span> <code class="inline">a.<span class="bold">to_s</span><span class="verification">.</span><span class="verification">eql?</span><span class="verification">(a)</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature27"><span class="anchor" id="public22"><span class="tag public">public</span></span> <span class="anchor" id="instance7"><span class="tag instance">7</span></span> DomString#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:118</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="anchor" id="success28"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">28</span> <code class="inline">"foo".<span class="bold">dom</span>(:span, class: "bar") <span class="verification">==</span><span class="verification"> "<span class=\"bar\">foo</span>"</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature28"><span class="anchor" id="public23"><span class="tag public">public</span></span> <span class="anchor" id="instance8"><span class="tag instance">8</span></span> DomString#<span class="feature-name">dom_escaped</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom_escaped</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:137</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="anchor" id="success29"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">29</span> <code class="inline">DomString.new("foo").<span class="bold">dom_escaped</span><span class="verification">.</span><span class="verification">instance_of?</span><span class="verification">(DomString)</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature29"><span class="anchor" id="public24"><span class="tag public">public</span></span> <span class="anchor" id="instance9"><span class="tag instance">9</span></span> DomString#<span class="feature-name">mounted</span> <span class="anchor" id="hidden16"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">mounted</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:146</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Gets the mounted state of <code class="inline">self</code>. This is a flag indicating whether the string-like object has once been mounted in the web browser.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature30"><span class="anchor" id="public25"><span class="tag public">public</span></span> <span class="anchor" id="instance10"><span class="tag instance">10</span></span> DomString#<span class="feature-name">mounted_set</span> <span class="anchor" id="hidden17"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">mounted_set</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:138</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Sets the state of inner elements, namely whether they are mounted once.</div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature31"><span class="anchor" id="public26"><span class="tag public">public</span></span> module <span class="feature-name">Kernel</span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div class="baseline">Kernel</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< Kernel</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div>Kernel</div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature32"><span class="anchor" id="private2"><span class="tag private">private</span></span> <span class="anchor" id="instance11"><span class="tag instance">11</span></span> Kernel#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:103</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">When <code class="inline">dom</code> is used without an explicit receiver, it will create a self-closing tag.</div><div class="CodeRay">
|
|
105
|
+
<div class="code"><pre>dom(<span class="symbol">:img</span>, <span class="key">source</span>: <span class="string"><span class="delimiter">"</span><span class="content">/tmp/foo.png</span><span class="delimiter">"</span></span>) <span class="comment"># => "<img source=\"/tmp/foo.png\" />"</span>
|
|
106
|
+
</pre></div>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="p">In the following example, <code class="inline">Kernel#dom</code> is called at the embedded level. See <code class="inline">Array#dom</code>.</div><div class="CodeRay">
|
|
109
|
+
<div class="code"><pre><span class="constant">Array</span>.new(<span class="integer">3</span>).dom(<span class="symbol">:col</span>, <span class="symbol">:colgroup</span>) <span class="comment"># => "<colgroup><col /><col /><col /></colgroup>"</span>
|
|
110
|
+
</pre></div>
|
|
111
|
+
</div>
|
|
112
|
+
</div><div class="dev-item"><div class="anchor" id="success30"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">30</span> <code class="inline"><span class="bold">dom</span>(:img, source: "/tmp/foo.png") <span class="verification">==</span><span class="verification"> "<img source=\"/tmp/foo.png\" />"</span></code></div></div><div class="anchor" id="success31"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">31</span> <code class="inline">nil.<span class="bold">dom</span>(:foo) <span class="verification">==</span><span class="verification"> "<foo />"</span></code></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature33"><span class="anchor" id="private3"><span class="tag private">private</span></span> <span class="anchor" id="instance12"><span class="tag instance">12</span></span> Kernel#<span class="feature-name">jsonml</span> <span class="anchor" id="hidden18"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">jsonml</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:106</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Generates a jsonml string.</div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature34"><span class="anchor" id="public27"><span class="tag public">public</span></span> class <span class="feature-name">NilClass</span> <span class="anchor" id="hidden19"><span class="tag hidden">Hidden</span></span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div class="baseline">NilClass</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< NilClass</div></div> < <div class="mixins"><div class="baseline"><< Object</div></div> < <div class="mixins"><div class="baseline"><< BasicObject</div></div> < <div class="mixins"><div class="baseline">Class</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature35"><span class="anchor" id="public28"><span class="tag public">public</span></span> <span class="anchor" id="instance13"><span class="tag instance">13</span></span> NilClass#<span class="feature-name">mounted</span> <span class="anchor" id="hidden20"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">mounted</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:114</code><code>) </code></span></span><div class="clear"></div></li></ul></div><div class="p">Gets the state of inner elements, namely whether they are mounted once. For <code class="inline">NilClass</code>, this is <code class="inline">nil</code>.</div><div class="anchor" id="success32"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">32</span> <code class="inline">nil.<span class="bold">mounted</span><span class="verification">.</span><span class="verification">nil?</span><span class="verification"></span></code></div></div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature36"><span class="anchor" id="public29"><span class="tag public">public</span></span> class <span class="feature-name">Array</span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div>Enumerable</div><div>┊</div><div class="baseline">Array</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< Array</div></div> < <div class="mixins"><div class="baseline"><< Object</div></div> < <div class="mixins"><div class="baseline"><< BasicObject</div></div> < <div class="mixins"><div class="baseline">Class</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature37"><span class="anchor" id="public30"><span class="tag public">public</span></span> <span class="anchor" id="instance14"><span class="tag instance">14</span></span> Array#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">dom</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:150</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">Concatenates the elements and puts them inside the tag.</div><div class="CodeRay">
|
|
113
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:div</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<div class=\"bar\">foobar</div>"</span>
|
|
114
|
+
</pre></div>
|
|
115
|
+
</div>
|
|
116
|
+
</div><div class="dev-item"><div class="anchor" id="success33"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">33</span> <code class="inline">["foo", "bar"].<span class="bold">dom</span>(:div, class: "bar") <span class="verification">==</span><span class="verification"> "<div class=\"bar\">foobar</div>"</span></code></div></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → DomString<div class="p">When no argument is given or an explicit <code class="inline">nil</code> is given, it joins its elements.</div><div class="CodeRay">
|
|
117
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom <span class="comment"># => "foobar",</span>
|
|
118
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="predefined-constant">nil</span>) <span class="comment"># => "foobar",</span>
|
|
119
|
+
</pre></div>
|
|
120
|
+
</div>
|
|
121
|
+
</div><div class="dev-item"><div class="anchor" id="success34"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">34</span> <code class="inline">["foo", "bar"].<span class="bold">dom</span> <span class="verification">==</span><span class="verification"> "foobar"</span></code></div></div><div class="anchor" id="success35"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">35</span> <code class="inline">RETURN<span class="verification">.</span><span class="verification">is_a?</span><span class="verification">(DomString)</span></code></div></div><div class="anchor" id="success36"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">36</span> <code class="inline">["foo", "bar"].<span class="bold">dom</span>(nil) <span class="verification">==</span><span class="verification"> "foobar"</span></code></div></div><div class="anchor" id="success37"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">37</span> <code class="inline">RETURN<span class="verification">.</span><span class="verification">is_a?</span><span class="verification">(DomString)</span></code></div></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(*tags, mounted: nil, **attr)</code> → DomString<div class="p">When more than one tag is provided, it applies <code class="inline">dom</code> to each of its elements with the tags passed except for the last tag (with no other parameters). The last tag and the other parameters are used to apply <code class="inline">dom</code> to the result.</div><div class="CodeRay">
|
|
122
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:table</span>)
|
|
123
|
+
<span class="comment"># => "<table><tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr></table>"</span>
|
|
124
|
+
|
|
125
|
+
<span class="string"><span class="delimiter">"</span><span class="content">Array.new(3)</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:col</span>, <span class="symbol">:colgroup</span>)
|
|
126
|
+
<span class="comment">#=> "<colgroup><col /><col /><col /></colgroup>"</span>
|
|
127
|
+
|
|
128
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="integer">1</span>], [<span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>)
|
|
129
|
+
<span class="comment"># => ArgumentError</span>
|
|
130
|
+
|
|
131
|
+
[[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], <span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>], <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:bar</span>, <span class="symbol">:foo</span>)
|
|
132
|
+
<span class="comment"># => "<foo><bar>abc</bar><bar>d</bar></foo>"</span>
|
|
133
|
+
|
|
134
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">x</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:a</span>, <span class="symbol">:b</span>, <span class="symbol">:c</span>, <span class="symbol">:d</span>)
|
|
135
|
+
<span class="comment"># => ArgumentError</span>
|
|
136
|
+
</pre></div>
|
|
137
|
+
</div>
|
|
138
|
+
</div><div class="dev-item"><div class="anchor" id="success38"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">38</span> <code class="inline">[["foo1", "foo2"], ["bar1", "bar2"]].<span class="bold">dom</span>(:td, :tr, :table) <span class="verification">==</span><span class="verification"> "<table><tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr></table>"</span></code></div></div><div class="anchor" id="success39"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">39</span> <code class="inline">RETURN<span class="verification">.</span><span class="verification">is_a?</span><span class="verification">(DomString)</span></code></div></div><div class="anchor" id="success40"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">40</span> <code class="inline">Array.new(3).<span class="bold">dom</span>(:col, :colgroup) <span class="verification">==</span><span class="verification"> "<colgroup><col /><col /><col /></colgroup>"</span></code></div></div><div class="anchor" id="success41"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">41</span> <code class="inline">[["a", 1], ["b", "c"]].<span class="bold">dom</span>(:td, :tr)<span class="verification">.</span><span class="verification">raise?</span><span class="verification">(ArgumentError)</span></code></div></div><div class="anchor" id="success42"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">42</span> <code class="inline">[[["a", "b"], "c"], "d"].<span class="bold">dom</span>(:bar, :foo) <span class="verification">==</span><span class="verification"> "<foo><bar>abc</bar><bar>d</bar></foo>"</span></code></div></div><div class="anchor" id="success43"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">43</span> <code class="inline">["x"].<span class="bold">dom</span>(:a, :b, :c, :d)<span class="verification">.</span><span class="verification">raise?</span><span class="verification">(ArgumentError, message: /Cannot apply tag/)</span></code></div></div></div><div class="user-item"><div class="p">Passing <code class="inline">nil</code> as the last argument in a sequence:</div><div class="CodeRay">
|
|
139
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="predefined-constant">nil</span>)
|
|
140
|
+
<span class="comment"># => "<tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr>"</span>
|
|
141
|
+
|
|
142
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:div</span>, <span class="predefined-constant">nil</span>, <span class="predefined-constant">nil</span>)
|
|
143
|
+
<span class="comment"># => "<div>a</div><div>b</div><div>c</div><div>d</div>"</span>
|
|
144
|
+
|
|
145
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:div</span>, <span class="predefined-constant">nil</span>)
|
|
146
|
+
<span class="comment"># => "<div>ab</div><div>cd</div>"</span>
|
|
147
|
+
</pre></div>
|
|
148
|
+
</div>
|
|
149
|
+
</div><div class="dev-item"><div class="anchor" id="success44"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">44</span> <code class="inline">[["foo1", "foo2"], ["bar1", "bar2"]].<span class="bold">dom</span>(:td, :tr, nil) <span class="verification">==</span><span class="verification"> "<tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr>"</span></code></div></div><div class="anchor" id="success45"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">45</span> <code class="inline">RETURN<span class="verification">.</span><span class="verification">is_a?</span><span class="verification">(DomString)</span></code></div></div><div class="anchor" id="success46"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">46</span> <code class="inline">[["a", "b"], ["c", "d"]].<span class="bold">dom</span>(:div, nil, nil) <span class="verification">==</span><span class="verification"> "<div>a</div><div>b</div><div>c</div><div>d</div>"</span></code></div></div><div class="anchor" id="success47"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">47</span> <code class="inline">[["a", "b"], ["c", "d"]].<span class="bold">dom</span>(:div, nil) <span class="verification">==</span><span class="verification"> "<div>ab</div><div>cd</div>"</span></code></div></div></div><div class="user-item"><div class="p">Cf.</div><div class="CodeRay">
|
|
150
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="predefined-constant">nil</span>, <span class="symbol">:div</span>)
|
|
151
|
+
<span class="comment"># => "<div>abcd</div>"</span>
|
|
152
|
+
</pre></div>
|
|
153
|
+
</div>
|
|
154
|
+
</div><div class="dev-item"><div class="anchor" id="success48"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">48</span> <code class="inline">[["a", "b"], ["c", "d"]].<span class="bold">dom</span>(nil, :div) <span class="verification">==</span><span class="verification"> "<div>abcd</div>"</span></code></div></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(*tags, mounted: nil, **attr, &pr)</code> → DomString<div class="p">When a block is passed, the array depth to which the block is applied depends on the class of the receiver that corresponds to the inner most tag.</div><div class="p">When the receiver that corresponds to the inndermost tag is an array, the block is applied to each of its elements.</div><div class="CodeRay">
|
|
155
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:foo</span>){|e| e * <span class="integer">2</span>}
|
|
156
|
+
<span class="comment"># => "<foo>aabb</foo>"</span>
|
|
157
|
+
|
|
158
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:bar</span>, <span class="symbol">:foo</span>){|e| e * <span class="integer">2</span>}
|
|
159
|
+
<span class="comment"># => "<foo><bar>aabb</bar><bar>ccdd</bar></foo>"</span>
|
|
160
|
+
</pre></div>
|
|
161
|
+
</div>
|
|
162
|
+
</div><div class="dev-item"><div class="anchor" id="success49"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">49</span> <code class="inline">["foo", "bar"].<span class="bold">dom</span>(:div, class: "bar") <span class="verification">==</span><span class="verification"> "<div class=\"bar\">foobar</div>"</span></code></div></div><div class="anchor" id="success50"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">50</span> <code class="inline">RETURN<span class="verification">.</span><span class="verification">is_a?</span><span class="verification">(DomString)</span></code></div></div><div class="anchor" id="success51"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">51</span> <code class="inline">["a", "b"].<span class="bold">dom</span>(:foo){(/home/sawa/Dropbox/implicit/gem/dom/spec:361)} <span class="verification">==</span><span class="verification"> "<foo>aabb</foo>"</span></code></div></div><div class="anchor" id="success52"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">52</span> <code class="inline">[["a", "b"], ["c", "d"]].<span class="bold">dom</span>(:bar, :foo){(/home/sawa/Dropbox/implicit/gem/dom/spec:362)} <span class="verification">==</span><span class="verification"> "<foo><bar>aabb</bar><bar>ccdd</bar></foo>"</span></code></div></div></div><div class="user-item"><div class="p">When the receiver that corresponds to the innermost tag is a string, the block is applied to it.</div><div class="CodeRay">
|
|
163
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:tbody</span>){|e| e * <span class="integer">2</span>}
|
|
164
|
+
<span class="comment"># => "<tbody><tr><td>aa</td><td>bb</td></tr><tr><td>cc</td><td>dd</td></tr></tbody>"</span>
|
|
165
|
+
</pre></div>
|
|
166
|
+
</div>
|
|
167
|
+
</div><div class="dev-item"><div class="anchor" id="success53"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">53</span> <code class="inline">[["a", "b"], ["c", "d"]].<span class="bold">dom</span>(:td, :tr, :tbody){(/home/sawa/Dropbox/implicit/gem/dom/spec:369)} <span class="verification">==</span><span class="verification"> "<tbody><tr><td>aa</td><td>bb</td></tr><tr><td>cc</td><td>dd</td></tr></tbody>"</span></code></div></div><div class="p indent anchor" id="agenda1"><span class="agenda text"><span class="hang-indent"></span><span class="tag agenda">1</span><span class="dev-text agenda"> Using <code class="inline">index</code> instead of <code class="inline">find</code> to be able to detect <code class="inline">nil</code>. (Which turned out irrelevant.)</span></span><span class="right"><code> (lib/dom.rb:<span class="bold">155</span>, <span class="bold">156</span>, 162; index) </code></span><div class="clear"></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature38"><span class="anchor" id="public31"><span class="tag public">public</span></span> <span class="anchor" id="instance15"><span class="tag instance">15</span></span> Array#<span class="feature-name">jsonml</span> <span class="anchor" id="hidden21"><span class="tag hidden">Hidden</span></span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">jsonml</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:173</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature39"><span class="anchor" id="public32"><span class="tag public">public</span></span> class <span class="feature-name">File</span></h1><div class="feature-contents"><div class="dev-item"><div class="diagram"><div class="mixins"><div class="baseline">File</div></div> < <div class="mixins"><div>Enumerable</div><div>┊</div><div>File::Constants</div><div>┊</div><div class="baseline">IO</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div><div class="diagram"><div class="mixins"><div class="baseline"><< File</div></div> < <div class="mixins"><div class="baseline"><< IO</div></div> < <div class="mixins"><div class="baseline"><< Object</div></div> < <div class="mixins"><div class="baseline"><< BasicObject</div></div> < <div class="mixins"><div class="baseline">Class</div></div> < <div class="mixins"><div class="baseline">Module</div></div> < <div class="mixins"><div><a href="#feature31">Kernel</a></div><div>┊</div><div class="baseline">Object</div></div> < <div class="mixins"><div class="baseline">BasicObject</div></div></div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature40"><span class="anchor" id="public33"><span class="tag public">public</span></span> <span class="anchor" id="singleton11"><span class="tag singleton">11</span></span> File.<span class="feature-name">relativize</span></h2><div class="feature-contents"><div class="dev-item"><div class="p"><div class="p"><span class="head">Implementation candidates</span></div><ul><li class="implementation"><code class="inline">relativize</code><span class="right"><span class="dev-text"><code> (</code><code>lib/dom.rb:51</code><code>) </code></span></span><div class="clear"></div></li></ul></div></div><div class="user-item"><span class="head">Usage</span> <code class="inline">(string)</code> → String<div class="p">Removes the initial slash if an absolute path is given. If a relative path is given, it has no effect.</div><div class="CodeRay">
|
|
168
|
+
<div class="code"><pre><span class="constant">File</span>.relativize(<span class="string"><span class="delimiter">"</span><span class="content">/foo/bar/baz</span><span class="delimiter">"</span></span>) <span class="comment">#=> "foo/bar/baz"</span>
|
|
169
|
+
<span class="constant">File</span>.relativize(<span class="string"><span class="delimiter">"</span><span class="content">foo/bar/baz</span><span class="delimiter">"</span></span>) <span class="comment">#=> "foo/bar/baz"</span>
|
|
170
|
+
</pre></div>
|
|
171
|
+
</div>
|
|
172
|
+
</div><div class="dev-item"><div class="anchor" id="success54"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">54</span> <code class="inline">File.<span class="bold">relativize</span>("/foo/bar/baz") <span class="verification">==</span><span class="verification"> "foo/bar/baz"</span></code></div></div><div class="anchor" id="success55"><div class="indent dev-text success p"><span class="hang-indent"></span><span class="tag success">55</span> <code class="inline">File.<span class="bold">relativize</span>("foo/bar/baz") <span class="verification">==</span><span class="verification"> "foo/bar/baz"</span></code></div></div></div></div></div></div></div></div><script>//-*-mode: javascript-*-
|
|
173
|
+
|
|
174
|
+
// Copyright (c) 2014-2016 sawa
|
|
175
|
+
|
|
176
|
+
var main;
|
|
177
|
+
var scrollMargin;
|
|
178
|
+
|
|
179
|
+
// Scroll to the anchor.
|
|
180
|
+
window.onhashchange = function(e) {
|
|
181
|
+
// location.href = location.hash;
|
|
182
|
+
// main.scrollTop -= main.offsetHeight * 0.5 + scrollMargin;
|
|
183
|
+
main.scrollTop -= scrollMargin;
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
document.body.onload = function() {
|
|
187
|
+
main = document.getElementById('main');
|
|
188
|
+
//This line is needed to invoke `window.onhashchange` even when `location.hash`
|
|
189
|
+
// is the same as the previous load.
|
|
190
|
+
location.hash = '';
|
|
191
|
+
//TODO. Import data from webstore.
|
|
192
|
+
//location.hash =
|
|
193
|
+
var joinQuery = function(obj, prefix, affix){
|
|
194
|
+
return prefix + obj.dataset.tags.split(' ').join(affix + ', ' + prefix) + affix;
|
|
195
|
+
}
|
|
196
|
+
var tagsumPrefix = '#tagsum-', tagsumAffix = ':not([style="opacity: 0.2;"])';
|
|
197
|
+
var i, obj, query;
|
|
198
|
+
query = '.feature:not([style="display: none;"]) .tag.';
|
|
199
|
+
for(i = 1; obj = document.getElementById('user-feature-navigation' + i); i++) {
|
|
200
|
+
obj.query = joinQuery(obj, query, '');
|
|
201
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
202
|
+
initializeNavigation(obj);
|
|
203
|
+
}
|
|
204
|
+
for(i = 1; obj = document.getElementById('dev-feature-navigation' + i); i++) {
|
|
205
|
+
obj.query = joinQuery(obj, query, '');
|
|
206
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
207
|
+
initializeNavigation(obj);
|
|
208
|
+
}
|
|
209
|
+
query = '\
|
|
210
|
+
.feature:not([style="display: none;"]):not([folded="true"]) \
|
|
211
|
+
.feature-contents > :not([style="display: none;"]) \
|
|
212
|
+
.anchor:not([style="display: none;"]) \
|
|
213
|
+
.tag.';
|
|
214
|
+
for(i = 1; obj = document.getElementById('anchor-navigation' + i); i++) {
|
|
215
|
+
obj.query = joinQuery(obj, query, '');
|
|
216
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
217
|
+
initializeNavigation(obj);
|
|
218
|
+
}
|
|
219
|
+
var objs = document.getElementsByClassName('feature');
|
|
220
|
+
for(var i = 0; i < objs.length; i++) {
|
|
221
|
+
// TODO. copy from webstore if any.
|
|
222
|
+
objs[i].hiddenFor = {};
|
|
223
|
+
// hide(objs[i], Object.keys(objs[i].hiddenFor).length);
|
|
224
|
+
}
|
|
225
|
+
switch(document.body.id){
|
|
226
|
+
case 'user':
|
|
227
|
+
scrollMargin = 200;
|
|
228
|
+
// Click "Features" button.
|
|
229
|
+
document.getElementById('top').children[0].children[1].onclick();
|
|
230
|
+
break;
|
|
231
|
+
case 'dev':
|
|
232
|
+
// Approximates half of line height from experience. TODO: Do it logically.
|
|
233
|
+
scrollMargin = 200;
|
|
234
|
+
// Click "Full" button. (Neccessary to do this also for adding `folded` attribute)
|
|
235
|
+
document.getElementById('top').children[0].children[2].onclick();
|
|
236
|
+
break;
|
|
237
|
+
}
|
|
238
|
+
// Prevents feature toggling.
|
|
239
|
+
// Overwriting `onclick` does not interfere with linking to `href`; it is different from `onclick`.
|
|
240
|
+
var objs = document.getElementsByTagName('a');
|
|
241
|
+
for(var i = 0; i < objs.length; i++) objs[i].onclick = function(e) {e.stopPropagation();};
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
initializeNavigation = function(obj) {
|
|
245
|
+
obj.features = document.querySelectorAll(obj.query);
|
|
246
|
+
var sum = obj.features.length;
|
|
247
|
+
obj.querySelector('.sum').innerText = sum;
|
|
248
|
+
var excluded = -sum;
|
|
249
|
+
var objs = document.querySelectorAll(obj.tagsums);
|
|
250
|
+
for(var i = 0; i < objs.length; i++) excluded += parseInt(objs[i].innerText);
|
|
251
|
+
obj.querySelector('.excluded').innerText = excluded;
|
|
252
|
+
var current = obj.querySelector('.current');
|
|
253
|
+
if(sum == 0) {
|
|
254
|
+
current.innerText = 1;
|
|
255
|
+
} else {if(parseInt(current.innerText) > sum
|
|
256
|
+
) current.innerText = sum;
|
|
257
|
+
};
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
initializeNavigations = function() {
|
|
261
|
+
for(var i = 1, obj; obj = document.getElementById('user-feature-navigation' + i); i++
|
|
262
|
+
) initializeNavigation(obj);
|
|
263
|
+
for(var i = 1, obj; obj = document.getElementById('dev-feature-navigation' + i); i++
|
|
264
|
+
) initializeNavigation(obj);
|
|
265
|
+
for(var i = 1, obj; obj = document.getElementById('anchor-navigation' + i); i++
|
|
266
|
+
) initializeNavigation(obj);
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
getFeatureNodeFromId = function(id) {
|
|
270
|
+
var obj = document.getElementById(id);
|
|
271
|
+
if(!obj) return null;
|
|
272
|
+
while(true) {
|
|
273
|
+
if(obj.className == 'feature') return obj;
|
|
274
|
+
obj = obj.parentNode;
|
|
275
|
+
if(!obj) return null;
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
getIdFromObj = function(obj) {
|
|
280
|
+
while(true) {
|
|
281
|
+
if(obj.id) return obj.id;
|
|
282
|
+
obj = obj.parentNode;
|
|
283
|
+
if(!obj) return null;
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
hide = function(obj, bool) {obj.style.display = bool ? 'none' : null;};
|
|
288
|
+
|
|
289
|
+
inactivate = function(obj, bool) {obj.style.opacity = bool ? 0.2 : null;};
|
|
290
|
+
|
|
291
|
+
mark = function(obj, bool) {return obj.marking = bool;};
|
|
292
|
+
|
|
293
|
+
toggleMarking = function(obj) {return obj.marking = !obj.marking;};
|
|
294
|
+
|
|
295
|
+
hideByTag = function(obj, tag, bool) {
|
|
296
|
+
if(bool) {obj.hiddenFor[tag] = true;} else {delete obj.hiddenFor[tag];};
|
|
297
|
+
hide(obj, Object.keys(obj.hiddenFor).length);
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
foldModuleContents = function(obj, bool){
|
|
301
|
+
obj.firstChild.setAttribute('folded', bool);
|
|
302
|
+
var objs = obj.childNodes;
|
|
303
|
+
foldFeatureContents(objs[0], bool);
|
|
304
|
+
// From the second children.
|
|
305
|
+
for (var i = 1; i < objs.length; i++) hideByTag(objs[i], 'folded', bool);
|
|
306
|
+
return bool;
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
foldFeatureContents = function(obj, bool){
|
|
310
|
+
obj.setAttribute('folded', bool);
|
|
311
|
+
hide(obj.firstChild.nextSibling, bool);
|
|
312
|
+
return bool;
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
displayMode = function(bool1, bool2) {
|
|
316
|
+
var objs = document.getElementsByClassName('module');
|
|
317
|
+
for(var i = 0; i < objs.length; i++) foldModuleContents(objs[i], mark(objs[i], bool1));
|
|
318
|
+
// `[onclick]`: Features with `type` `:module_as_constant` are not clickable.
|
|
319
|
+
// `:not(:first-child)`: Don't fold module headers here.
|
|
320
|
+
var objs = document.querySelectorAll('.feature[onclick]:not(:first-child)');
|
|
321
|
+
for(var i = 0; i < objs.length; i++) foldFeatureContents(objs[i], mark(objs[i], bool2));
|
|
322
|
+
initializeNavigations();
|
|
323
|
+
};
|
|
324
|
+
|
|
325
|
+
toggleModuleContents = function(feature) {
|
|
326
|
+
var module = feature.parentNode;
|
|
327
|
+
var bool = foldModuleContents(module, toggleMarking(module));
|
|
328
|
+
if(bool) {
|
|
329
|
+
module.scrollIntoView();
|
|
330
|
+
window.onhashchange();
|
|
331
|
+
}
|
|
332
|
+
initializeNavigations();
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
toggleFeatureContents = function(feature) {
|
|
336
|
+
var bool = foldFeatureContents(feature, toggleMarking(feature));
|
|
337
|
+
if(bool) {
|
|
338
|
+
feature.scrollIntoView();
|
|
339
|
+
window.onhashchange();
|
|
340
|
+
}
|
|
341
|
+
initializeNavigations();
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
toggleUserItems = function(button) {
|
|
345
|
+
// recordScrollPosition();
|
|
346
|
+
var bool = toggleMarking(button);
|
|
347
|
+
inactivate(button, bool);
|
|
348
|
+
objs = document.getElementsByClassName('user-item');
|
|
349
|
+
for(i = 0; i < objs.length; i++) hide(objs[i], bool);
|
|
350
|
+
initializeNavigations();
|
|
351
|
+
// resumeScrollPosition();
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
toggleFeatures = function(button, tag, navigation) {
|
|
355
|
+
// recordScrollPosition();
|
|
356
|
+
var bool = toggleMarking(button);
|
|
357
|
+
inactivate(button, bool);
|
|
358
|
+
inactivate(document.getElementById('tagsum-' + tag), bool);
|
|
359
|
+
for(var i = 1, obj; obj = getFeatureNodeFromId(tag + i); i ++) hideByTag(obj, tag, bool);
|
|
360
|
+
navigation = document.getElementById(navigation);
|
|
361
|
+
initializeNavigations();
|
|
362
|
+
// resumeScrollPosition();
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
toggleAnchors = function(button, tag, navigation) {
|
|
366
|
+
// recordScrollPosition();
|
|
367
|
+
var bool = toggleMarking(button);
|
|
368
|
+
inactivate(button, bool);
|
|
369
|
+
inactivate(document.getElementById('tagsum-' + tag), bool);
|
|
370
|
+
for(var i = 1, obj; obj = document.getElementById(tag + i); i ++) hide(obj, bool);
|
|
371
|
+
navigation = document.getElementById(navigation);
|
|
372
|
+
initializeNavigation(navigation);
|
|
373
|
+
// resumeScrollPosition();
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
navigateTag = function(navigation, d) {
|
|
377
|
+
var n = navigation.features.length;
|
|
378
|
+
if(n == 0) return;
|
|
379
|
+
var old = document.getElementById('current');
|
|
380
|
+
if(old) old.removeAttribute('id');
|
|
381
|
+
var current = navigation.querySelector('.current');
|
|
382
|
+
current.id = 'current';
|
|
383
|
+
var i = parseInt(current.innerText) + d;
|
|
384
|
+
if(i < 1) i = 1;
|
|
385
|
+
if(i > n) i = n;
|
|
386
|
+
current.innerText = i;
|
|
387
|
+
location.hash = getIdFromObj(navigation.features[i - 1]);
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
//var lastToggled =
|
|
391
|
+
//var lastViewPort =
|
|
392
|
+
recordScrollPosition = function() {
|
|
393
|
+
// main.scrollTop = navigation.features[i - 1].offsetTop - main.offsetTop;
|
|
394
|
+
/*
|
|
395
|
+
foo = function(obj) {
|
|
396
|
+
var ref = window.scrollY - window.pageYOffset + document.documentElement.clientTop;
|
|
397
|
+
var checkChildDivs = function() {
|
|
398
|
+
var children = obj.childNodes;
|
|
399
|
+
if (children.length) {[].forEach.call(children, function(e, i, a) {
|
|
400
|
+
if (e.toString() === "[object HTMLDivElement]") {
|
|
401
|
+
// the top of the div relative to the document
|
|
402
|
+
// minus the height of window hidden above the top of the screen
|
|
403
|
+
var top = e.getBoundingClientRect().top;
|
|
404
|
+
// top and bottom posns relative to the top of the screen
|
|
405
|
+
// the top and bottom distances of the element relative to the top of the screen
|
|
406
|
+
// the div overlaps the screen top
|
|
407
|
+
if ((top <= ref) && (ref <= top + e.offsetHeight)) {
|
|
408
|
+
obj = e;
|
|
409
|
+
checkChildDivs();
|
|
410
|
+
return false;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
});}
|
|
414
|
+
};
|
|
415
|
+
checkChildDivs();
|
|
416
|
+
return obj;
|
|
417
|
+
};
|
|
418
|
+
*/
|
|
419
|
+
};
|
|
420
|
+
|
|
421
|
+
resumeScrollPosition = function() {
|
|
422
|
+
};
|
|
423
|
+
|
|
424
|
+
coverage = function(obj){
|
|
425
|
+
alert("Sorry, this function is not implemented.");
|
|
426
|
+
// alert(obj.nextSibling.contentDocument.querySelector('body').innerText);
|
|
427
|
+
// var f = obj.dataset.file;
|
|
428
|
+
};
|
|
429
|
+
</script></body></html>
|
data/MANUAL.html
ADDED
|
@@ -0,0 +1,414 @@
|
|
|
1
|
+
<html><head><meta charset="UTF-8" /><style>/*Author:sawa.The default design */*{box-sizing:border-box;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}body,table{font-family:sans-serif;font-size:12px;}body{margin:0;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:row;height:100%;text-align:justify;text-rendering:optimizelegibility;color:hsl(100,0%,30%);background-color:hsl(0,0%,100%);word-break:normal;}#top,#top-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:18px;}#top *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}#top,#user #top-title{padding:2;background-color:hsl(0,0%,97%);color:hsl(0,0%,30%);}#dev #top-title{margin:1em;color:white;}#user #top-title,#dev #top{border-bottom:solid 6px hsl(211,85%,29%);}#top >span{margin-left:5;margin-right:5;display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;white-space:pre;padding-top:4;padding-bottom:4;}.separator{font-size:18px;color:hsl(60,5%,72%);margin-left:0.5em;margin-right:0.5em;}#left{padding:0 20 24 40;flex-basis:480px;flex-shrink:0;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;border-right:solid 1px hsl(60,5%,68%);background-color:#4F6B89;color:hsl(0,0%,100%);}#left .tablewrapper{max-height:32%;overflow-y:auto;border-top:solid 1px hsl(60,5%,85%);border-bottom:solid 1px hsl(60,5%,85%);}#left table{margin:0;width:100%;background-color:hsl(0,0%,100%);}#gemspec td:nth-child(1){white-space:nowrap;}#gemspec td:nth-child(2){word-break:break-all;}#files td:nth-child(3),#files td:nth-child(4){white-space:nowrap;}#files td:nth-child(4){text-align:right;}#right{display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;overflow:hidden;flex-grow:1;}#main{flex-basis:0;flex-grow:1;display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:column;overflow-y:auto;}#user #main{padding-top:12;padding-bottom:12;padding-right:240;padding-left:240;}#dev #main{padding-top:12;padding-bottom:12;padding-right:40;padding-left:20;}#main:before{position:fixed;margin-top:20px;margin-left:-20px;content:"\25B8";/*blacktriangleright */}#user #main:before{top:234;}#dev #main:before{top:300;}[onclick]:not([folded]){cursor:pointer;}[onclick][folded="true"]{cursor:s-resize;}[onclick][folded="false"]{cursor:n-resize;}table{border-collapse:collapse;margin-top:1em;margin-bottom:1em;}tr{border-color:hsl(60,27%,78%);border-style:solid;}#left tr:first-of-type{border-left-width:1px;border-right-width:1px;border-top-width:0;border-bottom-width:1px;}#left tr:last-of-type{border-left-width:1px;border-right-width:1px;border-top-width:1px;border-bottom-width:0;}#main tr,#left tr:not(:last-of-type):not(:first-of-type){border-left-width:1px;border-right-width:1px;border-top-width:1px;border-bottom-width:1px;}td{padding-left:3px;padding-right:3px;border-style:solid;border-color:hsl(60,27%,78%);border-width:1px;}figure{text-align:center;margin-left:0;margin-right:0;}figcaption{text-align:center;margin:2;}input{vertical-align:middle;}h1,h2,h3,h4{display:flex;flex-direction:row;align-items:center;white-space:pre-wrap;word-break:break-word;font-weight:normal;/*color:hsl(180,93%,6%);*/}h1{color:hsl(9,30%,15%);}h2{font-size:163%;margin-left:1em;margin-right:0.5em;color:hsl(9,30%,15%);}h3{font-size:140%;margin-left:1em;margin-right:0.5em;padding-left:1em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}h4{font-size:120%;margin-left:1em;margin-right:0.5em;padding-left:2em;border-bottom:solid 1px hsl(0,0%,80%);font-style:oblique;color:hsl(9,30%,15%);}h5{font-size:110%;margin-left:1em;margin-right:0.5em;padding-left:3em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}h6{font-size:100%;margin-left:1em;margin-right:0.5em;padding-left:4em;border-bottom:solid 1px hsl(0,0%,80%);color:hsl(9,30%,15%);}.module-header{/*Margin among `h2.module-header`does not collapse because of extra embedding level `.margin`.Hence margin needs to be set to half of other `h2`.*/margin-top:0.415em;margin-bottom:0.415em;}.feature:not(:first-child)[onclick]:hover{background-color:hsl(90,10%,97%);}.feature-name{font-size:110%;font-weight:bold;font-family:sans-serif;}[folded="true"]>h1,[folded="true"]>h2,[folded="true"]>h3,[folded="true"]>h4,[folded="true"]>h5,[folded="true"]>h6{box-shadow:inset 0px -21px 46px -26px hsla(0,0%,0%,0.2);}.feature-contents{padding-left:1em;}.head{font-weight:bold;font-family:sans-serif;font-size:15px;}.user-item,.dev-item{margin-top:1;margin-bottom:1;padding-left:0.5em;padding-right:0.5em;border-radius:5px;}#dev .user-item{background-color:hsl(180,20%,86%);padding-top:0.1px;padding-bottom:0.1px;}.diagram{text-align:left;margin:0.75em 2em;}.mixins{display:inline-block;margin:2 1;background-color:#c2ccd5;border:solid 1px #246a7d;color:#246a7d;padding:1 4;border-radius:2px;font-size:10.5px;}.mixins >div{width:100%;text-align:center;line-height:2.55ex;}.mixins >.baseline ~div{float:left;clear:both;}.p,li{font-family:serif;font-size:17px;}.p{margin-top:1em;margin-bottom:1em;}.CodeRay,table,figure{margin-top:1.33em;margin-bottom:1.33em;margin-left:2em;margin-right:2em;}.dev-text,table{font-family:sans-serif;font-size:13px;}.CodeRay{overflow-x:auto;}.CodeRay,code{font-size:12px;}.inline{padding:3px 4px;line-height:2.5ex;border-radius:0.4ex;white-space:pre-wrap;font-size:12px;background-color:hsl(50,35%,89%);color:hsl(0,0%,40%);word-break:break-all;}li{margin-top:5;margin-bottom:5;}.indent{padding-left:2.3em;}.hang-indent{margin-right:-2.3em;}.statistics{font-size:12px;}#current{color:black;font-weight:bold;}.navigation{display:inline-flex;flex-direction:row;align-items:center;}.mode.tag,.arrow.tag,.missing_doc.tag,.navigation .bad_doc.tag,.agenda.tag,.log.tag,.missing_test.tag,.bad_test.tag,.untestable.tag,.bug.tag,.success.tag,.benchmark.tag{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;white-space:pre;height:18px;margin:2 0;padding-left:5.5;padding-right:5.5;font-family:sans-serif;font-size:10px;font-weight:500;border-radius:9px;}.unimplemented.tag,.protected.tag,.private.tag,.public.tag,.constant.tag,.singleton.tag,.instance.tag,.undocumented.tag,.hidden.tag,.misplaced.tag,.moved.tag{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;white-space:pre;height:18px;margin:2 0;padding-left:5.5;padding-right:5.5;font-family:sans-serif;font-size:10px;font-weight:500;border-radius:2px;}.tag.mode,.tag.arrow{color:hsl(9,69%,16%);vertical-align:middle;line-height:100%;font-size:12px;}.constant{color:#DB7551;}.constant.tag{background-color:#DB7551;color:white;}.singleton{color:#68894F;}.singleton.tag{background-color:#68894F;color:white;}.instance{color:#4F6589;}.instance.tag{background-color:#4F6589;color:white;}.public{color:#090705;}.public.tag{background-color:#CCBBA7;border:solid 1px;}.private{color:#090705;}.private.tag{background-color:#9B7C59;border:solid 1px;}.protected{color:#D6AF86;}.protected.tag{background-color:#47160D;border:solid 1px;}.hidden,.moved{color:gray;}.hidden.tag,.moved.tag{background-color:white;color:#878787;border:solid 1px;}.agenda{color:#878787;}.agenda.tag{background-color:#878787;color:white;}.log{color:#878787;}.log.tag{background-color:white;color:#878787;border:solid 1px;}.undocumented,.misplaced,.missing_doc,.bad_doc,.missing_test,.bad_test{color:#F79833;}.navigation .bad_doc{font-weight:inherit;text-decoration:inherit;}.anchor .bad_doc{font-weight:bold;border-bottom:dotted 2px;}.undocumented.tag,.misplaced.tag,.missing_doc.tag,.navigation .bad_doc.tag,.missing_test.tag,.bad_test.tag{background-color:#F79833;color:white;}.untestable{color:hsl(54,43%,38%);}.untestable.tag{background-color:hsl(54,43%,38%);color:white;}.unimplemented,.bug{color:hsl(0,80%,50%);}.unimplemented.tag,.bug.tag{background-color:hsl(0,80%,50%);color:white;}.success{color:#00a15a;}.success.tag{background-color:#00a15a;color:white;}.backtrace col:nth-child(1){width:100%;}.backtrace td:nth-child(2)>code{white-space:nowrap;}.benchmark{color:hsl(263,43%,38%);}.benchmark.tag{background-color:hsl(263,43%,38%);color:white;}.barcharts{border-collapse:separate;border-spacing:3 0;}.barcharts col:nth-child(2){width:100%;}.barcharts td:nth-child(1)>code{float:right;font-size:73%;white-space:nowrap;}.barcharts td:nth-child(2){padding:3 0;background-color:hsl(250,7%,92%);}caption{margin:4;}.barchart{display:flex;flex-wrap:nowrap;align-items:stretch;flex-direction:row;height:21px;}.barchart .fill{padding:0 6;background-color:hsl(240,40%,50%);min-width:1;color:hsl(0,0%,63%);font-family:sans-serif;font-size:75%;text-align:right;white-space:nowrap;overflow:visible;line-height:21px;}.barchart .minedge{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:5px;border-bottom-width:5px;border-color:hsl(240,40%,50%);width:1px;}.barchart .maxedge{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:5px;border-bottom-width:5px;border-color:hsl(250,7%,92%);width:1px;}.barchart .min{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:10px;border-bottom-width:10px;border-color:hsl(240,40%,50%);}.barchart .max{background-color:hsl(0,50%,50%);border-style:solid;border-left-width:0;border-right-width:0;border-top-width:10px;border-bottom-width:10px;border-color:hsl(250,7%,92%);}.verification{color:hsl(180,61%,50%);}.gray{color:darkgray;}.right{float:right;}.clear{clear:both;}/*Terminal decorations*/.italic{font-style:italic;}.bold{font-weight:bold;}.underline{text-decoration:underline;}.black{color:#000000;}.red{color:#c75646;}.green{color:#8eb33b;}.yellow{color:#d0b03c;}.blue{color:#72b3cc;}.magenta{color:#c8a0d1;}.cyan{color:#218693;}.white{color:#b0b0b0;}.bg-black{background-color:#5d5d5d;}.bg-red{background-color:#e09690;}.bg-green{background-color:#cdee69;}.bg-yellow{background-color:#ffe337;}.bg-blue{background-color:#9cd9f0;}.bg-magenta{background-color:#fbb1f9;}.bg-cyan{background-color:#77dfd8;}.bg-white{background-color:#f7f7f7;}</style><style>.CodeRay {background-color:#FFF;border:1px solid #CCC;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;color:#000;padding:1em 0px 1em 1em;}.CodeRay pre {margin:0px;}div.CodeRay {}span.CodeRay {white-space:pre;border:0px;padding:2px }table.CodeRay {border-collapse:collapse;width:100%;padding:2px }table.CodeRay td {padding:1em 0.5em;vertical-align:top;}.CodeRay .line-numbers,.CodeRay .no {background-color:#ECECEC;color:#AAA;text-align:right;}.CodeRay .line-numbers a {color:#AAA;}.CodeRay .line-numbers tt {font-weight:bold }.CodeRay .line-numbers .highlighted {color:red }.CodeRay .line {display:block;float:left;width:100%;}.CodeRay span.line-numbers {padding:0px 4px }.CodeRay .code {width:100%}ol.CodeRay {font-size:10pt }ol.CodeRay li {white-space:pre }.CodeRay .code pre {overflow:auto }.CodeRay .debug {color:white !important;background:blue !important;}.CodeRay .annotation {color:#007 }.CodeRay .attribute-name {color:#f08 }.CodeRay .attribute-value {color:#700 }.CodeRay .binary {color:#509;font-weight:bold }.CodeRay .comment {color:#998;font-style:italic;}.CodeRay .char {color:#04D }.CodeRay .char .content {color:#04D }.CodeRay .char .delimiter {color:#039 }.CodeRay .class {color:#458;font-weight:bold }.CodeRay .complex {color:#A08;font-weight:bold }.CodeRay .constant {color:teal;}.CodeRay .color {color:#0A0 }.CodeRay .class-variable {color:#369 }.CodeRay .decorator {color:#B0B;}.CodeRay .definition {color:#099;font-weight:bold }.CodeRay .directive {color:#088;font-weight:bold }.CodeRay .delimiter {color:black }.CodeRay .doc {color:#970 }.CodeRay .doctype {color:#34b }.CodeRay .doc-string {color:#D42;font-weight:bold }.CodeRay .escape {color:#666;font-weight:bold }.CodeRay .entity {color:#800;font-weight:bold }.CodeRay .error {color:#F00;background-color:#FAA }.CodeRay .exception {color:#C00;font-weight:bold }.CodeRay .filename {color:#099;}.CodeRay .function {color:#900;font-weight:bold }.CodeRay .global-variable {color:teal;font-weight:bold }.CodeRay .hex {color:#058;font-weight:bold }.CodeRay .integer {color:#099;}.CodeRay .include {color:#B44;font-weight:bold }.CodeRay .inline {color:black }.CodeRay .inline .inline {background:#ccc }.CodeRay .inline .inline .inline {background:#bbb }.CodeRay .inline .inline-delimiter {color:#D14;}.CodeRay .inline-delimiter {color:#D14;}.CodeRay .important {color:#f00;}.CodeRay .interpreted {color:#B2B;font-weight:bold }.CodeRay .instance-variable {color:teal }.CodeRay .label {color:#970;font-weight:bold }.CodeRay .local-variable {color:#963 }.CodeRay .octal {color:#40E;font-weight:bold }.CodeRay .operator {}.CodeRay .predefined-constant {font-weight:bold }.CodeRay .predefined {color:#369;font-weight:bold }.CodeRay .preprocessor {color:#579;}.CodeRay .pseudo-class {color:#00C;font-weight:bold }.CodeRay .predefined-type {color:#074;font-weight:bold }.CodeRay .reserved,.keyword {color:#000;font-weight:bold }.CodeRay .key {color:#808;}.CodeRay .key .delimiter {color:#606;}.CodeRay .key .char {color:#80f;}.CodeRay .value {color:#088;}.CodeRay .regexp {background-color:#fff0ff }.CodeRay .regexp .content {color:#808 }.CodeRay .regexp .delimiter {color:#404 }.CodeRay .regexp .modifier {color:#C2C }.CodeRay .regexp .function {color:#404;font-weight:bold }.CodeRay .string {color:#D20;}.CodeRay .string .string {}.CodeRay .string .string .string {background-color:#ffd0d0 }.CodeRay .string .content {color:#D14;}.CodeRay .string .char {color:#D14;}.CodeRay .string .delimiter {color:#D14;}.CodeRay .shell {color:#D14 }.CodeRay .shell .content {}.CodeRay .shell .delimiter {color:#D14 }.CodeRay .symbol {color:#990073 }.CodeRay .symbol .content {color:#A60 }.CodeRay .symbol .delimiter {color:#630 }.CodeRay .tag {color:#070 }.CodeRay .tag-special {color:#D70;font-weight:bold }.CodeRay .type {color:#339;font-weight:bold }.CodeRay .variable {color:#036 }.CodeRay .insert {background:#afa;}.CodeRay .delete {background:#faa;}.CodeRay .change {color:#aaf;background:#007;}.CodeRay .head {color:#f8f;background:#505 }.CodeRay .insert .insert {color:#080;font-weight:bold }.CodeRay .delete .delete {color:#800;font-weight:bold }.CodeRay .change .change {color:#66f;}.CodeRay .head .head {color:#f4f;}</style><title>dom User's Manual</title></head><body id="user"><div id="right"><div id="top"><span class="navigation"><span class="tag mode" onclick="displayMode(true, true)">Modules</span><span class="tag mode" onclick="displayMode(false, true)">Features</span><span class="tag mode" onclick="displayMode(false, false)">Full</span></span><span class="separator">│</span><span class="navigation"><span class="tag private" onclick="toggleFeatures(this, 'private', 'user-feature-navigation1')">private</span> <span class="private" id="tagsum-private">1</span> <span class="tag public" onclick="toggleFeatures(this, 'public', 'user-feature-navigation1')">public</span> <span class="public" id="tagsum-public">12</span> <span id="user-feature-navigation1" data-tags="unimplemented protected private public"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span> <span class="navigation"><span class="tag singleton" onclick="toggleFeatures(this, 'singleton', 'user-feature-navigation2')">Singleton method</span> <span class="singleton" id="tagsum-singleton">4</span> <span class="tag instance" onclick="toggleFeatures(this, 'instance', 'user-feature-navigation2')">Instance method</span> <span class="instance" id="tagsum-instance">4</span> <span id="user-feature-navigation2" data-tags="constant singleton instance"><span class="tag arrow" onclick="navigateTag(this.parentNode, -1)">◂</span><span class="tag arrow" onclick="navigateTag(this.parentNode, 1)">▸</span> <span class="statistics"><span class="current">1</span>/<span class="sum"></span>+<span class="excluded"></span></span> </span></span></div><div id="top-title">“dom” User's Manual</div><div id="main" onmouseover="this.focus()" onmouseout="this.blur()" tabindex="0"><div class="module"><div class="feature"><div></div><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature2">1. License</h2><div class="feature-contents"><div class="user-item"><div class="p">The MIT License (MIT)</div><div class="p">Copyright (c) 2013-2016 sawa</div><div class="p">Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</div><div class="p">The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</div><div class="p">THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</div></div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature3">2. Overview</h2><div class="feature-contents"><div class="user-item"><div class="p">The <code class="inline">"dom"</code> gem is a library to generate HTML/XML code from Ruby commands. It replaces conventional approcaches using template engines, or certain kind of libraries with a similar purpose.</div><div class="p">With conventional template engines, you need to write HTML/XML code in a dedicated language in an external file or here document, which is then parsed. With the <code class="inline">"dom"</code> gem, you can describe HTML/XML structures in Ruby language seemlessly with other parts of Ruby code.</div><div class="p">Some conventional libraries define command names that represent the type of DOM node, which may expect an input like this:</div><div class="CodeRay">
|
|
2
|
+
<div class="code"><pre>h1{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>} <span class="comment">#=> "<h1>Hello World!</h1>"</span>
|
|
3
|
+
div{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>} <span class="comment">#=> "<div>Hello World!</div>"</span>
|
|
4
|
+
</pre></div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="p">Such notation lacks flexibility. For every type of node, the corresponding command needs to be defined in advance. A user, would also not be able to use an original node type that is not predefined in the library.</div><div class="p">Unlike such systems, <code class="inline">"dom"</code> gem makes use of a fixed method name <code class="inline">dom</code>, which takes a symbol argument representing the node type. The equivalent of the input above in <code class="inline">"dom"</code> is:</div><div class="CodeRay">
|
|
7
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:h1</span>) <span class="comment">#=> "<h1>Hello World!</h1>"</span>
|
|
8
|
+
<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:div</span>) <span class="comment">#=> "<div>Hello World!</div>"</span>
|
|
9
|
+
</pre></div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="p">Some conventional libraries take the content of a node as a block. Nested nodes would then require nested blocks:</div><div class="CodeRay">
|
|
12
|
+
<div class="code"><pre>div{p{span{<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>}}}
|
|
13
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
14
|
+
</pre></div>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="p">As the structure becomes complicated, it becomes more difficult to keep the block opening paired with a closing.</div><div class="p">In <code class="inline">"dom"</code>, the content of a node is the receiver of a method. Node embedding is described as method chaining, which avoids unnecessary nesting, and confirms to the Rubyistic coding style.</div><div class="CodeRay">
|
|
17
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>).dom(<span class="symbol">:p</span>).dom(<span class="symbol">:div</span>)
|
|
18
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
19
|
+
</pre></div>
|
|
20
|
+
</div>
|
|
21
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature4">3. Usage</h2><div class="feature-contents"><div class="user-item"><div class="p">Require dom (usually at the beginning of a file) before using its methods:</div><div class="CodeRay">
|
|
22
|
+
<div class="code"><pre>require <span class="string"><span class="delimiter">"</span><span class="content">dom</span><span class="delimiter">"</span></span>
|
|
23
|
+
</pre></div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="p">To surround a string with a tag, use the <code class="inline">dom</code> method. Pass the tag name as a symbol, with an optional hash, whose keys are symbols, and values that are either <code class="inline">nil</code>, <code class="inline">true</code>, <code class="inline">false</code>, or other kinds of objects that have the <code class="inline">to_s</code> methods inmplemented.</div><div class="CodeRay">
|
|
26
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<span class=\"bar\">foo</span>"</span>
|
|
27
|
+
<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">data_1</span>: <span class="predefined-constant">nil</span>, <span class="key">data_2</span>: <span class="integer">3</span>) <span class="comment"># => "<span data-2=\"3\">foo</span>"</span>
|
|
28
|
+
</pre></div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="p">The <code class="inline">dom</code> method can be chained to generate nested structures.</div><div class="CodeRay">
|
|
31
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>).dom(<span class="symbol">:p</span>).dom(<span class="symbol">:div</span>)
|
|
32
|
+
<span class="comment">#=> "<div><p><span>Hello World!</span></p></div>"</span>
|
|
33
|
+
</pre></div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="p">When <code class="inline">dom</code> applies to an array, its elements are joined.</div><div class="CodeRay">
|
|
36
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:div</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>)
|
|
37
|
+
<span class="comment"># => "<div class=\"bar\">foobar</div>"</span>
|
|
38
|
+
</pre></div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="p">When multiple tags are passed to a single <code class="inline">dom</code> method call, the tags are distributed and are percolated into the nested arrays.</div><div class="CodeRay">
|
|
41
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:table</span>)
|
|
42
|
+
<span class="comment"># => "<table><tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr></table>"</span>
|
|
43
|
+
</pre></div>
|
|
44
|
+
</div>
|
|
45
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature5"><span class="anchor" id="public1"><span class="tag public">public</span></span> module <span class="feature-name">Dom</span></h1><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature8"><span class="anchor" id="public2"><span class="tag public">public</span></span> <span class="anchor" id="singleton1"><span class="tag singleton">1</span></span> Dom.<span class="feature-name">compact</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to compact mode. Usually the best for production use. It is compressed, and is not convenient for human reading.</div></div><div class="user-item"><div class="CodeRay">
|
|
46
|
+
<div class="code"><pre><span class="constant">Dom</span>.compact
|
|
47
|
+
</pre></div>
|
|
48
|
+
</div>
|
|
49
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature9"><span class="anchor" id="public3"><span class="tag public">public</span></span> <span class="anchor" id="singleton2"><span class="tag singleton">2</span></span> Dom.<span class="feature-name">nested</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to nested mode. Usually the best for development use. It may not be optimized for production use.</div></div><div class="user-item"><div class="CodeRay">
|
|
50
|
+
<div class="code"><pre><span class="constant">Dom</span>.nested
|
|
51
|
+
</pre></div>
|
|
52
|
+
</div>
|
|
53
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature10"><span class="anchor" id="public4"><span class="tag public">public</span></span> <span class="anchor" id="singleton3"><span class="tag singleton">3</span></span> Dom.<span class="feature-name">pre</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → Class<div class="p">Sets the output to a mode that preserves the line numbers of the original by inserting HTML's comment expressions. This is for special usage. Normally, you will not need to to set to this mode.</div></div><div class="user-item"><div class="CodeRay">
|
|
54
|
+
<div class="code"><pre><span class="constant">Dom</span>.pre
|
|
55
|
+
</pre></div>
|
|
56
|
+
</div>
|
|
57
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature18"><span class="anchor" id="public5"><span class="tag public">public</span></span> class <span class="feature-name">String</span></h1><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature19"><span class="anchor" id="public6"><span class="tag public">public</span></span> <span class="anchor" id="instance1"><span class="tag instance">1</span></span> String#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">When <code class="inline">dom</code> is called on a string, it will create a tag including that string as the content.</div><div class="CodeRay">
|
|
58
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<span class=\"bar\">foo</span>"</span>
|
|
59
|
+
</pre></div>
|
|
60
|
+
</div>
|
|
61
|
+
</div><div class="user-item"><div class="p">Attributes are passed as a hash. A key <code class="inline">:foo</code> with value <code class="inline">true</code> or <code class="inline">false</code> will be converted to the string <code class="inline">foo=""</code> or <code class="inline">foo="none"</code>, respectively. Key-value pairs with the value <code class="inline">nil</code> will be excluded from the output. For other values, <code class="inline">to_s</code> will be applied. The pairs will be joined by a space, and the whole string will be prepended by a space.</div><div class="CodeRay">
|
|
62
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">data_1</span>: <span class="predefined-constant">nil</span>, <span class="key">data_2</span>: <span class="integer">3</span>) <span class="comment"># => "<span data-2=\"3\">foo</span>"</span>
|
|
63
|
+
</pre></div>
|
|
64
|
+
</div>
|
|
65
|
+
</div><div class="user-item"><div class="p">HTML escaping will be automatically applied unless the <code class="inline">tag</code> is <code class="inline">:script</code> or <code class="inline">:style</code>:</div><div class="CodeRay">
|
|
66
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content"><</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>) <span class="comment"># => "<span>&lt;</span>"</span>
|
|
67
|
+
<span class="string"><span class="delimiter">"</span><span class="content">if(3 < 5){alert('foo')};</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:script</span>) <span class="comment"># => "<script>if(3 < 5){alert('foo')};</script>"</span>
|
|
68
|
+
</pre></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature21"><span class="anchor" id="public7"><span class="tag public">public</span></span> <span class="anchor" id="instance2"><span class="tag instance">2</span></span> String#<span class="feature-name">dom_escaped</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → DomString<div class="p">Marks <code class="inline">self</code> so that it will not be further HTML escaped. Internally, it is converted to an instance of <code class="inline">DomString</code> class, which is never further escaped.</div><div class="p">When a string is already HTML escaped but has not been done so via the <code class="inline">dom</code> method, further applying <code class="inline">dom</code> to that string will incorrctly doublely apply HTML marking. The string must be marked with this method to avoid HTML escape. For example, without applying <code class="inline">dom_escaped</code>, an already-escaped string is doublely escaped, giving wrong results:</div><div class="CodeRay">
|
|
71
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">3 &lt; 5</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>)
|
|
72
|
+
<span class="comment"># => "<span>3 &amp;lt; 5</span>"</span>
|
|
73
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].join.dom
|
|
74
|
+
<span class="comment">#=> "&lt;span class=&quot;bold&quot;&gt;a&lt;/span&gt;b"</span>
|
|
75
|
+
</pre></div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="p">To get the correct results, <code class="inline">dom_escaped</code> must be applied before application of <code class="inline">dom</code>:</div><div class="CodeRay">
|
|
78
|
+
<div class="code"><pre><span class="string"><span class="delimiter">"</span><span class="content">3 &lt; 5</span><span class="delimiter">"</span></span>.dom_escaped.dom(<span class="symbol">:span</span>)
|
|
79
|
+
<span class="comment"># => "<span>3 &lt; 5</span>"</span>
|
|
80
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].join.dom_escaped.dom
|
|
81
|
+
<span class="comment">#=> "<span class=\"bold\">a</span>b"</span>
|
|
82
|
+
</pre></div>
|
|
83
|
+
</div>
|
|
84
|
+
</div><div class="user-item"><div class="p">When the string is created by <code class="inline">dom</code> method, such consideration is unnecessary (although it will not harm if <code class="inline">dom_escaped</code> is redundantly applied).</div><div class="CodeRay">
|
|
85
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:span</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bold</span><span class="delimiter">"</span></span>), <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].dom.dom
|
|
86
|
+
<span class="comment"># => "<span class=\"bold\">a</span>b"</span>
|
|
87
|
+
</pre></div>
|
|
88
|
+
</div>
|
|
89
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature31"><span class="anchor" id="public8"><span class="tag public">public</span></span> module <span class="feature-name">Kernel</span></h1><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature32"><span class="anchor" id="private1"><span class="tag private">private</span></span> <span class="anchor" id="instance3"><span class="tag instance">3</span></span> Kernel#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">When <code class="inline">dom</code> is used without an explicit receiver, it will create a self-closing tag.</div><div class="CodeRay">
|
|
90
|
+
<div class="code"><pre>dom(<span class="symbol">:img</span>, <span class="key">source</span>: <span class="string"><span class="delimiter">"</span><span class="content">/tmp/foo.png</span><span class="delimiter">"</span></span>) <span class="comment"># => "<img source=\"/tmp/foo.png\" />"</span>
|
|
91
|
+
</pre></div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="p">In the following example, <code class="inline">Kernel#dom</code> is called at the embedded level. See <code class="inline">Array#dom</code>.</div><div class="CodeRay">
|
|
94
|
+
<div class="code"><pre><span class="constant">Array</span>.new(<span class="integer">3</span>).dom(<span class="symbol">:col</span>, <span class="symbol">:colgroup</span>) <span class="comment"># => "<colgroup><col /><col /><col /></colgroup>"</span>
|
|
95
|
+
</pre></div>
|
|
96
|
+
</div>
|
|
97
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature36"><span class="anchor" id="public9"><span class="tag public">public</span></span> class <span class="feature-name">Array</span></h1><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature37"><span class="anchor" id="public10"><span class="tag public">public</span></span> <span class="anchor" id="instance4"><span class="tag instance">4</span></span> Array#<span class="feature-name">dom</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">(tag, mounted: nil, **attr)</code> → DomString<div class="p">Concatenates the elements and puts them inside the tag.</div><div class="CodeRay">
|
|
98
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:div</span>, <span class="key">class</span>: <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>) <span class="comment"># => "<div class=\"bar\">foobar</div>"</span>
|
|
99
|
+
</pre></div>
|
|
100
|
+
</div>
|
|
101
|
+
</div><div class="user-item"><span class="head">Usage</span> <code class="inline">()</code> → DomString<div class="p">When no argument is given or an explicit <code class="inline">nil</code> is given, it joins its elements.</div><div class="CodeRay">
|
|
102
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom <span class="comment"># => "foobar",</span>
|
|
103
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">foo</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar</span><span class="delimiter">"</span></span>].dom(<span class="predefined-constant">nil</span>) <span class="comment"># => "foobar",</span>
|
|
104
|
+
</pre></div>
|
|
105
|
+
</div>
|
|
106
|
+
</div><div class="user-item"><span class="head">Usage</span> <code class="inline">(*tags, mounted: nil, **attr)</code> → DomString<div class="p">When more than one tag is provided, it applies <code class="inline">dom</code> to each of its elements with the tags passed except for the last tag (with no other parameters). The last tag and the other parameters are used to apply <code class="inline">dom</code> to the result.</div><div class="CodeRay">
|
|
107
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:table</span>)
|
|
108
|
+
<span class="comment"># => "<table><tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr></table>"</span>
|
|
109
|
+
|
|
110
|
+
<span class="string"><span class="delimiter">"</span><span class="content">Array.new(3)</span><span class="delimiter">"</span></span>.dom(<span class="symbol">:col</span>, <span class="symbol">:colgroup</span>)
|
|
111
|
+
<span class="comment">#=> "<colgroup><col /><col /><col /></colgroup>"</span>
|
|
112
|
+
|
|
113
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="integer">1</span>], [<span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>)
|
|
114
|
+
<span class="comment"># => ArgumentError</span>
|
|
115
|
+
|
|
116
|
+
[[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], <span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>], <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:bar</span>, <span class="symbol">:foo</span>)
|
|
117
|
+
<span class="comment"># => "<foo><bar>abc</bar><bar>d</bar></foo>"</span>
|
|
118
|
+
|
|
119
|
+
[<span class="string"><span class="delimiter">"</span><span class="content">x</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:a</span>, <span class="symbol">:b</span>, <span class="symbol">:c</span>, <span class="symbol">:d</span>)
|
|
120
|
+
<span class="comment"># => ArgumentError</span>
|
|
121
|
+
</pre></div>
|
|
122
|
+
</div>
|
|
123
|
+
</div><div class="user-item"><div class="p">Passing <code class="inline">nil</code> as the last argument in a sequence:</div><div class="CodeRay">
|
|
124
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">foo1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">foo2</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">bar1</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">bar2</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="predefined-constant">nil</span>)
|
|
125
|
+
<span class="comment"># => "<tr><td>foo1</td><td>foo2</td></tr><tr><td>bar1</td><td>bar2</td></tr>"</span>
|
|
126
|
+
|
|
127
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:div</span>, <span class="predefined-constant">nil</span>, <span class="predefined-constant">nil</span>)
|
|
128
|
+
<span class="comment"># => "<div>a</div><div>b</div><div>c</div><div>d</div>"</span>
|
|
129
|
+
|
|
130
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:div</span>, <span class="predefined-constant">nil</span>)
|
|
131
|
+
<span class="comment"># => "<div>ab</div><div>cd</div>"</span>
|
|
132
|
+
</pre></div>
|
|
133
|
+
</div>
|
|
134
|
+
</div><div class="user-item"><div class="p">Cf.</div><div class="CodeRay">
|
|
135
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="predefined-constant">nil</span>, <span class="symbol">:div</span>)
|
|
136
|
+
<span class="comment"># => "<div>abcd</div>"</span>
|
|
137
|
+
</pre></div>
|
|
138
|
+
</div>
|
|
139
|
+
</div><div class="user-item"><span class="head">Usage</span> <code class="inline">(*tags, mounted: nil, **attr, &pr)</code> → DomString<div class="p">When a block is passed, the array depth to which the block is applied depends on the class of the receiver that corresponds to the inner most tag.</div><div class="p">When the receiver that corresponds to the inndermost tag is an array, the block is applied to each of its elements.</div><div class="CodeRay">
|
|
140
|
+
<div class="code"><pre>[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>].dom(<span class="symbol">:foo</span>){|e| e * <span class="integer">2</span>}
|
|
141
|
+
<span class="comment"># => "<foo>aabb</foo>"</span>
|
|
142
|
+
|
|
143
|
+
[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:bar</span>, <span class="symbol">:foo</span>){|e| e * <span class="integer">2</span>}
|
|
144
|
+
<span class="comment"># => "<foo><bar>aabb</bar><bar>ccdd</bar></foo>"</span>
|
|
145
|
+
</pre></div>
|
|
146
|
+
</div>
|
|
147
|
+
</div><div class="user-item"><div class="p">When the receiver that corresponds to the innermost tag is a string, the block is applied to it.</div><div class="CodeRay">
|
|
148
|
+
<div class="code"><pre>[[<span class="string"><span class="delimiter">"</span><span class="content">a</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">b</span><span class="delimiter">"</span></span>], [<span class="string"><span class="delimiter">"</span><span class="content">c</span><span class="delimiter">"</span></span>, <span class="string"><span class="delimiter">"</span><span class="content">d</span><span class="delimiter">"</span></span>]].dom(<span class="symbol">:td</span>, <span class="symbol">:tr</span>, <span class="symbol">:tbody</span>){|e| e * <span class="integer">2</span>}
|
|
149
|
+
<span class="comment"># => "<tbody><tr><td>aa</td><td>bb</td></tr><tr><td>cc</td><td>dd</td></tr></tbody>"</span>
|
|
150
|
+
</pre></div>
|
|
151
|
+
</div>
|
|
152
|
+
</div></div></div></div><div class="module"><div class="feature" onclick="toggleModuleContents(this)"><h1 class="module-header" id="feature39"><span class="anchor" id="public11"><span class="tag public">public</span></span> class <span class="feature-name">File</span></h1><div class="feature-contents"></div></div><div class="feature" onclick="toggleFeatureContents(this)"><h2 id="feature40"><span class="anchor" id="public12"><span class="tag public">public</span></span> <span class="anchor" id="singleton4"><span class="tag singleton">4</span></span> File.<span class="feature-name">relativize</span></h2><div class="feature-contents"><div class="user-item"><span class="head">Usage</span> <code class="inline">(string)</code> → String<div class="p">Removes the initial slash if an absolute path is given. If a relative path is given, it has no effect.</div><div class="CodeRay">
|
|
153
|
+
<div class="code"><pre><span class="constant">File</span>.relativize(<span class="string"><span class="delimiter">"</span><span class="content">/foo/bar/baz</span><span class="delimiter">"</span></span>) <span class="comment">#=> "foo/bar/baz"</span>
|
|
154
|
+
<span class="constant">File</span>.relativize(<span class="string"><span class="delimiter">"</span><span class="content">foo/bar/baz</span><span class="delimiter">"</span></span>) <span class="comment">#=> "foo/bar/baz"</span>
|
|
155
|
+
</pre></div>
|
|
156
|
+
</div>
|
|
157
|
+
</div></div></div></div></div></div><script>//-*-mode: javascript-*-
|
|
158
|
+
|
|
159
|
+
// Copyright (c) 2014-2016 sawa
|
|
160
|
+
|
|
161
|
+
var main;
|
|
162
|
+
var scrollMargin;
|
|
163
|
+
|
|
164
|
+
// Scroll to the anchor.
|
|
165
|
+
window.onhashchange = function(e) {
|
|
166
|
+
// location.href = location.hash;
|
|
167
|
+
// main.scrollTop -= main.offsetHeight * 0.5 + scrollMargin;
|
|
168
|
+
main.scrollTop -= scrollMargin;
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
document.body.onload = function() {
|
|
172
|
+
main = document.getElementById('main');
|
|
173
|
+
//This line is needed to invoke `window.onhashchange` even when `location.hash`
|
|
174
|
+
// is the same as the previous load.
|
|
175
|
+
location.hash = '';
|
|
176
|
+
//TODO. Import data from webstore.
|
|
177
|
+
//location.hash =
|
|
178
|
+
var joinQuery = function(obj, prefix, affix){
|
|
179
|
+
return prefix + obj.dataset.tags.split(' ').join(affix + ', ' + prefix) + affix;
|
|
180
|
+
}
|
|
181
|
+
var tagsumPrefix = '#tagsum-', tagsumAffix = ':not([style="opacity: 0.2;"])';
|
|
182
|
+
var i, obj, query;
|
|
183
|
+
query = '.feature:not([style="display: none;"]) .tag.';
|
|
184
|
+
for(i = 1; obj = document.getElementById('user-feature-navigation' + i); i++) {
|
|
185
|
+
obj.query = joinQuery(obj, query, '');
|
|
186
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
187
|
+
initializeNavigation(obj);
|
|
188
|
+
}
|
|
189
|
+
for(i = 1; obj = document.getElementById('dev-feature-navigation' + i); i++) {
|
|
190
|
+
obj.query = joinQuery(obj, query, '');
|
|
191
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
192
|
+
initializeNavigation(obj);
|
|
193
|
+
}
|
|
194
|
+
query = '\
|
|
195
|
+
.feature:not([style="display: none;"]):not([folded="true"]) \
|
|
196
|
+
.feature-contents > :not([style="display: none;"]) \
|
|
197
|
+
.anchor:not([style="display: none;"]) \
|
|
198
|
+
.tag.';
|
|
199
|
+
for(i = 1; obj = document.getElementById('anchor-navigation' + i); i++) {
|
|
200
|
+
obj.query = joinQuery(obj, query, '');
|
|
201
|
+
obj.tagsums = joinQuery(obj, tagsumPrefix, tagsumAffix);
|
|
202
|
+
initializeNavigation(obj);
|
|
203
|
+
}
|
|
204
|
+
var objs = document.getElementsByClassName('feature');
|
|
205
|
+
for(var i = 0; i < objs.length; i++) {
|
|
206
|
+
// TODO. copy from webstore if any.
|
|
207
|
+
objs[i].hiddenFor = {};
|
|
208
|
+
// hide(objs[i], Object.keys(objs[i].hiddenFor).length);
|
|
209
|
+
}
|
|
210
|
+
switch(document.body.id){
|
|
211
|
+
case 'user':
|
|
212
|
+
scrollMargin = 200;
|
|
213
|
+
// Click "Features" button.
|
|
214
|
+
document.getElementById('top').children[0].children[1].onclick();
|
|
215
|
+
break;
|
|
216
|
+
case 'dev':
|
|
217
|
+
// Approximates half of line height from experience. TODO: Do it logically.
|
|
218
|
+
scrollMargin = 200;
|
|
219
|
+
// Click "Full" button. (Neccessary to do this also for adding `folded` attribute)
|
|
220
|
+
document.getElementById('top').children[0].children[2].onclick();
|
|
221
|
+
break;
|
|
222
|
+
}
|
|
223
|
+
// Prevents feature toggling.
|
|
224
|
+
// Overwriting `onclick` does not interfere with linking to `href`; it is different from `onclick`.
|
|
225
|
+
var objs = document.getElementsByTagName('a');
|
|
226
|
+
for(var i = 0; i < objs.length; i++) objs[i].onclick = function(e) {e.stopPropagation();};
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
initializeNavigation = function(obj) {
|
|
230
|
+
obj.features = document.querySelectorAll(obj.query);
|
|
231
|
+
var sum = obj.features.length;
|
|
232
|
+
obj.querySelector('.sum').innerText = sum;
|
|
233
|
+
var excluded = -sum;
|
|
234
|
+
var objs = document.querySelectorAll(obj.tagsums);
|
|
235
|
+
for(var i = 0; i < objs.length; i++) excluded += parseInt(objs[i].innerText);
|
|
236
|
+
obj.querySelector('.excluded').innerText = excluded;
|
|
237
|
+
var current = obj.querySelector('.current');
|
|
238
|
+
if(sum == 0) {
|
|
239
|
+
current.innerText = 1;
|
|
240
|
+
} else {if(parseInt(current.innerText) > sum
|
|
241
|
+
) current.innerText = sum;
|
|
242
|
+
};
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
initializeNavigations = function() {
|
|
246
|
+
for(var i = 1, obj; obj = document.getElementById('user-feature-navigation' + i); i++
|
|
247
|
+
) initializeNavigation(obj);
|
|
248
|
+
for(var i = 1, obj; obj = document.getElementById('dev-feature-navigation' + i); i++
|
|
249
|
+
) initializeNavigation(obj);
|
|
250
|
+
for(var i = 1, obj; obj = document.getElementById('anchor-navigation' + i); i++
|
|
251
|
+
) initializeNavigation(obj);
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
getFeatureNodeFromId = function(id) {
|
|
255
|
+
var obj = document.getElementById(id);
|
|
256
|
+
if(!obj) return null;
|
|
257
|
+
while(true) {
|
|
258
|
+
if(obj.className == 'feature') return obj;
|
|
259
|
+
obj = obj.parentNode;
|
|
260
|
+
if(!obj) return null;
|
|
261
|
+
}
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
getIdFromObj = function(obj) {
|
|
265
|
+
while(true) {
|
|
266
|
+
if(obj.id) return obj.id;
|
|
267
|
+
obj = obj.parentNode;
|
|
268
|
+
if(!obj) return null;
|
|
269
|
+
}
|
|
270
|
+
};
|
|
271
|
+
|
|
272
|
+
hide = function(obj, bool) {obj.style.display = bool ? 'none' : null;};
|
|
273
|
+
|
|
274
|
+
inactivate = function(obj, bool) {obj.style.opacity = bool ? 0.2 : null;};
|
|
275
|
+
|
|
276
|
+
mark = function(obj, bool) {return obj.marking = bool;};
|
|
277
|
+
|
|
278
|
+
toggleMarking = function(obj) {return obj.marking = !obj.marking;};
|
|
279
|
+
|
|
280
|
+
hideByTag = function(obj, tag, bool) {
|
|
281
|
+
if(bool) {obj.hiddenFor[tag] = true;} else {delete obj.hiddenFor[tag];};
|
|
282
|
+
hide(obj, Object.keys(obj.hiddenFor).length);
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
foldModuleContents = function(obj, bool){
|
|
286
|
+
obj.firstChild.setAttribute('folded', bool);
|
|
287
|
+
var objs = obj.childNodes;
|
|
288
|
+
foldFeatureContents(objs[0], bool);
|
|
289
|
+
// From the second children.
|
|
290
|
+
for (var i = 1; i < objs.length; i++) hideByTag(objs[i], 'folded', bool);
|
|
291
|
+
return bool;
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
foldFeatureContents = function(obj, bool){
|
|
295
|
+
obj.setAttribute('folded', bool);
|
|
296
|
+
hide(obj.firstChild.nextSibling, bool);
|
|
297
|
+
return bool;
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
displayMode = function(bool1, bool2) {
|
|
301
|
+
var objs = document.getElementsByClassName('module');
|
|
302
|
+
for(var i = 0; i < objs.length; i++) foldModuleContents(objs[i], mark(objs[i], bool1));
|
|
303
|
+
// `[onclick]`: Features with `type` `:module_as_constant` are not clickable.
|
|
304
|
+
// `:not(:first-child)`: Don't fold module headers here.
|
|
305
|
+
var objs = document.querySelectorAll('.feature[onclick]:not(:first-child)');
|
|
306
|
+
for(var i = 0; i < objs.length; i++) foldFeatureContents(objs[i], mark(objs[i], bool2));
|
|
307
|
+
initializeNavigations();
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
toggleModuleContents = function(feature) {
|
|
311
|
+
var module = feature.parentNode;
|
|
312
|
+
var bool = foldModuleContents(module, toggleMarking(module));
|
|
313
|
+
if(bool) {
|
|
314
|
+
module.scrollIntoView();
|
|
315
|
+
window.onhashchange();
|
|
316
|
+
}
|
|
317
|
+
initializeNavigations();
|
|
318
|
+
};
|
|
319
|
+
|
|
320
|
+
toggleFeatureContents = function(feature) {
|
|
321
|
+
var bool = foldFeatureContents(feature, toggleMarking(feature));
|
|
322
|
+
if(bool) {
|
|
323
|
+
feature.scrollIntoView();
|
|
324
|
+
window.onhashchange();
|
|
325
|
+
}
|
|
326
|
+
initializeNavigations();
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
toggleUserItems = function(button) {
|
|
330
|
+
// recordScrollPosition();
|
|
331
|
+
var bool = toggleMarking(button);
|
|
332
|
+
inactivate(button, bool);
|
|
333
|
+
objs = document.getElementsByClassName('user-item');
|
|
334
|
+
for(i = 0; i < objs.length; i++) hide(objs[i], bool);
|
|
335
|
+
initializeNavigations();
|
|
336
|
+
// resumeScrollPosition();
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
toggleFeatures = function(button, tag, navigation) {
|
|
340
|
+
// recordScrollPosition();
|
|
341
|
+
var bool = toggleMarking(button);
|
|
342
|
+
inactivate(button, bool);
|
|
343
|
+
inactivate(document.getElementById('tagsum-' + tag), bool);
|
|
344
|
+
for(var i = 1, obj; obj = getFeatureNodeFromId(tag + i); i ++) hideByTag(obj, tag, bool);
|
|
345
|
+
navigation = document.getElementById(navigation);
|
|
346
|
+
initializeNavigations();
|
|
347
|
+
// resumeScrollPosition();
|
|
348
|
+
};
|
|
349
|
+
|
|
350
|
+
toggleAnchors = function(button, tag, navigation) {
|
|
351
|
+
// recordScrollPosition();
|
|
352
|
+
var bool = toggleMarking(button);
|
|
353
|
+
inactivate(button, bool);
|
|
354
|
+
inactivate(document.getElementById('tagsum-' + tag), bool);
|
|
355
|
+
for(var i = 1, obj; obj = document.getElementById(tag + i); i ++) hide(obj, bool);
|
|
356
|
+
navigation = document.getElementById(navigation);
|
|
357
|
+
initializeNavigation(navigation);
|
|
358
|
+
// resumeScrollPosition();
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
navigateTag = function(navigation, d) {
|
|
362
|
+
var n = navigation.features.length;
|
|
363
|
+
if(n == 0) return;
|
|
364
|
+
var old = document.getElementById('current');
|
|
365
|
+
if(old) old.removeAttribute('id');
|
|
366
|
+
var current = navigation.querySelector('.current');
|
|
367
|
+
current.id = 'current';
|
|
368
|
+
var i = parseInt(current.innerText) + d;
|
|
369
|
+
if(i < 1) i = 1;
|
|
370
|
+
if(i > n) i = n;
|
|
371
|
+
current.innerText = i;
|
|
372
|
+
location.hash = getIdFromObj(navigation.features[i - 1]);
|
|
373
|
+
};
|
|
374
|
+
|
|
375
|
+
//var lastToggled =
|
|
376
|
+
//var lastViewPort =
|
|
377
|
+
recordScrollPosition = function() {
|
|
378
|
+
// main.scrollTop = navigation.features[i - 1].offsetTop - main.offsetTop;
|
|
379
|
+
/*
|
|
380
|
+
foo = function(obj) {
|
|
381
|
+
var ref = window.scrollY - window.pageYOffset + document.documentElement.clientTop;
|
|
382
|
+
var checkChildDivs = function() {
|
|
383
|
+
var children = obj.childNodes;
|
|
384
|
+
if (children.length) {[].forEach.call(children, function(e, i, a) {
|
|
385
|
+
if (e.toString() === "[object HTMLDivElement]") {
|
|
386
|
+
// the top of the div relative to the document
|
|
387
|
+
// minus the height of window hidden above the top of the screen
|
|
388
|
+
var top = e.getBoundingClientRect().top;
|
|
389
|
+
// top and bottom posns relative to the top of the screen
|
|
390
|
+
// the top and bottom distances of the element relative to the top of the screen
|
|
391
|
+
// the div overlaps the screen top
|
|
392
|
+
if ((top <= ref) && (ref <= top + e.offsetHeight)) {
|
|
393
|
+
obj = e;
|
|
394
|
+
checkChildDivs();
|
|
395
|
+
return false;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
});}
|
|
399
|
+
};
|
|
400
|
+
checkChildDivs();
|
|
401
|
+
return obj;
|
|
402
|
+
};
|
|
403
|
+
*/
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
resumeScrollPosition = function() {
|
|
407
|
+
};
|
|
408
|
+
|
|
409
|
+
coverage = function(obj){
|
|
410
|
+
alert("Sorry, this function is not implemented.");
|
|
411
|
+
// alert(obj.nextSibling.contentDocument.querySelector('body').innerText);
|
|
412
|
+
// var f = obj.dataset.file;
|
|
413
|
+
};
|
|
414
|
+
</script></body></html>
|