About Guide templating versions

Return to top

10 Comments

  • Andy Diehl

    I tried updating a test copy to v2 and replaced all the depreciated helpers. But now none of the dropdowns work. All items are displayed all the time. I've copied the dropdown code from the copenhagen example but nothing works.

    0
  • Kyle Jones
    Zendesk Customer Care

    Hey there Andy,

    I've created a ticket we can work together in, since I'll need to investigate your account. Normally, we do not assist with custom code within Support, but I would like to see if I can point you in the right direction. I hope members of our community can also jump in with advice here!

    Kyle Jones | Technical Support Engineer

    Ask our Zendesk Community

    0
  • Rona Yang

    @... can you please post what you find. You can see above from my colleague Chen we also ran into something similar - copied the copenhagen code, removed the depreciated helpers, but still ran into some of the same formatting issues as Andy.

    We ended up not upgrading to V2 and not purchasing the badging options because we couldn't figure it out.

    Thanks

    0
  • Roman Hladkyy

    @... hi!

    Any updates on this? We are facing the same issue with drop-downs.

    Thanks!

    0
  • Toni Wowtscherk

    Kyle Jones any new leads on that? We faced the same problems and it seems like it's an Java Script issue. But couldn't figure out what exactly it might be. 

    0
  • Dion
    Zendesk Customer Care
    Hello Toni,

    I suggest that you contact our support team and provide more details about your issue. Please be advised that we do not provide support for custom codes or custom templates as this should be directed to your developers but we will try to see if we can provide some information on your issue. 

    Regards,

    Dion
    0
  • Rosa Lopez

    Hi, I was wondering if any of you have managed to solve this problem, as I have the same one and I can't get the dropdowns to work.

    Thanks.

    1
  • Dainne Lucena
    Zendesk Customer Care

    Hi Rosa Lopez,

    I went ahead & created a ticket on your behalf so we can work on the theme to see why the drop-down doesn't work. Please keep an eye out for our email!

    0
  • Michaela Vlckova

    Hi there, for all that have "dropdown" issues:
    it can be fixed by adding whole dropdown section in script.js from original Copenhagen theme + adding a css rules to style dropdown and hide/show them based on aria-expanded attributes: 

    [aria-expanded=true] {
      display: block;
    }
    [aria-expanded=false] {
      display: none;
    }

    JS snippet:

      // Dropdowns
      
      function Dropdown(toggle, menu) {
        this.toggle = toggle;
        this.menu = menu;

        this.menuPlacement = {
          top: menu.classList.contains("dropdown-menu-top"),
          end: menu.classList.contains("dropdown-menu-end")
        };

        this.toggle.addEventListener("click", this.clickHandler.bind(this));
        this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this));
        this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this));
      }

      Dropdown.prototype = {

        get isExpanded() {
          return this.menu.getAttribute("aria-expanded") === "true";
        },

        get menuItems() {
          return Array.prototype.slice.call(this.menu.querySelectorAll("[role='menuitem']"));
        },

        dismiss: function() {
          if (!this.isExpanded) return;

          this.menu.setAttribute("aria-expanded", false);
          this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top");
        },

        open: function() {
          if (this.isExpanded) return;

          this.menu.setAttribute("aria-expanded", true);
          this.handleOverflow();
        },

        handleOverflow: function() {
          var rect = this.menu.getBoundingClientRect();

          var overflow = {
            right: rect.left < 0 || rect.left + rect.width > window.innerWidth,
            bottom: rect.top < 0 || rect.top + rect.height > window.innerHeight
          };

          if (overflow.right || this.menuPlacement.end) {
            this.menu.classList.add("dropdown-menu-end");
          }

          if (overflow.bottom || this.menuPlacement.top) {
            this.menu.classList.add("dropdown-menu-top");
          }

          if (this.menu.getBoundingClientRect().top < 0) {
            this.menu.classList.remove("dropdown-menu-top")
          }
        },

        focusNextMenuItem: function(currentItem) {
          if (!this.menuItems.length) return;

          var currentIndex = this.menuItems.indexOf(currentItem);
          var nextIndex = currentIndex === this.menuItems.length - 1 || currentIndex < 0 ? 0 : currentIndex + 1;

          this.menuItems[nextIndex].focus();
        },

        focusPreviousMenuItem: function(currentItem) {
          if (!this.menuItems.length) return;

          var currentIndex = this.menuItems.indexOf(currentItem);
          var previousIndex = currentIndex <= 0 ? this.menuItems.length - 1 : currentIndex - 1;

          this.menuItems[previousIndex].focus();
        },

        clickHandler: function() {
          if (this.isExpanded) {
            this.dismiss();
          } else {
            this.open();
          }
        },

        toggleKeyHandler: function(e) {
          switch (e.keyCode) {
            case ENTER:
            case SPACE:
            case DOWN:
              e.preventDefault();
              this.open();
              this.focusNextMenuItem();
              break;
            case UP:
              e.preventDefault();
              this.open();
              this.focusPreviousMenuItem();
              break;
            case ESCAPE:
              this.dismiss();
              this.toggle.focus();
              break;
          }
        },

        menuKeyHandler: function(e) {
          var firstItem = this.menuItems[0];
          var lastItem = this.menuItems[this.menuItems.length - 1];
          var currentElement = e.target;

          switch (e.keyCode) {
            case ESCAPE:
              this.dismiss();
              this.toggle.focus();
              break;
            case DOWN:
              e.preventDefault();
              this.focusNextMenuItem(currentElement);
              break;
            case UP:
              e.preventDefault();
              this.focusPreviousMenuItem(currentElement);
              break;
            case TAB:
              if (e.shiftKey) {
                if (currentElement === firstItem) {
                  this.dismiss();
                } else {
                  e.preventDefault();
                  this.focusPreviousMenuItem(currentElement);
                }
              } else if (currentElement === lastItem) {
                this.dismiss();
              } else {
                e.preventDefault();
                this.focusNextMenuItem(currentElement);
              }
              break;
            case ENTER:
            case SPACE:
              e.preventDefault();
              currentElement.click();
              break;
          }
        }
      }

      var dropdowns = [];
      var dropdownToggles = Array.prototype.slice.call(document.querySelectorAll(".dropdown-toggle"));

      dropdownToggles.forEach(function(toggle) {
        var menu = toggle.nextElementSibling;
        if (menu && menu.classList.contains("dropdown-menu")) {
          dropdowns.push(new Dropdown(toggle, menu));
        }
      });

      document.addEventListener("click", function(evt) {
        dropdowns.forEach(function(dropdown) {
          if (!dropdown.toggle.contains(evt.target)) {
            dropdown.dismiss();
          }
        });
      });

    (source from https://github.com/zendesk/copenhagen_theme/blob/master/script.js lines 316-482)

    0
  • Toni Wowtscherk

    Thank you Michaela Vlckova! Just copy pasted the JS snippet and replaced it with the dropdown snippet from the template and it works perfectly fine! Awesome! 

    0

Please sign in to leave a comment.

Powered by Zendesk