☰

extension for axure

axure 原型页面辅助

נכון ליום 16-05-2019. ראה הגרסה האחרונה.

// ==UserScript==
// @name         extension for axure
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  axure 原型页面辅助
// @author       gkeeno
// @match        http://192.168.1.5:30032/*
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @grant        none
// @run-at       document-idle
// @noframes
// ==/UserScript==

var $ = jQuery;

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

    if(self!=top) return; //不是顶层页面


    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 && $headerBtnMenu.prepend(a_foldMenuBtn);
})();

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

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

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

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

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

        var nextFoldNodeList = []; // 收集下一层级所有node
        var needSkipLevel = isSkipLevel(flag);
        for (var i = 0; i < $nodeList.length; i++) {
            var $curNode = $nodeList.eq(i);
            nextFoldNodeList = nextFoldNodeList.concat(findSubNodes($curNode));// 即使 父node 已折叠也 进行折叠 子node

            if(!needSkipLevel)
            foldCallBacks.push((function($node){
                return function(){
                    foldNode($node)
                }
            })($curNode));
        }
        flag.completeFold(); // 标志 折叠当前层级动作 已完成

        var $nextFoldNodeList = $(nextFoldNodeList);
        // 超出折叠最大层数
        if (!nextFoldNodeList.length) {
            executedAllCallBacks(foldCallBacks)
            return
        };

        foldAllNodeByNodeList($nextFoldNodeList, flag, foldCallBacks)
    }
    // 获取当前 node 的所有 sub node
    function findSubNodes($node) {
        return $node.find("> ul > .sitemapNode").toArray()
    }
    // 判断Node是否已折叠
    function isFolded($btn) {
        return $btn.find(" .sitemapPlus").length === 1
    }
    // 判断Node是否可折叠
    function canFold($node) {
        return !$node.is(".sitemapLeafNode")
    }
    // 折叠当前 Node
    function foldNode($node) {
        var $btn_fold = $node.find(">div > div.sitemapPageLinkContainer .sitemapPlusMinusLink");
        var btn_fold = $btn_fold.get(0);

        btn_fold  && !isFolded($btn_fold) && btn_fold.click();
    }

    function executedAllCallBacks(arrCallBacks) {
        for (var i = arrCallBacks.length - 1; i >= 0; i--) {
            arrCallBacks[i].call();
        }
    }

function isSkipLevel(flag){
    return flag.lvCur < flag.lvMin;
}