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 0 comentários

Monday, September 09, 2013

Draggable DIV 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style>
      .window-class {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>

    <script type="text/javascript">
      var dragStarted = false;
      var deltaX = 0;
      var deltaY = 0;

      function dragBegin(e) {
        dragStarted = true;

        var x = 0;
        var y = 0;

        if (e.pageX) {
          x = e.pageX;
          y = e.pageY;
        }
        else {
          x = e.clientX;
          y = e.clientY;
        }

        deltaX = x - document.getElementById('window01').offsetLeft;
        deltaY = y - document.getElementById('window01').offsetTop;
      }

      function dragEnd(e) {
        dragStarted = false;
      }

      function drag(e) {
        if (!dragStarted) {
          return;
        }

        var x = 0;
        var y = 0;

        if (e.pageX) {
          x = e.pageX;
          y = e.pageY;
        }
        else {
          x = e.clientX;
          y = e.clientY;
        }

        document.getElementById('window01').style.top = (y - deltaY) + 'px';
        document.getElementById('window01').style.left = (x - deltaX) + 'px';
      }
    </script>
  </head>
  <body>
    <div id="window01" class="window-class"
              onmousedown="dragBegin(event);" 
              onmouseup="dragEnd(event);" 
              onmousemove="drag(event);" 
              onmouseout="dragEnd();"></div>
  </body>
</html>
Postado por Allann Jones às 3:27 PM 0 comentários
Subscribe to: Posts (Atom)