web_show_function_ui_mars3d/public/cesium_example/static/js/sidebar.js

/* 2017-10-20 13:00:05 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） */
//左侧层级是否包含示例
let containExample = false;

//侧边栏滚动支持
function sidebarScrollFix() {
  $("ul#sidebar-menu>li").hover(
    function (evt) {
      if (!$("body").hasClass("sidebar-collapse")) {
        return;
      }

      //调整一级菜单li下标题的布局位置至右侧
      let $titleBar = $(this).children("a").children(".sidebar-title-bar");
      $titleBar.css({
        top: $(this).offset().top - $(window).scrollTop() + "px",
        //fix由于侧边栏滚动条宽度引起的减少的宽度
        width: "233px",
      });

      //如果底部空间不够，动态增加侧边栏高度
      let visibleOffsetTop = $(this).offset().top - $(window).scrollTop();
      let offsetBottom = $(".sidebar-menu").height() - visibleOffsetTop;
      let requireVisibleHeight = $(this).height() + $(this).children("ul").height();
      if (offsetBottom <= requireVisibleHeight) {
        $(".sidebar-menu").css({
          height: requireVisibleHeight + $(window).height() + "px",
        });
      }

      //调整一级菜单li下子列表的布局位置至右侧
      let offsetTop = visibleOffsetTop + $(this).height();
      $(this)
        .children("ul")
        .css({
          top: offsetTop + "px",
        });

      //fix小尺寸屏幕下二级菜单高度高于窗口高度时显示不全的情况
      let $activeList = $(this).children("ul");
      let activeListOffsetBottom = Math.abs($(window).height() - visibleOffsetTop - $(this).height());
      let requireActiveListHeight = $activeList.height();
      if (activeListOffsetBottom < requireActiveListHeight) {
        $activeList.css({ height: requireActiveListHeight });
        //滚动条样式
        $activeList.addClass("scroll-list");
      }
    },
    function (evt) {
      if (!$("body").hasClass("sidebar-collapse")) {
        return;
      }
      //滚动条
      $(this).children("ul").removeClass("scroll-list");
      //恢复原来的高度
      $(this).children("ul").css({ height: "auto" });
    }
  );
  $(".main-sidebar").on("scroll", function (evt) {
    evt.stopPropagation();
  });

  $(window).on("resize", function () {
    $(".sidebar-menu").css({ height: "100%" });
  });
}

//创建菜单项
function createSideBarMenuItem(config, containAll) {
  if (!config) {
    return;
  }
  containExample = containAll;
  let li = $("<li id='bar_" + config.id + "' class='treeview '></li>");

  if (config.children) {
    createSideBarMenuTitle(config, true).appendTo(li);
    createSideBarSecondMenu(config.children).appendTo(li);
  } else {
    createSideBarMenuTitle(config, false).appendTo(li);
  }
  return li;
}

//创建二级菜单
function createSideBarSecondMenu(children) {
  let ul = $("<ul class='treeview-menu second-menu '></ul>");
  children.forEach((item, index) => {
    let li = $("<li class='menuTitle ' id='bar_" + item.id + "' ></li>");
    li.appendTo(ul);

    if (containExample && item.children) {
      createSideBarMenuSecondTitle(item, true).appendTo(li);
      createSideBarThirdMenu(item.children).appendTo(li);
    } else {
      createSideBarMenuSecondTitle(item, false).appendTo(li);
    }
  });
  return ul;
}

function fileName2Id(fileName) {
  let value = (fileName || "").replace(".html", "");
  return value;
}
function id2FileName(id) {
  let fileName = id + ".html";
  return fileName;
}

//创建三级菜单
function createSideBarThirdMenu(examples) {
  let ul = $("<ul class='treeview-menu third-menu'></ul>");
  let len = examples && examples.length ? examples.length : 0;
  for (let i = 0; i < len; i++) {
    let example = examples[i];
    let _id = fileName2Id(example.fileName);
    let li = $("<li class='menuTitle' id='bar_" + _id + "' ></li>");
    li.appendTo(ul);
    if (_id != "" && example.name) {
      createSideBarMenuThirdTitle(_id, example, false).appendTo(li);
    }
  }
  return ul;
}

function createSideBarMenuTitle(config, collapse) {
  let id = config.id || "";
  let icon = "",
    iconName = config.icon;
  if (iconName) {
    icon = "<i class='fa " + iconName + " iconName'></i>";
  }

  let href = "";
  if (location.href.indexOf("editor.html") != -1) {
    href = "../examples.html#" + id;
  } else {
    href = "#" + id;
  }

  let div = $("<a  href='" + href + "' >" + icon + "<span class='firstMenuTitle'>" + config.name + "(" + config.count + ")</span></a>");
  if (collapse) {
    div.append(createCollapsedIcon());
  }
  return div;
}

function createSideBarMenuSecondTitle(item, collapse) {
  let id = item.id || "";
  let icon = "",
    iconName = item.icon;
  if (iconName) {
    icon = "<i class='fa " + iconName + "'></i>";
  }

  let href = "";
  if (location.href.indexOf("editor.html") != -1) {
    href = "../examples.html#" + id;
  } else {
    href = "#" + id;
  }

  let div = $(
    "<a href='" + href + "' id='bar_" + item.id + "'>" + icon + "<span class='secondMenuTitle'>" + item.name + "(" + item.count + ")</span></a>"
  );

  if (collapse) {
    div.append(createCollapsedIcon());
  }
  return div;
}

function createSideBarMenuThirdTitle(id, item, collapse) {
  id = id || "";
  let icon = "",
    iconName = item.icon;
  if (iconName) {
    icon = "<i class='fa " + iconName + "'></i>";
  }

  let div = $("<a href='#' id='bar_" + id + "'>" + icon + "<span class='thirdMenuTitle'>" + item.name + "</span></a>");
  if (collapse) {
    div.append(createCollapsedIcon());
  }
  return div;
}

//创建右侧折叠菜单
function createCollapsedIcon() {
  return $("<span class='pull-right-container'> <i class='fa fa-angle-left pull-right'></i> </span>");
}

//只处理三层节点,后续可优化
function selectMenu(id, length) {
  let target = _getTarget(id, length);
  if (length !== 1) {
    //控制editor页面左侧导航栏一级菜单高亮
    _selectTarget(target.parent().parent().parent().parent());
    //控制示例页面左侧导航栏一级菜单高亮
    _selectTarget(target.parent().parent());
    //控制左侧导航栏最低级菜单高亮
    _selectTarget(target.parent());
    _selectTarget(target.find("ul"));
  }
}

function _getTarget(id, length) {
  let target;
  if (length) {
    if (length === 1) {
      $("section#sidebar li.active").removeClass("active");
      target = $("section#sidebar li#bar_" + id);
      target.children("ul").show();
    }
    if (length === 2) {
      $("section#sidebar li.active ul.active li").removeClass("active");
      target = $("section#sidebar li.treeview")
        .children("ul")
        .children("li#bar_" + id);
    }
  } else {
    $("section#sidebar #ul").addClass("active");
    $("section#sidebar li.active").removeClass("active");
    target = $("section#sidebar li#bar_" + id);
  }
  target && target.addClass("active");
  return target;
}

function _selectTarget(target) {
  if (!target || target.length < 1) {
    return;
  }
  let className = target.attr("class");
  if (className && className.indexOf("treeview-menu") > -1 && className.indexOf("menu-open") === -1) {
    target.addClass("menu-open");
    target.css("display", "block");
  }
  if (className && className.indexOf("treeview") > -1) {
    target.addClass("active");
  }
}