Difference between revisions of "Widget:SpaceAPI"

From Hackerspace ACKspace
Jump to: navigation, search
m (added processing class)
(renamed SpaceState class to SpaceAPI for future purpose. added (space API) data.)
Line 38: Line 38:
 
     "use strict";
 
     "use strict";
  
−
     if ( typeof SpaceState === "undefined" )
+
     if ( typeof SpaceAPI === "undefined" )
 
     {
 
     {
−
         window.SpaceState = function( _width, _height, _float, _padding, _url, _interval )
+
         window.SpaceAPI = function( _width, _height, _float, _padding, _url, _interval )
 
         {
 
         {
 
             this._width = _width;
 
             this._width = _width;
Line 50: Line 50:
 
         }
 
         }
  
−
         SpaceState.prototype._width          = null;
+
         SpaceAPI.prototype.data            = null;
−
         SpaceState.prototype._height        = null;
+
        SpaceAPI.prototype._width          = null;
−
         SpaceState.prototype._float          = null;
+
         SpaceAPI.prototype._height        = null;
−
         SpaceState.prototype._url            = null;
+
         SpaceAPI.prototype._float          = null;
−
         SpaceState.prototype._interval      = null;
+
         SpaceAPI.prototype._url            = null;
−
         SpaceState.prototype._intervalId    = null;
+
         SpaceAPI.prototype._interval      = null;
−
         SpaceState.prototype._node          = null;
+
         SpaceAPI.prototype._intervalId    = null;
−
         SpaceState.prototype._msgLoading    = "Loading..";
+
         SpaceAPI.prototype._node          = null;
−
         SpaceState.prototype._msgError      = "Error";
+
         SpaceAPI.prototype._msgLoading    = "Loading..";
−
         SpaceState.prototype._msgParserError = "Failed to parse space state information";
+
         SpaceAPI.prototype._msgError      = "Error";
−
         SpaceState.prototype._msgOpen        = "Open";
+
         SpaceAPI.prototype._msgParserError = "Failed to parse space state information";
−
         SpaceState.prototype._msgClosed      = "Closed";
+
         SpaceAPI.prototype._msgOpen        = "Open";
−
         SpaceState.prototype._msgUnknown    = "Unknown";
+
         SpaceAPI.prototype._msgClosed      = "Closed";
−
         SpaceState.prototype._msgSince      = "Since: ";
+
         SpaceAPI.prototype._msgUnknown    = "Unknown";
−
         SpaceState.prototype._colorOpen      = "#0f0";
+
         SpaceAPI.prototype._msgSince      = "Since: ";
−
         SpaceState.prototype._colorClosed    = "#f00";
+
         SpaceAPI.prototype._colorOpen      = "#0f0";
−
         SpaceState.prototype._colorUnknown  = "#f70";
+
         SpaceAPI.prototype._colorClosed    = "#f00";
 +
         SpaceAPI.prototype._colorUnknown  = "#f70";
  
−
         SpaceState.prototype.start = function( )
+
         SpaceAPI.prototype.start = function( )
 
         {
 
         {
 
             // Use interval timer id as image id
 
             // Use interval timer id as image id
 
             this._intervalId = 0;
 
             this._intervalId = 0;
 
             if ( this._interval > 0 )
 
             if ( this._interval > 0 )
−
                 this._intervalId = setInterval( this._fetchSpaceState.bind( this ), this._interval );
+
                 this._intervalId = setInterval( this._fetchState.bind( this ), this._interval );
  
 
             var style = "width:" + this._width + ";height:" + this._height + ";padding:" + this._padding + ";text-align:center;-moz-box-shadow: 3px 3px 4px #000;-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);box-shadow: 3px 3px 4px rgba(0,0,0,0.2);position:relative;";
 
             var style = "width:" + this._width + ";height:" + this._height + ";padding:" + this._padding + ";text-align:center;-moz-box-shadow: 3px 3px 4px #000;-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);box-shadow: 3px 3px 4px rgba(0,0,0,0.2);position:relative;";
Line 82: Line 83:
 
             this._node = document.getElementById( "spaceAPI" + this._intervalId );
 
             this._node = document.getElementById( "spaceAPI" + this._intervalId );
  
−
             // Update the spacestate immediately
+
             // Update the space state immediately
−
             setTimeout( this._fetchSpaceState.bind( this ), 1 );
+
             setTimeout( this._fetchState.bind( this ), 1 );
 
         };
 
         };
  
−
         SpaceState.prototype._fetchSpaceState = function( )
+
         SpaceAPI.prototype._fetchState = function( )
 
         {
 
         {
 
             this._node.className = "processing";
 
             this._node.className = "processing";
Line 119: Line 120:
 
         };
 
         };
  
−
         SpaceState.prototype._updateSpaceState = function( _message, _color, _title )
+
         SpaceAPI.prototype._updateState = function( _message, _color, _title )
 
         {
 
         {
 
             this._node.className = "";
 
             this._node.className = "";
Line 130: Line 131:
 
         };
 
         };
  
−
         SpaceState.prototype._xhr_onload = function( _event )
+
         SpaceAPI.prototype._xhr_onload = function( _event )
 
         {
 
         {
−
            var spaceState;
 
 
             var open = null;
 
             var open = null;
 
             var message = null;
 
             var message = null;
Line 139: Line 139:
 
             try
 
             try
 
             {
 
             {
−
                 spaceState = JSON.parse( _event.target.responseText );
+
                 this.data = JSON.parse( _event.target.responseText );
−
                 open = spaceState.state.open;
+
                 open = this.data.state.open;
−
                 message = spaceState.state.message;
+
                 message = this.data.state.message;
  
 
                 // Start as epoch timestamp (NOTE: check if timezone doesn't mess things up)
 
                 // Start as epoch timestamp (NOTE: check if timezone doesn't mess things up)
 
                 var d = new Date( 0 );
 
                 var d = new Date( 0 );
−
                 d.setUTCSeconds( spaceState.state.lastchange );
+
                 d.setUTCSeconds( this.data.state.lastchange );
 
                 title = this._msgSince + d.toLocaleString( );
 
                 title = this._msgSince + d.toLocaleString( );
 
             }
 
             }
Line 154: Line 154:
  
 
             if ( open )
 
             if ( open )
−
                 this._updateSpaceState( message || this._msgOpen, this._colorOpen, title );
+
                 this._updateState( message || this._msgOpen, this._colorOpen, title );
 
             else if ( open === false )
 
             else if ( open === false )
−
                 this._updateSpaceState( message || this._msgClosed, this._colorClosed, title );
+
                 this._updateState( message || this._msgClosed, this._colorClosed, title );
 
             else
 
             else
−
                 this._updateSpaceState( message || this._msgUnknown, this._colorUnknown, title );
+
                 this._updateState( message || this._msgUnknown, this._colorUnknown, title );
 
         };
 
         };
  
−
         SpaceState.prototype._xhr_onerror = function( )
+
         SpaceAPI.prototype._xhr_onerror = function( )
 
         {
 
         {
 
             // Something has failed, show the error
 
             // Something has failed, show the error
−
             this._updateSpaceState( this._msgError, this._colorUnknown );
+
             this._updateState( this._msgError, this._colorUnknown );
 
         }
 
         }
 
     }
 
     }
  
−
     var state = new SpaceState( "<!--{$width|escape:html|default:auto}-->", "<!--{$height|escape:html|default:auto}-->", "<!--{$float|escape:html|default:none}-->", "<!--{$padding|escape:html|default:8px}-->", "<!--{$url|escape:urlpathinfo}-->", <!--{$interval|validate:int|default:0}--> );
+
     var state = new SpaceAPI( "<!--{$width|escape:html|default:auto}-->", "<!--{$height|escape:html|default:auto}-->", "<!--{$float|escape:html|default:none}-->", "<!--{$padding|escape:html|default:8px}-->", "<!--{$url|escape:urlpathinfo}-->", <!--{$interval|validate:int|default:0}--> );
 
     state.start();
 
     state.start();
  

Revision as of 17:53, 10 May 2016

This widget allows you to display the Space API data (provided as JSON)

Created by Xopr

Using this widget

To insert this widget, use the following code: 

{{#widget:SpaceAPI
|url=/spaceAPI/
|width=260px
|height=20px
|padding=8px
|interval=20
|float=right
}}

This will give the following result:

Notes

  • url is mandatory, the rest is optional (leave out interval to make the data static).
    it also must be written without protocol since colon (:) is not allowed, and may be relative, for example: //ackspace.nl/spaceAPI/ or /spaceAPI/
  • You must provide a unit for the sizes (i.e. px, %, etc.)

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:SpaceAPI article.

Retrieved from "https://ackspace.nl/w/index.php?title=Widget:SpaceAPI&oldid=5976"