<footer><!-- $credits --></footer>
</div>
<div id="searchHints"></div>
+<div id="viewOverlay"></div>
<div id="view"></div>
<div id="innerView"></div>
}
},
openingView: function (callback) {
- console.log('openingView');
+ $("#viewOverlay").show();
var $this = this;
this.fluidbook.resize.resizeView();
this.fluidbook.tooltip.hideTooltip();
var times = [250, 500, 750, 1000, 1250];
$.each(times, function (k, v) {
setTimeout(function () {
- $this.fluidbook.resize.resizePopupVideos();
+ $this.resize();
}, v);
});
if (callback != undefined) {
var times = [250, 500, 750, 1000, 1250];
$.each(times, function (k, v) {
setTimeout(function () {
- $this.fluidbook.resize.resizePopupAudios();
+ $this.resize();
}, v);
});
if (callback != undefined) {
var view = '<div class="caption">' + this.closeButton() + '</div>';
view += '<div class="content">';
- var h = this.fluidbook.resize.getPopupWebVideoHeight();
-
if (service == 'youtube') {
- view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="https://www.youtube.com/embed/' + video + '?autoplay=1&modestbranding=1&rel=0&html5=1" frameborder="0"></iframe>';
+ view += '<iframe class="webvideo" type="text/html" src="https://www.youtube.com/embed/' + video + '?autoplay=1&modestbranding=1&rel=0&html5=1" frameborder="0"></iframe>';
} else if (service == 'dailymotion') {
- view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="https://www.dailymotion.com/embed/video/' + video + '?autoplay=1&logo=0&related=0&html5=1" width="100%" frameborder="0"></iframe>'
+ view += '<iframe class="webvideo" type="text/html" src="https://www.dailymotion.com/embed/video/' + video + '?autoplay=1&logo=0&related=0&html5=1" width="100%" frameborder="0"></iframe>'
} else if (service == 'brightcove') {
- view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="./video/brightcove.html?pid=' + DATAS.brightcovePlayerId + '&pk=' + encodeURIComponent(DATAS.brightcovePlayerSecret) + '&vid=' + video + '" width="100%" frameborder="0"></iframe>'
+ view += '<iframe class="webvideo" type="text/html" src="./video/brightcove.html?pid=' + DATAS.brightcovePlayerId + '&pk=' + encodeURIComponent(DATAS.brightcovePlayerSecret) + '&vid=' + video + '" width="100%" frameborder="0"></iframe>'
}
view += '</div>';
- $("#view").append('<div class="mview" data-menu="video">' + view + '</div>');
- $("#view .mview:last iframe").each(function () {
- $(this).attr('height', h);
- $(this).css('height', h);
- });
+ $("#view").append('<div class="mview" data-menu="webvideo">' + view + '</div>');
this.fluidbook.stats.track(11);
if (callback != undefined) {
callback();
}
,
closeView: function (callback, all, animate) {
+ $("#viewOverlay").hide();
var $this = this;
if (all == undefined) {
all = false;
autoAlpha: 0, onComplete: function () {
$this.fluidbook.video.killVideosIn(mview);
mview.remove();
-
+ callback();
}
});
- callback();
+
if (all) {
$("#main").show();
$('body').removeClass('view');
}
resize();
- }
- ,
+ },
resize: function (ww, hh) {
+ if (ww == undefined) {
+ ww = this.fluidbook.resize.ww;
+ }
+ if (hh == undefined) {
+ hh = this.fluidbook.resize.hh;
+ }
var m = $(".mview");
var w = ww * 0.6;
var h = hh * 0.8;
var forceHeight = false;
var fullscreen = false;
+ $("#viewOverlay").css({width: ww, height: hh});
+
switch (m.data('menu')) {
case 'chapters':
w = this.fluidbook.datas.chaptersColMaxWidth * 1.5;
case 'share':
w = 200;
break;
+ case 'locales':
+ w = 300;
+ break;
case 'bookmarks':
var max = Math.floor((ww * 0.8) / 120) * 120 + 40;
w = Math.min(max, Math.max(m.find('.doubleThumb').length, 4) * 120 + 40);
break;
+ case 'webvideo':
+ var w = Math.max(ww * 0.8, 600);
+ h = (w / 16) * 9;
+ forceHeight = true;
+ if (w > ww * 0.9) {
+ fullscreen = true;
+ w = ww;
+ }
+ break;
+ case 'video':
+ var video = m.find('video');
+
+ nw = parseInt($(video).data('width'));
+ nh = parseInt($(video).data('height'));
+
+ forceHeight = true;
+
+ var w = Math.max(ww * 0.8);
+ var h = Math.max(hh * 0.8);
+ if (ww < 600) {
+ w = ww;
+ h = hh;
+ fullscreen = true;
+ }
+
+ var s = Math.min(w / nw, h / nh);
+
+ if (!fullscreen) {
+ w = nw * s;
+ h = nh * s;
+ m.find('.videoContainer').css({paddingLeft: 0, paddingTop: 0});
+ } else {
+ m.find('.videoContainer').css({paddingLeft: (w - nw * s) / 2, paddingTop: (h - nh * s) / 2});
+ }
+ m.find('.videoContainer').css({width: w, height: h});
+
+ break;
+ case 'multimedia':
+ var iframe = m.find('iframe,img');
+
+ nw = parseInt($(iframe).data('width'));
+ nh = parseInt($(iframe).data('height'));
+
+ forceHeight = true;
+
+ var w = Math.max(ww * 0.8);
+ var h = Math.max(hh * 0.8);
+ if (ww < 600) {
+ w = ww;
+ h = hh;
+ fullscreen = true;
+ }
+
+ var s = Math.min(w / nw, h / nh);
+ console.log('scale : ' + s);
+ if (iframe.is('img')) {
+ s = Math.min(1, s);
+ }
+ if (!fullscreen) {
+ w = nw * s;
+ h = nh * s;
+ }
+ var x = ( w - (nw * s) ) / 2;
+ var y = (h - (nh * s)) / 2;
+
+ m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({translateX: x + 'px', translateY: y + 'px', scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
+ break;
default:
break;
}
var ratio = $("#archivesview img").width() / w;
$("#archivesview .links").transform({scale: [ratio]});
}
- }
+ },
+
+ resizePopupAudios: function () {
+ $(".mview audio").each(function () {
+ var w = $(window).width() - 200;
+ var h = 30;
+ $(this).css({
+ height: h,
+ width: w,
+ display: 'block',
+ margin: '40px auto'
+ });
+ });
+ },
};
\ No newline at end of file
this.resizeNav(interfaceScale);
}
-
- this.resizePopupVideos();
this.resizeSplash();
/*if (this.fluidbook.support.ie9) {
this.resizeIE9Multimedia();
$("#next,#previous").show();
},
- getPopupVideoHeight: function () {
- this.updateWindow();
- return this.hh - 80;
- },
-
- getPopupWebVideoHeight: function () {
- return $(window).height() - 44;
- },
-
- //resizeIE9Multimedia: function () {
- //return;
- // var links = $("#links .link.multimedia");
- // $(links).each(function () {
- // $(this).css('zoom', (this.bookScale));
- // var i = $(this).find("iframe")
- // var scale = this.bookScale * $(this).transform('scale');
- // if ($(i).length) {
- // var iframe = $(i).contents();
- // // $(iframe).find('#swiffycontainer>div').css('zoom', (1 / this.bookScale));
- // }
- // });
- //},
-
- resizePopupVideos: function () {
- var $this = this;
- var maxh = this.getPopupVideoHeight();
- var maxw = $(window).width() - 40;
- var w;
- var h;
-
- $(".mview .videoContainer video").each(function () {
- if ($(this).data('width') !== null) {
- w = parseInt($(this).data('width'));
- h = parseInt($(this).data('height'));
- var s = Math.min(maxw / w, maxh / h);
- w *= s;
- h *= s;
-
- $(this).css({
- width: w
- });
- if (Modernizr.ios7) {
- $(this).css({
- height: h
- });
- }
- }
-
- $(this).css({
- maxHeight: maxh,
- maxWidth: maxw
- });
- });
-
-
- $(".mview .webvideo").each(function () {
- $(this).css('height', $this.getPopupWebVideoHeight());
- });
-
- $(".mview .multimediaScale").each(function () {
- var iframe = $(this).find('iframe');
-
- w = parseInt($(iframe).attr('width'));
- h = parseInt($(iframe).attr('height'));
- var s = Math.min(maxw / w, maxh / h);
- var x = ( $(window).width() - (w * s) ) / 2;
-
- $(this).transform({translateX: x + 'px', scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
- });
- },
- resizePopupAudios: function () {
- $(".mview audio").each(function () {
- var w = $(window).width() - 200;
- var h = 30;
- $(this).css({
- height: h,
- width: w,
- display: 'block',
- margin: '40px auto'
- });
- });
- },
resizeSplash: function () {
if ($("#splash").length == 0) {
return;
$(document).on('click', ".mview .back", function () {
if ($(this).hasClass('closeView')) {
- fluidbook.closeView(function () {
+ fluidbook.menu.closeView(function () {
}, false);
if ($(this).attr('href') != '#') {
maskHashChange = true;
return false;
}
if ($(this).hasClass('one')) {
- fluidbook.closeView(function () {
+ fluidbook.menu.closeView(function () {
}, false);
if ($(this).attr('href') != '#') {
$(document).on('click', '.share', function () {
var f = 'send' + ucfirst($(this).data('service'));
fluidbook[f]();
- fluidbook.closeView(function () {
+ fluidbook.menu.closeView(function () {
}, false);
return false;
});
opacity: 0.01;
display: block;
cursor: pointer;
- [data-enabled], :hover {
+ &[data-enabled], &:hover {
opacity: 1 !important;
-moz-transition: none;
-webkit-transition: none;
@menu-padding: 30px;
/* View */
+#viewOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 21;
+ cursor: default;
+}
+
.mview {
background-color: @menu-background;
color: @menu-text;
max-width: 600px;
width: 100%;
+ &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"] {
+ .caption {
+ height: 0;
+ padding: 0;
+ .back {
+ opacity: 0;
+ transition: opacity 300ms;
+ }
+ }
+
+ &:hover {
+ .caption {
+ .back {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ &[data-menu="video"] {
+ iframe {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
.fonctions {
padding: 0 @menu-padding @menu-padding 0;
text-align: right;
height: 60px;
padding: 22px;
background-color: @menu-button-background;
+ z-index: 1;
}
}
}
color: @menu-field-text;
}
+//$res[] = '#indexView .thumb img{width:100px;height:' . $thumbh . 'px;}';
+//$res[] = '#indexView .doubleThumb{height:' . $thumbh . 'px;' . wsHTML5::writeCSSUA('box-shadow', '0 0 3px ' . $shadowColor) . '}';
+
#indexView {
margin: auto;
.doubleThumb, .padding {
padding: 20px @padding 0;
.doubleThumb {
width: 100px;
- &.left {
- margin-right: 10px;
+ }
+ }
+
+ .doubleThumb {
+ height: @thumb-height;
+ &.left {
+ margin-right: 10px;
+ }
+ &.simple {
+ .overlay {
+ width: 100px;
}
- &.simple {
- overlay {
- .overlay {
- width: 100px;
- }
+ &.left {
+ .hits {
+ left: -50px;
}
}
- .overlay {
- background-color: rgba(0, 0, 0, 0.5);
- position: absolute;
- top: 0px;
- left: 0px;
- width: 200px;
- z-index: 4;
- }
-
- .hits {
- position: relative;
- display: inline;
- top: 30px;
- z-index: 5;
- font-size: 12px;
- &.yes {
- padding: 5px;
- border-radius: 5px;
+ &.right {
+ .hits {
+ left: 50px;
}
}
+
}
+ .overlay {
+ background-color: rgba(0, 0, 0, 0.5);
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ z-index: 4;
+ }
+
+ @hits-top: (@thumb-height - 26) / 2;
- .padding {
- height: 1px;
+ .hits {
+ position: relative;
+ display: inline;
+
+ z-index: 5;
+ font-size: 12px;
+ height: 26px;
+ top: @hits-top;
+ &.yes {
+ padding: 5px;
+ border-radius: 5px;
+ color: @menu-text;
+ background-color: @menu-background;
+ }
}
}
+
+ .padding {
+ height: 1px;
+ }
+
.thumb {
position: absolute;
top: 0px;
left: 0px;
font-size: 12px;
img {
- background: #fff;
+ width: 100px;
+ height: @thumb-height;
+ background: #fff
}
.number {
text-align: center;
}
&.right {
left: 100px;
- left: 0;
}
&.simple {
width: 100px;
/* Videos */
.mview .videoContainer {
-
- padding: 20px;
width: 100%;
height: 100%;
}
/* multimedia */
.mview .multimediaContainer {
- padding: 20px 20px 20px 20px;
+ padding: 0;
}
.mview img.multimedia {
@rail-opacity: 1;
@handle: @menu-button-background;
@handle-hover: @menu-text;
+@scroll-border-radius: 0px;
// Scrollbars
/* perfect-scrollbar v0.7.1 */
position: absolute;
/* please don't change 'position' */
background-color: @handle;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
+ -webkit-border-radius: @scroll-border-radius;
+ -moz-border-radius: @scroll-border-radius;
+ border-radius: @scroll-border-radius;
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
position: absolute;
/* please don't change 'position' */
background-color: @handle;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
+ -webkit-border-radius: @scroll-border-radius;
+ -moz-border-radius: @scroll-border-radius;
+ border-radius: @scroll-border-radius;
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
@import "book-variables";
-@menu-button-background: overlay(@menu-background, #c0c0c0);
+.menu-button-overlay() when not (@menu-background = #ffffff) {
+ @menu-button-background: overlay(@menu-background, #c0c0c0);
+}
+
+.menu-button-overlay() when (@menu-background = #ffffff) {
+ @menu-button-background: screen(@menu-text, #c0c0c0);
+}
+
+.menu-button-overlay();
+
@font: 'Open Sans', Arial, Helvetica, sans-serif;
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff