Changeset 29549 for other-projects


Ignore:
Timestamp:
2014-12-08T14:11:00+13:00 (9 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 edited

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>
Note: See TracChangeset for help on using the changeset viewer.