The GEOSS Discovery And Access Broker APIs
Authors: Fabrizio Papeschi, Mattia Santoro, Stefano Nativi
API version: 1.4.3-beta

ButtonsFactory

Module: UI

Factory class for creation of several kind of buttons. The following CSS is required:

<!-- API CSS -->
<link rel="stylesheet" type="text/css" href="http://api.eurogeoss-broker.eu/docs/assets/css/giapi.css" />

Item Index

Methods

Methods

caleButton

(
  • label
  • [options]
)
static

Nice button based on http://www.cssbutton.me/calebogden/4fd7c9f23f2df02715000000.

For additional personalization, see the calebogden-button class of the giapi.css file

Parameters:

  • label String
  • [options] Object optional
    • [id] String optional

      button identifier

    • [handler] Function optional

      button click handler

    • [color="green"] String optional

      available colors are:

      - 'green'
      - 'blue'
      - 'yellow'
      - 'red'

    • [title] String optional
    • [attr] Object[] optional

      array of attributes defined by objects like this {'name':'attribute-name', 'value':'attribute-value'} to be added to the button. They can be used to store particular values to use in the 'click' function. E.g.:

      jQuery("#"+id).click(function(){
           var attrValue = jQuery(this).attr('attribute-name');
           ..
       });

Returns:

the button HTML markup

onOffSwitchButton

(
  • onLabel
  • offLabel
  • [options]
)
static

On/off switch button based on https://proto.io/freebies/onoff/.

Example with all the options set to the default values:


GIAPI.ButtonsFactory.onOffSwitchButton('On label','Off label', {
    'borderColor':'rgba(55, 141, 229, 0.47)',
    'shadowColor':'#999',
    'onColor':'#323232',
    'offColor':'#999999',
    'onBckColor':'rgba(255, 255, 255, 1)',
    'offBckColor':'#EEEEEE'
    'switchColor':'rgba(121, 187, 255, 0.24)',
    'switchBorderColor':'rgba(55, 141, 229, 0.47)'
}

  • Button in "on" modality:

  • Button in "off" modality:

    For additional personalization, see the onoffswitch class of the giapi.css file

  • Parameters:

    • onLabel String
    • offLabel String
    • [options] Object optional
      • [size] Object optional
      • [checked=true] Object optional
      • [id] String optional

        button identifier

      • [handler] Function optional

        button click handler

      • [shadowColor="transparent"] String optional
      • [borderColor="transparent"] String optional
      • [onColor="white"] String optional
      • [offColor="#white"] String optional
      • [onBckColor="#467FC9"] String optional
      • [offBckColor="#2c3e50"] String optional
      • [switchColor="white"] String optional
      • [switchBorderColor="white"] String optional
      • [attr] Object[] optional

        array of attributes defined by objects like this {'name':'attribute-name', 'value':'attribute-value'} to be added to the button. They can be used to store particular values to use in the 'click' function. E.g.:

        jQuery("#"+id).click(function(){
             var attrValue = jQuery(this).attr('attribute-name');
             ..
         });

    Returns:

    the button HTML markup

    roundCornerButton

    (
    • label
    • [options]
    )
    static

    Rounded corner button with CSS round icon based on https://proto.io/freebies/onoff/.

    Example with all the options set to the default values:

    
    GIAPI.ButtonsFactory.roundCornerButton('Label',{
        'enabled':true,
        'iconRadius': 20,
        'borderRadius': 20,
        'width':120,
        'labelColor':'rgb(43, 44, 105)',
        'bckColor':'#F7F7F7',
        'hoverBckColor':'rgb(187, 218, 247)',
        'borderColor':'rgba(63, 81, 181, 0.42)',
        'iconX':95,
        'iconColor':'#79bbff',
        'iconBorderColor':'#79bbff',
        'shadowColor':'#999'}
    );
        

  • Button enabled:

  • Button disabled:

    Example with darker colors and less rounded corners:

    
    GIAPI.ButtonsFactory.roundCornerButton('Label',{
        'labelColor':'#2C3E50',
        'borderRadius':8,
        'borderColor':'rgba(44, 62, 80, 0.62)',
        'iconColor':'#2C3E50'}
    );
        

  • Button enabled:

  • Button disabled:

    For additional personalization, see the rounded-corner-button class of the giapi.css file

  • Parameters:

    • label String
    • [options] Object optional
      • [id] String optional

        button identifier

      • [handler] Function optional

        button click handler

      • [enabled=true] Boolean optional
      • [width=120] Integer optional
      • [labelColor="rgb(43, 44, 105)"] String optional
      • [bckColor="#F7F7F7"] String optional
      • [hoverBckColor="rgb(187, 218, 247)"] String optional
      • [borderRadius=20] Integer optional
      • [borderColor="rgba(63, 81, 181, 0.42)"] String optional
      • [iconX=95] Integer optional
      • [iconRadius=20] Integer optional
      • [iconColor="rgb(43, 44, 105)"] String optional
      • [iconBorderColor="rgb(43, 44, 105)"] String optional
      • [shadowColor="#999"] String optional
      • [attr] Object[] optional

        array of attributes defined by objects like this {'name':'attribute-name', 'value':'attribute-value'} to be added to the button. They can be used to store particular values to use in the 'click' function. E.g.:

        jQuery("#"+id).click(function(){
             var attrValue = jQuery(this).attr('attribute-name');
             ..
         });

    Returns:

    the button HTML markup