QRcode/static/js/main.js

/**
 * User: Baoxu
 * Date: 16/7/28
 * Time: 00:08
 * Desc: 辅助二维码的实时生成与更新
 */

// 公用的对象变量
var qrcode_div; // 二维码显示区
var text_input; // 内容输入框
var qrcode;     // 二维码lib的实例
var newtab_btn; // 新页面打开的按钮

// 生成二维码的函数
function makeCode() {
    // 判断输入框是否为空
    if (!text_input.val()) {
        text_input.focus();
        return;
    }

    // 生成二维码
    qrcode.makeCode(text_input.val());
}

// 获取当前浏览器当前TAB的url
function getUrl() {
    chrome.tabs.getSelected(function (tabs) {
        text_input.val(tabs.url);
        makeCode();
    });
}

// 新创建或者聚焦在独立的二维码页面
function focusOrCreateTab(url) {
    chrome.windows.getAll({"populate": true}, function (windows) {
        var existing_tab = null;
        for (var i in windows) {
            var tabs = windows[i].tabs;
            for (var j in tabs) {
                var tab = tabs[j];
                if (tab.url == url) {
                    existing_tab = tab;
                    break;
                }
            }
        }
        if (existing_tab) {
            chrome.tabs.update(existing_tab.id, {"selected": true});
        } else {
            chrome.tabs.create({"url": url, "selected": true});
        }
    });
}

// 点击全屏按钮时的操作
function newTabBtnClick() {
    event.preventDefault();
    var manager_url = chrome.extension.getURL("template/main.html");
    focusOrCreateTab(manager_url);
}

// 页面加载好之后,开始执行
$(document).ready(function () {
    // 对公用的DOM对象赋值
    qrcode_div = $("#qrcodeDiv");   // 二维码显示区
    text_input = $("#textInput");   // 内容输入框
    newtab_btn = $("#newTabBtn");   // 新页面打开按钮

    // 二维码对象
    qrcode = new QRCode(document.getElementById("qrcodeDiv"), {
        width: 400,
        height: 400
    });

    // 获取当前页面链接并生成二维码
    getUrl();

    // 聚焦在输入框
    text_input.focus();

    // 输入框文本有变动时,立即更新二维码
    text_input.on("input", function () {
        makeCode();
    }).on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

    // 为新标签打开按钮绑定事件
    newtab_btn.click(newTabBtnClick);
});