Pages

Thursday, September 19, 2013

JavaScript - Router using anchors 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style>
      #log {
        border: #ccc 1px solid;
        background-color: #f1f1f1;
      }
    </style>

    <script type="text/javascript">
      // Router definition

      var Router = {
        urlCurrent: '',
        anchorNameCurrent: '',
        routeCallback: '',
        routeCallbackObj: null
      };

      Router.handle = function(param) {
        console.log('Router.handle()');

        console.log('param: ' + param);

        if (param !== undefined) {
          if (typeof param === 'string') {
            this.urlCurrent = param;
          }
          else if (typeof param === 'object') {
            console.log('nodeName: ' + param.nodeName);

            if (param.nodeName) {
              switch (param.nodeName) {
                case 'a':
                case 'A':
                  this.urlCurrent = param.href;
                  break;
              }
            }
            else {
              // If not set a router the router handler can be canceled
              this.urlCurrent = window.location.href;
            }
          }
        }
        else {
          // If not set a router the router handler can be canceled
          this.urlCurrent = window.location.href;
        }

        console.log('Router.urlCurrent: ' + this.urlCurrent);

        if (this.urlCurrent.indexOf("#") >= 0)
          this.anchorNameCurrent = this.urlCurrent.substring(this.urlCurrent.indexOf("#") + 1);
        else
          this.anchorNameCurrent = '';

        // No action was informed
        if (this.anchorNameCurrent == '')
          return;

        console.log('anchor = ' + this.anchorNameCurrent);

        // Callback

        if (typeof this.routeCallback === 'object' &&
            typeof this.routeCallbackObj == 'string' &&
            typeof this.routeCallbackObj[this.routeCallback] === 'function') {
          this.routeCallbackObj[this.routeCallback](this.anchorNameCurrent);
        }
        else if (typeof this.routeCallback == 'function') {
          this.routeCallback(this.anchorNameCurrent);
        }
      }

      Router.register = function(elementId, url) {
        console.log('Router.register(' + elementId + ', ' + url + ')');

        var element = document.getElementById(elementId);

        var nodeName = element.nodeName;

        console.log('nodeName: ' + nodeName);

        if (/select/i.test(nodeName)) {
          element.onchange = function() {
            var selectedIndex = element.selectedIndex;

            console.log(element.options[selectedIndex].value);

            Router.handle(element.options[selectedIndex].value);
          }
        }
        else {
          document.getElementById(elementId).onclick = function() {
            Router.handle(url);
          }
        }
      };

      Router.setRouteCallback = function(callback, obj) {
        console.log('Router.setRouteCallback()');
        if (typeof callback === 'object' && typeof obj == 'string' &&
            typeof obj[callback] === 'function') {
          this.routeCallback = callback;
          this.routeCallbackObj = obj;
        }
        else if (typeof callback == 'function') {
          this.routeCallback = callback;
          this.routeCallbackObj = null;
        }
      };

      // Callback to handle routing

      function handleRoute(anchor) {
        console.log('handleRoute(' + anchor + ')');

        document.getElementById('log').innerHTML = 'Route: ' + anchor;
      }

      Router.setRouteCallback(handleRoute);
    </script>
  </head>

  <body>
    <a href="#1" onclick="Router.handle(this);">Action 1</a> | 

    <a id="ahref2" href="#">Action 2</a> | 

    <button id="btn3">Action 3</button> | 

    <select id="select">
      <option value=""></option>
      <option value="#4">Action 4</option>
      <option value="#5">Action 5</option>
    </select>

    <script type="text/javascript">
      Router.register('ahref2', '#2');
      Router.register('btn3', '#3');
      Router.register('select');
    </script>

    <br/>
    <br/>

    <div id="log"></div>
  </body>

</html>
Postado por Allann Jones às 3:24 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)