help cleanup, use dijit dialog

This commit is contained in:
Andrew Dolgov 2012-12-28 15:42:02 +04:00
parent 744a29309d
commit b8cb4d08b3
10 changed files with 200 additions and 347 deletions

View File

@ -18,14 +18,74 @@ class Backend extends Handler {
print_r($rv); print_r($rv);
} }
private function display_main_help() {
$info = get_hotkeys_info($this->link);
$imap = get_hotkeys_map($this->link);
$omap = array();
// :(
$tinycharmap = array(
"(9)" => "{TAB}",
"(191)" => "?");
foreach ($imap[1] as $sequence => $action) {
if (!isset($omap[$action])) {
$omap[$action] = isset($tinycharmap[$sequence]) ? $tinycharmap[$sequence] :
$sequence;
}
}
print "<ul class='helpKbList' id='helpKbList'>";
print "<h2>" . __("Keyboard Shortcuts") . "</h2>";
foreach ($info as $section => $hotkeys) {
print "<li><h3>" . $section . "</h3></li>";
foreach ($hotkeys as $action => $description) {
print "<li>";
print "<input dojoType=\"dijit.form.CheckBox\"
type=\"checkbox\" disabled=\"1\" checked=\"1\">";
print "<span class='hksequence'>" . $omap[$action] . "</span>";
print $description;
print "</li>";
}
}
print "</ul>";
print "<p><a target=\"_blank\" href=\"http://tt-rss.org/wiki/InterfaceTips\">".
__("Other interface tips are available in the Tiny Tiny RSS wiki.") .
"</a></p>";
}
function help() { function help() {
$topic = basename($_REQUEST["topic"]); $topic = basename($_REQUEST["topic"]);
if (file_exists("help/$topic.php")) { switch ($topic) {
case "main":
$this->display_main_help();
break;
case "prefs":
//$this->display_prefs_help();
break;
default:
print "<p>".__("Help topic not found.")."</p>";
}
print "<div align='center'>";
print "<button dojoType=\"dijit.form.Button\"
onclick=\"return dijit.byId('helpDlg').hide()\">".
__('Close this window')."</button>";
print "</div>";
/* if (file_exists("help/$topic.php")) {
include("help/$topic.php"); include("help/$topic.php");
} else { } else {
print "<p>".__("Help topic not found.")."</p>"; print "<p>".__("Help topic not found.")."</p>";
} } */
/* print "<div align='center'> /* print "<div align='center'>
<button onclick=\"javascript:window.close()\">". <button onclick=\"javascript:window.close()\">".
__('Close this window')."</button></div>"; */ __('Close this window')."</button></div>"; */

View File

@ -1,81 +0,0 @@
<h1><?php echo __("Keyboard Shortcuts") ?></h1>
<table style='width : 100%'><tr><td style='width : 50%' valign='top'>
<h2><?php echo __("Navigation") ?></h2>
<table>
<tr><td class='n'>j/k</td><td><?php echo __("Move between feeds") ?></td></tr>
<tr><td class='n'>n/p</td><td><?php echo __("Move between articles") ?></td></tr>
<tr><td class='n'>/</td><td><?php echo __("Show search dialog") ?></td></tr>
</table>
<h2><?php echo __("Active article actions") ?></h2>
<table>
<tr><td class='n'>s</td><td><?php echo __("Toggle starred") ?></td></tr>
<tr><td class='n'>S</td><td><?php echo __("Toggle published") ?></td></tr>
<tr><td class='n'>u</td><td><?php echo __("Toggle unread") ?></td></tr>
<tr><td class='n'>T</td><td><?php echo __("Edit tags") ?></td></tr>
<tr><td class='n'>D</td><td><?php echo __("Dismiss selected articles") ?></td></tr>
<tr><td class='n'>X</td><td><?php echo __("Dismiss read articles") ?></td></tr>
<tr><td class='n'>o</td><td><?php echo __("Open article in new window") ?></td></tr>
<tr><td class='n'>c n/c p</td><td><?php echo __("Mark articles below/above active one as read") ?></td></tr>
<tr><td class='n'>N/P</td><td><?php echo __("Scroll article content") ?></td></tr>
<tr><td class='n'>e</td><td><?php echo __("Email article") ?></td></tr>
</table>
<h2><?php echo __("Other actions") ?></h2>
<table>
<tr><td class='n'>[tab]</td><td><?php echo __("Select article under mouse cursor") ?></td></tr>
<tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr>
<tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
<tr><td class='n'>c s</td><td><?php echo __("Collapse sidebar") ?></td></tr>
<tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
</table>
</td><td valign='top'>
<h2><?php echo __("Multiple articles actions") ?></h2>
<table>
<tr><td class='n'>a a</td><td><?php echo __("Select all articles") ?></td></tr>
<tr><td class='n'>a u</td><td><?php echo __("Select unread articles") ?></td></tr>
<tr><td class='n'>a U</td><td><?php echo __("Select starred articles") ?></td></tr>
<tr><td class='n'>a p</td><td><?php echo __("Select published articles") ?></td></tr>
<tr><td class='n'>a i</td><td><?php echo __("Invert article selection") ?></td></tr>
<tr><td class='n'>a n</td><td><?php echo __("Deselect all articles") ?></td></tr>
</table>
<h2><?php echo __("Feed actions") ?></h2>
<table>
<tr><td class='n'>f r</td><td><?php echo __("Refresh active feed") ?></td></tr>
<tr><td class='n'>f a</td><td><?php echo __("(Un)hide read feeds") ?></td></tr>
<tr><td class='n'>f s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
<tr><td class='n'>f e</td><td><?php echo __("Edit feed") ?></td></tr>
<tr><td class='n'>f q</td><td><?php echo __("Mark feed as read") ?></td></tr>
<tr><td class='n'>f x</td><td><?php echo __("Reverse headlines order") ?></td></tr>
<tr><td class='n'>Q</td><td><?php echo __("Mark all feeds as read") ?></td></tr>
<tr><td class='n'>x</td><td><?php echo __("If viewing category, (un)collapse it") ?></td></tr>
</table>
<h2><?php echo __("Go to...") ?></h2>
<table>
<tr><td class='n'>g a</td><td><?php echo __("All articles") ?></td></tr>
<tr><td class='n'>g f</td><td><?php echo __("Fresh articles") ?></td></tr>
<tr><td class='n'>g s</td><td><?php echo __("Starred articles") ?></td></tr>
<tr><td class='n'>g p</td><td><?php echo __("Published articles") ?></td></tr>
<tr><td class='n'>g t</td><td><?php echo __("Tag cloud") ?></td></tr>
<tr><td class='n'>g P</td><td><?php echo __("Preferences") ?></td></tr>
</table>
</td></tr></table>
<p><a target="_blank" href="http://tt-rss.org/wiki/InterfaceTips"><?php echo __("Other interface tips are available in the Tiny Tiny RSS wiki.") ?></a></p>
<p class="small"><?php echo __("Press any key to close this window.") ?></p>

View File

@ -1,41 +0,0 @@
<h1><?php echo __("Keyboard Shortcuts") ?></h1>
<table style='width : 100%'><tr><td style='width : 50%' valign='top'>
<h2><?php echo __("Go to...") ?></h2>
<table>
<tr><td class='n'>g 1</td><td><?php echo __("Preferences") ?></td></tr>
<tr><td class='n'>g 2</td><td><?php echo __("My Feeds") ?></td></tr>
<!-- <tr><td class='n'>g 3</td><td><?php echo __("Other Feeds") ?></td></tr> -->
<tr><td class='n'>g 3</td><td><?php echo __("Filters") ?></td></tr>
<tr><td class='n'>g 4</td><td><?php echo __("Labels") ?></td></tr>
<tr><td class='n'>g 5</td><td><?php echo __("Users") ?></td></tr>
<tr><td class='n'>g x</td><td><?php echo __("Exit preferences") ?></td></tr>
</table>
</td><td valign='top'>
<h2><?php echo __("Panel actions") ?></h2>
<table>
<tr><td class='n'>c s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
<tr><td class='n'>c T</td><td><?php echo __("Top 25 feeds") ?></td></tr>
<tr><td class='n'>c c</td><td><?php echo __("Edit feed categories") ?></td></tr>
<tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
<!-- <tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr> -->
<!-- <tr><td class='n'>c u</td><td><?php echo __("Create user") ?></td></tr> -->
</table>
<h2><?php echo __("Other actions") ?></h2>
<table>
<tr><td class='n'>/</td><td><?php echo __("Focus search (if present)") ?></td></tr>
<tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
</table>
</td></tr></table>
<p class='insensitive'><span class='small'><?php echo __("<b>Note:</b> not all actions may be available, depending on Tiny Tiny RSS configuration and your access level.") ?></span></p>
<p class="small"><?php echo __("Press any key to close this window.") ?></p>

View File

@ -1963,14 +1963,70 @@
$params["num_feeds"] = (int) $num_feeds; $params["num_feeds"] = (int) $num_feeds;
$params["collapsed_feedlist"] = (int) get_pref($link, "_COLLAPSED_FEEDLIST"); $params["collapsed_feedlist"] = (int) get_pref($link, "_COLLAPSED_FEEDLIST");
$params["hotkeys"] = get_hotkeys($link); $params["hotkeys"] = get_hotkeys_map($link);
$params["csrf_token"] = $_SESSION["csrf_token"]; $params["csrf_token"] = $_SESSION["csrf_token"];
return $params; return $params;
} }
function get_hotkeys($link) { function get_hotkeys_info($link) {
$hotkeys = array(
__("Navigation") => array(
"next_feed" => __("Open next feed"),
"prev_feed" => __("Open previous feed"),
"next_article" => __("Open next article"),
"prev_article" => __("Open previous article"),
"search_dialog" => __("Show search dialog")),
__("Article") => array(
"toggle_mark" => __("Toggle starred"),
"toggle_publ" => __("Toggle published"),
"toggle_unread" => __("Toggle unread"),
"edit_tags" => __("Edit tags"),
"dismiss_selected" => __("Dismiss selected"),
"dismiss_read" => __("Dismiss read"),
"open_in_new_window" => __("Open in new window"),
"catchup_below" => __("Mark below as read"),
"catchup_above" => __("Mark above as read"),
"article_scroll_down" => __("Scroll down"),
"article_scroll_up" => __("Scroll up"),
"select_article_cursor" => __("Select article under cursor"),
"email_article" => __("Email article")),
__("Article selection") => array(
"select_all" => __("Select all articles"),
"select_unread" => __("Select unread"),
"select_marked" => __("Select starred"),
"select_published" => __("Select published"),
"select_invert" => __("Invert selection"),
"select_none" => __("Deselect everything")),
__("Feed") => array(
"feed_refresh" => __("Refresh current feed"),
"feed_unhide_read" => __("Un/hide read feeds"),
"feed_subscribe" => __("Subscribe to feed"),
"feed_edit" => __("Edit feed"),
"feed_catchup" => __("Mark as read"),
"feed_reverse" => __("Reverse headlines"),
"feed_debug_update" => __(""),
"catchup_all" => __("Mark all feeds as read"),
"cat_toggle_collapse" => __("Un/collapse current category")),
__("Go to") => array(
"goto_all" => __("All articles"),
"goto_fresh" => __("Fresh"),
"goto_marked" => __("Starred"),
"goto_published" => __("Published"),
"goto_tagcloud" => __("Tag cloud"),
"goto_prefs" => __("Preferences")),
__("Other") => array(
"create_label" => __("Create label"),
"create_filter" => __("Create filter"),
"collapse_sidebar" => __("Un/collapse sidebar"),
"help_dialog" => __("Show help dialog"))
);
return $hotkeys;
}
function get_hotkeys_map($link) {
$hotkeys = array( $hotkeys = array(
// "navigation" => array( // "navigation" => array(
"k" => "next_feed", "k" => "next_feed",

View File

@ -135,8 +135,6 @@
alt="new_version_icon"/> alt="new_version_icon"/>
</div> </div>
<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
<div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div> <div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
<div id="cmdline" style="display : none"></div> <div id="cmdline" style="display : none"></div>
<div id="auxDlg" style="display : none"></div> <div id="auxDlg" style="display : none"></div>

View File

@ -1874,3 +1874,25 @@ function get_timestamp() {
var date = new Date(); var date = new Date();
return Math.round(date.getTime() / 1000); return Math.round(date.getTime() / 1000);
} }
function helpDialog(topic) {
try {
var query = "backend.php?op=backend&method=help&topic=" + param_escape(topic);
if (dijit.byId("helpDlg"))
dijit.byId("helpDlg").destroyRecursive();
dialog = new dijit.Dialog({
id: "helpDlg",
title: __("Help"),
style: "width: 600px",
href: query,
});
dialog.show();
} catch (e) {
exception_error("helpDialog", e);
}
}

View File

@ -1009,9 +1009,9 @@ function validatePrefsReset() {
} }
function pref_hotkey_handler(e) { function pref_hotkey_handler(e) {
try { try {
if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") return; if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") return;
var keycode = false; var keycode = false;
@ -1034,151 +1034,65 @@ function pref_hotkey_handler(e) {
var keychar = String.fromCharCode(keycode); var keychar = String.fromCharCode(keycode);
if (keycode == 27) { // escape if (keycode == 27) { // escape
if (Element.visible("hotkey_help_overlay")) {
Element.hide("hotkey_help_overlay");
}
hotkey_prefix = false; hotkey_prefix = false;
closeInfoBox();
} }
if (keycode == 16) return; // ignore lone shift if (keycode == 16) return; // ignore lone shift
if (keycode == 17) return; // ignore lone ctrl if (keycode == 17) return; // ignore lone ctrl
if ((keycode == 67 || keycode == 71) && !hotkey_prefix) { if (!shift_key) keychar = keychar.toLowerCase();
hotkey_prefix = keycode;
var hotkeys = getInitParam("hotkeys");
if (!hotkey_prefix && hotkeys[0].indexOf(keychar) != -1) {
var date = new Date(); var date = new Date();
var ts = Math.round(date.getTime() / 1000); var ts = Math.round(date.getTime() / 1000);
hotkey_prefix = keychar;
hotkey_prefix_pressed = ts; hotkey_prefix_pressed = ts;
cmdline.innerHTML = keychar; cmdline.innerHTML = keychar;
Element.show(cmdline); Element.show(cmdline);
console.log("KP: PREFIX=" + keycode + " CHAR=" + keychar); return true;
return;
} }
if (Element.visible("hotkey_help_overlay")) {
Element.hide("hotkey_help_overlay");
}
if (keycode == 13 || keycode == 27) {
seq = "";
} else {
seq = seq + "" + keycode;
}
/* Global hotkeys */
Element.hide(cmdline); Element.hide(cmdline);
if (!hotkey_prefix) { var hotkey = keychar.search(/[a-zA-Z0-9]/) != -1 ? keychar : "(" + keycode + ")";
hotkey = hotkey_prefix ? hotkey_prefix + " " + hotkey : hotkey;
hotkey_prefix = false;
if ((keycode == 191 || keychar == '?') && shift_key) { // ? var hotkey_action = false;
showHelp(); var hotkeys = getInitParam("hotkeys");
return false;
}
if (keycode == 191 || keychar == '/') { // / for (sequence in hotkeys[1]) {
var search_boxes = new Array("label_search", if (sequence == hotkey) {
"feed_search", "filter_search", "user_search", "feed_browser_search"); hotkey_action = hotkeys[1][sequence];
break;
for (var i = 0; i < search_boxes.length; i++) {
var elem = $(search_boxes[i]);
if (elem) {
$(search_boxes[i]).focus();
return false;
}
}
} }
} }
/* Prefix c */ switch (hotkey_action) {
case "feed_subscribe":
if (hotkey_prefix == 67) { // c quickAddFeed();
hotkey_prefix = false; return true;
case "create_label":
if (keycode == 70) { // f addLabel();
quickAddFilter(); return true;
return false; case "create_filter":
} quickAddFilter();
return true;
if (keycode == 83) { // s case "help_dialog":
quickAddFeed(); //helpDialog("prefs");
return false; return false;
} default:
console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);
if (keycode == 85) { // u
// no-op
}
if (keycode == 67) { // c
editFeedCats();
return false;
}
if (keycode == 84 && shift_key) { // T
feedBrowser();
return false;
}
}
/* Prefix g */
if (hotkey_prefix == 71) { // g
hotkey_prefix = false;
if (keycode == 49 && $("genConfigTab")) { // 1
selectTab("genConfig");
return false;
}
if (keycode == 50 && $("feedConfigTab")) { // 2
selectTab("feedConfig");
return false;
}
if (keycode == 51 && $("filterConfigTab")) { // 4
selectTab("filterConfig");
return false;
}
if (keycode == 52 && $("labelConfigTab")) { // 5
selectTab("labelConfig");
return false;
}
if (keycode == 53 && $("userConfigTab")) { // 6
selectTab("userConfig");
return false;
}
if (keycode == 88) { // x
return gotoMain();
}
}
if ($("piggie")) {
if (seq.match("8073717369")) {
seq = "";
piggie(true);
} else {
piggie(false);
}
}
if (hotkey_prefix) {
console.log("KP: PREFIX=" + hotkey_prefix + " CODE=" + keycode + " CHAR=" + keychar);
} else {
console.log("KP: CODE=" + keycode + " CHAR=" + keychar);
} }
} catch (e) { } catch (e) {
exception_error("pref_hotkey_handler", e); exception_error("hotkey_handler", e);
} }
} }
@ -1855,20 +1769,6 @@ function insertSSLserial(value) {
} }
} }
function showHelp() {
try {
new Ajax.Request("backend.php", {
parameters: "?op=backend&method=help&topic=prefs",
onComplete: function(transport) {
$("hotkey_help_overlay").innerHTML = transport.responseText;
Effect.Appear("hotkey_help_overlay", {duration : 0.3});
} });
} catch (e) {
exception_error("showHelp", e);
}
}
function gotoExportOpml(filename, settings) { function gotoExportOpml(filename, settings) {
tmp = settings ? 1 : 0; tmp = settings ? 1 : 0;
document.location.href = "backend.php?op=opml&method=export&filename=" + filename + "&settings=" + tmp; document.location.href = "backend.php?op=opml&method=export&filename=" + filename + "&settings=" + tmp;

View File

@ -453,12 +453,7 @@ function quickMenuGo(opid) {
} }
if (opid == "qmcHKhelp") { if (opid == "qmcHKhelp") {
new Ajax.Request("backend.php", { helpDialog("main");
parameters: "?op=backend&method=help&topic=main",
onComplete: function(transport) {
$("hotkey_help_overlay").innerHTML = transport.responseText;
Effect.Appear("hotkey_help_overlay", {duration : 0.3});
} });
} }
} catch (e) { } catch (e) {
@ -638,9 +633,6 @@ function hotkey_handler(e) {
var keychar = String.fromCharCode(keycode); var keychar = String.fromCharCode(keycode);
if (keycode == 27) { // escape if (keycode == 27) { // escape
if (Element.visible("hotkey_help_overlay")) {
Element.hide("hotkey_help_overlay");
}
hotkey_prefix = false; hotkey_prefix = false;
} }
@ -844,12 +836,7 @@ function hotkey_handler(e) {
collapse_feedlist(); collapse_feedlist();
return true; return true;
case "help_dialog": case "help_dialog":
new Ajax.Request("backend.php", { helpDialog("main");
parameters: "?op=backend&method=help&topic=main",
onComplete: function(transport) {
$("hotkey_help_overlay").innerHTML = transport.responseText;
Effect.Appear("hotkey_help_overlay", {duration : 0.3});
} });
return false; return false;
default: default:
console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey); console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);

View File

@ -90,12 +90,10 @@
</div> </div>
</div> </div>
<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
<img id="piggie" src="images/piggie.png" style="display : none" alt="piggie"/> <img id="piggie" src="images/piggie.png" style="display : none" alt="piggie"/>
<div id="header" dojoType="dijit.layout.ContentPane" region="top"> <div id="header" dojoType="dijit.layout.ContentPane" region="top">
<a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> | <!-- <a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> | -->
<a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a> <a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a>
</div> </div>

View File

@ -932,74 +932,6 @@ img.hlScorePic {
height : 16px; height : 16px;
} }
div#hotkey_help_overlay {
position : absolute;
left : 30px;
right : 30px;
top : 30px;
z-index : 999;
color : white;
font-size : 15px;
background : black;
border-radius : 30px;
padding : 10px;
}
div#hotkey_help_overlay h1 {
text-align : center;
}
div#hotkey_help_overlay ul {
list-style-type : none;
margin : 0px;
}
div#hotkey_help_overlay a {
color : #88b0f0;
}
div#hotkey_help_overlay a:hover {
color : white;
}
div#hotkey_help_overlay li {
margin : 0px;
}
div#hotkey_help_overlay p {
text-align : center;
}
div#hotkey_help_overlay td.n {
text-align : right;
font-weight : bold;
width : 6em;
color : #a0ffa0;
padding-right : 5px;
}
div#hotkey_help_overlay td {
vertical-align : top;
}
div#hotkey_help_overlay h1 {
margin : 0px;
}
div#hotkey_help_overlay h2 {
font-size : 16px;
border-width : 0px;
margin : 0.3em 0px 0.3em 0px;
text-align : center;
color : #88b0f0;
}
div#hotkey_help_overlay table.hho td.top,
div#hotkey_help_overlay table.hho td.bottom {
text-align : center;
font-size : 11px;
}
div.dlgSec { div.dlgSec {
font-size : 12px; font-size : 12px;
color : gray; color : gray;
@ -1411,3 +1343,25 @@ ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitChec
table.prefPluginsList td label, table.prefUserList td { table.prefPluginsList td label, table.prefUserList td {
cursor : pointer; cursor : pointer;
} }
ul.helpKbList {
max-height : 300px;
overflow : auto;
list-style-type : none;
border : 1px solid #c0c0c0;
background-color : #ecf4ff;
margin : 0px 0px 5px 0px;
padding : 5px;
}
ul.helpKbList span.hksequence {
width : 6em;
margin-left : 20px;
color : #88b0f0;
font-weight : bold;
display : inline-block;
}
ul.helpKbList h2 {
margin-top : 0px;
}