0 Replies Latest reply on Mar 8, 2018 8:34 AM by klas

    What is a Guided Navigation?

    klas

      I have stumbled across some code.

      I am trying to figure out "what is it for?"

       

      HTML DOM

      <!-- BEGIN guided nav -->

      <div class="j-guided-nav js-guided-nav j-rc4" style="display:none">

      <div class="j-header js-header j-rc4 j-rc-none-bottom"></div>

      <div class="j-navbar js-navbar"> </div>

      </div>

      <!-- END guided nav -->

      <div class="jive-content . . ." role="article" . . . >

       

      JS Source (that seems to interact with the above DOM)

       

      A few things I have figured out from the code:

      1. It gets data from the "/api/core/v3/tiles/" endpoint
      2. It adds a H4 & a UL of links

       


      ;jive.namespace("GuidedNavigation");

      define("apps/guided_navigation/models/source", ["jquery", "underscore", "apps/shared/models/deferred_rest_service"], function(d, a, c) {

          var b = c.extend(function(e) {

              this.init = function() {

                  this.RESOURCE_ENDPOINT = jive.app.url({

                      path: "/api/core/v3/tiles/"

                  })

              }

              ;

              this.fetch = function(g) {

                  var f = this.RESOURCE_ENDPOINT + g + "/";

                  return this.commonAjaxRequest(new d.Deferred(), "GET", {

                      url: f

                  })

              }

          });

          return b

      });

      ;goog.provide("jive.guided_navigation.link");

      jive.guided_navigation.link = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          output.append(opt_data.action ? '<a href="' + soy.$$escapeHtml(jive.soy.func.buildUrl(window._jive_base_url, opt_data.action.url)) + '" class="j-guided-nav-link">' + (opt_data.navIconPrefix ? '<span class="jive-icon-glyph icon-angle-left"></span> ' : "") + (opt_data.jiveIconClasses ? '<span class=" + soy.$$escapeHtml(opt_data.jiveIconClasses) + "></span>' : "") + '<span class="lnk">' + soy.$$escapeHtml(opt_data.text) + "</span>" + (opt_data.navIconPostfix ? ' <span class="jive-icon-glyph icon-angle-right"></span>' : "") + "</a>" : (opt_data.jiveIconClasses ? '<span class=" + soy.$$escapeHtml(opt_data.jiveIconClasses) + "></span>' : "") + soy.$$escapeHtml(opt_data.text));

          return opt_sb ? "" : output.toString()

      }

      ;

      ;goog.provide("jive.guided_navigation.header");

      jive.guided_navigation.header = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          jive.guided_navigation.link(soy.$$augmentMap(opt_data.parent, {

              jiveIconClasses: false

          }), output);

          output.append(" / ", soy.$$escapeHtml(opt_data.tileName));

          return opt_sb ? "" : output.toString()

      }

      ;

      ;goog.provide("jive.guided_navigation.back");

      jive.guided_navigation.back = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          jive.guided_navigation.link(soy.$$augmentMap(opt_data, {

              text: jive.i18n.i18nText(jive.i18n.getMsg("k25db"), [opt_data.text]),

              jiveIconClasses: false

          }), output);

          return opt_sb ? "" : output.toString()

      }

      ;

      ;goog.provide("jive.guided_navigation.section");

      jive.guided_navigation.section = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          output.append('<h4 class="font-color-meta">', soy.$$escapeHtml(opt_data.text), '</h4><ul class="j-icon-list">');

          var itemList6 = opt_data.items;

          var itemListLen6 = itemList6.length;

          for (var itemIndex6 = 0; itemIndex6 < itemListLen6; itemIndex6++) {

              var itemData6 = itemList6[itemIndex6];

              output.append("<li ", itemData6.isCurrent ? 'class="j-selected font-color-normal j-current"' : "", ">");

              jive.guided_navigation.link(itemData6, output);

              output.append("</li>")

          }

          output.append("</ul>");

          return opt_sb ? "" : output.toString()

      }

      ;

      ;goog.provide("jive.guided_navigation.menu");

      jive.guided_navigation.menu = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          output.append('<div class="j-menu j-guided-nav-menu j-quick-menu j-pop-main js-guided-navigation-menu" style="display: none;">');

          var sectionList4 = opt_data.content;

          var sectionListLen4 = sectionList4.length;

          for (var sectionIndex4 = 0; sectionIndex4 < sectionListLen4; sectionIndex4++) {

              var sectionData4 = sectionList4[sectionIndex4];

              jive.guided_navigation.section(sectionData4, output)

          }

          output.append("</div>");

          return opt_sb ? "" : output.toString()

      }

      ;

      ;goog.provide("jive.guided_navigation.navbar");

      jive.guided_navigation.navbar = function(opt_data, opt_sb) {

          var output = opt_sb || new soy.StringBuilder;

          output.append('<div class="prev">');

          if (opt_data.prev)

              jive.guided_navigation.link(soy.$$augmentMap(opt_data.prev, {

                  navIconPrefix: true

              }), output);

          else

              jive.guided_navigation.back(soy.$$augmentMap(opt_data.parent, {

                  navIconPrefix: true

              }), output);

          output.append('</div><div class="js-menu-action j-gNav-menu">');

          jive.guided_navigation.menu(opt_data, output);

          output.append("<a href='#' class='js-list j-guided-nav-link'><span class=\"lnk\">", soy.$$escapeHtml(jive.i18n.i18nText(jive.i18n.getMsg("k25dc"), [opt_data.position, opt_data.count])), '</span><span class="j-nav-more jive-icon-glyph icon-arrow-down2"></span></a></div><div class="next">');

          if (opt_data.next)

              jive.guided_navigation.link(soy.$$augmentMap(opt_data.next, {

                  navIconPostfix: true

              }), output);

          else

              jive.guided_navigation.back(soy.$$augmentMap(opt_data.parent, {

                  navIconPostfix: true

              }), output);

          output.append("</div>");

          return opt_sb ? "" : output.toString()

      }

      ;

      ;define("apps/guided_navigation/views/view", ["jquery", "underscore", "soy!jive.guided_navigation.header", "soy!jive.guided_navigation.navbar"], function(c, b, e, a) {

          function d(g) {

              var f = this;

              this.options = g;

              this.$el = g.$el;

              f.render = function(h) {

                  if (this.options.pos < 1 || this.options.pos > h.aggregate.length) {

                      return

                  }

                  this.data = h;

                  this.addHeader();

                  this.addNavBar();

                  this.bindHandlers();

                  this.$el.show()

              }

              ;

              f.bindHandlers = function() {

                  this.$el.on("click.guided_nav", ".js-menu-action", this.showMenu)

              }

              ;

              f.addHeader = function() {

                  var h = e({

                      parent: this.data.parent,

                      tileName: this.data.title

                  });

                  this.$el.find(".js-header").append(h)

              }

              ;

              f.addNavBar = function() {

                  var k = this.data.aggregate;

                  var l = parseInt(this.options.pos)

                    , i = l - 1;

                  var j = {

                      parent: this.data.parent,

                      count: k.length,

                      position: l,

                      content: this.data.content,

                      next: i + 1 < k.length ? k[i + 1] : false,

                      prev: i - 1 >= 0 ? k[i - 1] : false

                  };

                  var h = a(j);

                  this.$el.find(".js-navbar").append(h)

              }

              ;

              f.showMenu = function(h) {

                  h.preventDefault();

                  c(".js-guided-navigation-menu").popover({

                      context: c(this),

                      darkPopover: true,

                      destroyOnClose: false,

                      hoverSelection: true

                  })

              }

          }

          return d

      });

      ;jive.namespace("GuidedNavigation");

      define("apps/guided_navigation/main", ["jquery", "underscore", "apps/guided_navigation/models/source", "apps/guided_navigation/views/view", "apps/guided_navigation/helper"], function(c, a, e, d, b) {

          jive.GuidedNavigation.Main = jive.oo.Class.extend(function(f) {

              f.init = function(h) {

                  var g = this;

                  this.options = h = a.extend({

                      $el: c(".js-guided-nav")

                  }, b.getNav());

                  if (!h.id || !h.pos) {

                      return

                  }

                  this.model = new e();

                  this.view = new d(h);

                  this.model.fetch(h.id).done(function(i) {

                      var j = g.processTile(i);

                      g.view.render(j)

                  }).fail(function() {

                      console.log("failed to retrieve navigation bar for ID: " + h.tileID)

                  })

              }

              ;

              f.processTile = function(i) {

                  var g = this;

                  var j = 1;

                  var h = [];

                  a.each(i.data.content, function(k) {

                      a.each(k.items, function(l) {

                          l.isCurrent = (g.options.pos == j);

                          if (l.action) {

                              l.action.url = b.processURL(l.action.url, j, i.id)

                          }

                          h.push(l);

                          j++

                      })

                  });

                  return a.extend({

                      aggregate: h

                  }, i.data)

              }

          });

          return jive.GuidedNavigation.Main

      });