open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move html templates to html file

Browse Source
This commit is contained in:
tophf 2015-07-19 18:27:19 +03:00
parent 2e7c35e8f0
commit 4f61494e0d
7 changed files with 110 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
edit.html
View File

@ -125,7 +125,7 @@
display: none;
}
#sections > div > button:not(:first-of-type) {
margin-left: 0.4rem;
margin-left: 0.2rem;
}
.dirty > label::before {
content: "*";
@ -443,6 +443,71 @@
}
</style>
<link id="cm-theme" rel="stylesheet">
<template data-id="appliesTo">
<li>
<select name="applies-type" class="applies-type style-contributor">
<option value="url" i18n-text="appliesUrlOption"></option>
<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
<option value="domain" i18n-text="appliesDomainOption"></option>
<option value="regexp" i18n-text="appliesRegexpOption"></option>
</select>
<input name="applies-value" class="applies-value style-contributor">
<button class="remove-applies-to" i18n-text="appliesRemove"></button>
<button class="add-applies-to" i18n-text="appliesAdd"></button>
</li>
</template>
<template data-id="appliesToEverything">
<li class="applies-to-everything" i18n-html="appliesToEverything">
<button class="add-applies-to" i18n-text="appliesSpecify"></button>
</li>
</template>
<template data-id="section">
<div>
<label i18n-text="sectionCode"></label>
<textarea class="code"></textarea>
<br>
<div class="applies-to">
<label i18n-text="appliesLabel">
<img class="applies-to-help" src="help.png" i18n-alt="helpAlt">
</label>
<ul class="applies-to-list"></ul>
</div>
<button class="remove-section" i18n-text="sectionRemove"></button>
<button class="add-section" i18n-text="sectionAdd"></button>
<button class="beautify-section" i18n-text="styleBeautify"></button>
</div>
</template>
<template data-id="find">
<span i18n-text="search">: <input type="text" class="CodeMirror-search-field">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replace">
<span i18n-text="replace">: <input type="text" class="CodeMirror-search-field">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replaceAll">
<span i18n-text="replaceAll">: <input type="text" class="CodeMirror-search-field">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replaceWith">
<span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field">
</span>
</template>
<template data-id="replaceConfirm">
<span i18n-text="replace">?
<button i18n-text="confirmYes"></button>
<button i18n-text="confirmNo"></button>
<button i18n-text="confirmStop"></button>
</span>
</template>
<template data-id="jumpToLine">
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
</template>
<script src="storage.js"></script>
<script src="messaging.js"></script>
<script src="localization.js"></script>

73
edit.js
View File

@ -10,79 +10,6 @@ var useHistoryBack; // use browser history back when "back to manage" is click
var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"};
var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
var template = {
appliesTo: '\
<li>\
<select name="applies-type" class="applies-type style-contributor">\
<option value="url" i18n-text="appliesUrlOption"></option>\
<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>\
<option value="domain" i18n-text="appliesDomainOption"></option>\
<option value="regexp" i18n-text="appliesRegexpOption"></option>\
</select>\
<input name="applies-value" class="applies-value style-contributor">\
<button class="remove-applies-to" i18n-text="appliesRemove"></button>\
<button class="add-applies-to" i18n-text="appliesAdd"></button>\
</li>\
',
appliesToEverything: '\
<li class="applies-to-everything" i18n-html="appliesToEverything")>\
<button class="add-applies-to" i18n-text="appliesSpecify"></button>\
</li>\
',
section: '\
<div>\
<label i18n-text="sectionCode"></label>\
<textarea class="code"></textarea>\
<br>\
<div class="applies-to">\
<label i18n-text="appliesLabel">\
&nbsp;<img class="applies-to-help" src="help.png" i18n-alt="helpAlt">\
</label>\
<ul class="applies-to-list"></ul>\
</div>\
<button class="remove-section" i18n-text="sectionRemove"></button>\
<button class="add-section" i18n-text="sectionAdd"></button>\
<button class="beautify-section" i18n-text="styleBeautify"></button>\
</div>\
',
find: '\
<span i18n-text="search">:&nbsp;\
<input type="text" class="CodeMirror-search-field"/>&nbsp;\
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
</span>\
',
replace: '\
<span i18n-text="replace">:&nbsp;\
<input type="text" class="CodeMirror-search-field"/>&nbsp;\
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
</span>\
',
replaceAll: '\
<span i18n-text="replaceAll">:&nbsp;\
<input type="text" class="CodeMirror-search-field"/>&nbsp;\
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
</span>\
',
replaceWith: '\
<span i18n-text="replaceWith">:&nbsp;\
<input type="text" class="CodeMirror-search-field"/>\
</span>\
',
replaceConfirm: '\
<span i18n-text="replace">?&nbsp;\
<button i18n-text="confirmYes"></button>&nbsp;\
<button i18n-text="confirmNo"></button>&nbsp;\
<button i18n-text="confirmStop"></button>\
</span>\
',
jumpToLine: '\
<span i18n-text="editGotoLine">:&nbsp;\
<input class="CodeMirror-jump-field" type="text"/>\
</span>\
'
}
Object.keys(template).forEach(function(name) { template[name] = tHTML(template[name]); });
// make querySelectorAll enumeration code readable
["forEach", "some", "indexOf"].forEach(function(method) {
NodeList.prototype[method]= Array.prototype[method];

6
localization.js
View File

@ -1,3 +1,4 @@
var template = {};
tDocLoader();
function t(key, params) {
@ -35,6 +36,11 @@ function tNodeList(nodes) {
if (node.nodeType != 1) { // not an ELEMENT_NODE
continue;
}
if (node.localName == "template") {
tNodeList(node.content.querySelectorAll("*"));
template[node.dataset.id] = node.content.firstElementChild;
continue;
}
for (var a = node.attributes.length - 1; a >= 0; a--) {
var attr = node.attributes[a];
var name = attr.nodeName;

20
manage.html
View File

@ -46,9 +46,6 @@
.applies-to, .actions {
padding-left: 15px;
}
.actions > * {
margin-right: 5px;
}
.applies-to-extra {
font-weight: bold;
}
@ -129,6 +126,23 @@
}
</style>
<template data-id="style">
<div>
<h2 class="style-name"></h2>
<p class="applies-to"></p>
<p class="actions">
<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
<button class="enable" i18n-text="enableStyleLabel"></button>
<button class="disable" i18n-text="disableStyleLabel"></button>
<button class="delete" i18n-text="deleteStyleLabel"></button>
<button class="check-update" i18n-text="checkForUpdate"></button>
<button class="update" i18n-text="installUpdate"></button>
<span class="update-note"></span>
</p>
</div>
</template>
<script src="localization.js"></script>
<script src="health.js"></script>
<script src="storage.js"></script>

18
manage.js
View File

@ -1,19 +1,3 @@
var styleTemplate = tHTML('\
<div>\
<h2 class="style-name"></h2>\
<p class="applies-to"></p>\
<p class="actions">\
<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>\
<button class="enable" i18n-text="enableStyleLabel"></button>\
<button class="disable" i18n-text="disableStyleLabel"></button>\
<button class="delete" i18n-text="deleteStyleLabel"></button>\
<button class="check-update" i18n-text="checkForUpdate"></button>\
<button class="update" i18n-text="installUpdate"></button>\
<span class="update-note"></span>\
</p>\
</div>\
');
var lastUpdatedStyleId = null;
var installed;
@ -44,7 +28,7 @@ function showStyles(styles) {
}
function createStyleElement(style) {
var e = styleTemplate.cloneNode(true);
var e = template.style.cloneNode(true);
e.setAttribute("class", style.enabled == "true" ? "enabled" : "disabled");
e.setAttribute("style-id", style.id);
if (style.updateUrl) {

21
popup.html
View File

@ -61,7 +61,7 @@
text-decoration: line-through;
}
#installed .actions a {
margin-right: 0.5em;
margin-right: 0.2em;
}
body > .actions {
margin-top: 0.5em;
@ -115,7 +115,7 @@
.breadcrumbs > .write-style-link:last-child::before {content: "\200b/"}
.breadcrumbs > .write-style-link:last-child:first-child::before,
.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none}
/* suppress TLD-only link */
.breadcrumbs > .write-style-link[subdomain=""] {display: none}
@ -130,6 +130,23 @@
}
</style>
<template data-id="style">
<div>
<div class="left-gutter">
<input class="checker" type="checkbox">
</div>
<div class="main-controls">
<label class="style-name"></label>
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
</div>
</div>
</div>
</template>
<script src="localization.js"></script>
<script src="health.js"></script>
<script src="storage.js"></script>

19
popup.js
View File

@ -1,20 +1,3 @@
var styleTemplate = tHTML('\
<div>\
<div class="left-gutter">\
<input class="checker" type="checkbox">\
</div>\
<div class="main-controls">\
<label class="style-name"></label>\
<div class="actions">\
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>\
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>\
<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>\
<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>\
</div>\
</div>\
</div>\
');
var writeStyleTemplate = document.createElement("a");
writeStyleTemplate.className = "write-style-link";
@ -102,7 +85,7 @@ function showStyles(styles) {
}
function createStyleElement(style) {
var e = styleTemplate.cloneNode(true);
var e = template.style.cloneNode(true);
var checkbox = e.querySelector(".checker");
checkbox.id = "style-" + style.id;
checkbox.checked = style.enabled == "true";