Changeset 1513

Show
Ignore:
Timestamp:
03/24/08 11:34:05 (8 months ago)
Author:
Heilemann
Message:

Initial work on the Monolith Timeline. Loupe can be resized and moved. The timeline can be clicked and double clicked.

Lots of work still. Please excuse the mess :)

Location:
branches/monolith
Files:
4 added
1 removed
6 modified

Legend:

Unmodified
Added
Removed

  • branches/monolith/system/admin/css/admin.css

    r1470 r1513  
    718718 
    719719.dashboard .module { 
     720    position: relative; 
    720721    float: left; 
    721722    width: 50%; 
    722723    height: 260px; 
    723     position: relative; 
    724724    } 
    725725 
    … …  
    10311031/* TIMELINE */ 
    10321032 
    1033 .timeline span { 
    1034     float: left; 
    1035     } 
    1036  
    1037 .timeline .newer a, .timeline .older a { 
     1033.navigator { 
     1034    padding: ; 
     1035    } 
     1036 
     1037.navigator span { 
     1038    float: left; 
     1039    } 
     1040 
     1041.navigator .newer a, .navigator .older a { 
    10381042    font-weight: bold; 
    10391043    color: #333; 
    10401044    } 
    10411045 
    1042 .timeline .currentposition { 
     1046.navigator .currentposition { 
    10431047    text-align: center; 
    10441048    } 
    10451049 
    1046 .timeline span input { 
     1050.navigator span input { 
    10471051    width: 90%; 
    10481052    margin: 0 5%; 
    10491053    } 
    1050  
    1051 .timeline .newer { 
     1054     
     1055.navigator .newer { 
    10521056    text-align: right; 
    10531057    } 
     1058 
     1059.timeline { 
     1060    position: relative; 
     1061    background: #111; 
     1062    width: 830px; 
     1063    height: 50px; 
     1064    clear: both; 
     1065    margin-top: 33px; 
     1066    margin-left: -40px; 
     1067    overflow: hidden; 
     1068    } 
     1069 
     1070.timeline .years { 
     1071    display: table; 
     1072    height: 50px; 
     1073    position: absolute; 
     1074    right: 0; 
     1075    cursor: col-resize; 
     1076    background: #222; 
     1077    } 
     1078 
     1079.timeline .years .months { 
     1080    display: table-row; 
     1081    height: inherit; 
     1082    overflow: none; 
     1083    position: relative; 
     1084    } 
     1085 
     1086.timeline .years .months div { 
     1087    display: table-cell; 
     1088    border-right: 1px solid #111; 
     1089    height: inherit; 
     1090    overflow: hidden; 
     1091    } 
     1092 
     1093.timeline .years .months div span { 
     1094    margin: 4px; 
     1095    color: #ddd; 
     1096    text-transform: uppercase; 
     1097    font-size: 9px; 
     1098    } 
     1099 
     1100.timeline .track { 
     1101    position: relative; 
     1102    height: inherit; 
     1103    margin-left: auto; 
     1104    } 
     1105 
     1106 
     1107.timeline .handle { 
     1108    background: url('../images/loupebg.png') repeat-x; 
     1109    height: 50px; 
     1110    width: 20px; 
     1111    position: absolute; 
     1112    top: 0; 
     1113    cursor: move; 
     1114    } 
     1115 
     1116.timeline .handle .resizehandleleft, 
     1117.timeline .handle .resizehandleright { 
     1118    cursor: col-resize; 
     1119    background: url('../images/loupehandle.png') 2px center no-repeat; 
     1120    width: 7px; 
     1121    height: inherit; 
     1122    margin-left: -2px; 
     1123    } 
     1124 
     1125.timeline .handle .resizehandleright { 
     1126    background-position: 2px; 
     1127    position: absolute; 
     1128    right: -2px; 
     1129    } 
     1130 
    10541131 
    10551132/* TAGS */ 

  • branches/monolith/system/admin/dashboard.php

    r1506 r1513  
    6868 
    6969                    <p class="buttons"> 
    70                         <input type="submit" value="Submit"></input> 
     70                        <input type="submit" value="Submit"> 
    7171                    </p> 
    7272                </div> 
    … …  
    117117 
    118118                    <p class="buttons"> 
    119                         <input type="submit" value="Submit"></input> 
     119                        <input type="submit" value="Submit"> 
    120120                    </p> 
    121121                </div> 
    … …  
    194194 
    195195                    <p class="buttons"> 
    196                         <input type="submit" value="Submit"></input> 
     196                        <input type="submit" value="Submit"> 
    197197                    </p> 
    198198                </div> 
    … …  
    205205                <form> 
    206206                    <select><option>Feed</option></select> 
    207                     <input type="button" value="+"></input> 
     207                    <input type="button" value="+"> 
    208208                </form> 
    209209            </div> 

  • branches/monolith/system/admin/entries.php

    r1393 r1513  
    33 
    44 
    5 <div class="container timeline"> 
     5<div class="container navigator"> 
    66    <span class="older pct10"><a href="#">&laquo; Older</a></span> 
    77    <span class="currentposition pct15 minor">0-20 of 480</span> 
    8     <span class="search pct50"><input type="search" placeholder="Type and wait to search for any entry component" autosave="habaricontent" results="10"></input></span> 
     8    <span class="search pct50"><input type="search" placeholder="Type and wait to search for any entry component" autosave="habaricontent" results="10"></span> 
    99    <span class="nothing pct15">&nbsp;</span> 
    1010    <span class="newer pct10"><a href="#">Newer &raquo;</a></span> 
     11 
     12    <div class="timeline"> 
     13        <div class="years"> 
     14            <div class="months"> 
     15                <div><span style="width: 33px">Jan</span></div> 
     16                <div><span style="width: 46px">Feb</span></div> 
     17                <div><span style="width: 10px">Mar</span></div> 
     18                <div><span style="width: 24px">Apr</span></div> 
     19                <div><span style="width: 63px">May</span></div> 
     20                <div><span style="width: 56px">Jun</span></div> 
     21                <div><span style="width: 99px">Jul</span></div> 
     22                <div><span style="width: 34px">Aug</span></div> 
     23                <div><span style="width: 33px">Sep</span></div> 
     24                <div><span style="width: 26px">Okt</span></div> 
     25                <div><span style="width: 45px">Nov</span></div> 
     26                <div><span style="width: 24px">Dec</span></div> 
     27                <div><span style="width: 33px">Jan</span></div> 
     28                <div><span style="width: 76px">Feb</span></div> 
     29                <div><span style="width: 30px">Mar</span></div> 
     30            </div> 
     31        </div> 
     32 
     33        <div class="track"> 
     34            <div class="handle"> 
     35                <span class="resizehandleleft"></span> 
     36                <span class="resizehandleright"></span> 
     37            </div> 
     38        </div> 
     39 
     40    </div> 
     41 
    1142</div> 
    1243 
    … …  
    1748        <div class="head clear"> 
    1849            <span class="checkboxandtitle pct30"> 
    19                 <input type="checkbox" class="checkbox"></input> 
     50                <input type="checkbox" class="checkbox"> 
    2051                <a href="#" class="title">'Why Habari Rocks'</a> 
    2152            </span> 
    … …  
    3869        <div class="head clear"> 
    3970            <span class="checkboxandtitle pct30"> 
    40                 <input type="checkbox" class="checkbox"></input> 
     71                <input type="checkbox" class="checkbox"> 
    4172                <a href="#" class="title">'Why Habari Rocks'</a> 
    4273            </span> 
    … …  
    6293    <div class="item controls"> 
    6394        <span class="pct25"> 
    64             <input type="checkbox"></input> 
     95            <input type="checkbox"> 
    6596            <span class="selectedtext minor none">None selected</span> 
    6697        </span> 
    … …  
    6899            <option>Delete</option> 
    69100        </select> 
    70         <input type="button" value="Submit" class="submitbutton"></input> 
     101        <input type="button" value="Submit" class="submitbutton"> 
    71102    </div> 
    72103 

  • branches/monolith/system/admin/header.php

    r1445 r1513  
    1111    <script src="<?php Site::out_url('scripts'); ?>/jquery.dimensions.js" type="text/javascript"></script> 
    1212    <script src="<?php Site::out_url('scripts'); ?>/ui.mouse.js" type="text/javascript"></script> 
     13    <script src="<?php Site::out_url('scripts'); ?>/ui.slider.js" type="text/javascript"></script> 
    1314    <script src="<?php Site::out_url('scripts'); ?>/ui.tabs.js" type="text/javascript"></script> 
    1415    <script src="<?php Site::out_url('scripts'); ?>/ui.sortable.js" type="text/javascript"></script> 
    … …  
    3536 
    3637    <div id="menu" class="dropbutton"> 
    37         <h1 id="menubutton"><a href="<?php URL::out( 'admin', 'page=' . $admin_page ); ?>"><?php echo $admin_page; ?> <span class="hotkey">Q</span></span></a></h1> 
     38        <h1 id="menubutton"><a href="<?php URL::out( 'admin', 'page=' . $admin_page ); ?>"><?php echo $admin_page; ?> <span class="hotkey">Q</span></a></h1> 
    3839 
    3940        <div id="menulist" class="dropbuttonlist"> 

  • branches/monolith/system/admin/js/admin.js

    r1470 r1513  
    1616    } 
    1717} 
     18 
     19// TIMELINE 
     20var timeline = { 
     21    init: function() { 
     22        // No Timeline? No runny-runny. 
     23        if (!$('.timeline').length) return; 
     24 
     25        var timelineWidth = $('.years').width(); 
     26        var steps = $('.years').width()/$('.handle').width(); 
     27 
     28        $('.track') 
     29        .width($('.years').width()) 
     30        .slider({ 
     31            handle: '.handle', 
     32            maxValue: timelineWidth-20, 
     33            stop: function(event, ui) { 
     34                console.log('Loupe Moved To: '+ui.value) 
     35            } 
     36        }) 
     37        .unbind('click') 
     38        .bind('dblclick', function(e) { // Double-clicking on either side of the handle moves the handle to the clicked position. 
     39            // Dismiss clicks on handle 
     40            if ($(e.target).is('.handle')) return false; 
     41 
     42            timeline.noJump = true; 
     43            clearTimeout(timeline.t1); 
     44            $('.track').slider('moveTo', e.layerX) 
     45        }) 
     46        .bind('click', function(e) { // Clicking either side of the handle moves the handle its own length to that side. 
     47 
     48            // Dismiss clicks on handle 
     49            if ($(e.target).is('.handle')) return false; 
     50 
     51            // Click to left or right of handle? 
     52            if (e.layerX < $('.track').slider("value") ) 
     53                timeline.t1 = setTimeout('timeline.moveLoupeLeft()', 300); 
     54            else 
     55                timeline.t1 = setTimeout('timeline.moveLoupeRight()', 300); 
     56        }) 
     57        .slider('moveTo', timelineWidth) 
     58 
     59        // Spool the timline handle 
     60        timelineHandle.init(); 
     61    }, 
     62    moveLoupeLeft: function(e) { 
     63        console.log('Jump Left') 
     64        if (timeline.noJump == true) { 
     65            timeline.noJump = null; 
     66            return false; 
     67        } 
     68             
     69        $('.handle').css( 'left', parseInt($('.handle').css('left')) - $('.handle').width() ) 
     70 
     71    }, 
     72    moveLoupeRight: function(e) { 
     73        console.log('Jump Right') 
     74        if (timeline.noJump == true) { 
     75            timeline.noJump = null; 
     76            return false; 
     77        } 
     78 
     79        $('.handle').css( 'left', parseInt($('.handle').css('left')) + $('.handle').width() ) 
     80    } 
     81} 
     82 
     83 
     84// TIMELINE HANDLE 
     85var timelineHandle = { 
     86    init: function() { 
     87 
     88        // Resize Handle Left 
     89        $('.resizehandleleft') 
     90            .mousedown(function(e) { 
     91//              $('.track').slider('destroy') 
     92 
     93                timelineHandle.firstMousePos = $('.handle').offset().left - $('.track').offset().left; 
     94                timelineHandle.initialSize = $('.handle').width(); 
     95 
     96                $(document).mousemove(timelineHandle.doDragLeft).mouseup(timelineHandle.endDrag); 
     97                return false; 
     98            }) 
     99            .mouseup(timelineHandle.endDrag); 
     100 
     101        $('.resizehandleright') 
     102            .mousedown(function(e) { 
     103//              $('.track').slider('destroy') 
     104 
     105                timelineHandle.firstMousePos = e.clientX; 
     106                timelineHandle.initialSize = $('.handle').width(); 
     107 
     108                $(document).mousemove(timelineHandle.doDragRight).mouseup(timelineHandle.endDrag); 
     109                return false; 
     110            }) 
     111            .mouseup(timelineHandle.endDrag); 
     112 
     113    }, 
     114    doDragLeft: function(e) { 
     115        $('.handle').css({ 
     116            'left':     'auto', 
     117            'right':    $('.handle').parents('.track').width() - (parseInt($('.handle').css('left')) + $('.handle').width()) 
     118        }) 
     119 
     120        // Set Loupe Width (min 20, max 200) 
     121        $('.handle').css('width', Math.min(Math.max(timelineHandle.initialSize + (timelineHandle.firstMousePos - (e.clientX - $('.track').offset().left)), 20), 200)) 
     122 
     123        return false; 
     124    }, 
     125    doDragRight: function(e) { 
     126        $('.handle').css({ 
     127            'left':     $('.handle').offset().left - $('.track').offset().left, 
     128            'right':    'auto' 
     129        }) 
     130 
     131//      if (e.clientX > $('.track').) 
     132 
     133        // Set Loupe Width (min 20, max 200) 
     134        $('.handle').css( 'width', Math.min(Math.max(timelineHandle.initialSize + (e.clientX - timelineHandle.firstMousePos), 20), 200) ) 
     135 
     136        return false; 
     137 
     138    }, 
     139    endDrag: function(e) { 
     140        timeline.noJump = true; 
     141         
     142        // Reset to using 'left'. 
     143        $('.handle').css({ 
     144            'left':     $('.handle').offset().left - $('.track').offset().left, 
     145            'right':    'auto' 
     146        }) 
     147 
     148        $(document).unbind('mousemove', timelineHandle.doDrag).unbind('mouseup', timelineHandle.endDrag); 
     149 
     150        // Destroy and Rebuild the Timeline Slider 
     151//      timeline.init() 
     152 
     153        return false; 
     154    } 
     155} 
     156 
     157 
     158 
     159/* TIMELINE TODO: 
     160    - No dragging right edge of loupe out of timeline 
     161    - No jumping loupe's edges out of timeline 
     162    - Consider step'd resize 
     163    - Draggable timeline 
     164    - Float month name if outside view 
     165    - Display and float years 
     166    - Reinit slider (or do away with slider alltogether and gather the info manually) 
     167    -  
     168*/ 
     169 
    18170 
    19171// SPINNER 
    … …  
    251403    theMenu.init(); 
    252404    dashboard.init(); 
     405    timeline.init(); 
    253406 
    254407    // Damn the lack of proper support for pseudo-classes! 

  • branches/monolith/system/admin/login.php

    r1417 r1513  
    2525<body class="login"> 
    2626 
    27 <div id="page"> 
     27    <div id="page"> 
    2828 
    29     <h1><a href="<?php Site::out_url('habari'); ?>" title="Go to Site"><?php Options::out('title'); ?></a></h1> 
     29        <h1><a href="<?php Site::out_url('habari'); ?>" title="Go to Site"><?php Options::out('title'); ?></a></h1> 
    3030 
    31     <div class="container"> 
     31        <div class="container"> 
    3232 
    33             <form method="post" action="<?php URL::out( 'user', array( 'page' => 'login' ) ); ?>"> 
     33                <form method="post" action="<?php URL::out( 'user', array( 'page' => 'login' ) ); ?>"> 
    3434 
    35                 <p> 
    36                     <label for="habari_username" class="incontent">Name</label><input type="text" name="habari_username" id="habari_username" class="styledformelement"> 
    37                 </p> 
    38                 <p> 
    39                     <label for="habari_password" class="incontent">Password</label><input type="password" name="habari_password" id="habari_password" class="styledformelement"> 
    40                 </p> 
    41                 <p> 
    42                     <!--<span class="remember"><input type="checkbox" name="remember"><label for="remember">Remember Me</label></span>--> 
    43                     <input class="submit" type="submit" value="Login"> 
    44                 </p> 
     35                    <p> 
     36                        <label for="habari_username" class="incontent">Name</label><input type="text" name="habari_username" id="habari_username" class="styledformelement"> 
     37                    </p> 
     38                    <p> 
     39                        <label for="habari_password" class="incontent">Password</label><input type="password" name="habari_password" id="habari_password" class="styledformelement"> 
     40                    </p> 
     41                    <p> 
     42                        <!--<span class="remember"><input type="checkbox" name="remember"><label for="remember">Remember Me</label></span>--> 
     43                        <input class="submit" type="submit" value="Login"> 
     44                    </p> 
    4545 
    46             </form> 
     46                </form> 
     47 
     48        </div> 
    4749 
    4850    </div> 
    49  
    50 </div> 
    51  
    5251 
    5352<?php 
    … …  
    5655    include ('db_profiling.php'); 
    5756?> 
    58 </div> 
    5957</body> 
    6058</html>