refactor: handlebars class helper
This commit is contained in:
@@ -1,18 +1,18 @@
|
||||
<div class="eruda-control">
|
||||
<span class="eruda-icon-clear eruda-clear-console"></span>
|
||||
<span class="eruda-filter eruda-active" data-filter="all">All</span>
|
||||
<span class="eruda-filter" data-filter="error">Error</span>
|
||||
<span class="eruda-filter" data-filter="warn">Warning</span>
|
||||
<span class="eruda-filter" data-filter="info">Info</span>
|
||||
<span class="eruda-filter" data-filter="log">Log</span>
|
||||
<span class="eruda-filter" data-filter="debug">Debug</span>
|
||||
<span class="eruda-icon-info eruda-help"></span>
|
||||
<div {{{class 'control'}}}>
|
||||
<span {{{class 'icon-clear clear-console'}}}></span>
|
||||
<span {{{class 'filter active'}}} data-filter="all">All</span>
|
||||
<span {{{class 'filter'}}} data-filter="error">Error</span>
|
||||
<span {{{class 'filter'}}} data-filter="warn">Warning</span>
|
||||
<span {{{class 'filter'}}} data-filter="info">Info</span>
|
||||
<span {{{class 'filter'}}} data-filter="log">Log</span>
|
||||
<span {{{class 'filter'}}} data-filter="debug">Debug</span>
|
||||
<span {{{class 'icon-info help'}}}></span>
|
||||
</div>
|
||||
<ul class="eruda-logs"></ul>
|
||||
<div class="eruda-js-input">
|
||||
<div class="eruda-buttons">
|
||||
<div class="eruda-button eruda-cancel">Cancel</div>
|
||||
<div class="eruda-button eruda-execute">Execute</div>
|
||||
<ul {{{class 'logs'}}}></ul>
|
||||
<div {{{class 'js-input'}}}>
|
||||
<div {{{class 'buttons'}}}>
|
||||
<div {{{class 'button cancel'}}}>Cancel</div>
|
||||
<div {{{class 'button execute'}}}>Execute</div>
|
||||
</div>
|
||||
<textarea placeholder="Type JavaScript here"></textarea>
|
||||
</div>
|
||||
@@ -1,28 +1,28 @@
|
||||
<li class="eruda-log-container" data-id="{{id}}" data-type="{{type}}">
|
||||
<li {{{class 'log-container'}}} data-id="{{id}}" data-type="{{type}}">
|
||||
{{#if displayHeader}}
|
||||
<div class="eruda-header">
|
||||
<div {{{class 'header'}}}>
|
||||
{{#repeat group.indentLevel}}
|
||||
<div class="eruda-nesting-level"></div>
|
||||
<div {{{class 'nesting-level'}}}></div>
|
||||
{{/repeat}}
|
||||
<div class="eruda-time-container">
|
||||
<div {{{class 'time-container'}}}>
|
||||
<span data-mark="time">{{time}}</span> <span>{{from}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="eruda-{{type}} eruda-log-item">
|
||||
<div {{{class (concat type ' log-item')}}}>
|
||||
{{#repeat group.indentLevel}}
|
||||
<div class="eruda-nesting-level"></div>
|
||||
<div {{{class 'nesting-level'}}}></div>
|
||||
{{/repeat}}
|
||||
{{#if icon}}
|
||||
<div class="eruda-icon-container">
|
||||
<span class="eruda-icon eruda-icon-{{icon}}"></span>
|
||||
<div {{{class 'icon-container'}}}>
|
||||
<span {{{class (concat 'icon icon-' icon)}}}></span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="eruda-count-container eruda-hidden">
|
||||
<div class="eruda-count" data-mark="count"></div>
|
||||
<div {{{class 'count-container hidden'}}}>
|
||||
<div {{{class 'count'}}} data-mark="count"></div>
|
||||
</div>
|
||||
<div class="eruda-log-content-wrapper">
|
||||
<div class="eruda-log-content">{{{msg}}}</div>
|
||||
<div {{{class 'log-content-wrapper'}}}>
|
||||
<div {{{class 'log-content'}}}>{{{msg}}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="eruda-dev-tools">
|
||||
<div class="eruda-nav-bar"></div>
|
||||
<div class="eruda-tools"></div>
|
||||
<div {{{class 'dev-tools'}}}>
|
||||
<div {{{class 'nav-bar'}}}></div>
|
||||
<div {{{class 'tools'}}}></div>
|
||||
</div>
|
||||
@@ -1,14 +1,14 @@
|
||||
<div class="eruda-bottom-bar">
|
||||
<div class="eruda-btn eruda-select">
|
||||
<span class="eruda-icon eruda-icon-select"></span>
|
||||
<div {{{class 'bottom-bar'}}}>
|
||||
<div {{{class 'btn select'}}}>
|
||||
<span {{{class 'icon icon-select'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-refresh">
|
||||
<span class="eruda-icon eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh'}}}>
|
||||
<span {{{class 'icon icon-refresh'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-highlight">
|
||||
<span class="eruda-icon eruda-icon-eye"></span>
|
||||
<div {{{class 'btn highlight'}}}>
|
||||
<span {{{class 'icon icon-eye'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-reset">
|
||||
<span class="eruda-icon eruda-icon-reset"></span>
|
||||
<div {{{class 'btn reset'}}}>
|
||||
<span {{{class 'icon icon-reset'}}}></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,26 +1,26 @@
|
||||
{{#if parents}}
|
||||
<ul class="eruda-parents">
|
||||
<ul {{{class 'parents'}}}>
|
||||
{{#each parents}}
|
||||
<li>
|
||||
<div class="eruda-parent" data-idx="{{idx}}">{{{text}}}</div>
|
||||
<span class="eruda-icon-arrow-right"></span>
|
||||
<div {{{class 'parent'}}} data-idx="{{idx}}">{{{text}}}</div>
|
||||
<span {{{class 'icon-arrow-right'}}}></span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="eruda-breadcrumb">
|
||||
<div {{{class 'breadcrumb'}}}>
|
||||
{{{name}}}
|
||||
</div>
|
||||
{{#if children}}
|
||||
<ul class="eruda-children">
|
||||
<ul {{{class 'children'}}}>
|
||||
{{#each children}}
|
||||
<li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="eruda-attributes eruda-section">
|
||||
<div {{{class 'attributes section'}}}>
|
||||
<h2>Attributes</h2>
|
||||
<div class="eruda-table-wrapper">
|
||||
<div {{{class 'table-wrapper'}}}>
|
||||
<table>
|
||||
<tbody>
|
||||
{{#if attributes}}
|
||||
@@ -40,14 +40,14 @@
|
||||
</div>
|
||||
</div>
|
||||
{{#if styles}}
|
||||
<div class="eruda-styles eruda-section">
|
||||
<div {{{class 'styles section'}}}>
|
||||
<h2>Styles</h2>
|
||||
<div class="eruda-style-wrapper">
|
||||
<div {{{class 'style-wrapper'}}}>
|
||||
{{#each styles}}
|
||||
<div class="eruda-style-rules">
|
||||
<div {{{class 'style-rules'}}}>
|
||||
<div>{{selectorText}} {</div>
|
||||
{{#each style}}
|
||||
<div class="eruda-rule">
|
||||
<div {{{class 'rule'}}}>
|
||||
<span>{{@key}}</span>: {{{.}}};
|
||||
</div>
|
||||
{{/each}}
|
||||
@@ -58,43 +58,43 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if computedStyle}}
|
||||
<div class="eruda-computed-style eruda-section">
|
||||
<h2 class="eruda-toggle-all-computed-style eruda-active-effect">Computed Style
|
||||
<div class="eruda-btn">
|
||||
<div {{{class 'computed-style section'}}}>
|
||||
<h2 {{{class 'toggle-all-computed-style active-effect'}}}>Computed Style
|
||||
<div {{{class 'btn'}}}>
|
||||
{{#if rmDefComputedStyle}}
|
||||
<span class="eruda-icon-compress"></span>
|
||||
<span {{{class 'icon-compress'}}}></span>
|
||||
{{else}}
|
||||
<span class="eruda-icon-expand"></span>
|
||||
<span {{{class 'icon-expand'}}}></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</h2>
|
||||
<div class="eruda-box-model">
|
||||
{{#if boxModel.position}}<div class="eruda-position">
|
||||
<div class="eruda-label">position</div><div class="eruda-top">{{boxModel.position.top}}</div><br><div class="eruda-left">{{boxModel.position.left}}</div>{{/if}}{{!
|
||||
}}<div class="eruda-margin">
|
||||
<div class="eruda-label">margin</div><div class="eruda-top">{{boxModel.margin.top}}</div><br><div class="eruda-left">{{boxModel.margin.left}}</div>{{!
|
||||
}}<div class="eruda-border">
|
||||
<div class="eruda-label">border</div><div class="eruda-top">{{boxModel.border.top}}</div><br><div class="eruda-left">{{boxModel.border.left}}</div>{{!
|
||||
}}<div class="eruda-padding">
|
||||
<div class="eruda-label">padding</div><div class="eruda-top">{{boxModel.padding.top}}</div><br><div class="eruda-left">{{boxModel.padding.left}}</div>{{!
|
||||
}}<div class="eruda-content">
|
||||
<div {{{class 'box-model'}}}>
|
||||
{{#if boxModel.position}}<div {{{class 'position'}}}>
|
||||
<div {{{class 'label'}}}>position</div><div {{{class 'top'}}}>{{boxModel.position.top}}</div><br><div {{{class 'left'}}}>{{boxModel.position.left}}</div>{{/if}}{{!
|
||||
}}<div {{{class 'margin'}}}>
|
||||
<div {{{class 'label'}}}>margin</div><div {{{class 'top'}}}>{{boxModel.margin.top}}</div><br><div {{{class 'left'}}}>{{boxModel.margin.left}}</div>{{!
|
||||
}}<div {{{class 'border'}}}>
|
||||
<div {{{class 'label'}}}>border</div><div {{{class 'top'}}}>{{boxModel.border.top}}</div><br><div {{{class 'left'}}}>{{boxModel.border.left}}</div>{{!
|
||||
}}<div {{{class 'padding'}}}>
|
||||
<div {{{class 'label'}}}>padding</div><div {{{class 'top'}}}>{{boxModel.padding.top}}</div><br><div {{{class 'left'}}}>{{boxModel.padding.left}}</div>{{!
|
||||
}}<div {{{class 'content'}}}>
|
||||
<span>{{boxModel.content.width}}</span> × <span>{{boxModel.content.height}}</span>
|
||||
</div>{{!
|
||||
}}<div class="eruda-right">{{boxModel.padding.right}}</div><br><div class="eruda-bottom">{{boxModel.padding.bottom}}</div>{{!
|
||||
}}<div {{{class 'right'}}}>{{boxModel.padding.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.padding.bottom}}</div>{{!
|
||||
}}</div>{{!
|
||||
}}<div class="eruda-right">{{boxModel.border.right}}</div><br><div class="eruda-bottom">{{boxModel.border.bottom}}</div>{{!
|
||||
}}<div {{{class 'right'}}}>{{boxModel.border.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.border.bottom}}</div>{{!
|
||||
}}</div>{{!
|
||||
}}<div class="eruda-right">{{boxModel.margin.right}}</div><br><div class="eruda-bottom">{{boxModel.margin.bottom}}</div>{{!
|
||||
}}<div {{{class 'right'}}}>{{boxModel.margin.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.margin.bottom}}</div>{{!
|
||||
}}</div>{{!
|
||||
}}{{#if boxModel.position}}<div class="eruda-right">{{boxModel.position.right}}</div><br><div class="eruda-bottom">{{boxModel.position.bottom}}</div>{{!
|
||||
}}{{#if boxModel.position}}<div {{{class 'right'}}}>{{boxModel.position.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.position.bottom}}</div>{{!
|
||||
}}</div>{{/if}}
|
||||
</div>
|
||||
<div class="eruda-table-wrapper">
|
||||
<div {{{class 'table-wrapper'}}}>
|
||||
<table>
|
||||
<tbody>
|
||||
{{#each computedStyle}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{@key}}</td>
|
||||
<td {{{class 'key'}}}>{{@key}}</td>
|
||||
<td>{{{.}}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -104,15 +104,15 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if listeners}}
|
||||
<div class="eruda-listeners eruda-section">
|
||||
<div {{{class 'listeners section'}}}>
|
||||
<h2>Event Listeners</h2>
|
||||
<div class="eruda-listener-wrapper">
|
||||
<div {{{class 'listener-wrapper'}}}>
|
||||
{{#each listeners}}
|
||||
<div class="eruda-listener">
|
||||
<div class="eruda-listener-type">{{@key}}</div>
|
||||
<ul class="eruda-listener-content">
|
||||
<div {{{class 'listener'}}}>
|
||||
<div {{{class 'listener-type'}}}>{{@key}}</div>
|
||||
<ul {{{class 'listener-content'}}}>
|
||||
{{#each .}}
|
||||
<li class="{{#if useCapture}}eruda-capture{{/if}}">{{listenerStr}}</li>
|
||||
<li {{#if useCapture}}{{{class 'capture'}}}{{/if}}>{{listenerStr}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="eruda-elements-highlight">
|
||||
<div class="eruda-indicator">
|
||||
<div class="eruda-margin"></div>
|
||||
<div class="eruda-border"></div>
|
||||
<div class="eruda-padding"></div>
|
||||
<div class="eruda-content"></div>
|
||||
<div {{{class 'elements-highlight'}}}>
|
||||
<div {{{class 'indicator'}}}>
|
||||
<div {{{class 'margin'}}}></div>
|
||||
<div {{{class 'border'}}}></div>
|
||||
<div {{{class 'padding'}}}></div>
|
||||
<div {{{class 'content'}}}></div>
|
||||
</div>
|
||||
<div class="eruda-size"></div>
|
||||
<div {{{class 'size'}}}></div>
|
||||
</div>
|
||||
@@ -1,3 +1,3 @@
|
||||
<div class="eruda-entry-btn">
|
||||
<span class="eruda-icon-tool"></span>
|
||||
<div {{{class 'entry-btn'}}}>
|
||||
<span {{{class 'icon-tool'}}}></span>
|
||||
</div>
|
||||
@@ -1,10 +1,10 @@
|
||||
<div class="eruda-title">
|
||||
<div {{{class 'title'}}}>
|
||||
Request
|
||||
<div class="eruda-btn eruda-clear-request">
|
||||
<span class="eruda-icon-clear"></span>
|
||||
<div {{{class 'btn clear-request'}}}>
|
||||
<span {{{class 'icon-clear'}}}></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="eruda-requests">
|
||||
<ul {{{class 'requests'}}}>
|
||||
{{#if requests}}
|
||||
{{#each requests}}
|
||||
<li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
|
||||
@@ -14,7 +14,7 @@
|
||||
<span>{{subType}}</span>
|
||||
<span>{{size}}</span>
|
||||
<span>{{displayTime}}</span>
|
||||
<span class="eruda-blue">{{url}}</span>
|
||||
<span {{{class 'blue'}}}>{{url}}</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="eruda-section eruda-local-storage">
|
||||
<h2 class="eruda-title">
|
||||
<div {{{class 'section local-storage'}}}>
|
||||
<h2 {{{class 'title'}}}>
|
||||
Local Storage
|
||||
<div class="eruda-btn eruda-refresh-local-storage">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-local-storage'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-clear-storage" data-type="local">
|
||||
<span class="eruda-icon-clear"></span>
|
||||
<div {{{class 'btn clear-storage'}}} data-type="local">
|
||||
<span {{{class 'icon-clear'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<table>
|
||||
@@ -13,10 +13,10 @@
|
||||
{{#if localStoreData}}
|
||||
{{#each localStoreData}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{key}}</td>
|
||||
<td class="eruda-storage-val" data-key="{{key}}" data-type="local">{{val}}</td>
|
||||
<td class="eruda-control">
|
||||
<span class="eruda-icon-delete eruda-delete-storage" data-key="{{key}}" data-type="local"></span>
|
||||
<td {{{class 'key'}}}>{{key}}</td>
|
||||
<td {{{class 'storage-val'}}} data-key="{{key}}" data-type="local">{{val}}</td>
|
||||
<td {{{class 'control'}}}>
|
||||
<span {{{class 'icon-delete delete-storage'}}} data-key="{{key}}" data-type="local"></span>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -28,14 +28,14 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="eruda-section eruda-session-storage">
|
||||
<h2 class="eruda-title">
|
||||
<div {{{class 'section session-storage'}}}>
|
||||
<h2 {{{class 'title'}}}>
|
||||
Session Storage
|
||||
<div class="eruda-btn eruda-refresh-session-storage">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-session-storage'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-clear-storage" data-type="session">
|
||||
<span class="eruda-icon-clear"></span>
|
||||
<div {{{class 'btn clear-storage'}}} data-type="session">
|
||||
<span {{{class 'icon-clear'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<table>
|
||||
@@ -43,10 +43,10 @@
|
||||
{{#if sessionStoreData}}
|
||||
{{#each sessionStoreData}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{key}}</td>
|
||||
<td class="eruda-storage-val" data-key="{{key}}" data-type="session">{{val}}</td>
|
||||
<td class="eruda-control">
|
||||
<span class="eruda-icon-delete eruda-delete-storage" data-key="{{key}}" data-type="session"></span>
|
||||
<td {{{class 'key'}}}>{{key}}</td>
|
||||
<td {{{class 'storage-val'}}} data-key="{{key}}" data-type="session">{{val}}</td>
|
||||
<td {{{class 'control'}}}>
|
||||
<span {{{class 'icon-delete delete-storage'}}} data-key="{{key}}" data-type="session"></span>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -58,14 +58,14 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="eruda-section eruda-cookie">
|
||||
<h2 class="eruda-title {{cookieState}}">
|
||||
<div {{{class 'section cookie'}}}>
|
||||
<h2 {{{class (concat 'title ' cookieState)}}}>
|
||||
Cookie
|
||||
<div class="eruda-btn eruda-refresh-cookie">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-cookie'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
<div class="eruda-btn eruda-clear-cookie">
|
||||
<span class="eruda-icon-clear"></span>
|
||||
<div {{{class 'btn clear-cookie'}}}>
|
||||
<span {{{class 'icon-clear'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<table>
|
||||
@@ -73,10 +73,10 @@
|
||||
{{#if cookieData}}
|
||||
{{#each cookieData}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{key}}</td>
|
||||
<td {{{class 'key'}}}>{{key}}</td>
|
||||
<td>{{val}}</td>
|
||||
<td class="eruda-control">
|
||||
<span class="eruda-icon-delete eruda-delete-cookie" data-key="{{key}}"></span>
|
||||
<td {{{class 'control'}}}>
|
||||
<span {{{class 'icon-delete delete-cookie'}}} data-key="{{key}}"></span>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -88,18 +88,18 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="eruda-section eruda-script">
|
||||
<h2 class="eruda-title {{scriptState}}">
|
||||
<div {{{class 'section script'}}}>
|
||||
<h2 {{{class (concat 'title ' scriptState)}}}>
|
||||
Script
|
||||
<div class="eruda-btn eruda-refresh-script">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-script'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<ul class="eruda-link-list">
|
||||
<ul {{{class 'link-list'}}}>
|
||||
{{#if scriptData}}
|
||||
{{#each scriptData}}
|
||||
<li>
|
||||
<a href="{{this}}" target="_blank" class="eruda-js-link">{{this}}</a>
|
||||
<a href="{{this}}" target="_blank" {{{class 'js-link'}}}>{{this}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
@@ -107,18 +107,18 @@
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="eruda-section eruda-stylesheet">
|
||||
<h2 class="eruda-title {{stylesheetState}}">
|
||||
<div {{{class 'section stylesheet'}}}>
|
||||
<h2 {{{class (concat 'title ' stylesheetState)}}}>
|
||||
Stylesheet
|
||||
<div class="eruda-btn eruda-refresh-stylesheet">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-stylesheet'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<ul class="eruda-link-list">
|
||||
<ul {{{class 'link-list'}}}>
|
||||
{{#if stylesheetData}}
|
||||
{{#each stylesheetData}}
|
||||
<li>
|
||||
<a href="{{this}}" target="_blank" class="eruda-css-link">{{this}}</a>
|
||||
<a href="{{this}}" target="_blank" {{{class 'css-link'}}}>{{this}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
@@ -126,18 +126,18 @@
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="eruda-section eruda-iframe">
|
||||
<h2 class="eruda-title">
|
||||
<div {{{class 'section iframe'}}}>
|
||||
<h2 {{{class 'title'}}}>
|
||||
Iframe
|
||||
<div class="eruda-btn eruda-refresh-iframe">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-iframe'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<ul class="eruda-link-list">
|
||||
<ul {{{class 'link-list'}}}>
|
||||
{{#if iframeData}}
|
||||
{{#each iframeData}}
|
||||
<li>
|
||||
<a href="{{this}}" target="_blank" class="eruda-iframe-link">{{this}}</a>
|
||||
<a href="{{this}}" target="_blank" {{{class 'iframe-link'}}}>{{this}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
@@ -145,18 +145,18 @@
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="eruda-section eruda-image">
|
||||
<h2 class="eruda-title {{imageState}}">
|
||||
<div {{{class 'section image'}}}>
|
||||
<h2 {{{class (concat 'title ' imageState)}}}>
|
||||
Image
|
||||
<div class="eruda-btn eruda-refresh-image">
|
||||
<span class="eruda-icon-refresh"></span>
|
||||
<div {{{class 'btn refresh-image'}}}>
|
||||
<span {{{class 'icon-refresh'}}}></span>
|
||||
</div>
|
||||
</h2>
|
||||
<ul class="eruda-image-list">
|
||||
<ul {{{class 'image-list'}}}>
|
||||
{{#if imageData}}
|
||||
{{#each imageData}}
|
||||
<li class="eruda-image">
|
||||
<img src="{{this}}" data-exclude="true" class="eruda-img-link"/>
|
||||
<li {{{class 'image'}}}>
|
||||
<img src="{{this}}" data-exclude="true" {{{class 'img-link'}}}/>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div id="{{id}}" class="eruda-color">
|
||||
<div class="eruda-head">
|
||||
<div id="{{id}}" {{{class 'color'}}}>
|
||||
<div {{{class 'head'}}}>
|
||||
{{desc}}
|
||||
<span class="eruda-val" style="background-color: {{val}}"></span>
|
||||
<span {{{class 'val'}}} style="background-color: {{val}}"></span>
|
||||
</div>
|
||||
<ul data-id="{{id}}">
|
||||
{{#each colors}}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div id="{{id}}" class="eruda-range">
|
||||
<div class="eruda-head">
|
||||
<div id="{{id}}" {{{class 'range'}}}>
|
||||
<div {{{class 'head'}}}>
|
||||
{{desc}}
|
||||
<span class="eruda-val">{{val}}</span>
|
||||
<span {{{class 'val'}}}>{{val}}</span>
|
||||
</div>
|
||||
<div class="eruda-input-container" data-id="{{id}}">
|
||||
<div class="eruda-range-track">
|
||||
<div class="eruda-range-track-bar">
|
||||
<div class="eruda-range-track-progress" style="width: {{progress}}%"></div>
|
||||
<div {{{class 'input-container'}}} data-id="{{id}}">
|
||||
<div {{{class 'range-track'}}}>
|
||||
<div {{{class 'range-track-bar'}}}>
|
||||
<div {{{class 'range-track-progress'}}} style="width: {{progress}}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{val}}"/>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div id="{{id}}" class="eruda-select">
|
||||
<div class="eruda-head">
|
||||
<div id="{{id}}" {{{class 'select'}}}>
|
||||
<div {{{class 'head'}}}>
|
||||
{{desc}}
|
||||
<span class="eruda-val">{{val}}</span>
|
||||
<span {{{class 'val'}}}>{{val}}</span>
|
||||
</div>
|
||||
<ul data-id="{{id}}">
|
||||
{{#each selections}}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div id="{{id}}" class="eruda-switch">
|
||||
<div id="{{id}}" {{{class 'switch'}}}>
|
||||
{{desc}}
|
||||
<label class="eruda-checkbox">
|
||||
<input type="checkbox" class="eruda-input" data-id="{{id}}" {{#if val}}checked{{/if}}>
|
||||
<span class="eruda-label"></span>
|
||||
<span class="eruda-handle"></span>
|
||||
<label {{{class 'checkbox'}}}>
|
||||
<input type="checkbox" {{{class 'input'}}} data-id="{{id}}" {{#if val}}checked{{/if}}>
|
||||
<span {{{class 'label'}}}></span>
|
||||
<span {{{class 'handle'}}}></span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -1,16 +1,16 @@
|
||||
{{#if showLineNum}}
|
||||
<div class="eruda-code-wrapper">
|
||||
<table class="eruda-code">
|
||||
<div {{{class 'code-wrapper'}}}>
|
||||
<table {{{class 'code'}}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="eruda-gutter">
|
||||
<td {{{class 'gutter'}}}>
|
||||
{{#each code}}
|
||||
<div class="eruda-line-num">{{idx}}</div>
|
||||
<div {{{class 'line-num'}}}>{{idx}}</div>
|
||||
{{/each}}
|
||||
</td>
|
||||
<td class="eruda-content">
|
||||
<td {{{class 'content'}}}>
|
||||
{{#each code}}
|
||||
<pre class="eruda-code-line">{{{val}}}</pre>
|
||||
<pre {{{class 'code-line'}}}>{{{val}}}</pre>
|
||||
{{/each}}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -18,7 +18,7 @@
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="eruda-code-wrapper">
|
||||
<pre class="eruda-code">{{{code}}}</pre>
|
||||
<div {{{class 'code-wrapper'}}}>
|
||||
<pre {{{class 'code'}}}>{{{code}}}</pre>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<div class="eruda-http">
|
||||
<div class="eruda-breadcrumb">{{url}}</div>
|
||||
<div {{{class 'http'}}}>
|
||||
<div {{{class 'breadcrumb'}}}>{{url}}</div>
|
||||
{{#if data}}
|
||||
<pre class="eruda-data">{{data}}</pre>
|
||||
<pre {{{class 'data'}}}>{{data}}</pre>
|
||||
{{/if}}
|
||||
<div class="eruda-section">
|
||||
<div {{{class 'section'}}}>
|
||||
<h2>Request Headers</h2>
|
||||
<table class="eruda-headers">
|
||||
<table {{{class 'headers'}}}>
|
||||
<tbody>
|
||||
{{#if reqHeaders}}
|
||||
{{#each reqHeaders}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{@key}}</td>
|
||||
<td {{{class 'key'}}}>{{@key}}</td>
|
||||
<td>{{.}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -22,12 +22,12 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Response Headers</h2>
|
||||
<table class="eruda-headers">
|
||||
<table {{{class 'headers'}}}>
|
||||
<tbody>
|
||||
{{#if resHeaders}}
|
||||
{{#each resHeaders}}
|
||||
<tr>
|
||||
<td class="eruda-key">{{@key}}</td>
|
||||
<td {{{class 'key'}}}>{{@key}}</td>
|
||||
<td>{{.}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
@@ -40,6 +40,6 @@
|
||||
</table>
|
||||
</div>
|
||||
{{#if resTxt}}
|
||||
<pre class="eruda-response">{{resTxt}}</pre>
|
||||
<pre {{{class 'response'}}}>{{resTxt}}</pre>
|
||||
{{/if}}
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="eruda-image">
|
||||
<div class="eruda-breadcrumb">{{src}}</div>
|
||||
<div class="eruda-img-container" data-exclude="true">
|
||||
<div {{{class 'image'}}}>
|
||||
<div {{{class 'breadcrumb'}}}>{{src}}</div>
|
||||
<div {{{class 'img-container'}}} data-exclude="true">
|
||||
<img src="{{src}}">
|
||||
</div>
|
||||
<div class="eruda-img-info">{{width}} × {{height}}</div>
|
||||
<div {{{class 'img-info'}}}>{{width}} × {{height}}</div>
|
||||
</div>
|
||||
@@ -1 +1 @@
|
||||
<ul class="eruda-json"></ul>
|
||||
<ul {{{class 'json'}}}></ul>
|
||||
@@ -1,3 +1,3 @@
|
||||
<div class="eruda-raw-wrapper">
|
||||
<div class="eruda-raw">{{val}}</div>
|
||||
<div {{{class 'raw-wrapper'}}}>
|
||||
<div {{{class 'raw'}}}>{{val}}</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
const handlebars = require('handlebars/runtime')
|
||||
const map = require('licia/map')
|
||||
const reduce = require('licia/reduce')
|
||||
const isStr = require('licia/isStr')
|
||||
|
||||
// https://github.com/helpers/handlebars-helper-repeat
|
||||
handlebars.registerHelper('repeat', (count = 0, options) => {
|
||||
handlebars.registerHelper('repeat', function(count = 0, options) {
|
||||
if (count < 1) return options.inverse(this)
|
||||
|
||||
const step = 1
|
||||
@@ -27,4 +30,16 @@ handlebars.registerHelper('repeat', (count = 0, options) => {
|
||||
return str
|
||||
})
|
||||
|
||||
handlebars.registerHelper('class', function(value) {
|
||||
let classes = value.split(/\s+/)
|
||||
|
||||
classes = map(classes, c => `eruda-${c}`)
|
||||
|
||||
return `class="${classes.join(' ')}"`
|
||||
})
|
||||
|
||||
handlebars.registerHelper('concat', function() {
|
||||
return reduce(arguments, (ret, n) => (isStr(n) ? ret + n : ret), '')
|
||||
})
|
||||
|
||||
module.exports = handlebars
|
||||
|
||||
Reference in New Issue
Block a user