Added credits link in options page
diff --git a/css/options.css b/css/options.css
index 216e656..d7fcbd6 100644
--- a/css/options.css
+++ b/css/options.css
@@ -63,7 +63,7 @@
}
/* Dialog */
-dialog {
+dialog#languages_add_dialog {
position: fixed;
top: 50%;
left: 50%;
@@ -100,4 +100,51 @@
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Credits */
+#credits_container {
+ position: absolute;
+ top: 0px;
+ right: 50px;
+ background: rgb(195, 235, 204);
+ border: solid 1px rgb(139, 139, 139);
+ border-top: 0;
+ border-radius: 0px 0px 5px 5px;
+}
+
+#credits_container a {
+ color: green!important;
+ margin: 0 5px;
+}
+
+dialog#credits_dialog {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-left: -216px;
+ margin-top: -196px;
+ height: 360px;
+ width: 400px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+}
+
+dialog#credits_dialog .content_area h4 {
+ margin-bottom: 0px;
+}
+
+dialog#credits_dialog .content_area a.homepage {
+ position: absolute;
+ right: 16px;
+ font-size: 14px;
+}
+
+dialog#credits_dialog .content_area p, dialog#credits_dialog .content_area span {
+ font-size: 14px;
+}
+
+dialog#credits_dialog .content_area p.author {
+ margin-top: 7px;
}
\ No newline at end of file
diff --git a/js/options.js b/js/options.js
index 76f3c0e..8a7e6cb 100644
--- a/js/options.js
+++ b/js/options.js
@@ -83,8 +83,8 @@
});
// Handling The Dialog
- $("#languages_add").addEventListener('click', function() { $("dialog").showModal(); });
- $("#languages_add_cancel").addEventListener('click', function() { $("dialog").close(); });
+ $("#languages_add").addEventListener('click', function() { $("dialog#languages_add_dialog").showModal(); });
+ $("#languages_add_cancel").addEventListener('click', function() { $("dialog#languages_add_dialog").close(); });
$("#languages_add_ok").addEventListener('click', function() {
var el = document.createElement('li');
var language = $("#select_language").value;
@@ -104,6 +104,42 @@
$("dialog").close();
});
+ // About credits...
+ var xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ var json = JSON.parse(xhr.responseText), printhtml = "";
+ for (var item in json) {
+ printhtml += "<div>";
+ if (json[item].url) {
+ printhtml += "<a href='"+json[item].url+"' class='homepage' target='_blank'>homepage</a>";
+ }
+ printhtml += "<h4>"+json[item].name+"</h4>";
+ if (json[item].author) {
+ printhtml += "<p class='author'>by "+json[item].author;
+ }
+ if (json[item].license) {
+ printhtml += " – "+json[item].license+"</p>";
+ } else {
+ printhtml += "</p>";
+ }
+ printhtml += "</div>";
+ }
+ $("dialog#credits_dialog .content_area").innerHTML = printhtml;
+ window.onhashchange = function() {
+ if (location.hash == "#credits") {
+ $("dialog#credits_dialog").showModal();
+ }
+ }
+ if (location.hash == "#credits") {
+ $("dialog#credits_dialog").showModal();
+ }
+ $("#credits_ok").addEventListener('click', function() { $("dialog#credits_dialog").close(); history.pushState("", document.title, window.location.pathname + window.location.search); });
+ }
+ }
+ xhr.open("GET", "json/credits.json", true);
+ xhr.send();
+
// Print language list in the modal dialog
print_list_modal();
});
diff --git a/json/credits.json b/json/credits.json
index c3fde48..0bbc52f 100644
--- a/json/credits.json
+++ b/json/credits.json
@@ -1,6 +1,3 @@
-/*
- * JSON credits. This file includes credits to the Open Source projects which made this extension exist
- */
{
"icon": {
"name": "Metro Uinvert Dock Icon Set",
@@ -11,7 +8,7 @@
"name": "Russian Translation",
"url": "https://code.google.com/r/sashasimkin-translateselectedtext/source/detail?r=fc4e58ee0d69929d610a84a7600338e99b9d3d83",
"author": "Alexander Simkin"
- }
+ },
"sortable": {
"name": "Sortable",
"url": "https://github.com/RubaXa/Sortable",
diff --git a/options.html b/options.html
index fbdceb7..9fa0223 100644
--- a/options.html
+++ b/options.html
@@ -7,23 +7,34 @@
<script src="js/options.js"></script>
<script src="js/sortable.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
+
</head>
<body>
+ <div id="credits_container">
+ <a href="#credits">Credits</a>
+ </div>
+
<h1 id="welcome"></h1>
+
<p id="introduction"></p>
+
<div id="languages_container">
<ul id="languages"></ul>
</div>
<div id="languages_footer">
<button id="languages_add">Add</button>
</div>
+
<h2 id="otheroptionsheader"></h2>
+
<div id="otheroptions">
<input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs"></label><br>
<input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab"></label><br>
<input type="radio" name="uniquetab" id="panel" value="panel"> <label id="panel_label" for="panel"></label>
</div>
+
<button id="save"></button>
+
<dialog id="languages_add_dialog">
<h3>Add language</h3>
<div class="content_area">
@@ -35,5 +46,13 @@
<button id="languages_add_ok">OK</button>
</div>
</dialog>
+ <dialog id="credits_dialog">
+ <h3>Credits</h3>
+ <div class="content_area">
+ </div>
+ <div class="action_buttons">
+ <button id="credits_ok">OK</button>
+ </div>
+ </dialog>
</body>
</html>