辛夷坞

涧户寂无人,纷纷开且落

By - Christen

Add Hotkeys to WordPress Part 1

一直很喜欢 Confluence 的键盘操作,按 C 创建页面,按 E 编辑页面,今天山寨一个到Wordpress,只要坚持写代码,就会有很多意外的收获。

查找元素

推荐的查找子元素的方法:
HTML结构:

<li id="wp-admin-bar-edit">
    <a class="ab-item" href="http://chenzixin.com/wp-admin/post.php?post=3532&amp;action=edit">Edit Post</a>
</li>
var editBtn = jQuery("#wp-admin-bar-edit").find(".ab-item");


此时找到的 editBtn 已经是 a 标签:

typeof(editBtn); //"object"
editBtn.text(); //"Edit Post"
editBtn.attr("class"); //"ab-item"
editBtn.attr("href"); //"http://chenzixin.com/wp-admin/post.php?post=3532&action=edit"

jQuery 点击事件

但是,

editBtn.click();

并不能跳转,以下是解决办法:
转为DOM对象:

//jQuery对象是一个数据对象,通过[index]方法获取相应的DOM对象
editBtn[0].click();
//jQuery本身提供,通过.get(index)方法获取相应的DOM对象
editBtn.get(0).click();

附:
对DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了:

var v = document.getElementById("wp-admin-bar-new-content");
// undefined
v.find("a")
// TypeError: undefined is not a function
jQuery(v).find("a")
// 正常输出

进阶测试:

<a id="alink" href="abc.php">下一步</a>
jQuery("#alink").click(); // 触发了a标签的点击事件,但没触发页面跳转
document.getElementById("alink").click(); // 既触发了a标签的点击事件,又触发了页面跳转

变通方法:

<a id="alink" href="abc.php"><span id="spanId">下一步</span></a>
jQuery("#spanId").click();//可以触发页面跳转

绑定键盘事件

早年做前端开发的时候,用过 jquery.hotkeys 插件,jQuery 作者开发,可惜多年不再维护,不知是否已经集成到 jQuery 中了,于是查找官方API,直接定义相关的事件:

KeyCode 参考:MDN KeyboardEvent.keyCode
在线测试:这里

组合键

  • event.shiftKey
  • event.ctrlKey
  • event.altKey
  • event.metaKey

禁用保存:

jQuery(document).keydown(function (event) {
            // If Control or Command key is pressed and the S key is pressed
            // run save function. 83 is the key code for S.
            if ((event.ctrlKey || event.metaKey) && event.which == 83) {
                // Save Function
                event.preventDefault();
                alert("No Saving!");
                return false;
            }
        }
);

完整代码,贻笑大方,class-wp-admin-bar.php 第 368 行起:

jQuery(function(){
    var editBtn = jQuery("#wp-admin-bar-edit").find(".ab-item");
    var viewBtn = jQuery("#wp-admin-bar-view");//暂不考虑……
    var editUrl = editBtn.attr("href");
    if(editUrl === undefined){
        jQuery(document).keyup(function( event ) {
            // 按 c 添加新文章
            var atHome = window.location.href == "http://chenzixin.com/";
            var onSearch = jQuery(".search-field").is(":focus") || jQuery(".adminbar-input").is(":focus");
            if ( event.which == 67 && atHome && !onSearch) {
                window.location = "http://chenzixin.com/wp-admin/post-new.php";
            }
        });
    }else{
        jQuery(document).keyup(function( event ) {
            var onSearch = jQuery(".search-field").is(":focus") || jQuery(".adminbar-input").is(":focus");
            // 按 e 启动编辑功能
            if ( event.which == 69 && !onSearch) {
                window.location = editUrl;
            }
            // 按 h 返回首页
            if (event.which == 72 && !onSearch){
                window.location = "http://chenzixin.com/";
            }
        });
    }
});

后续修正,直接修改:htdocs/static/js/christen/hotkeys.js。

6 thoughts on “Add Hotkeys to WordPress Part 1

Christen March 25, 2015 at 4:39 pm

参考文章:
JavaScript Madness: Keyboard Events
Detecting keystrokes
Javascript Char Codes (Out of the Wall)

Reply

Christen March 25, 2015 at 5:44 pm

jQuery ready 方法:

// 语法 1
$(document).ready(function);
// 语法 2
$().ready(function);
//语法 3
$(function);

Reply

Christen March 25, 2015 at 5:50 pm

再修正一个问题:

jQuery("#comment").is(":focus")

Reply

Christen March 25, 2015 at 7:00 pm

太多 Bug,之前根本没想到 -_- ,目前只解决了:
Mac 下 按 Command + C 不会创建文章。
测试了下 Confluence ,在这些细节上,则滴水不漏!

Reply

Christen March 26, 2015 at 6:52 am

遍地坑啊,就算解决了 Ctrl + C 不会激活创建页面,但是 Shift+ C 呢,Option + C 呢,100 多个键,无从下手!

Reply

Add Hotkeys to WordPress Part 2 | 子訢-过隙录 May 21, 2018 at 10:57 am

[…] 接上篇:Add Hotkeys to WordPress Part 1,写了一个玩具程序,但因Bug太多,晚上睡觉也不得安眠,值得欣慰的是,终于理清楚了要点,也不能说昨天的努力全无用处。设计程序的关键是理清思路,虽然没有绝对的对与错,但有相对的好与坏,好的思路写出的代码优雅健壮,坏的路径就像我昨天的程序,真正是将帅无能,累死三军。 […]

Reply

Leave a Reply

Your email address will not be published.
*
*