Pergola buttons

In this example a <g> element is first defined as container for the buttons:

var g = $C({element : "g", transform : "translate(40 40)", appendTo : pergola.user});

Instantiation of a simple button:

var basicButton = new pergola.Button("Basic Button");
basicButton.build({
  parent : g,
  quickTip : {tip : "this is the basic, default button"},
  ev : "mouseup",
  fn : legend.show
});

Note: the initial value of the inherited property parent is a reference to the pergola.user layer (system classes override it with pergola.system, a higher ranking layer).

In the code below we can see the use of the properties extra, an object where we can set properties (SVG attributes) not defined in the prototype, and text, a property that mutates to become a reference to the text element. Note how the SVG vocabulary and grammar is used for properties and sub-elements that have an equivalence, while only those objects/components which don't have an equivalence, like quickTip for example, have a proprietary specification. This approach is consistent throughout the library:

var button4 = new pergola.Button("Button 4");
button4.build({
  parent : g,
  y : 100,
  width : 88,
  height : 28,
  extra : {
    rx : 3
  },
  hasTextEffect : false,
  text : {
    x : 44,
    y : 36,
    textNode : "TALK",
    fill : "none",
    stroke : "#FFFFFF",
    'stroke-width' : 1.5,
    'font-family' : "'Arial Black'",
    'font-size' : 22,
    'font-weight' : "bold",
    transform : "scale(1 .5)",
    'text-anchor' : "middle",
    'letter-spacing' : 2,
    kerning : 0,
    'pointer-events' : "none"
  },
  quickTip : {tip : [
    "you can place text and symbols together",
    "in a button. I don't have a symbol, but",
    "just to let you know..."
  ]},
  ev : "mouseup",
  fn : legend.show
});

In this example you can see the use of the properties image and symbol. You may find interesting to know the physical structure of a button: it's composed of a <g> element containing two equal elements (<rect> by default) assigned to the mask and button properties, then the symbol and the image are stacked on top. The variety of effects is not just for fancy stuff, it can be controlled for accessibility:

var monaLisa = new pergola.Button("Mona Lisa");
monaLisa.build({
  parent : g,
  x : 440,
  y : 92,
  width : 59,
  height : 46,
  fill : "#F8F2DF",
  maskFill : "#F8F2DF",
  stroke : "#F8F2DF",
  image : {
    "xlink:href" : pergola.path + "lib/symbols/MonaLisa.jpg",
    width : 53,
    height : 40,
    x : 3,
    y : 3
  },
  extra : {
    "stroke-width" : 4,
    "stroke-dasharray" : "3,3",
    "stroke-dashoffset" : 0
  },
  symbol : {
    symbol : pergola.path + "lib/symbols/MonaLisa_negative.jpg",
    width : 53,
    height : 40,
    x : 3,
    y : 3,
    opacity : .8
  },
  quickTip : {tip : "Thanks."},
  ev : "mouseup",
  fn : legend.show
});

Buttons