breadcrumbs_menu

NAML documentation   Watch a video
   Usages of this macro
The source code below doesn't have navigation links because no usage has been compiled yet. Navigation links depend on how and where the macro is used, so first you may try finding all usages of "breadcrumbs_menu".
... in breadcrumbs_menu.naml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<macro name="breadcrumbs_menu" requires="node_page">
  <n.comment.>
    Adds an expanded menu to the breadcrumb menu.
  </n.comment.>
  <div id="breadcrumb-flyout-holder">
    <ul class="has-subapps depth-1 node-id-[n.root_node.id/]">
      <n.root_node.breadcrumbs_menu_item/>
    </ul>
  </div>
  <div id="breadcrumb-flyout">
  </div>
  <script type="text/javascript">
<![CDATA[
if (!window.RP)
   window.RP = {};
RP.BreadcrumbFlyout =
   {
      node: null,
      holder: null,
      crumbs:
         {
            top: null,
            bottom: null
         },
      is_hovered: false,
      reposition:
         function(link, which) {
            var link_coords = $(link).position();
            var menu_coords = this.crumbs[which].position();
            var height = this.node.outerHeight(true);
            var menu_padding =
               (which == "bottom") ?
                  (this.crumbs[which].parent().outerHeight(true) - this.crumbs[which].outerHeight(true)) / 2
               :
                  this.crumbs[which].parent().outerHeight(true);
            this.node.removeClass("top").removeClass("bottom").addClass(which).css("left", link_coords.left + "px");
            if (which == "top")
               this.node.css("top", (menu_coords.top + menu_padding) + "px");
            else
               this.node.css("top", (menu_coords.top - menu_padding - height) + "px");
            Nabble.resizeFrames();
         },
      init:
         function() {
            this.node = $("#breadcrumb-flyout");
            this.holder = $("#breadcrumb-flyout-holder");
            this.crumbs.top = $("#breadcrumbs");
            this.crumbs.bottom = $("#page-footer span.breadcrumbs");
            // Listener for breadcrumb hover
            this.crumbs.top.add(this.crumbs.bottom).children("a").hover(
               function(e) {
                  var id = (this.className.match(/node-id-(\d+)/) || [0,-1])[1];
                  if (+id < 0)
                     return;
                  var BF = RP.BreadcrumbFlyout;
                  var node = BF.node.empty();
                  var item = BF.holder.find("ul.node-id-" + id + ", li[data-node-id='" + id + "']>ul").eq(0);
                  var which = ["top", "bottom"][ +!$("#breadcrumbs").find(this).length ];
                  node.stop(true, true).fadeIn(200);
                  node.append( item.clone().addClass("shaded-bg-color") );
                  BF.reposition(this, which);
               },
               $.proxy(
                  function(e) {
                     if (!this.is_hovered)
                        this.node.delay(1500).hide(1);
                  },
                  this
               )
            );
            // Listeners for flyout item hover
            this.node.on(
               {
                  "mouseenter.RP.BreadcrumbFlyout":
                     function(e) {
                        var BF = RP.BreadcrumbFlyout;
                        var sub = $(this).children("ul");
                        $(this).children("ul").stop(true, true).show();
                        $(this).siblings("li.has-subapps").find("ul").stop(true, true).hide();
                     },
                  "mouseleave.RP.BreadcrumbFlyout":
                     function(e) {
                        $(this).children("ul").delay(1500).hide(1);
                     }
               },
               "li"
            ).on(
               {
                  "mouseenter.RP.BreadcrumbFlyout":
                     $.proxy(
                        function(e) {
                           this.is_hovered = true;
                           this.node.stop(true, true).show();
                        },
                        this
                     ),
                  "mouseleave.RP.BreadcrumbFlyout":
                     $.proxy(
                        function(e) {
                           this.is_hovered = false;
                           this.node.delay(1500).hide(1);
                        },
                        this
                     )
               }
            );
         }
   };
$(function(){RP.BreadcrumbFlyout.init()});
]]>
  </script>
</macro>