Changeset 37572


Ignore:
Timestamp:
2023-03-27T00:05:32+13:00 (13 months ago)
Author:
davidb
Message:

Now with css theme selector in control bar

Location:
gs3-extensions/tabletop-dl/trunk
Files:
3 added
4 edited

Legend:

Unmodified
Added
Removed

  • gs3-extensions/tabletop-dl/trunk/RSYNC-INSTALL-TABLETOP-DL.sh

    r37562 r37572  
    1717
    1818rsync -pav \
     19      interactjs-dist \
     20      winbox-with-interactjs-dist \
     21      winbox-interact.js  \
    1922      tabletop*.*  \
    2023      backgrounds  \
    21       interactjs-dist \
    22       winbox-with-interactjs-dist \
    2324      $dst_dir/.
    2425

  • gs3-extensions/tabletop-dl/trunk/tabletop.css

    r37569 r37572  
     1
     2/*
    13:root {
    24    --gs-fg-primary-col: #fff;
    35    --gs-bg-primary-col: #29e;
    46}
    5 
    6 
     7*/
     8
     9
     10
     11/* provide basic background color, that tabletop themes will likely override, with an tabletop/desktop-sized image */
    712html {
    8     background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    9     background-size: cover;
    10 }
     13    background-color: #103010;
     14}
     15
    1116
    1217html, body {
    … …  
    2025
    2126body {
    22     font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    23     color: var(--gs-fg-primary-col);
     27    font-family: "Open Sans", OpenSans, Helvetica, Arial, sans-serif;
    2428    background-color: transparent;
    2529}
    2630
     31/* establish some uniformity concerning width collection divs on home page */
    2732div.collectionLinkText {
    2833    min-width: 365px;
    … …  
    3338}
    3439
    35 
    36 .box {
     40/*
     41  The overall tabletop setup allows for:
     42    header
     43    content
     44    footer
     45
     46  Note: ships with 'tabletop.xsl' such that the default behaviour is
     47  to NOT display the *header* or *footer*
     48*/
     49
     50
     51.tabletop-box {
    3752    display: flex;
    3853    flex-flow: column;
    … …  
    4055}
    4156
    42 /* construction lines to help show what is going on */
    43 /*
    44 .box .row {
    45     border: 1px dotted #0313fc;
    46 }
    47 */
    48 
    49 .box .row.header {
     57
     58.tabletop-box .tabletop-row.tabletop-header {
    5059    flex: 0 1 auto;
    5160}
    5261
    53 .box .row.content {
     62.tabletop-box .tabletop-row.tabletop-content {
    5463    flex: 1 1 auto;
    5564}
    5665
    57 .box .row.footer {
     66.tabletop-box .tabletop-row.tabletop-footer {
    5867    flex: 0 1 40px;
    5968}
     69
     70
     71.tabletop-button {
     72    display: inline-block;
     73    width: auto;
     74    border-radius: 10px;
     75    padding: 15px 25px;
     76    cursor: pointer;
     77}
     78
    6079
    6180#gs-control-bar {
    … …  
    6382    z-index: 20;
    6483    height: 2.5rem;
    65     color: var(--gs-fg-primary-col);
    66     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    6784    text-align: center;
    6885    display: none;
    … …  
    7491    left: 0px;
    7592    top: 0px;
    76     /*background-color: var(--gs-bg-primary-col); */
    77     background-color: #fff;
    7893    color: #000;
    7994    padding: 0.6rem 0.9rem 0.6rem 0.9rem;
    … …  
    8196
    8297#gs-home-open {
    83     z-in4dex: 21;
     98    z-index: 21;
    8499    position: absolute;
    85100    left: 0px;
    86101    bottom: 0px;
    87     /* background-color: var(--gs-bg-primary-col); */
    88     background-color: #fff;
    89102    padding: 0.5rem;
    90103}
    … …  
    93106
    94107/*
    95 #fixed-height {
    96     height: 40px;
    97     color: white;
    98     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    99     text-align: center;
    100 }
    101 
    102 #remaining-height {
    103     overflow: hidden;     
    104     position: absolute;
    105     top: 40px;
    106     bottom: 0;
    107     width: 100%;
    108 }
    109 */
    110 
     108Interact.JS demo CSS
    111109
    112110.info-window {
    … …  
    114112    margin: 0.5em;
    115113
    116     /*
     114    / *
    117115    background-color: var(--gs-bg-primary-col);
    118116    color: var(--gs-fg-primary-col);
    119    */
     117   * /
    120118   
    121119    background-color: #fff;
    … …  
    133131    transform: translate(0px, 0px);
    134132
    135     /* This makes things *much* easier */
     133    / * This makes things *much* easier * /
    136134    box-sizing: border-box;
    137135
    138136}
    139137
    140 
     138*/
     139
     140/* WinBox.js classes */
     141
     142/* inspired by interact.js drag demo div example */
    141143.winbox-info-window {
    142144    min-height: 6.5em;
    143145    margin: 0.5em;
    144 
    145     /*
    146     background-color: var(--gs-bg-primary-col);
    147     color: var(--gs-fg-primary-col);
    148    */
    149146   
    150147    background-color: #fff;
    151148    color: #000;
    152     /*
    153     border: 0.25rem var(--gs-bg-primary-col) solid;
    154    */
    155149   
    156150    font-size: 1.2rem;
    157151
    158     /* border-radius: 0.6em; */
    159152    padding: 1em;
    160153
    … …  
    165158    /* This makes things *much* easier */
    166159    box-sizing: border-box;
    167 
    168160}
    169161
    … …  
    173165}
    174166
    175 .winbox {
    176     background-color: transparent;
    177 }
    178167
    179168.wb-n {
    … …  
    182171
    183172
    184 
    185 /* Visual artefact turns up from box-shadow when roting */
    186 /* This is due to the parent div dtaying in the same fixed place, but the
    187    scaled and rotated inner elements breaking out of that shap */
    188 
    189 /* Perhaps we only want none, when its being rotated? */
    190 
    191 .winbox {
    192     box-shadow: none;
    193 }
    194 
    195 /* Report to help promote anti-aliasing affects on transform elements
    196 
    197 e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
    198 
    199 outline: 1px solid transparent;
    200 -webkit-backface-visibility: hidden;
    201 transform: translateZ(0);
    202 will-change: transform;
    203 -webkit-perspective: 1000;
    204 */
    205 
    206    
    207 /* currently nothing specific for resize-drag that info-window does already do */
    208 /*
    209 .resize-drag {
    210 }
    211 */
    212 
    213 
    214 #scale-element {
     173/* interact.js related for pinch-and-zoom */
     174
     175/* The following is from the pinch-and-zoom demo example */
     176
     177/* Current testing was without this (due to it being id/class mistake) but seemed to work OK
     178   (hence why the mistake went unnoticed */
     179/* Could be the max-width and touch-action would still be useful to have ?? */
     180
     181
     182/*
     183.scale-element {
    215184    display: block;
    216185    max-width: 100%;
    … …  
    218187    touch-action: none;
    219188}
    220 
    221 
    222 .button {
    223     display: inline-block;
    224     background-color: var(--gs-bg-primary-col);
    225     color: var(--gs-fg-primary-col);;
    226     width: auto;
    227     border-radius: 10px;
    228     padding: 15px 25px;
    229     cursor: pointer;
    230 }
     189*/
     190
     191/* Visual artefact turns up from box-shadow when roting */
     192/* This is due to the parent div dtaying in the same fixed place, but the
     193   scaled and rotated inner elements breaking out of that shap */
     194
     195/* Perhaps we only want none, when its being rotated? */
     196
     197.winbox {
     198    background-color: transparent;
     199}
     200
     201.winbox {
     202    box-shadow: none;
     203}
     204
     205/* Report to help promote anti-aliasing affects on transform elements
     206
     207e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
     208
     209  outline: 1px solid transparent;
     210  -webkit-backface-visibility: hidden;
     211  transform: translateZ(0);
     212  will-change: transform;
     213  -webkit-perspective: 1000;
     214*/
     215
     216   
     217
     218
     219

  • gs3-extensions/tabletop-dl/trunk/tabletop.xsl

    r37571 r37572  
    6363    <gsf:script src="ext/tabletop-dl/winbox-with-interactjs-dist/js/winbox.min.js"/>
    6464    <gsf:script src="ext/tabletop-dl/interactjs-dist/interact.min.js"/>
     65    <gsf:script src="ext/tabletop-dl/winbox-interact.js"/>
    6566   
    66     <gsf:script src="ext/tabletop-dl/winbox-interact.js"/>
    67    
    68 
    69     <gsf:style src="ext/tabletop-dl/tabletop.css" />
     67    <gsf:style  src="ext/tabletop-dl/tabletop.css" />
     68    <!--
     69    <gsf:style  src="ext/tabletop-dl/tabletop-theme-default.css" id="tabletop-theme-style-elem"/>
     70    -->
     71    <link href="ext/tabletop-dl/tabletop-theme-default.css" rel="stylesheet" type="text/css" id="tabletop-theme-style-elem"/>
     72     
     73    <gsf:script src="ext/tabletop-dl/tabletop.js"/>
    7074
    7175      </head>
    … …  
    7882         
    7983
    80           <div class="box">
    81         <!-- currently not used -->
    82         <div id="gs-control-bar_ORIG" class="row header" style="display: none;">
    83           <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
     84          <div class="tabletop-box">
     85        <!-- currently not displayed/used -->
     86        <div id="gs-tabletop-header" class="tabletop-row tabletop-header" style="display: none;">
     87          <div style="padding-top: 0.6em;">Greenstone3 Tabletop Digital Library</div>
    8488        </div>
    8589       
    86         <div class="row content" style="margin: 0.5em;">
     90        <div class="tabletop-row tabletop-content" style="margin: 0.5em;">
    8791         
    8892          <div style="position: relative; width: 100%; height: 100%;">
     93            <gsf:div id="gs-css-root-primary"/> <!-- used to so JS can access root CSS values -->
    8994           
    9095            <div id="gs-control-bar">
     96              <div style="float: right; color: white; margin-top: 0.6em; margin-right: 0.6em;">
     97            Theme:
     98            <select id="gs-control-bar-theme-selection">
     99                <option value="default">Default</option>
     100                <option value="leafytrees">Leafy Trees</option>
     101            </select>
     102              </div>
    91103              <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    92104            </div>
    93             <div id="gs-control-bar-toggle" class="button">&#9776;</div>
    94             <div id="gs-home-open" class="button">
     105           
     106            <div id="gs-control-bar-toggle" class="tabletop-button">&#9776;</div>
     107
     108            <div id="gs-home-open" class="tabletop-button">
    95109              <img src="interfaces/{$interface_name}/images/logo-icons/32/server32.png" width="32" height="32"/>
    96110            </div>
    … …  
    107121        </div>
    108122
    109         <!-- currently not used -->
    110         <div class="row footer" style="display:none;">
    111           <p>footer (fixed height)</p>
     123        <!-- currently not displayed/used -->
     124        <div id="gs-tabletop-footer" class="tabletop-row tabletop-footer" style="display:none;">
     125          <p>Tabletop powered by Grenstone3</p>
    112126        </div>
    113127          </div>
    114    
    115          
    116           <gsf:script>
    117 
    118               $(document).ready(function() {
    119             $("#gs-control-bar").width("100%").hide();
    120    
    121             $("#gs-control-bar-toggle").click(function(){
    122                       $("#gs-control-bar").animate({
    123                 width: "toggle"
    124                       });
    125             });
    126 
    127               });
    128    
    129           </gsf:script>
    130 
    131          
     128                     
    132129            </body>
    133130    </html>

  • gs3-extensions/tabletop-dl/trunk/winbox-interact.js

    r37570 r37572  
    312312$(document).ready(function() {
    313313
    314     let home_url = "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks";
    315    
    316     $.ajax({
    317     url: home_url
    318     })
    319     .done(function(data) {
    320         const winbox1 = new WinBox({
    321         id:    "my-winbox1",
    322         title: 'Winbox + Interact Example: Drag and Resize',
    323         x:  80,
    324         y: 90,
    325         width:  "475px",
    326         height: "585px",
    327         border: "0.3em",
    328         background: "#29e",
    329         html: data
    330 
    331         });
    332 
    333         $('#my-winbox1 .wb-header').css("user-select", "none");
    334         $('#my-winbox1 .wb-header').css("touch-action","none");
    335 
    336         $('#my-winbox1 .wb-body').addClass("winbox-info-window");
    337        
    338         let draggable_options = getCoreDraggableOptions();
    339         let resizable_options = getCoreResizableOptions();
    340        
    341         draggable_options.autoScroll = true;
    342    
    343         interact('#my-winbox1')
    344         .draggable(draggable_options)
    345         .resizable(resizable_options);
    346     });
    347 
    348 
    349314    let doc_url = "http://localhost:8383/greenstone3/library/collection/gs2mgdemo/document/HASHe3aae2159b0dda6553cee4";
    350315
     316    const gs_primary_bg_color = $('#gs-css-root-primary').css('background-color');
     317   
    351318    $.ajax({
    352319    url: doc_url,
    … …  
    361328        let win2 = new WinBox({
    362329        id:    "my-winbox2",
    363         title: 'Winbox + Interact Example: Drag, Scale and Rotate',
     330        title: 'Document: Drag, Scale and Rotate',
     331        //class: [ "no-min", "no-max", "no-full", "no-resize", "no-move" ],
     332        class: [ "no-min", "no-max", "no-full" ],       
    364333        x: 1000,
    365334        y: 80,
    … …  
    380349            .css("width","100%")
    381350            .css("height","100%")
    382         .css("background-color", "#29e");
     351        .css("background-color", gs_primary_bg_color);
    383352       
    384353        $scale_element_div.append($win2.children()).clone();
Note: See TracChangeset for help on using the changeset viewer.