Difference between revisions of "Template:Greece/notebook"

(Created page with "<html> <head> <!-- >>>>> Meta <<<<< --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- >>>>> Link References <<<<< --> <link rel="styl...")
 
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
 
−
<!-- >>>>> Meta <<<<< -->
 
−
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
−
 
−
<!-- >>>>> Link References <<<<< -->
 
−
 
−
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/CSS?action=raw&ctype=text/css" />
 
−
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" >
 
−
 
−
<!-- >>>>> Scripts <<<<< -->
 
−
<script src="https://cldup.com/_ZLCQK4WPX.js"></script>
 
−
<script src="https://cldup.com/B3OApUdatp.js"></script>
 
−
<script src="https://cldup.com/0ptqPE5UXi.js"></script>
 
−
<script src="https://cldup.com/GHXJjxxPvP.js"></script>
 
−
<script src="https://cldup.com/_9gtDSe2wI.js"></script>
 
−
 
 
</head>
 
</head>
−
<body style='margin:0;padding:0;overflow:hidden;background:url(http://users.auth.gr/komodromo/iGEM%20Greece%202017/Flipbook/pages/background_desk.jpg) repeat center; background-size: 100% auto'>
+
<body>
  
 
<div id="canvas">
 
<div id="canvas">
Line 27: Line 10:
 
<div class="hard"></div>
 
<div class="hard"></div>
 
<div class="hard"></div>
 
<div class="hard"></div>
−
<div class="hard p29"></div>
+
<div class="hard p63"></div>
−
<div class="hard p30"></div>
+
<div class="hard p64"></div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<!-- Special Style -->
 
−
<style>
 
−
#page_7 a{ margin: -3px 0px 0px 5px; }
 
−
 
−
#page_7 a, #page_14 a{ font-size: 22px; }
 
−
 
−
#page_12 a{font-size: 17px; }
 
−
 
−
.pages_div a{ font-family: 'Shadows Into Light', cursive; font-weight: bold; font-size: 17px;}
 
−
 
−
#top_menu_14{ display: none; }
 
−
 
−
#sideMenu{ display:none; }
 
−
 
−
</style>
 
−
 
−
<!--  _________________________________________________________________________________________________________________ -->
 
  
 
<!-- Functionality Script -->
 
<!-- Functionality Script -->
−
<script>
+
<script type="text/javascript" src="https://2017.igem.org/Template:Greece/Notebook/Functionality_script?
−
function loadApp() {
+
action=raw&ctype=text/javascript"></script>
−
 
+
−
var flipbook = $('.sample-docs');
+
−
 
+
−
// Check if the CSS was already loaded
+
−
+
−
if (flipbook.width()==0 || flipbook.height()==0) {
+
−
setTimeout(loadApp, 10);
+
−
return;
+
−
}
+
−
 
+
−
// Mousewheel
+
−
 
+
−
$('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {
+
−
 
+
−
var data = $(this).data(),
+
−
step = 30,
+
−
flipbook = $('.sample-docs'),
+
−
actualPos = $('#slider').slider('value')*step;
+
−
 
+
−
if (typeof(data.scrollX)==='undefined') {
+
−
data.scrollX = actualPos;
+
−
data.scrollPage = flipbook.turn('page');
+
−
}
+
−
 
+
−
data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
+
−
Math.max(0, data.scrollX + deltaX));
+
−
 
+
−
var actualView = Math.round(data.scrollX/step),
+
−
page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));
+
−
 
+
−
if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
+
−
data.scrollPage = page;
+
−
flipbook.turn('page', page);
+
−
}
+
−
 
+
−
if (data.scrollTimer)
+
−
clearInterval(data.scrollTimer);
+
−
+
−
data.scrollTimer = setTimeout(function(){
+
−
data.scrollX = undefined;
+
−
data.scrollPage = undefined;
+
−
data.scrollTimer = undefined;
+
−
}, 1000);
+
−
 
+
−
});
+
−
 
+
−
// Slider
+
−
 
+
−
$( "#slider" ).slider({
+
−
min: 1,
+
−
max: 100,
+
−
 
+
−
start: function(event, ui) {
+
−
if (!window._thumbPreview) {
+
−
_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
+
−
setPreview(ui.value);
+
−
_thumbPreview.appendTo($(ui.handle));
+
−
} else
+
−
setPreview(ui.value);
+
−
 
+
−
moveBar(false);
+
−
},
+
−
 
+
−
slide: function(event, ui) {
+
−
setPreview(ui.value);
+
−
},
+
−
 
+
−
stop: function() {
+
−
if (window._thumbPreview)
+
−
_thumbPreview.removeClass('show');
+
−
+
−
$('.sample-docs').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
+
−
}
+
−
});
+
−
 
+
−
 
+
−
// URIs
+
−
+
−
Hash.on('^page\/([0-9]*)$', {
+
−
yep: function(path, parts) {
+
−
var page = parts[1];
+
−
 
+
−
if (page!==undefined) {
+
−
if ($('.sample-docs').turn('is'))
+
−
$('.sample-docs').turn('page', page);
+
−
}
+
−
 
+
−
},
+
−
nop: function(path) {
+
−
 
+
−
if ($('.sample-docs').turn('is'))
+
−
$('.sample-docs').turn('page', 1);
+
−
}
+
−
});
+
−
 
+
−
// Arrows
+
−
 
+
−
$(document).keydown(function(e){
+
−
 
+
−
var previous = 37, next = 39;
+
−
//Get the two arrows keyCodes to change page
+
−
switch (e.keyCode) {
+
−
case previous:
+
−
 
+
−
$('.sample-docs').turn('previous');
+
−
 
+
−
break;
+
−
case next:
+
−
+
−
$('.sample-docs').turn('next');
+
−
 
+
−
break;
+
−
}
+
−
 
+
−
});
+
−
 
+
−
// Create the flipbook
+
−
 
+
−
flipbook.turn({
+
−
elevation: 50,
+
−
acceleration: false,  //True for touch screens
+
−
gradients: true,
+
−
autoCenter: true,
+
−
duration: 1000,
+
−
pages: 30,
+
−
when: {
+
−
 
+
−
turning: function(e, page, view) {
+
−
+
−
var book = $(this),
+
−
currentPage = book.turn('page'),
+
−
pages = book.turn('pages');
+
−
+
−
console.log(book.turn('pages'));
+
−
console.log(page);
+
−
+
−
if (currentPage > 3){
+
−
              if(currentPage < pages-3) {
+
−
if (page == 1) {
+
−
book.turn('page', 2).turn('stop').turn('page', page);
+
−
e.preventDefault();
+
−
return;
+
−
} else if (page == pages) {
+
−
book.turn('page', pages-1).turn('stop').turn('page', page);
+
−
e.preventDefault();
+
−
return;
+
−
}
+
−
  }
+
−
}
+
−
else if (page > 3){
+
−
                if(page < pages-3) {
+
−
if (currentPage == 1) {
+
−
book.turn('page', 2).turn('stop').turn('page', page);
+
−
e.preventDefault();
+
−
return;
+
−
} else if (currentPage == pages) {
+
−
book.turn('page', pages-1).turn('stop').turn('page', page);
+
−
e.preventDefault();
+
−
return;
+
−
  }
+
−
                }
+
−
}
+
−
+
−
 
+
−
Hash.go('page/'+page).update();
+
−
 
+
−
//Hide tabs on first and last pages
+
−
if (page == 1 || page == pages)
+
−
$('.sample-docs .tabs').hide();
+
−
+
−
 
+
−
},
+
−
 
+
−
 
+
−
turned: function(e, page, view) {
+
−
 
+
−
var book = $(this);
+
−
 
+
−
$('#slider').slider('value', getViewNumber(book, page));
+
−
 
+
−
                        $('.sample-docs .tabs').fadeIn(500); //This is the new line instead of the functionality below about whether the tabs are going to be displayed on #page/1
+
−
 
+
−
                       
+
−
if(page != book.turn('pages')){ $('.sample-docs .tabs').fadeIn(500); }
+
−
else $('.sample-docs .tabs').hide();
+
−
                       
+
−
book.turn('center');
+
−
updateTabs();
+
−
 
+
−
},
+
−
 
+
−
start: function(e, pageObj) {
+
−
+
−
moveBar(true);
+
−
 
+
−
},
+
−
 
+
−
end: function(e, pageObj) {
+
−
+
−
var book = $(this);
+
−
 
+
−
setTimeout(function() {
+
−
$('#slider').slider('value', getViewNumber(book));
+
−
}, 1);
+
−
 
+
−
moveBar(false);
+
−
 
+
−
},
+
−
 
+
−
missing: function (e, pages) {
+
−
 
+
−
for (var i = 0; i < pages.length; i++)
+
−
addPage(pages[i], $(this));
+
−
 
+
−
}
+
−
}
+
−
});//. turn('page', 0);
+
−
 
+
−
$('#slider').slider('option', 'max', numberOfViews(flipbook));
+
−
 
+
−
flipbook.addClass('animated');
+
−
 
+
−
 
+
−
// Show canvas
+
−
 
+
−
$('#canvas').css({visibility: 'visible'});
+
−
}
+
−
 
+
−
// Hide canvas
+
−
 
+
−
$('#canvas').css({visibility: 'hidden'});
+
−
 
+
−
yepnope({
+
−
test: Modernizr.csstransforms,
+
−
yep: ['https://cldup.com/w8sLkFOnzS.js', 'https://cldup.com/uR_MvED40C.css'], /* ['../../lib/turn.min.js', 'css/jquery.ui.css'] */
+
−
nope: ['https://cldup.com/cwlFkl6hKP.js', 'https://cldup.com/FrqeOraONs.css'], /* ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css'] */
+
−
both: ['https://cldup.com/oZJ_wZ0WEj.css', 'https://cldup.com/GNMMmWqnTE.js'], /* ['css/docs.css', 'js/docs.js'] */
+
−
complete: loadApp
+
−
});
+
−
</script>
+
−
 
+
−
 
+
−
<!-- Styling script -->
+
−
 
+
−
<script>
+
−
//Changes shall apply under void()
+
−
// Upper black toolbar stays there id = 'top_menu_14'  -> Could be display:block
+
−
// Main div wrapper contains code and all other stuff id = 'content' -> Change id to 'content2'
+
−
// Reason: iGEM puts everything in document.getElementById('content') - change id - cause element 404
+
−
void(document.getElementById('content').id = 'content0')
+
−
 
+
−
// Div (placeholder) containing the iGEM logo and some text id = 'top_title' -> Apply display: none
+
−
void(document.getElementById('top_title').style.display = 'none');
+
−
 
+
−
// Small icon in the top black toolbar id = 'bars_item' -> Apply display: none
+
−
//void(document.getElementById('bars_item').style.display = 'none');
+
−
// Same application for it's side effect (display an ugly div by default)
+
  
−
//void(document.getElementById('user_item').style.display = 'none');
 
−
//void(document.getElementById('sideMenu').style.display = 'none');
 
−
//var element = document.getElementById('home_logo');
 
−
//element.outerHTML = '';
 
−
//delete element;
 
−
</script>
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 00:38, 16 December 2017