Changeset 3040

Show
Ignore:
Timestamp:
11/10/10 04:42:01
Author:
johnsa
Message:

user client: replacement for timpicker

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/deployment/webuser/webapp/resources/demoskins/themes/bedeworkTheme/css/bwClock.css

    r2893 r3040  
    1818*/ 
    1919 
     20.bwTimePicker { 
     21        position: absolute; 
     22        margin: 0; 
     23        padding: 10px; 
     24  color: black; 
     25        background-color: white; 
     26        border: 1px solid #ccb; 
     27        overflow: visible; 
     28} 
     29.bwTimePicker .bwTimePickerCloser { 
     30        position: absolute; 
     31        top: 0; 
     32        right: 0; 
     33        padding: 0 0 2px 2px; 
     34        font-weight: bold; 
     35  cursor: pointer; 
     36  color: #666; 
     37  background-color: #f5f5f5; 
     38} 
     39.bwTimePickerLink { 
     40        cursor: pointer; 
     41} 
     42.bwTimePicker h6 { 
     43        text-align: center; 
     44        margin: 0 0 4px 0; 
     45        padding: 0; 
     46} 
     47.bwTimePicker ul { 
     48        float: left; 
     49        margin: 0; 
     50        padding: 4px 0; 
     51        background-color: #f5f5f5; 
     52        color: black; 
     53} 
     54.bwTimePicker li { 
     55  list-style: none; 
     56  vertical-align: middle; 
     57  text-align: center; 
     58  margin: 0; 
     59  padding: 0; 
     60  width: 40px; 
     61  cursor: pointer; 
     62} 
     63.bwTimePicker .bwTimePickerColumn { 
     64        float: left; 
     65} 
     66.bwTimePicker .bwTimePickerColon { 
     67  font-weight: bold; 
     68  margin: 4em 0.5em 0 0.5em; 
     69} 
     70.bwTimePicker .bwTimePickerAmPm { 
     71  margin: 3em 0 0 0.5em; 
     72} 
     73.bwTimePicker li.bwTimePickerSelected {   
     74        background-color: #DFEAFF; 
     75        color: black; 
     76} 
     77 
     78/* Old Clock Styles */ 
    2079#bwClock { 
    2180  position: absolute; 

  • trunk/deployment/webuser/webapp/resources/demoskins/themes/bedeworkTheme/eventForm.xsl

    r3004 r3040  
    396396                        </xsl:if> 
    397397                  <xsl:text> </xsl:text> 
    398                   <a href="javascript:bwClockLaunch('eventStartDate');"><img src="{$resourcesRoot}/images/clockIcon.gif" width="16" height="15" border="0" alt="bwClock" id="bwStartClock"/></a> 
     398                  <img src="{$resourcesRoot}/images/clockIcon.gif" width="16" height="15" border="0" alt="bwClock" id="bwStartClock"/> 
    399399 
    400400                  <select name="eventStartDate.tzid" id="startTzid" class="timezones"> 

  • trunk/deployment/webuser/webapp/resources/demoskins/themes/bedeworkTheme/head.xsl

    r3031 r3040  
    124124              $("#bwEventWidgetStartDate").val('<xsl:value-of select="substring-before(/bedework/formElements/form/start/rfc3339DateTime,'T')"/>'); 
    125125 
     126              // starttime 
     127              $("#bwStartClock").bwTimePicker({ 
     128                hour24: <xsl:value-of select="/bedework/hour24"/>, 
     129                attachToId: "calWidgetStartTimeHider", 
     130                hourId: "eventStartDateHour", 
     131                minuteId: "eventStartDateMinute", 
     132                ampmId: "eventStartDateAmpm" 
     133              }); 
     134 
    126135              // enddate 
    127136              $("#bwEventWidgetEndDate").datepicker({ 

  • trunk/deployment/webuser/webapp/resources/demoskins/themes/bedeworkTheme/javascript/bwClock.js

    r2893 r3040  
    2323var bwClockCurrentType = null; 
    2424 
    25 function bwClockLaunch(type) { 
    26   // type: type of clock "eventStartDate" or "eventEndDate" 
    27   if ((document.getElementById("clock").className == "visible") && (bwClockCurrentType == type)) { 
    28     // if the clock with the same type is visible, toggle it off 
    29     changeClass("clock","invisible"); 
    30   } else { 
    31     // otherwise, turn it on and display the correct type 
    32     changeClass("clock","visible"); 
    33     bwClockRequestedType = type; 
    34     bwClockCurrentType = type; 
    35     // reset hours and minutes to null 
    36     bwClockHour = null; 
    37     bwClockMinute = null; 
    38     var bwClockIndicator = document.getElementById("bwClockDateTypeIndicator"); 
    39     var bwClockSwitch = document.getElementById("bwClockSwitch"); 
    40     document.getElementById("bwClockTime").innerHTML = "select time"; 
    41     if (type == 'eventStartDate') { 
    42       bwClockIndicator.innerHTML = "Start Time"; 
    43       bwClockSwitch.innerHTML = '<a href="javascript:bwClockLaunch(\'eventEndDate\');">switch to end</a>'; 
     25(function($){   
     26  $.fn.bwTimePicker = function(options) {  
     27     
     28    var defaults = {   
     29      hour24: false, 
     30      attachToId: null, 
     31      hourId: null, 
     32      minuteId: null, 
     33      ampmId: null 
     34    };   
     35    var options = $.extend(defaults, options); 
     36     
     37    var bwTimePickerContent = ""; 
     38    bwTimePickerContent += '<div class="bwTimePicker">'; 
     39    bwTimePickerContent += '<div class="bwTimePickerCloser">x</div>'; 
     40    bwTimePickerContent += '<div class="bwTimePickerColumn bwTimePickerHours"><h6>Hour</h6><div class="bwTimePickerVals">'; 
     41    if (options.hour24) { 
     42      bwTimePickerContent += '<ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>'; 
     43      bwTimePickerContent += '<ul><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>'; 
     44      bwTimePickerContent += '<ul><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li></ul>'; 
     45      bwTimePickerContent += '<ul><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul>'; 
    4446    } else { 
    45       bwClockIndicator.innerHTML = "End Time"; 
    46       bwClockSwitch.innerHTML = '<a href="javascript:bwClockLaunch(\'eventStartDate\');">switch to start</a>'; 
     47      bwTimePickerContent += '<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>'; 
     48      bwTimePickerContent += '<ul><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>'; 
    4749    } 
     50    bwTimePickerContent += '</div></div>'; 
     51    bwTimePickerContent += '<div class="bwTimePickerColumn bwTimePickerColon">:</div>'; 
     52    bwTimePickerContent += '<div class="bwTimePickerColumn bwTimePickerMinutes"><h6>Minute</h6><div class="bwTimePickerVals">'; 
     53    bwTimePickerContent += '<ul><li>00</li><li>10</li><li>20</li><li>30</li><li>40</li><li>50</li></ul>'; 
     54    bwTimePickerContent += '<ul><li>05</li><li>15</li><li>25</li><li>35</li><li>45</li><li>55</li></ul>'; 
     55    bwTimePickerContent += '</div></div>'; 
     56    if (!options.hour24) { 
     57      bwTimePickerContent += '<div class="bwTimePickerColumn bwTimePickerAmPm"><ul><li>am</li><li>pm</li></ul></div>'; 
     58    } 
     59    return this.each(function() {   
     60      obj = $(this);  
     61       
     62      obj.addClass('bwTimePickerLink'); 
     63      $("#" + options.attachToId).css("position","relative"); 
     64       
     65      obj.toggle( 
     66        function(){ 
     67          $("#" + options.attachToId).append(bwTimePickerContent); 
     68          $(".bwTimePicker .bwTimePickerCloser").click(function(){ 
     69            obj.click(); 
     70          }); 
     71          $("#" + options.attachToId + " .bwTimePicker .bwTimePickerHours li").click(function(){ 
     72            $("#" + options.attachToId + " .bwTimePicker .bwTimePickerHours li").removeClass('bwTimePickerSelected'); 
     73            $(this).addClass('bwTimePickerSelected'); 
     74            var hours = $(this).html(); 
     75            if (hours == '12' && !options.hour24) { 
     76              hours = 0; 
     77            } 
     78            $("#" + options.hourId).val(hours); 
     79          }); 
     80          $("#" + options.attachToId + " .bwTimePicker .bwTimePickerMinutes li").click(function(){ 
     81            $("#" + options.attachToId + " .bwTimePicker .bwTimePickerMinutes li").removeClass('bwTimePickerSelected'); 
     82            $(this).addClass('bwTimePickerSelected'); 
     83            $("#" + options.minuteId).val($(this).html()); 
     84          }); 
     85          $("#" + options.attachToId + " .bwTimePicker .bwTimePickerAmPm li").click(function(){ 
     86            $("#" + options.attachToId + " .bwTimePicker .bwTimePickerAmPm li").removeClass('bwTimePickerSelected'); 
     87            $(this).addClass('bwTimePickerSelected'); 
     88            $("#" + options.ampmId).val($(this).html()); 
     89          }); 
     90        }, 
     91        function(){ 
     92          $("#" + options.attachToId + " .bwTimePicker").remove(); 
     93        } 
     94      ); 
     95    });   
     96  };   
     97})(jQuery);  
     98 
     99function bwClockLaunch(type,hour24) { 
     100  var clockContent = ""; 
     101  clockContent += '<div id="bwNewClock">'; 
     102  clockContent += '<div class="clockColumn"><h6>Hour</h6><div class="clockVals">'; 
     103  clockContent += '<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>'; 
     104  clockContent += '<ul><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>'; 
     105  clockContent += '</div>'; 
     106  if (hour24) { 
     107     
     108  }  
     109  clockContent += '<div class="clockColumn"><h6>Minute</h6><div class="clockVals">'; 
     110  clockContent += '<ul><li>00</li><li>10</li><li>20</li><li>30</li><li>40</li><li>50</li></ul>'; 
     111  clockContent += '<ul><li>05</li><li>15</li><li>25</li><li>35</li><li>45</li><li>55</li></ul>'; 
     112  clockContent += '</div>'; 
     113  if (!hour24) { 
     114    clockContent += '<div class="clockVals"><ul><li>AM</li><li>PM</li></ul></div>'; 
    48115  } 
    49 } 
    50  
    51 function bwClockClose() { 
    52   changeClass("clock","invisible"); 
     116   
     117  var $clockWidget = $('<div></div>') 
     118    .html(clockContent) 
     119    .dialog({ 
     120      autoOpen: false 
     121    }); 
     122  $clockWidget.dialog('open'); 
    53123} 
    54124