Ignore:
Timestamp:
2015-06-01T09:59:31+12:00 (9 years ago)
Author:
davidb
Message:

Hitting drum image annimated with CSS3. Guitar now has a custom chord section and the strings on the jam-guitar tied to play the selected chord.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29940 r29942  
    17581758@-webkit-keyframes drumHit {
    17591759  0%   { background-size: 100%;}
    1760   10%  { background-size: 105%; }
    1761   30%  { background-size: 103%; }
     1760  10%  { background-size: 95%; }
     1761  30%  { background-size: 97%; }
    17621762  50%  { background-size: 100%;}
    1763   60%  { background-size: 102%; }
     1763  60%  { background-size: 98%; }
    17641764  70%  { background-size: 100%;}
    1765   80%  { background-size: 101%; }
     1765  80%  { background-size: 99%; }
    17661766  100% { background-size: 100%;}
    17671767}
    … …  
    17691769@-moz-keyframes drumHit {
    17701770  0%   { background-size: 100%;}
    1771   10%  { background-size: 105%; }
    1772   30%  { background-size: 103%; }
     1771  10%  { background-size: 95%; }
     1772  30%  { background-size: 97%; }
    17731773  50%  { background-size: 100%;}
    1774   60%  { background-size: 102%; }
     1774  60%  { background-size: 98%; }
    17751775  70%  { background-size: 100%;}
    1776   80%  { background-size: 101%; }
     1776  80%  { background-size: 99%; }
    17771777  100% { background-size: 100%;}
    17781778}
    … …  
    17801780@-o-keyframes drumHit {
    17811781  0%   { background-size: 100%;}
    1782   10%  { background-size: 105%; }
    1783   30%  { background-size: 103%; }
     1782  10%  { background-size: 95%; }
     1783  30%  { background-size: 97%; }
    17841784  50%  { background-size: 100%;}
    1785   60%  { background-size: 102%; }
     1785  60%  { background-size: 98%; }
    17861786  70%  { background-size: 100%;}
    1787   80%  { background-size: 101%; }
     1787  80%  { background-size: 99%; }
    17881788  100% { background-size: 100%;}
    17891789}
    … …  
    17911791@-ms-keyframes drumHit {
    17921792  0%   { background-size: 100%;}
    1793   10%  { background-size: 105%; }
    1794   30%  { background-size: 103%; }
     1793  10%  { background-size: 95%; }
     1794  30%  { background-size: 97%; }
    17951795  50%  { background-size: 100%;}
    1796   60%  { background-size: 102%; }
     1796  60%  { background-size: 98%; }
    17971797  70%  { background-size: 100%;}
    1798   80%  { background-size: 101%; }
     1798  80%  { background-size: 99%; }
    17991799  100% { background-size: 100%;}
    18001800}
    … …  
    18891889
    18901890      <div style="position: relative; background-color: white;">
    1891         <div style="display:inline-block; width: 150px; height: 200px;">
    1892           <form style="position: absolute; top: 60px; left: 10px;">
     1891        <div style="display:inline-block; width: 150px; height: 130px;">
     1892          <form style="position: absolute; top: 10px; leftXX: 10px;">
    18931893
    18941894        <fieldset>
    … …  
    18991899            <div class="radio-label-combo">
    19001900              <span>
    1901             <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"
     1901            <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode('maj')" value="Maj"
    19021902                   checked="checked"/>
    19031903              </span>
    … …  
    19111911          <div class="radio-label-combo">
    19121912            <span>
    1913               <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/>
     1913              <input type="radio" id="clm-min" name="clm-radio" onchange="setChordLineupMode('min')" value="Min"/>
    19141914            </span>
    1915             <label for="clm-maj" class="radio-label">
     1915            <label for="clm-min" class="radio-label">
    19161916              <span>
    19171917            Minor
    … …  
    19191919            </label>
    19201920          </div>
     1921
     1922          <div class="radio-label-combo">
     1923            <span>
     1924              <input type="radio" id="clm-cus" name="clm-radio" onchange="setChordLineupMode('cus')" value="Cus"/>
     1925            </span>
     1926            <label for="clm-cus" class="radio-label">
     1927              <span>
     1928            Custom
     1929              </span>
     1930            </label>
     1931          </div>
     1932
    19211933          </div>
    19221934          </fieldset>
    … …  
    19241936        </div>
    19251937
     1938<!--
    19261939        <div id="mytab" style="display:inline-block; height: 160px; width: 780px;">
    19271940          <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
    1928         <g id="scaled-mytab-group" transform="scale(0.5,0.6)">
     1941        <g id="scaled-mytab-group" transform="scale(0.45,0.55)">
    19291942          <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject>
    19301943        </g>
    19311944          </svg>
    19321945        </div>
     1946-->
     1947
     1948
     1949        <gsf:div id="mytab" style="display:inline-block; heightXX: 130px; width: 780px;">
     1950          <gsf:div id="scaled-mytab" widthXX="2000px" heightXX="300px">
     1951       
     1952
     1953<!--       
     1954        <gsf:div id="offscreen-jtab-chord-0" class="chordLineupBlock"/>
     1955         
     1956        <div class="chordLineupBlock">
     1957          <gsf:div id="offscreen-jtab-chord-1"/>
     1958          <gsf:div id="offscreen-jtab-chord-2"/>
     1959        </div>
     1960       
     1961        <gsf:div id="offscreen-jtab-chord-3" class="chordLineupBlock"/>
     1962       
     1963        <div class="chordLineupBlock">
     1964          <gsf:div id="offscreen-jtab-chord-4"/>
     1965          <gsf:div id="offscreen-jtab-chord-5"/>
     1966        </div>
     1967       
     1968        <gsf:div id="offscreen-jtab-chord-6" class="chordLineupBlock"/>
     1969        <gsf:div id="offscreen-jtab-chord-7" class="chordLineupBlock"/>
     1970       
     1971        <div class="chordLineupBlock">
     1972          <gsf:div id="offscreen-jtab-chord-8"/>
     1973          <gsf:div id="offscreen-jtab-chord-9"/>
     1974        </div>
     1975       
     1976        <gsf:div id="offscreen-jtab-chord-10" class="chordLineupBlock"/>
     1977         
     1978        <div class="chordLineupBlock">
     1979          <gsf:div id="offscreen-jtab-chord-11"/>
     1980          <gsf:div id="offscreen-jtab-chord-12"/>
     1981        </div>
     1982       
     1983        <gsf:div id="offscreen-jtab-chord-13" class="chordLineupBlock"/>
     1984       
     1985        <div class="chordLineupBlock">
     1986          <gsf:div id="offscreen-jtab-chord-14"/>
     1987          <gsf:div id="offscreen-jtab-chord-15"/>
     1988        </div>
     1989       
     1990        <gsf:div id="offscreen-jtab-chord-16" class="chordLineupBlock"/>       
     1991-->
     1992
     1993          </gsf:div>
     1994          <gsf:div id="addCustomChord" style="display:none;">
     1995        <input id="addCustomChordText" type="text" size="10"/>
     1996        <input type="button" value="add custom chord" onclick="addCustomChord()"/>
     1997          </gsf:div>
     1998
     1999        </gsf:div>
     2000
    19332001      </div>
    19342002
    … …  
    19402008      <div style="position: absolute; top: -300px; background-color: white;">
    19412009    <style>
    1942       .chordLineup {
     2010      .chordLineupXX {
    19432011        -webkit-transform-style: preserve-3d;
    19442012        -moz-transform-style: preserve-3d;
    … …  
    19502018      }
    19512019     
    1952       .chordLineupBlockVerticalCenter {
     2020      .chordLineupBlockVerticalCenterXX {
    19532021        position: relative;
    19542022        top: 50%;
    … …  
    19592027
    19602028    </style>
     2029
     2030
    19612031    <div id="offscreen-jtab-chord-lineup">
    1962 
    1963       <div id="offscreen-jtab-chord-C" class="chordLineupBlock">
    1964         <xsl:comment>filler</xsl:comment>
    1965       </div>
    1966 
     2032     
     2033      <gsf:div id="offscreen-jtab-chord-0" class="chordLineupBlock"/>
     2034     
    19672035      <div class="chordLineupBlock">
    1968         <div id="offscreen-jtab-chord-Db">
    1969           <xsl:comment>filler</xsl:comment>
    1970         </div>
    1971         <div id="offscreen-jtab-chord-Cs">
    1972           <xsl:comment>filler</xsl:comment>
    1973         </div>
     2036        <gsf:div id="offscreen-jtab-chord-1"/>
     2037        <gsf:div id="offscreen-jtab-chord-2"/>
    19742038      </div>
    19752039     
    1976       <div id="offscreen-jtab-chord-D" class="chordLineupBlock">
    1977         <xsl:comment>filler</xsl:comment>
    1978       </div>
    1979 
     2040      <gsf:div id="offscreen-jtab-chord-3" class="chordLineupBlock"/>
     2041     
    19802042      <div class="chordLineupBlock">
    1981         <div id="offscreen-jtab-chord-Eb">
    1982           <xsl:comment>filler</xsl:comment>
    1983         </div>
    1984         <div id="offscreen-jtab-chord-Ds">
    1985           <xsl:comment>filler</xsl:comment>
    1986         </div>
     2043        <gsf:div id="offscreen-jtab-chord-4"/>
     2044        <gsf:div id="offscreen-jtab-chord-5"/>
    19872045      </div>
    19882046     
    1989       <div id="offscreen-jtab-chord-E" class="chordLineupBlock">
    1990         <xsl:comment>filler</xsl:comment>
     2047      <gsf:div id="offscreen-jtab-chord-6" class="chordLineupBlock"/>
     2048      <gsf:div id="offscreen-jtab-chord-7" class="chordLineupBlock"/>
     2049     
     2050      <div class="chordLineupBlock">
     2051        <gsf:div id="offscreen-jtab-chord-8"/>
     2052        <gsf:div id="offscreen-jtab-chord-9"/>
     2053      </div>
     2054
     2055      <gsf:div id="offscreen-jtab-chord-10" class="chordLineupBlock"/>
     2056     
     2057      <div class="chordLineupBlock">
     2058        <gsf:div id="offscreen-jtab-chord-11"/>
     2059        <gsf:div id="offscreen-jtab-chord-12"/>
    19912060      </div>
    19922061     
    1993       <div id="offscreen-jtab-chord-F" class="chordLineupBlock">
    1994         <xsl:comment>filler</xsl:comment>
     2062      <gsf:div id="offscreen-jtab-chord-13" class="chordLineupBlock"/>
     2063     
     2064      <div class="chordLineupBlock">
     2065        <gsf:div id="offscreen-jtab-chord-14"/>
     2066        <gsf:div id="offscreen-jtab-chord-15"/>
    19952067      </div>
    19962068     
    1997       <div class="chordLineupBlock">
    1998         <div id="offscreen-jtab-chord-Gb">
    1999           <xsl:comment>filler</xsl:comment>
    2000         </div>
    2001         <div id="offscreen-jtab-chord-Fs">
    2002           <xsl:comment>filler</xsl:comment>
    2003         </div>
    2004       </div>
    2005 
    2006       <div id="offscreen-jtab-chord-G" class="chordLineupBlock">
    2007         <xsl:comment>filler</xsl:comment>
    2008       </div>
    2009      
    2010       <div class="chordLineupBlock">
    2011         <div id="offscreen-jtab-chord-Ab">
    2012           <xsl:comment>filler</xsl:comment>
    2013         </div>
    2014         <div id="offscreen-jtab-chord-Gs">
    2015           <xsl:comment>filler</xsl:comment>
    2016         </div>
    2017       </div>
    2018 
    2019       <div id="offscreen-jtab-chord-A" class="chordLineupBlock">
    2020         <xsl:comment>filler</xsl:comment>
    2021       </div>
    2022      
    2023       <div class="chordLineupBlock">
    2024         <div id="offscreen-jtab-chord-Bb">
    2025           <xsl:comment>filler</xsl:comment>
    2026         </div>
    2027         <div id="offscreen-jtab-chord-As">
    2028           <xsl:comment>filler</xsl:comment>
    2029         </div>
    2030       </div>
    2031 
    2032       <div id="offscreen-jtab-chord-B" class="chordLineupBlock">
    2033         <xsl:comment>filler</xsl:comment>
    2034       </div>
     2069      <gsf:div id="offscreen-jtab-chord-16" class="chordLineupBlock"/>
    20352070     
    20362071    </div>
    20372072
     2073
     2074
    20382075    <gsf:script>
     2076          <![CDATA[
     2077
    20392078      $(document).ready(function() {
    20402079
    2041         jtab.render($('#offscreen-jtab-chord-C') ,'C');
    2042         jtab.render($('#offscreen-jtab-chord-Cs'),'C#');
    2043         jtab.render($('#offscreen-jtab-chord-Db'),'Db');
    2044         jtab.render($('#offscreen-jtab-chord-D') ,'D');
    2045         jtab.render($('#offscreen-jtab-chord-Ds'),'D#');
    2046         jtab.render($('#offscreen-jtab-chord-Eb'),'Eb');
    2047         jtab.render($('#offscreen-jtab-chord-F') ,'F');
    2048         jtab.render($('#offscreen-jtab-chord-Fs'),'F#');
    2049         jtab.render($('#offscreen-jtab-chord-Gb'),'Gb');
    2050         jtab.render($('#offscreen-jtab-chord-G') ,'G');
    2051         jtab.render($('#offscreen-jtab-chord-Gs'),'G#');
    2052         jtab.render($('#offscreen-jtab-chord-Ab'),'Ab');
    2053         jtab.render($('#offscreen-jtab-chord-A') ,'A');
    2054         jtab.render($('#offscreen-jtab-chord-As'),'A#');
    2055         jtab.render($('#offscreen-jtab-chord-Bb'),'Bb');
    2056         jtab.render($('#offscreen-jtab-chord-B') ,'B');
     2080
     2081            setChordLineupMode("maj");
     2082        chordChange("0");
     2083
     2084            var lineup = jam_chords["maj"];
     2085   
     2086            // add click handler and scale down in size: one-time operation
     2087
     2088            for (var i=0; i<lineup.length; i++) {
     2089                $('#offscreen-jtab-chord-'+i).click(function(ii) { return function(e) { chordChange(ii) } }(i) );
     2090
     2091                var $tab_svg = $('#offscreen-jtab-chord-'+i+'>div>svg');
     2092        $tab_svg.attr("width", "58"); // go thinner than 'natural' width of 69 (for a height of 59)
     2093        $tab_svg.attr("height","59");
     2094        // True box is 0 0 138 118, but shaving off values so not so much white-space
     2095        $tab_svg[0].setAttribute("viewBox","20 0 90 118"); // W3C DOM way to avoid jquery lower-casing 'viewBox' into 'viewbox'
     2096        $tab_svg.parent().css("height","59px");
     2097        //$tab_svg.parent().attr("height","59");
     2098        //$tab_svg.parent().parent().attr("width","60");
     2099        //$tab_svg.parent().parent().attr("height","59");
     2100       
     2101        }
     2102
     2103   
     2104
     2105/*
     2106            $('#offscreen-jtab-chord-0').click(function(e) { chordChange('0') });
     2107            $('#offscreen-jtab-chord-1').click(function(e) { chordChange('1') });
     2108            $('#offscreen-jtab-chord-2').click(function(e) { chordChange('2') });
     2109            $('#offscreen-jtab-chord-3').click(function(e) { chordChange('3') });
     2110            $('#offscreen-jtab-chord-4').click(function(e) { chordChange('4') });
     2111            $('#offscreen-jtab-chord-5').click(function(e) { chordChange('5') });
     2112            $('#offscreen-jtab-chord-6').click(function(e) { chordChange('6') });
     2113            $('#offscreen-jtab-chord-7').click(function(e) { chordChange('7') });
     2114            $('#offscreen-jtab-chord-8').click(function(e) { chordChange('8') });
     2115            $('#offscreen-jtab-chord-9').click(function(e) { chordChange('9') });
     2116            $('#offscreen-jtab-chord-10').click(function(e) { chordChange('10') });
     2117            $('#offscreen-jtab-chord-11').click(function(e) { chordChange('11') });
     2118            $('#offscreen-jtab-chord-12').click(function(e) { chordChange('12') });
     2119            $('#offscreen-jtab-chord-13').click(function(e) { chordChange('13') });
     2120            $('#offscreen-jtab-chord-14').click(function(e) { chordChange('14') });
     2121            $('#offscreen-jtab-chord-15').click(function(e) { chordChange('15') });
     2122            $('#offscreen-jtab-chord-16').click(function(e) { chordChange('16') });
     2123*/
    20572124
    20582125        $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
    20592126
    2060         console.log("!!!! forced background colour for F major in Guitar Tab area!!!")
    2061         $('#builder_6').css("background-color","rgba(46,82,164,0.50)");
     2127
    20622128      });
     2129        ]]>
    20632130    </gsf:script>
    20642131      </div>
Note: See TracChangeset for help on using the changeset viewer.