☰

extension for axure

axure 原型页面辅助

Stan na 13-05-2019. Zobacz najnowsza wersja.

// ==UserScript==
// @name         extension for axure
// @namespace    http://tampermonkey.net/
// @version      1.0.2
// @description  axure 原型页面辅助
// @author       You
// @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;
var isScriptAlreadyExcuted = false;

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

    if(self!=top) return; //不是顶层页面
    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);
    }