Commit 9f6a4426 authored by Paul Asmuth's avatar Paul Asmuth
Browse files

merge conflict :(

parents fc4af859 401a9748

fnord-webcomponents/components/fn-timeinput.html

+96 −3
Original line number Diff line number Diff line
@@ -10,16 +10,22 @@ 


  todo: add seconds-selectable and render third input if attr is set

-->

<template id="fn-input-time-base-tpl">

<template id="fn-timeinput-base-tpl">

  <style>

    #timeinput_container {

      margin:auto;

<<<<<<< HEAD

      height: 35px;

      width: 114px;

=======

      height: 30px;

      width: 126px;

>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

    }



    input {

      float: left;

<<<<<<< HEAD

      width: 50px;

      font-size: 1rem;

      outline: none;
@@ -69,14 +75,35 @@ 
      border-color: #dbb1b1;

      color: #d95c5c;

      box-shadow: none;

=======

      width: 30px;

      height: 25px;

      line-height: 25px;

      padding: 0 8px;

      font-size: 12px;

      border-radius: 4px;

      border: 1px solid #b3c2d0;

      color: #545758;

      background: #fff;

    }



    input.highlighted {

      border: 1px solid rgba(230, 126, 34,1.0);

      background: rgba(230, 126, 34,0.1);

>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

    }



    b {

      line-height: 1.2142em;

      padding-top: 0.60861em;

      float:left;

<<<<<<< HEAD

      margin: 0 5px;



=======

      margin-left: 5px;

      margin-right: 5px;

>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

    }

  </style>
@@ -89,7 +116,7 @@ 
<script type="text/javascript">

  var TimeInputComponent = function() {

    this.createdCallback = function() {

      var tpl = Fnord.getTemplate("fn-input-time", "base");

      var tpl = Fnord.getTemplate("fn-timeinput", "base");

      var shadow = this.createShadowRoot();

      var base = this;

      shadow.appendChild(tpl);
@@ -97,6 +124,7 @@ 
      var hours_input = this.shadowRoot.querySelector("#hours");

      var minutes_input = this.shadowRoot.querySelector("#minutes");



<<<<<<< HEAD

      if (this.hasAttribute('data-hours-value')) {

        this.setHoursValue(this.getAttribute('data-hours-value'));

      }
@@ -107,6 +135,8 @@ 
        this.setState();

      }



=======

>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

      hours_input.addEventListener('focus', function() {

        base.validateHoursInput();

      }, false);
@@ -115,6 +145,7 @@ 
      }, false);

    };



<<<<<<< HEAD

    this.attributeChangedCallback = function(attr, old_val, new_val) {

      if (attr == "data-minutes-value") {

        this.setMinutesValue(new_val);
@@ -215,6 +246,64 @@ 
      input.value = this.appendLeadingZero(value);

    };



=======

    this.validateHoursInput = function() {

      var base = this;

      var input = this.shadowRoot.querySelector("#hours");

      input.maxLength = "2";



      input.addEventListener('keypress', function(e) {

        if (e.keyCode == 13 ) {

          var value = parseInt(this.value);

          if (value > 23) {

            this.className = "highlighted";

            return;

          }

          this.className = "";

          base.fireTimeInputSubmitEvent();

          return;

        }

        if (!FnordMetric.util.isNavKey(e.keyCode) &&

          !FnordMetric.util.isNumKey(e.keyCode)) {

            e.preventDefault();

        }

      }, false);

    };



    this.validateMinutesInput = function() {

      var base = this;

      var input = this.shadowRoot.querySelector("#minutes");

      input.maxLength = "2";



      input.addEventListener('keypress', function(e) {

        if (e.keyCode == 13 ) {

          var value = parseInt(this.value);

          if (value > 59) {

            this.className = "highlighted";

            return;

          }

          this.className = "";

          base.fireTimeInputSubmitEvent();

          return;

        }

        if (!FnordMetric.util.isNavKey(e.keyCode) &&

          !FnordMetric.util.isNumKey(e.keyCode)) {

            e.preventDefault();

        }

      }, false);

    };



    this.setHoursValue = function(value) {

      var input = this.shadowRoot.querySelector("#hours");

      input.value = FnordMetric.util.appendLeadingZero(value);

    };



    this.setMinutesValue = function(value) {

      var input = this.shadowRoot.querySelector("#minutes");

      input.value = FnordMetric.util.appendLeadingZero(value);

    };



>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

    this.getValues = function() {

      return {

        'hours' : this.shadowRoot.querySelector("#hours").value,
@@ -222,12 +311,16 @@ 
    };



    this.fireTimeInputSubmitEvent = function() {

<<<<<<< HEAD

      this.dispatchEvent(new Event("fn-input-time-submit"));

=======

      this.dispatchEvent(new Event("fn-timeinput-submit"));

>>>>>>> 401a974820d725476578f94e11b1b84a1a15caaf

    };

  }



  window.addEventListener('fn-ready', function() {

    var timeinput = Fnord.registerComponent('fn-input-time', TimeInputComponent);

    var timeinput = Fnord.registerComponent('fn-timeinput', TimeInputComponent);

  }, false);

</script>

fnord-webcomponents/demo.html

+3 −118
Original line number Diff line number Diff line
@@ -13,30 +13,8 @@ 
    <title>Fnord Table Examples</title>

    <link rel="stylesheet" href="fnord.css" type="text/css">

    <link rel="stylesheet" href="components/fn-table.css" type="text/css">

    <link rel="stylesheet" href="components/fn-button.css" type="text/css">

    <link rel="stylesheet" href="components/fn-message.css" type="text/css">

    <link rel="stylesheet" href="components/fn-tabbar.css" type="text/css">

    <link rel="stylesheet" href="components/fn-modal.css" type="text/css">

    <link rel="stylesheet" href="components/fn-tooltip.css" type="text/css">

    <link rel="stylesheet" href="components/fn-divider.css" type="text/css">

    <link rel="stylesheet" href="components/fn-steps.css" type="text/css">

    <link rel="stylesheet" href="components/fn-breadcrumb.css" type='text/css'>

    <link rel="stylesheet" href="components/fn-pagination.css" type='text/css'>

    <link rel="stylesheet" href="components/fn-accordion.css" type="text/css">

    <link rel="stylesheet" href="components/fn-pager.css" type="text/css">

    <link rel="stylesheet" href="components/fn-input.css" type='text/css'>

    <link rel="stylesheet" href="components/fn-card.css" type='text/css'>

    <link rel="stylesheet" href="3rdparty/fontawesome.css" type="text/css">

    <link rel="stylesheet" href="components/fn-statistic.css" type='text/css'>

    <style type="text/css">

      @font-face {

        font-family: 'FontAwesome';

        src: url('3rdparty/fontawesome.woff?v=4.2.0');

        src: url('3rdparty/fontawesome.woff?v=4.2.0') format('woff');

        font-weight: normal;

        font-style: normal;

      }



      body, html {

        margin: 0;

        padding: 0 0 60px 0;
@@ -88,50 +66,15 @@ 
        font-style: normal;

        color: #999;

      }



      section h3 {

        color: #666;

        font-size: 16px;

        line-height: 18px;

        height: 18px;

        padding: 0;

        margin: 30px 0 20px 0;

        font-weight: 500;

      }



      section h3 i {

        font-style: normal;

        color: #999;

      }



      section .info_box {

        padding: 1em 1.5em;

        line-height: 1.3;

        border-radius: .2857rem;

        font-size: 1em;

        background-color: rgba(41, 128, 185, .15);

        box-shadow: 0 0 0 1px rgba(41, 128, 185, .4) inset,0 1px 2px 0 rgba(0,0,0,.05);

        text-align:center;

      }





    </style>

  </head>

  <body>

    <link rel="import" href="components/fn-appbar.html" data-component="fn-appbar">

    <link rel="import" href="components/fn-button.html" data-component="fn-button">

    <link rel="import" href="components/fn-button-demo.html" data-component="fn-button-demo">

    <link rel="import" href="components/fn-button-group.html" data-component="fn-button-group">

    <link rel="import" href="components/fn-loader.html" data-component="fn-loader">

    <link rel="import" href="components/fn-loader-demo.html" data-component="fn-loader-demo">

    <link rel="import" href="components/fn-menu.html" data-component="fn-menu">

    <link rel="import" href="components/fn-menu-demo.html" data-component="fn-menu-demo">

    <link rel="import" href="components/fn-tabbar.html" data-component="fn-tabbar">

    <link rel="import" href="components/fn-tabbar-demo.html" data-component="fn-tabbar-demo">

    <link rel="import" href="components/fn-modal.html" data-component="fn-modal">

    <link rel="import" href="components/fn-modal-demo.html" data-component="fn-modal-demo">

    <link rel="import" href="components/fn-message.html" data-component="fn-message">

    <link rel="import" href="components/fn-message-demo.html" data-component="fn-message-demo">

    <link rel="import" href="components/fn-search.html" data-component="fn-search">

    <link rel="import" href="components/fn-search-demo.html" data-component="fn-search-demo">

    <link rel="import" href="components/fn-table.html" data-component="fn-table">
@@ -144,34 +87,7 @@ 
    <link rel="import" href="components/fn-progressbar-demo.html" data-component="fn-progressbar-demo">

    <link rel="import" href="components/fn-dropdown.html" data-component="fn-dropdown">

    <link rel="import" href="components/fn-dropdown-demo.html" data-component="fn-dropdown-demo">

    <link rel="import" href="components/fn-datepicker.html" data-component="fn-datepicker">

    <link rel="import" href="components/fn-datepicker-demo.html" data-component="fn-datepicker-demo">

    <link rel="import" href="components/fn-timeinput.html" data-component="fn-input-time">

    <link rel="import" href="components/fn-input.html" data-component="fn-input">

    <link rel="import" href="components/fn-form-demo.html" data-component="fn-form-demo">

    <link rel="import" href="components/fn-checkbox.html" data-component="fn-checkbox">

    <link rel="import" href="components/fn-daterangepicker.html" data-component="fn-daterangepicker">

    <link rel="import" href="components/fn-daterangepicker-demo.html" data-component="fn-daterangepicker-demo">

    <link rel="import" href="components/fn-tooltip.html" data-component="fn-tooltip">

    <link rel="import" href="components/fn-tooltip-demo.html" data-component="fn-tooltip-demo">

    <link rel="import" href="components/fn-divider.html" data-component="fn-divider">

    <link rel="import" href="components/fn-divider-demo.html" data-component="fn-divider-demo">

    <link rel="import" href="components/fn-steps.html" data-component="fn-steps">

    <link rel="import" href="components/fn-steps-demo.html" data-component="fn-steps-demo">

    <link rel="import" href="components/fn-breadcrumb-demo.html" data-component="fn-breadcrumb-demo">

    <link rel="import" href="components/fn-pagination.html" data-component="fn-pagination">

    <link rel="import" href="components/fn-pagination-demo.html" data-component="fn-pagination-demo">

    <link rel="import" href="components/fn-accordion.html" data-component="fn-accordion">

    <link rel="import" href="components/fn-accordion-demo.html" data-component="fn-accordion-demo">

    <link rel="import" href="components/fn-pager.html" data-component="fn-pager">

    <link rel="import" href="components/fn-pager-demo.html" data-component="fn-pager-demo">

    <link rel="import" href="components/fn-navigation.html" data-component="fn-navigation">

    <link rel="import" href="components/fn-navigation-demo.html" data-component="fn-navigation-demo">

    <link rel="import" href="components/fn-flexbox.html" data-component="fn-flexbox">

    <link rel="import" href="components/fn-flexbox-demo.html" data-component="fn-flexbox-demo">

    <link rel="import" href="components/fn-card.html" data-component="fn-card">

    <link rel="import" href="components/fn-card-demo.html" data-component="fn-card-demo">

    <link rel="import" href="components/fn-statistic-demo.html" data-component="fn-statistic-demo">

    <link rel="stylesheet" href="themes/midnight-blue.css" type="text/css">



    <div id="sidebar">

      <div style="padding: 15px;">
@@ -186,38 +102,18 @@ 
            Controls

          </fn-submenu-title>

          <fn-menu-item data-target-demo="fn-menu">fn-menu</fn-menu-item>

          <fn-menu-item data-target-demo="fn-navigation">fn-navigation</fn-menu-item>

          <fn-menu-item data-target-demo="fn-tabbar">fn-tabbar</fn-menu-item>

          <fn-menu-item data-target-demo="fn-search">fn-search</fn-menu-item>

          <fn-menu-item data-target-demo="fn-steps">fn-steps</fn-menu-item>

          <fn-menu-item data-target-demo="fn-breadcrumb">fn-breadcrumb</fn-menu-item>

          <fn-menu-item data-target-demo="fn-pagination">fn-pagination</fn-menu-item>

          <fn-menu-item data-target-demo="fn-pager">fn-pager</fn-menu-item>

        </fn-submenu>



        <fn-submenu>

          <fn-submenu-title>

            Elements

          </fn-submenu-title>

          <fn-menu-item data-target-demo="fn-button">fn-button</fn-menu-item>

          <fn-menu-item data-target-demo="fn-form">fn-form</fn-menu-item>



          <fn-menu-item data-target-demo="fn-table">fn-table</fn-menu-item>

          <fn-menu-item data-target-demo="fn-splitpane">fn-splitpane</fn-menu-item>

          <fn-menu-item data-target-demo="fn-codeeditor">fn-codeeditor</fn-menu-item>

          <fn-menu-item data-target-demo="fn-dropdown">fn-dropdown</fn-menu-item>

          <fn-menu-item data-target-demo="fn-message">fn-message</fn-menu-item>

          <fn-menu-item data-target-demo="fn-modal">fn-modal</fn-menu-item>

          <fn-menu-item data-target-demo="fn-tooltip">fn-tooltip</fn-menu-item>

          <fn-menu-item data-target-demo="fn-divider">fn-divider</fn-menu-item>

          <fn-menu-item data-target-demo="fn-statistic">fn-statistic</fn-menu-item>

        </fn-submenu>



        <fn-submenu>

          <fn-submenu-title>

            Views

          </fn-submenu-title>



          <fn-menu-item data-target-demo="fn-card">fn-card</fn-menu-item>

        </fn-submenu>



        <fn-submenu>
@@ -229,19 +125,7 @@ 
          <fn-menu-item data-target-demo="fn-progressbar">

            fn-progressbar

          </fn-menu-item>

          <fn-menu-item data-target-demo="fn-accordion">fn-accordion</fn-menu-item>

          <fn-menu-item data-target-demo="fn-flexbox">fn-flexbox</fn-menu-item>

        </fn-submenu>



        <fn-submenu>

          <fn-submenu-title>

            Time Elements

          </fn-submenu-title>



          <fn-menu-item data-target-demo="fn-datepicker">fn-datepicker</fn-menu-item>

          <fn-menu-item data-target-demo="fn-daterangepicker">fn-daterangepicker</fn-menu-item>

        </fn-submenu>



      </fn-menu>

    </div>
@@ -259,6 +143,7 @@ 


      var sidebar = document.getElementById("sidebar");

      sidebar.addEventListener("fn-menu-item-click", function(e) {

        console.log(e);

        openDemo(e.srcElement.getAttribute("data-target-demo"));

      }, false);

CRA Git | Maintained and supported by SUSTech CRA and CCSE