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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.