Sozi library (js and css)
This commit is contained in:
parent
525bfad692
commit
c0ff02c334
49
README.md
49
README.md
|
|
@ -0,0 +1,49 @@
|
|||
Sozi UI
|
||||
=======
|
||||
|
||||
Add controlers on embeded Sozi presentations.
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
```
|
||||
var soziUi = new SoziUi(element, options);
|
||||
soziUi.addControls();
|
||||
soziUi.addEvents();
|
||||
```
|
||||
|
||||
Example
|
||||
-------
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="/path/to/sozi-ui.css">
|
||||
|
||||
<div class="sozi-container">
|
||||
<iframe src="/presentation.svg" frameborder="0" class="presentation"></iframe>
|
||||
</div>
|
||||
|
||||
<script src="/path/to/sozi-ui.js"></script>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
var presentations = document.querySelectorAll('.presentation');
|
||||
|
||||
presentations.forEach(function(presentation) {
|
||||
var soziUi = new SoziUi(presentation, {
|
||||
summary: true,
|
||||
allowFullscreen: true,
|
||||
position: 'bottom' // or 'top',
|
||||
lang: {
|
||||
next: 'Suivant',
|
||||
previous: 'Précédent',
|
||||
fullscrenOn: 'Plein écran',
|
||||
fullscrenOff: 'Réduire'
|
||||
}
|
||||
});
|
||||
soziUi.addControls();
|
||||
soziUi.addEvents();
|
||||
});
|
||||
}, false)
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
.sozi-container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sozi-ui-controls {
|
||||
width: 100%;
|
||||
background: #017499;
|
||||
color: #fff;
|
||||
font-family: Tahoma, Calibri, Verdana;
|
||||
font-size: 13px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.sozi-ui-controls:after {
|
||||
content: '.';
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.sozi-ui-element {
|
||||
display: inline-block;
|
||||
padding: 3px 15px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #008ab4;
|
||||
}
|
||||
|
||||
.sozi-ui-frame-current, .sozi-ui-frame-number, .sozi-ui-frame-current-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sozi-ui-frame-current-title, .sozi-ui-summary {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sozi-ui-summary {
|
||||
float: right;
|
||||
border: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: none;
|
||||
color: #fff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sozi-ui-fullscreen {
|
||||
border-left: 1px solid #008ab4;
|
||||
}
|
||||
|
||||
.sozi-ui-fullscreen-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sozi-ui-fullscreen-btn.active {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sozi-container.fullscreen iframe {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.sozi-container.fullscreen .sozi-ui-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sozi-ui-controls.position-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sozi-ui-controls.position-top {
|
||||
top: 0;
|
||||
}
|
||||
225
src/sozi-ui.js
225
src/sozi-ui.js
|
|
@ -0,0 +1,225 @@
|
|||
if (window.NodeList && !NodeList.prototype.forEach) {
|
||||
NodeList.prototype.forEach = function(callback, thisArg) {
|
||||
thisArg = thisArg || window;
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
callback.call(thisArg, this[i], i, this);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (!Array.prototype.forEach) {
|
||||
Array.prototype.forEach = function(callback, thisArg) {
|
||||
thisArg = thisArg || window;
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
callback.call(thisArg, this[i], i, this);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
(function(arr) {
|
||||
arr.forEach(function(item) {
|
||||
if (item.hasOwnProperty('prepend')) {
|
||||
return;
|
||||
}
|
||||
Object.defineProperty(item, 'prepend', {
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
writable: true,
|
||||
value: function prepend() {
|
||||
var argArr = Array.prototype.slice.call(arguments),
|
||||
docFrag = document.createDocumentFragment();
|
||||
|
||||
argArr.forEach(function(argItem) {
|
||||
var isNode = argItem instanceof Node;
|
||||
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
|
||||
});
|
||||
|
||||
this.insertBefore(docFrag, this.firstChild);
|
||||
}
|
||||
});
|
||||
});
|
||||
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
|
||||
|
||||
var SoziUi = function(element, options) {
|
||||
this.element = element;
|
||||
|
||||
this.options = Object.assign({
|
||||
summary: true,
|
||||
position: 'bottom',
|
||||
allowFullscreen: true
|
||||
}, options || {});
|
||||
|
||||
this.options.lang = Object.assign({
|
||||
next: 'Suivant',
|
||||
previous: 'Précédent',
|
||||
fullscrenOn: 'Plein écran',
|
||||
fullscrenOff: 'Réduire'
|
||||
}, this.options.lang || {});
|
||||
|
||||
this.container = this.element.parentNode;
|
||||
this.document = this.element.contentWindow;
|
||||
this.sozi = this.document.sozi;
|
||||
this.player = this.sozi.player;
|
||||
this.document.document.querySelector('#sozi-framenumber').style.display = 'none';
|
||||
}
|
||||
|
||||
SoziUi.prototype.addControls = function() {
|
||||
var ui = `
|
||||
<div class="sozi-ui-element sozi-ui-player-previous">${this.options.lang.previous}</div>
|
||||
<div class="sozi-ui-element sozi-ui-frame-current"></div>
|
||||
<div class="sozi-ui-element sozi-ui-frame-number"></div>
|
||||
<div class="sozi-ui-element sozi-ui-player-next">${this.options.lang.next}</div>
|
||||
<div class="sozi-ui-element sozi-ui-frame-current-title"></div>
|
||||
`;
|
||||
|
||||
if (this.options.allowFullscreen) {
|
||||
var uiFullscreen = document.createElement('div');
|
||||
uiFullscreen.classList.add('sozi-ui-fullscreen');
|
||||
uiFullscreen.classList.add('sozi-ui-element');
|
||||
uiFullscreen.innerHTML = `
|
||||
<span class="sozi-ui-fullscreen-btn sozi-ui-fullscreen-on active">${this.options.lang.fullscrenOn}</span>
|
||||
<span class="sozi-ui-fullscreen-btn sozi-ui-fullscreen-off">${this.options.lang.fullscrenOff}</span>
|
||||
`
|
||||
|
||||
ui += uiFullscreen.outerHTML;
|
||||
}
|
||||
|
||||
if (this.options.summary) {
|
||||
var summary = document.createElement('select');
|
||||
summary.classList.add('sozi-ui-summary');
|
||||
summary.classList.add('sozi-ui-element');
|
||||
|
||||
this.sozi.document.frames.forEach(function(frame, i) {
|
||||
var item = document.createElement('option');
|
||||
item.classList.add('sozi-ui-summary-item');
|
||||
item.setAttribute('value', i);
|
||||
item.textContent = frame.title;
|
||||
|
||||
summary.appendChild(item);
|
||||
});
|
||||
|
||||
ui += summary.outerHTML;
|
||||
}
|
||||
|
||||
|
||||
controls = document.createElement('div');
|
||||
controls.classList.add('sozi-ui-controls');
|
||||
controls.innerHTML = ui;
|
||||
|
||||
if (this.options.position === 'bottom') {
|
||||
controls.classList.add('position-bottom');
|
||||
this.container.append(controls);
|
||||
} else {
|
||||
controls.classList.add('position-top');
|
||||
this.container.prepend(controls);
|
||||
}
|
||||
|
||||
this.uiFrameCurrent = controls.querySelector('.sozi-ui-frame-current');
|
||||
this.uiFrameCurrentTitle = controls.querySelector('.sozi-ui-frame-current-title');
|
||||
this.uiFrameNumber = controls.querySelector('.sozi-ui-frame-number');
|
||||
this.uiSummaryItems = controls.querySelectorAll('.sozi-ui-summary-item');
|
||||
this.uiPlayerPrevious = controls.querySelector('.sozi-ui-player-previous');
|
||||
this.uiPlayerNext = controls.querySelector('.sozi-ui-player-next');
|
||||
this.uiFullscreenOn = controls.querySelector('.sozi-ui-fullscreen-on')
|
||||
this.uiFullscreenOff = controls.querySelector('.sozi-ui-fullscreen-off')
|
||||
|
||||
this.uiFrameCurrent.textContent = this.currentFrame();
|
||||
this.uiFrameNumber.textContent = this.frameNumber();
|
||||
this.uiFrameCurrentTitle.textContent = this.currentFrameTitle();
|
||||
}
|
||||
|
||||
SoziUi.prototype.addEvents = function() {
|
||||
var that = this;
|
||||
|
||||
this.sozi.events.listen('framechange', function() {
|
||||
that.onFrameChange();
|
||||
that.element.focus();
|
||||
});
|
||||
|
||||
this.uiPlayerPrevious.addEventListener('click', function() {
|
||||
that.previousFrame();
|
||||
}, false);
|
||||
|
||||
this.uiPlayerNext.addEventListener('click', function() {
|
||||
that.nextFrame();
|
||||
}, false);
|
||||
|
||||
this.container.addEventListener('mouseenter', function() {
|
||||
that.element.focus();
|
||||
}, false)
|
||||
|
||||
if (this.options.allowFullscreen) {
|
||||
this.uiFullscreenOn.addEventListener('click', function() {
|
||||
that.fullscreen(true);
|
||||
}, false);
|
||||
|
||||
this.uiFullscreenOff.addEventListener('click', function() {
|
||||
that.fullscreen(false);
|
||||
}, false);
|
||||
|
||||
['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'].forEach(function(event) {
|
||||
document.addEventListener(event, function() {
|
||||
that.uiFullscreenOn.classList.toggle('active');
|
||||
that.uiFullscreenOff.classList.toggle('active');
|
||||
that.container.classList.toggle('fullscreen');
|
||||
that.element.focus();
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.options.summary) {
|
||||
this.uiSummaryItems.forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
var frame = parseInt(item.getAttribute('value'));
|
||||
that.sozi.events.fire('framechange', frame);
|
||||
that.player.moveToFrame(frame)
|
||||
that.element.focus();
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
SoziUi.prototype.frameNumber = function() {
|
||||
return this.sozi.document.frames.length;
|
||||
}
|
||||
|
||||
SoziUi.prototype.currentFrame = function() {
|
||||
return this.sozi.location.getFrameIndex() + 1;
|
||||
}
|
||||
|
||||
SoziUi.prototype.currentFrameTitle = function() {
|
||||
return this.sozi.document.frames[this.currentFrame() - 1].title;
|
||||
}
|
||||
|
||||
SoziUi.prototype.previousFrame = function() {
|
||||
return this.player.moveToPrevious();
|
||||
}
|
||||
|
||||
SoziUi.prototype.nextFrame = function() {
|
||||
return this.player.moveToNext();
|
||||
}
|
||||
|
||||
SoziUi.prototype.onFrameChange = function() {
|
||||
this.uiFrameCurrent.textContent = this.currentFrame();
|
||||
this.uiFrameCurrentTitle.textContent = this.currentFrameTitle();
|
||||
}
|
||||
|
||||
SoziUi.prototype.fullscreen = function(active) {
|
||||
if (active) {
|
||||
if (this.container.requestFullscreen) {
|
||||
this.container.requestFullscreen();
|
||||
} else if (this.container.webkitRequestFullscreen) {
|
||||
this.container.webkitRequestFullscreen();
|
||||
} else if (this.container.mozRequestFullScreen) {
|
||||
this.container.mozRequestFullScreen();
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue