Pergola selector

The Selector class instantiates the PopupList class which instantiates the PopupListItem class, based on the list property. You don't normally need to instantiate the PopupList and PopupListItem classes. The pop-up list is not preemptive within the viewport.

View as standalone SVG

mySelector = new pergola.Selector("My Selector");
mySelector.build({
  parent : g,
  list : [
    "Small",
    "Medium",
    "Large",
    "Extra large"
  ],
  index : 0,
  caption : {
    text : {
      x : -9,
      y : 15,
      textNode : "Size",
      'letter-spacing' : 1,
      kerning : 0,
      "pointer-events" : "none"
    }
  },
  target : tshirt,
  fn : function () {
    var t = this.target,
        text = t.text,
        i = this.index;

    t.shape.setAttributeNS(null, "transform", "scale(" + (i + 1) + ")");
    text.setAttributeNS(null, "font-size", (5 * (i + 1)) + "px");
    text.setAttributeNS(null, "x", 18.5 * (i + 1));
    text.setAttributeNS(null, "y", 14 * (i + 1));
    text.setAttributeNS(null, "text-anchor", "middle");
  }
});

Selector with Pop-up List