liquid_feedback_frontend
view app/main/_layout/default.html @ 1045:701a5cf6b067
Imported LiquidFeedback Frontend 3.0 branch
| author | bsw | 
|---|---|
| date | Thu Jul 10 01:19:48 2014 +0200 (2014-07-10) | 
| parents | b865f87ea810 | 
| children | 58d703bb06e4 | 
 line source
     1 <html>
     2 <head>
     3   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     4   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     5   <title><!-- WEBMCP SLOTNODIV html_title --></title>
     6   <link rel="stylesheet" type="text/css" media="screen" href="__BASEURL__/static/gregor.js/gregor.css" />
     7   <link rel="stylesheet" type="text/less" href="__BASEURL__/static/lf3.less" />
     8   <!-- WEBMCP SLOTNODIV html_head -->
     9   <script type="text/javascript" src="__BASEURL__/static/js/less-1.4.1.min.js"></script>
    10   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    11   <script type="text/javascript">jsFail = true;</script>
    12   <![if !IE]>
    13     <script type="text/javascript">jsFail = false;</script>
    14   <![endif]>
    15   <script type="text/javascript" src="__BASEURL__/static/js/jsprotect.js"></script>
    16   <script type="text/javascript" src="__BASEURL__/static/js/partialload.js"></script>
    17   <script type="text/javascript">var ui_tabs_active = {};</script>
    18 </head>
    19 <body style="">
    20 <div class="head_outer">
    21   <div class="head">
    22     <div class="nav">
    23       <!--WEBMCP SLOTNODIV navigation -->
    24       <!--WEBMCP SLOTNODIV navigation_right -->
    25       <!--WEBMCP SLOTNODIV notification -->
    26     </div>
    28     <a class="logo" href="__BASEURL__/">
    29       <span class="liquid">Liquid</span><span class="feedback">Feedback</span>
    30       <span class="instanceName"><!-- WEBMCP SLOTNODIV instance_name --></span>
    31     </a>
    34   </div>
    35 </div>
    37 <div class="page">
    38   <div class="layout_notice" id="layout_notice" onclick="document.getElementById('layout_notice').style.display='none';">
    39     <!-- WEBMCP SLOT notice -->
    40   </div>
    42   <div class="layout_warning" id="layout_warning" onclick="document.getElementById('layout_warning').style.display='none';">
    43     <!-- WEBMCP SLOT warning -->
    44   </div>
    46   <div class="layout_error" id="layout_error" onclick="document.getElementById('layout_error').style.display='none';">
    47     <!-- WEBMCP SLOT error -->
    48   </div>
    50   <div class="layout_motd" id="layout_motd" onclick="document.getElementById('layout_motd').style.display='none';">
    51     <!-- WEBMCP SLOT motd -->
    52   </div>
    54   <div class="title_outer">
    55     <!-- WEBMCP SLOT title -->
    56   </div>
    58   <!-- WEBMCP SLOT tabs -->
    60   <!-- WEBMCP SLOTNODIV actions -->
    62   <div id="swiper_tabs" class="swiper_tabs" style="display: none;">
    63 <!--    <div><a id="tab-0" href="#" onclick="slider.to(0); return false;"><img src="__BASEURL__/static/icons/16/chart_organisation.png" /></a></div>-->
    64     <div><a id="tab-0" href="#" onclick="slider.to(0); return false;"><img src="__BASEURL__/static/icons/16/text_list_bullets.png" width="32" height="32" /></a></div>
    65     <div><a id="tab-1" href="#" onclick="slider.to(1); return false;"><img src="__BASEURL__/static/icons/48/info.png" width="32" height="32" /></a></div>
    66     <div><a id="tab-2" href="#" onclick="slider.to(2); return false;"><img src="__BASEURL__/static/icons/16/group.png" width="32" height="32" /></a></div>
    67   </div>
    69   <div id="swiper_info"><!-- WEBMCP SLOTNODIV swiper_info --></div>
    70   <div id="swiper" class="swiper" style="position: absolute; width: 100%;">
    71     <div id="swiper_wrap" class="swiper_wrap">
    72     </div>
    73   </div>
    75   <div class="content">
    76     <div class="sidebar">
    77       <!-- WEBMCP SLOTNODIV sidebar -->
    78     </div>
    80     <div class="main_outer">
    81       <!-- WEBMCP SLOTNODIV slideshow -->
    82       <div class="main">
    83         <!-- WEBMCP SLOTNODIV default -->
    84         <!-- WEBMCP SLOTNODIV extra -->
    85       </div>
    86     </div>
    87   </div>
    88   <br style="clear: both;" />
    89   <div class="footer">
    90     <!-- WEBMCP SLOTNODIV footer -->
    91   </div>
    92 </div>
    94   <div id="trace">
    95     <!-- WEBMCP SLOTNODIV trace_button -->
    96     <div id="trace_content" style="display: none;">
    97       <tt id="system_error"><!-- WEBMCP SLOT system_error --></tt>
    98       <h1>System trace (for computer programmers purposes)</h1>
    99       <br />
   100       <!-- WEBMCP SLOT trace -->
   101       <div class="trace_close" onclick="document.getElementById('trace_show').style.display='block';document.getElementById('trace_content').style.display='none';">
   102         close
   103       </div>
   104     </div>
   105   </div>
   106   <script>
   107     $(".trace_view > .trace_list").hide();
   108     $(".trace_head").click(function() {
   109       var el = this.nextSibling
   110       if (el) $(el).toggle();
   111     });
   112   </script>
   114   <!-- WEBMCP SLOTNODIV script -->
   116   <script>
   118     var slider;
   120     function initSlider () {
   122       var els = [
   123         $( '.main, .extra' ),
   124         $( '.tab-notification, .tab-whatcanido' ),
   125         $( '.tab-members' )
   126       ];
   128       var sidebarFound = false;
   129       for ( i = 1; i < els.length; i++) {
   130         if (els[i].length > 0) sidebarFound = true;
   131       }
   133       if (sidebarFound) $("#swiper_tabs").show();
   135       var elsCount = 3;
   137       var slidePos;
   139       function slideTo ( pos ) {
   140         if ( typeof ( slidePos ) != "undefined" ) {
   141           els[ slidePos ].hide();
   142           $ ( "#tab-" + slidePos ).removeClass ( "active" );
   143         }
   144         slidePos = pos;
   145         els[ slidePos ].show();
   146         $ ( "#tab-" + slidePos ).addClass ( "active" );
   147         if (pos == 1) {
   148           $("#swiper_info").hide();
   149         }
   150       }
   152       function slideNext () {
   153         var pos = slidePos + 1;
   154         if ( pos > elsCount - 1 ) {
   155           pos = elsCount - 1;
   156         } else {
   157           $( "#swiper").css("left", "400px");
   158           $( "#swiper").animate({ "left": "0px" }, 200);
   159         }
   160         slideTo ( pos );
   161       }
   163       function slidePrev () {
   164         var pos = slidePos - 1;
   165         if ( pos < 0 ) {
   166           pos = 0;
   167         } else {
   168           $( "#swiper").css("left", "-400px");
   169           $( "#swiper").animate({ "left": "0px" }, 200);
   170         }
   171         slideTo ( pos );
   172       }
   174       function exit() {
   175         for ( i = 0; i < els.length; i++) {
   176           els[i].show();
   177         }
   178         $( ".main_outer" ).append ( $( ".main" ).detach() );
   179         $( ".extra_outer" ).append ( $( ".extra" ).detach() );
   180         $( ".sidebar" ).append ( $(els[1]).detach() );
   181         $( ".sidebar" ).append ( $(els[2]).detach() );
   182         $( ".page" ).append ( $('.footer') );
   183         $( "body" ).append ( $('#trace') );
   185       }
   187       var touchStartX;
   188       var touchStartY;
   189       var isScrolling;
   191       function touchDown ( e ) {
   192         touchStartX = e.originalEvent.touches[0].pageX;
   193         touchStartY = e.originalEvent.touches[0].pageY;
   194         isScrolling = undefined;
   195       }
   197       function touchMove ( e ) {
   198         var diffX = touchStartX - e.originalEvent.changedTouches[0].pageX;
   199         var diffY = touchStartY - e.originalEvent.changedTouches[0].pageY;
   200         if ( typeof( isScrolling ) == 'undefined' ) {
   201           isScrolling = Math.abs ( diffY ) > Math.abs ( diffX );
   202         }
   203         if ( ! isScrolling ) {
   204           $( "#swiper").css("left", -diffX + "px");
   205           e.preventDefault();
   206         }
   207       }
   209       function touchUp ( e ) {
   210         var diffX = touchStartX - e.originalEvent.changedTouches[0].pageX;
   211         var diffY = touchStartY - e.originalEvent.changedTouches[0].pageY;
   213         if ( isScrolling ) {
   214           // vertical scrolling
   215           return;
   216         }
   218         if ( Math.abs ( diffX ) < 100 ) {
   219           // go back not enough
   220           $( "#swiper").animate({
   221             "left": "0px",
   222           }, 200);
   223           return;
   224         }
   225         var direction = diffX < 0 ? "right" : "left";
   227         if ( direction == "left" ) {
   228           slideNext();
   229         } else {
   230           slidePrev();
   231         }
   232       }
   234       for ( i = 0; i < els.length; i++) {
   235         var el = els[i].detach();
   236         el.hide();
   237         $('#swiper_wrap').append ( el ) ;
   238       }
   240       $('#swiper_wrap').append ( $('.footer') );
   241       $('#swiper_wrap').append ( $('#trace') );
   242       slideTo ( 0 );
   244       if ( 'ontouchstart' in document.documentElement ) {
   245         $( "body" ).on( "touchstart", touchDown );
   246         $( "body" ).on( "touchmove", touchMove );
   247         $( "body" ).on( "touchend",   touchUp );
   248       }
   250       return {
   251         to: slideTo,
   252         exit: exit
   253       }
   255     }
   257     function resizeHandler() {
   258       if ( $(window).width() < 768 ) {
   259         if ( typeof ( slider ) == "undefined" ) {
   260           slider = initSlider();
   261         }
   262       } else {
   263         if ( typeof ( slider ) != "undefined" ) {
   264           slider.exit();
   265           slider = undefined;
   266         }
   267       }
   269     }
   271     $( window ).resize( resizeHandler );
   272     resizeHandler();
   274   </script>
   276 </body>
   277 </html>
