Commit c578a912 authored by Alexandre Leray's avatar Alexandre Leray
Browse files

Made the Mode metadata generic

By using the "mode" metadata on a page on can set her own set of
available classes to be applied on a page. By writing an appropriate
stylesheet, it it possible to apply custom styles to the page or on the
fly.
parent 476be8f5
article.play section.section1.hidden {
article.cinematic section.section1.hidden {
display: none!important;
}
article.play section.section1.alignbottom section.section2.active {
article.cinematic section.section1.alignbottom section.section2.active {
vertical-align: bottom!important;
}
article.play section.section1.aligntop section.section2.active {
article.cinematic section.section1.aligntop section.section2.active {
vertical-align: top!important;
}
article.play section.section1.top section.section2 {
article.cinematic section.section1.top section.section2 {
vertical-align: top;
}
article.play section.section1.xx-large * {
article.cinematic section.section1.xx-large * {
font-size: xx-large;
line-height: 1.1;
}
article.play section.section1 {
article.cinematic section.section1 {
background-color: transparent;
overflow: hidden;
}
article.play section.section1.collapsed {
article.cinematic section.section1.collapsed {
/*visibility: hidden;*/
}
article.play section.section1.tm {
article.cinematic section.section1.tm {
position: absolute;
top: 0!important;
left: 50%!important;
}
article.play section.section1.tl {
article.cinematic section.section1.tl {
position: absolute;
top: 0!important;
left: 0!important;
}
article.play section.section1.ml {
article.cinematic section.section1.ml {
position: absolute;
top: 50%!important;
left: 0!important;
}
article.play section.section1.mm {
article.cinematic section.section1.mm {
position: absolute;
top: 50%!important;
left: 50%!important;
}
article.play section.section1.width50 {
article.cinematic section.section1.width50 {
width: 50%!important;
}
article.play section.section1.height50 {
article.cinematic section.section1.height50 {
height: 50%!important;
}
article.play section.section1.width100 {
article.cinematic section.section1.width100 {
width: 100%!important;
}
article.play section.section1.height100 {
article.cinematic section.section1.height100 {
height: 100%!important;
}
article.play section.section1 h1 {
article.cinematic section.section1 h1 {
display: none;
}
article.play section.section1 {
article.cinematic section.section1 {
border: none;
/*border: 1px solid red;*/
/*box-sizing: border-box;*/
......@@ -67,7 +67,7 @@ article.play section.section1 {
/*-ms-box-sizing: border-box;*/
/*outline: 0px none transparent;*/
}
article.play section.section2 {
article.cinematic section.section2 {
border: none;
/*border: 1px solid blue;*/
/*box-sizing: border-box;*/
......@@ -76,7 +76,7 @@ article.play section.section2 {
/*-ms-box-sizing: border-box;*/
/*outline: 0px none transparent;*/
}
article.play section.section2 h2 {
article.cinematic section.section2 h2 {
display: none;
}
/*.showtimecodes h2 {*/
......@@ -84,13 +84,13 @@ article.play section.section2 h2 {
/*}*/
/*article.play section.section2 img {*/
/*article.cinematic section.section2 img {*/
/*opacity: 0;*/
/*}*/
/*article.play section.section2.active img {*/
/*article.cinematic section.section2.active img {*/
/*opacity: 100;*/
/*}*/
/*article.play section.section2.active img {*/
/*article.cinematic section.section2.active img {*/
/*-webkit-transition: opacity 1s ease-in-out;*/
/*-moz-transition: opacity 1s ease-in-out;*/
/*-o-transition: opacity 1s ease-in-out;*/
......@@ -99,14 +99,14 @@ article.play section.section2 h2 {
/*}*/
article.play section.section2.active {
article.cinematic section.section2.active {
background: none;
display: block;
}
article.play section.section2 {
article.cinematic section.section2 {
display: none;
}
article.play .active div.wrapper {
article.cinematic .active div.wrapper {
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
-moz-animation-name: slidein;
......@@ -132,10 +132,10 @@ article.play .active div.wrapper {
opacity: 1;
}
}
article.play section.section2 {
article.cinematic section.section2 {
border-top: none!important;
}
article.play .ui-resizable-handle {
article.cinematic .ui-resizable-handle {
display: none!important;
}
......@@ -165,10 +165,10 @@ section.section1.center section.section2.active {
/*padding: 30px;*/
}
article.play del {
article.cinematic del {
visibility: hidden;
}
article.play .big {
article.cinematic .big {
font-size: 56px;
}
@-webkit-keyframes blinker {
......
......@@ -712,13 +712,21 @@
$("#mode").buttonset();
$("#playpause, #time").button();
$("#modeedit, #modeplay").change(function() {
var mode = $(this).val();
if (mode == "play") {
$("article").addClass("play");
$("#mode input").change(function() {
var classes = [],
mode = $(this).val();
$(this).parent().find('input').each(function(i, selected) {
classes[i] = $(selected).val();
});
classes = classes.join(' ').replace(mode, '');
$canvas.removeClass(classes).addClass(mode);
if (mode == "cinematic") {
$("body").layout().close("west");
} else {
$("article").removeClass("play");
$("body").layout().open("west");
}
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment