extension for axure

try to take over the world!

目前為 2019-05-13 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         extension for axure
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  try to take over the world!
// @author       You
// @match        http://192.168.1.5:30032/*
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @grant        none
// ==/UserScript==

var $ = jQuery;
var isScriptAlreadyExcuted = false;

$.noConflict();
(function() {
    'use strict';

    if(isScriptAlreadyExcuted) return
    isScriptAlreadyExcuted = true

    var $headerBtnMenu = $("#sitemapToolbar > div.pageButtonHeader")
    // 添加一个 折叠 功能按钮
    var a_foldMenuBtn = document.createElement("a")
    a_foldMenuBtn.title = "折叠菜单"
    a_foldMenuBtn.classList.add("sitemapToolbarButton")
    a_foldMenuBtn.style.background = "url(/SuiBaoTrd/plugins/sitemap/styles/images/sitemap_off.svg) no-repeat center center, linear-gradient(transparent,transparent)"
    a_foldMenuBtn.onclick = function(){
        var userRes = prompt("折叠到几级菜单?(最小为1级)",2);
        var level = Math.floor(Number(userRes));
        if(isNaN(level)|| level < 0) return alert("必须输入正整数")

        foldLeftMenu(level)
    }

    $headerBtnMenu.prepend(a_foldMenuBtn);
})();

/*************************************************************************************

1. 菜单折叠
TODO:优化按钮显示,目前是随便选的svg

**************************************************************************************/

// 根据层级折叠菜单
function foldLeftMenu(level){
    var $leftMenuTree = $("#sitemapTreeContainer > ul.sitemapTree")
    var levelFlag = {
        lvMax:level || 1,
        lv:1,
        isExceed:function(){ return levelFlag.lv > levelFlag.lvMax },
        completeFold:function(){ levelFlag.lv ++ }
    };

    // 一级 Node
    var $nodeList = $leftMenuTree.find("> .sitemapNode")
    foldAllNodeByNodeList($nodeList,levelFlag);

}
// 折叠当前 node 的所有 sub node
function foldAllNodeByNodeList($nodeList,flag){
    if(flag.isExceed()) return; // 是否超过需要折叠的层级

    var nextFoldNodeList = []; // 收集下一层级所有node
    for(var i = 0; i < $nodeList.length; i++){
        var $curNode = $nodeList.eq(i);
        if(!canFold($curNode)) continue;
        // 即使 父node 已折叠也 进行折叠 子node
        nextFoldNodeList = nextFoldNodeList.concat(findSubNodes($curNode));
//         if(isFolded($curNode)) continue;
        foldNode($curNode)
    }
    flag.completeFold(); // 标志 折叠当前层级动作 已完成

    var $nextFoldNodeList = $(nextFoldNodeList);
    if(!nextFoldNodeList.length) return;
    foldAllNodeByNodeList($nextFoldNodeList,flag)
}
// 获取当前 node 的所有 sub node
function findSubNodes($nodeContainer){return $nodeContainer.find("> ul > .sitemapNode").toArray()}
// 判断Node是否已折叠
function isFolded($node){ return !$node.find("> ul").is(':visible') }
// 判断Node是否可折叠
function canFold($node){ return !$node.is(".sitemapLeafNode") }
// 折叠当前 Node
function foldNode($node){
    var btn_fold = $node.find(">div > div.sitemapPageLinkContainer .sitemapPlusMinusLink").get(0);
    collapse_click.apply(btn_fold)
    // TODO:改成原生click事件触发, 从最内层触发到最外层(防止出现 折叠后点击俩次的bug)
}

// 从 axure 中抽出来的点击事件
var SHOW_HIDE_ANIMATION_DURATION = 0;
function collapse_click(event) {
        $(this)
            .children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
            .closest('li').children('ul').hide(SHOW_HIDE_ANIMATION_DURATION);
    }

    function expand_click(event) {
        $(this)
            .children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
            .closest('li').children('ul').show(SHOW_HIDE_ANIMATION_DURATION);
    }