Changeset 29549

Show
Ignore:
Timestamp:
08.12.2014 14:11:00 (4 years ago)
Author:
davidb
Message:

Second iteration of the page swiping sequence, with more careful deployment of liteAccordion and SVG-Edit init in callback events

Location:
other-projects/nz-flag-design/trunk/main-form
Files:
4 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

    r29530 r29549  
    1   <!DOCTYPE html>   
    2   <html id="story"><!-- class="story" id="idea"--> 
     1<!DOCTYPE html>   
     2<html id="story"> 
    33  <head> 
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    5     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    6     <title>Choose Canvas Size</title> 
     5    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     6    <title>Canvas Size</title> 
    77     
    88  </head> 
    99  <body> 
    10       <div data-role="page"  id="innovation-story-01-idea"  
    11        class="demo-page"  
    12        data-dom-cache="true"  
    13        data-prev="index"  
    14        data-next="choose-palette"> 
     10    <div data-role="page" id="choose-canvas-page"  
     11     class="demo-page"  
     12     data-dom-cache="true"  
     13     data-prev="index"  
     14     data-next="choose-palette"> 
    1515       
    16     <div data-role="content"> 
     16      <div data-role="content"> 
    1717       
    18       <div data-role="controlgroup" class="control" data-mini="true">            
    19             <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 
    20         <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    21           </div>   
     18    <div data-role="controlgroup" class="control" data-mini="true">          
     19          <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 
     20      <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
     21        </div>   
    2222       
    23       <div class="story-page"> 
    24         <!-- put custom content here -->   
    25          
    26         <span class="left story-icon idea" ></span> 
    27         <h2>Choose Canvas Size</h2>          
    28         <p> 
    29           ... 
    30         </p>     
    31          
    32         <!-- end of putting custom content --> 
    33       </div> <!-- end story-page-->  
     23    <div class="story-page"> 
     24 
     25      <!-- put custom content here -->         
     26      <span class="left story-icon idea" ></span> 
     27      <h2>Canvas Size</h2>           
     28      <p> 
     29        Choose from the following aspect ratios 
     30      </p>   
     31      <!-- end of putting custom content --> 
     32 
     33    </div> <!-- end story-page-->    
     34     
     35      </div><!-- /content --> 
     36       
     37    </div><!-- /page --> 
    3438       
    35     </div><!-- /content --> 
    36  
    37 </div><!-- /page --> 
    38        
    39 </body> 
     39  </body> 
    4040</html> 
  • other-projects/nz-flag-design/trunk/main-form/choose-palette.html

    r29530 r29549  
    1   <!DOCTYPE html>   
    2   <html id="story"><!-- class="story" id="idea"--> 
     1<!DOCTYPE html>   
     2<html id="story"> 
    33  <head> 
    4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    5     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    6     <title>Choose Colour Palette</title> 
    7      
     4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     
     5    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     6    <title>Choose Palette</title>    
    87  </head> 
    98  <body> 
    10       <div data-role="page"  id="innovation-story-01-idea"  
    11        class="demo-page"  
    12        data-dom-cache="true"  
    13        data-prev="choose-canvas"  
    14        data-next="iterative-design"> 
     9    <div data-role="page" id="choose-palette-page"  
     10     class="demo-page"  
     11     data-dom-cache="true"  
     12     data-prev="choose-canvas" 
     13     data-next="iterative-design"> 
    1514       
    16     <div data-role="content"> 
     15      <div data-role="content"> 
    1716       
    18       <div data-role="controlgroup" class="control" data-mini="true">            
    19             <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 
    20         <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    21           </div>   
     17    <div data-role="controlgroup" class="control" data-mini="true">          
     18          <a href="#" class="next right-button test-fwd" style="right:1%;"></a> 
     19      <a href="#" class="prev left-button idea-back" style="left:1%;"></a> 
     20        </div> 
    2221       
    23       <div class="story-page"> 
    24         <!-- put custom content here -->   
    25          
    26         <span class="left story-icon idea" ></span> 
    27         <h2>Choose Colour Palette</h2>           
    28         <p> 
    29           ... 
    30         </p>     
    31          
    32         <!-- end of putting custom content --> 
    33       </div> <!-- end story-page-->  
     22    <div class="story-page"> 
    3423       
    35     </div><!-- /content --> 
     24      <!-- put custom content here -->   
     25      <span class="left story-icon research" ></span> 
     26      <h2>Choose Colour Palette</h2> 
     27      <p> 
     28        ... 
     29      </p> 
     30      <!-- end of putting custom content -->         
    3631 
    37 </div><!-- /page --> 
    38        
    39 </body> 
     32    </div> <!-- end story-page--> 
     33      </div><!-- /content --> 
     34 
     35    </div><!-- /page --> 
     36     
     37  </body> 
    4038</html> 
  • other-projects/nz-flag-design/trunk/main-form/index.html

    r29530 r29549  
    11<!DOCTYPE html>   
    2 <html id="story"><!-- class="story" id="idea"--> 
     2<html id="story"> 
    33  <head> 
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     5<!-- 
    56    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    6     <title>Enter Your Name</title> 
    7  
    8     <link rel="shortcut icon" href="lib-slider/favicon.ico"/>        
    9  
    10     <!-- Local styling --> 
     7--> 
     8    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
     9    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/> 
     10    <meta name="apple-mobile-web-app-capable" content="yes"/> 
     11     
    1112    <script src="css/source-sans-pro.js"></script> 
    1213    <link href="css/styles.css" rel="stylesheet"/> 
    1314    <link href="css/storystyle.css" rel="stylesheet"/> 
     15     
     16    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/> 
     17    <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/> 
     18    <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/> 
     19    <link rel="shortcut icon" href="lib-slider/favicon.ico"/>        
    1420 
    1521    <!-- jQuery --> 
    1622    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    17      
    18     <!-- Swipe support --> 
    19  
    20     <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/> 
    21     <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/> 
    22     <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/> 
    2323<!-- 
    2424    <script src="lib/jquery-1.8.2.min.js"></script> 
    2525--> 
    26      
     26 
     27    <!-- page swipe --> 
    2728    <script src="lib-slider/js/jquery.mobile.demos.js"></script> 
    28     <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>  
    29     <script src="lib-slider/js/swipe-page.js"></script>      
     29    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script> 
     30    <script src="lib-slider/js/swipe-page.js"></script>  
    3031 
    31  
    32     <!-- Side-bar accordion support --> 
    33 <!-- 
    34     <link href="css/liteaccordion.css" rel="stylesheet" />     
     32    <!-- accordion bars --> 
     33    <link href="css/liteaccordion.css" rel="stylesheet" /> 
    3534    <script src="js/jquery.easing.1.3.js"></script> 
    3635    <script src="js/liteaccordion.jquery.js"></script> 
    37 --> 
    3836 
    39  
     37    <title>Enter Name</title> 
    4038 
    4139  </head> 
    42  
    4340  <body> 
    44     <div data-role="page" id="innovation-story-01"  
     41    <div data-role="page" id="enter-name-page"  
    4542     class="demo-page"  
    4643     data-dom-cache="true"  
    47      data-next="choose-canvas"> <!--data-theme="a" --> 
    48        
     44     data-next="choose-canvas"> 
    4945      <div data-role="content"> 
    50      
     46       
    5147    <div data-role="controlgroup" class="control" data-mini="true">          
    5248          <a href="#" class="next right-button idea-fwd" style="right:1%;"></a> 
     49      <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    5350        </div>   
     51       
     52    <a target="_parent" href="../index.html" class="back-button back-left"></a>    
     53       
     54    <div class="story-page"> 
    5455 
    55     <a target="_parent" href='../index.html' class="back-button back-left"></a>    
    56  
    57     <div class="story-page"> 
    58       <!-- put custom content here --> 
    59        
     56      <!-- put custom content here -->     
    6057      <div class="story-title"> 
    6158        <h1 class="center">Enter Name</h1> 
     59        <p class="center">-- xx </p> 
     60        <p> 
     61          Name:  
     62          <form> 
     63        <input type="text" /> 
     64          </form> 
     65        </p> 
    6266      </div> 
     67      <!-- end of putting custom content --> 
    6368 
    64         <p> 
    65           ... 
    66         </p>     
    67  
    68       <!-- end of putting custom content --> 
    6969    </div> <!-- end story-page-->        
    70      
    71 <!-- 
    72     <span class="swipe-text"></span> 
    73 --> 
    7470     
    7571      </div><!-- /content --> 
    7672 
    77     </div><!-- /page --> 
    78  
    79 <!-- 
    80     <div id="footer" class="center"> 
    81       Creative Commons Licensed, Center for Open Source Innovation (COSI), University of Waikato 2015 
    82     </div> 
    83 -->       
    84      
    85  
     73    </div><!-- /page -->       
    8674  </body> 
    8775</html> 
    88    
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29530 r29549  
    1   <!DOCTYPE html>   
    2   <html id="story"><!-- class="story" id="idea"--> 
     1<!DOCTYPE html>   
     2<html id="story"> 
    33  <head> 
    4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    5     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    6     <title>Iterative Design</title> 
    7      
     4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     
     5    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     6 
     7    <title>Iterative Design</title>  
     8 
    89  </head> 
     10 
    911  <body> 
    10       <div data-role="page"  id="innovation-story-01-idea"  
    11        class="demo-page"  
    12        data-dom-cache="true"  
    13        data-prev="choose-canvas"  
    14        data-next="iterative-design"> 
     12    <div data-role="page" id="iterative-design-page"  
     13     class="demo-page"  
     14     data-dom-cache="true"  
     15     data-prev="choose-palette"> 
    1516       
    16     <div data-role="content"> 
     17      <div data-role="content"> 
    1718       
    18       <div data-role="controlgroup" class="control" data-mini="true">            
    19             <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 
    20         <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    21           </div>   
     19    <div data-role="controlgroup" class="control" data-mini="true">          
     20          <a href="#" class="next right-button test-fwd" style="right:1%;"></a> 
     21      <a href="#" class="prev left-button idea-back" style="left:1%;"></a> 
     22        </div> 
    2223       
    23       <div class="story-page"> 
    24         <!-- put custom content here -->   
     24    <div class="story-page"> 
     25       
     26      <!-- put custom content here -->   
     27      <span class="left story-icon research" ></span> 
     28      <h2>Iterative Design</h2> 
     29 
     30      <div> 
     31        <div id="side-by-side"> 
     32              <ol> 
     33 
     34        <li> 
     35          <h2><span>2D Design</span></h2> 
     36          <div id="design-div" > 
     37 
     38            <iframe style="width: 100%; height: 100%" 
     39                id="design-iframe" ></iframe> 
     40          </div> 
     41        </li> 
     42 
     43        <li> 
     44          <h2><span title="Click to Open/Close">Flag Similarity</span></h2> 
     45           
     46          <div id="similarity-2d-div"> 
     47            <iframe src="../similarity-2d/index.jsp"  
     48                style="width: 100%; height: 100%" 
     49                id="similarity-2d-iframe" ></iframe> 
     50          </div> 
     51           
     52        </li> 
     53        <li> 
     54          <h2><span title="Click to Open/Close">Render 3D</span></h2> 
     55          <div id="comparison-3d-div"> 
     56            <iframe src="../render-3d/flag.html"  
     57                style="width: 100%; height: 100%;" 
     58                id="comparison-3d-iframe" ></iframe> 
     59          </div> 
     60        </li> 
    2561         
    26         <span class="left story-icon idea" ></span> 
    27         <h2>Iterative Design</h2>            
     62          </ol> 
     63        </div> 
     64      </div> 
    2865 
    29         <style> 
    30           iframe::-webkit-scrollbar {   
    31           display: none; 
    32           }   
    33         </style> 
     66      <!-- end of putting custom content -->         
    3467 
    35         <iframe src="iterative-design-frame.html" style="width: 100%; height: 100%" > 
    36         </iframe> 
    37         <!-- end of putting custom content --> 
    38       </div> <!-- end story-page-->  
    39        
    40     </div><!-- /content --> 
     68    </div> <!-- end story-page--> 
     69      </div><!-- /content --> 
    4170 
    42 </div><!-- /page --> 
    43        
    44 </body> 
     71      <script> 
     72 
     73 
     74    var activatedAccordion    = false; 
     75    var activatedSVGEditorFrame = false; 
     76 
     77        function activateAccordion() { 
     78 
     79          $('#side-by-side').show(); 
     80          $('#side-by-side') 
     81            .liteAccordion( 
     82               { theme           : 'light', 
     83                 rounded         : true, 
     84                 containerWidth  : 1000, 
     85                 containerHeight : 600,        
     86               }  
     87           ); 
     88        } 
     89 
     90        function activateSVGEditor() { 
     91          console.log("activateSVGEditor()"); 
     92      //$('#design-iframe').attr("src", "svg-edit-2.7/svg-editor.html");     
     93          $('#design-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html"); 
     94        } 
     95 
     96        $(document).on("pageload",function(event,data){ 
     97          console.log( "Iterative Design Page: jquerymobile pageload()" ); 
     98          if (!activatedAccordion) { 
     99        activateAccordion();         
     100        activatedAccordion = true; 
     101      } 
     102        }); 
     103 
     104 
     105        $(document).on("pagebeforeshow",function(event,data){ 
     106      var active_page = $.mobile.activePage.attr("id"); 
     107      console.log("Event: pagebeforeshow() for page " + active_page); 
     108 
     109      if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) { 
     110        activateSVGEditor(); 
     111        activatedSVGEditorFrame = true; 
     112      } 
     113 
     114        }); 
     115 
     116      </script> 
     117 
     118 
     119    </div><!-- /page --> 
     120 
     121         
     122  </body> 
    45123</html>