Skip to content

Commit

Permalink
hide timelineitemcontainer if not needed
Browse files Browse the repository at this point in the history
  • Loading branch information
@edsilv
edsilv committed Jan 12, 2018
1 parent 43342bb commit 2b58412
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 59 deletions.
2 changes: 1 addition & 1 deletion dist/iiif-av-component.bundle.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion dist/iiif-av-component.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
// iiif-av-component v0.0.13 https://github.com/iiif-commons/iiif-av-component#readme

/// <reference types="base-component" />
declare namespace IIIFComponents {
Expand Down Expand Up @@ -70,6 +70,7 @@ declare namespace IIIFComponents {
pause(withoutUpdate?: boolean): void;
canvasClockUpdater(): void;
private _getTimelineContainer();
private _getTimelineItemContainer();
highPriorityUpdater(): void;
lowPriorityUpdater(): void;
updateMediaActiveStates(): void;
Expand Down
42 changes: 24 additions & 18 deletions dist/iiif-av-component.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
// iiif-av-component v0.0.13 https://github.com/iiif-commons/iiif-av-component#readme
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifAvComponent = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (global){
/// <reference types="exjs" />
Expand Down Expand Up @@ -277,29 +277,32 @@ var IIIFComponents;
if (!this.data)
return;
this._mediaElements = [];
var mediaItems = this.data.__jsonld.content[0].items; //todo: use canvas.getContent()
for (var i = 0; i < mediaItems.length; i++) {
var mediaItem = mediaItems[i];
var items = this.data.__jsonld.content[0].items; //todo: use canvas.getContent()
if (items.length === 1) {
this._getTimelineItemContainer().hide();
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
/*
if (mediaItem.motivation != 'painting') {
if (item.motivation != 'painting') {
return null;
}
*/
var mediaSource = void 0;
if (mediaItem.body.type == 'TextualBody') {
mediaSource = mediaItem.body.value;
if (item.body.type == 'TextualBody') {
mediaSource = item.body.value;
}
else if (Array.isArray(mediaItem.body) && mediaItem.body[0].type == 'Choice') {
else if (Array.isArray(item.body) && item.body[0].type == 'Choice') {
// Choose first "Choice" item as body
var tmpItem = mediaItem;
mediaItem.body = tmpItem.body[0].items[0];
mediaSource = mediaItem.body.id.split('#')[0];
var tmpItem = item;
item.body = tmpItem.body[0].items[0];
mediaSource = item.body.id.split('#')[0];
}
else {
mediaSource = mediaItem.body.id.split('#')[0];
mediaSource = item.body.id.split('#')[0];
}
/*
var targetFragment = (mediaItem.target.indexOf('#') != -1) ? mediaItem.target.split('#t=')[1] : '0, '+ canvasClockDuration,
var targetFragment = (item.target.indexOf('#') != -1) ? item.target.split('#t=')[1] : '0, '+ canvasClockDuration,
fragmentTimings = targetFragment.split(','),
startTime = parseFloat(fragmentTimings[0]),
endTime = parseFloat(fragmentTimings[1]);
Expand All @@ -311,8 +314,8 @@ var IIIFComponents;
mediaWidth = fragmentPosition[2],
mediaHeight = fragmentPosition[3];
*/
var spatial = /xywh=([^&]+)/g.exec(mediaItem.target);
var temporal = /t=([^&]+)/g.exec(mediaItem.target);
var spatial = /xywh=([^&]+)/g.exec(item.target);
var temporal = /t=([^&]+)/g.exec(item.target);
var xywh = void 0;
if (spatial && spatial[1]) {
xywh = spatial[1].split(',');
Expand All @@ -329,7 +332,7 @@ var IIIFComponents;
}
var positionLeft = parseInt(xywh[0]), positionTop = parseInt(xywh[1]), mediaWidth = parseInt(xywh[2]), mediaHeight = parseInt(xywh[3]), startTime = parseInt(t[0]), endTime = parseInt(t[1]);
var percentageTop = this._convertToPercentage(positionTop, this.canvasHeight), percentageLeft = this._convertToPercentage(positionLeft, this.canvasWidth), percentageWidth = this._convertToPercentage(mediaWidth, this.canvasWidth), percentageHeight = this._convertToPercentage(mediaHeight, this.canvasHeight);
var temporalOffsets = /t=([^&]+)/g.exec(mediaItem.body.id);
var temporalOffsets = /t=([^&]+)/g.exec(item.body.id);
var ot = void 0;
if (temporalOffsets && temporalOffsets[1]) {
ot = temporalOffsets[1].split(',');
Expand All @@ -339,7 +342,7 @@ var IIIFComponents;
}
var offsetStart = (ot[0]) ? parseInt(ot[0]) : ot[0], offsetEnd = (ot[1]) ? parseInt(ot[1]) : ot[1];
var itemData = {
'type': mediaItem.body.type,
'type': item.body.type,
'source': mediaSource,
'start': startTime,
'end': endTime,
Expand Down Expand Up @@ -480,7 +483,7 @@ var IIIFComponents;
$timelineItem.appendTo($lineWrapper);
mediaElementData.timelineElement = $timelineItem;
if (this.$playerElement) {
var $itemContainer = this.$playerElement.find('.timelineItemContainer');
var $itemContainer = this._getTimelineItemContainer();
$itemContainer.append($lineWrapper);
}
};
Expand Down Expand Up @@ -544,6 +547,9 @@ var IIIFComponents;
CanvasInstance.prototype._getTimelineContainer = function () {
return this.$playerElement.find('.timelineContainer');
};
CanvasInstance.prototype._getTimelineItemContainer = function () {
return this.$playerElement.find('.timelineItemContainer');
};
CanvasInstance.prototype.highPriorityUpdater = function () {
var $timelineContainer = this._getTimelineContainer();
$timelineContainer.slider({
Expand Down
4 changes: 2 additions & 2 deletions dist/iiif-av-component.min.js
View file

Large diffs are not rendered by default.

42 changes: 24 additions & 18 deletions examples/js/iiif-av-component.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// iiif-av-component v0.0.11 https://github.com/iiif-commons/iiif-av-component#readme
// iiif-av-component v0.0.13 https://github.com/iiif-commons/iiif-av-component#readme
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifAvComponent = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (global){
/// <reference types="exjs" />
Expand Down Expand Up @@ -277,29 +277,32 @@ var IIIFComponents;
if (!this.data)
return;
this._mediaElements = [];
var mediaItems = this.data.__jsonld.content[0].items; //todo: use canvas.getContent()
for (var i = 0; i < mediaItems.length; i++) {
var mediaItem = mediaItems[i];
var items = this.data.__jsonld.content[0].items; //todo: use canvas.getContent()
if (items.length === 1) {
this._getTimelineItemContainer().hide();
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
/*
if (mediaItem.motivation != 'painting') {
if (item.motivation != 'painting') {
return null;
}
*/
var mediaSource = void 0;
if (mediaItem.body.type == 'TextualBody') {
mediaSource = mediaItem.body.value;
if (item.body.type == 'TextualBody') {
mediaSource = item.body.value;
}
else if (Array.isArray(mediaItem.body) && mediaItem.body[0].type == 'Choice') {
else if (Array.isArray(item.body) && item.body[0].type == 'Choice') {
// Choose first "Choice" item as body
var tmpItem = mediaItem;
mediaItem.body = tmpItem.body[0].items[0];
mediaSource = mediaItem.body.id.split('#')[0];
var tmpItem = item;
item.body = tmpItem.body[0].items[0];
mediaSource = item.body.id.split('#')[0];
}
else {
mediaSource = mediaItem.body.id.split('#')[0];
mediaSource = item.body.id.split('#')[0];
}
/*
var targetFragment = (mediaItem.target.indexOf('#') != -1) ? mediaItem.target.split('#t=')[1] : '0, '+ canvasClockDuration,
var targetFragment = (item.target.indexOf('#') != -1) ? item.target.split('#t=')[1] : '0, '+ canvasClockDuration,
fragmentTimings = targetFragment.split(','),
startTime = parseFloat(fragmentTimings[0]),
endTime = parseFloat(fragmentTimings[1]);
Expand All @@ -311,8 +314,8 @@ var IIIFComponents;
mediaWidth = fragmentPosition[2],
mediaHeight = fragmentPosition[3];
*/
var spatial = /xywh=([^&]+)/g.exec(mediaItem.target);
var temporal = /t=([^&]+)/g.exec(mediaItem.target);
var spatial = /xywh=([^&]+)/g.exec(item.target);
var temporal = /t=([^&]+)/g.exec(item.target);
var xywh = void 0;
if (spatial && spatial[1]) {
xywh = spatial[1].split(',');
Expand All @@ -329,7 +332,7 @@ var IIIFComponents;
}
var positionLeft = parseInt(xywh[0]), positionTop = parseInt(xywh[1]), mediaWidth = parseInt(xywh[2]), mediaHeight = parseInt(xywh[3]), startTime = parseInt(t[0]), endTime = parseInt(t[1]);
var percentageTop = this._convertToPercentage(positionTop, this.canvasHeight), percentageLeft = this._convertToPercentage(positionLeft, this.canvasWidth), percentageWidth = this._convertToPercentage(mediaWidth, this.canvasWidth), percentageHeight = this._convertToPercentage(mediaHeight, this.canvasHeight);
var temporalOffsets = /t=([^&]+)/g.exec(mediaItem.body.id);
var temporalOffsets = /t=([^&]+)/g.exec(item.body.id);
var ot = void 0;
if (temporalOffsets && temporalOffsets[1]) {
ot = temporalOffsets[1].split(',');
Expand All @@ -339,7 +342,7 @@ var IIIFComponents;
}
var offsetStart = (ot[0]) ? parseInt(ot[0]) : ot[0], offsetEnd = (ot[1]) ? parseInt(ot[1]) : ot[1];
var itemData = {
'type': mediaItem.body.type,
'type': item.body.type,
'source': mediaSource,
'start': startTime,
'end': endTime,
Expand Down Expand Up @@ -480,7 +483,7 @@ var IIIFComponents;
$timelineItem.appendTo($lineWrapper);
mediaElementData.timelineElement = $timelineItem;
if (this.$playerElement) {
var $itemContainer = this.$playerElement.find('.timelineItemContainer');
var $itemContainer = this._getTimelineItemContainer();
$itemContainer.append($lineWrapper);
}
};
Expand Down Expand Up @@ -544,6 +547,9 @@ var IIIFComponents;
CanvasInstance.prototype._getTimelineContainer = function () {
return this.$playerElement.find('.timelineContainer');
};
CanvasInstance.prototype._getTimelineItemContainer = function () {
return this.$playerElement.find('.timelineItemContainer');
};
CanvasInstance.prototype.highPriorityUpdater = function () {
var $timelineContainer = this._getTimelineContainer();
$timelineContainer.slider({
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "iiif-av-component",
"version": "0.0.12",
"version": "0.0.13",
"description": "",
"main": "index.js",
"types": "./dist/iiif-av-component.d.ts",
Expand Down
3 changes: 2 additions & 1 deletion src/AVComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ namespace IIIFComponents {

for (let i = 0; i < canvases.length; i++) {
this._initCanvas(canvases[i]);
}
}

}

private _getCanvases(): Manifesto.ICanvas[] {
Expand Down
42 changes: 25 additions & 17 deletions src/CanvasInstance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,34 +37,38 @@ namespace IIIFComponents {

this._mediaElements = [];

const mediaItems = (<any>this.data).__jsonld.content[0].items; //todo: use canvas.getContent()
const items = (<any>this.data).__jsonld.content[0].items; //todo: use canvas.getContent()

for (let i = 0; i < mediaItems.length; i++) {
if (items.length === 1) {
this._getTimelineItemContainer().hide();
}

for (let i = 0; i < items.length; i++) {

const mediaItem = mediaItems[i];
const item = items[i];

/*
if (mediaItem.motivation != 'painting') {
if (item.motivation != 'painting') {
return null;
}
*/

let mediaSource;

if (mediaItem.body.type == 'TextualBody') {
mediaSource = mediaItem.body.value;
} else if (Array.isArray(mediaItem.body) && mediaItem.body[0].type == 'Choice') {
if (item.body.type == 'TextualBody') {
mediaSource = item.body.value;
} else if (Array.isArray(item.body) && item.body[0].type == 'Choice') {
// Choose first "Choice" item as body
const tmpItem = mediaItem;
mediaItem.body = tmpItem.body[0].items[0];
const tmpItem = item;
item.body = tmpItem.body[0].items[0];

mediaSource = mediaItem.body.id.split('#')[0];
mediaSource = item.body.id.split('#')[0];
} else {
mediaSource = mediaItem.body.id.split('#')[0];
mediaSource = item.body.id.split('#')[0];
}

/*
var targetFragment = (mediaItem.target.indexOf('#') != -1) ? mediaItem.target.split('#t=')[1] : '0, '+ canvasClockDuration,
var targetFragment = (item.target.indexOf('#') != -1) ? item.target.split('#t=')[1] : '0, '+ canvasClockDuration,
fragmentTimings = targetFragment.split(','),
startTime = parseFloat(fragmentTimings[0]),
endTime = parseFloat(fragmentTimings[1]);
Expand All @@ -77,8 +81,8 @@ namespace IIIFComponents {
mediaHeight = fragmentPosition[3];
*/

const spatial = /xywh=([^&]+)/g.exec(mediaItem.target);
const temporal = /t=([^&]+)/g.exec(mediaItem.target);
const spatial = /xywh=([^&]+)/g.exec(item.target);
const temporal = /t=([^&]+)/g.exec(item.target);

let xywh;
if (spatial && spatial[1]) {
Expand Down Expand Up @@ -106,7 +110,7 @@ namespace IIIFComponents {
percentageWidth = this._convertToPercentage(mediaWidth, this.canvasWidth),
percentageHeight = this._convertToPercentage(mediaHeight, this.canvasHeight);

const temporalOffsets = /t=([^&]+)/g.exec(mediaItem.body.id);
const temporalOffsets = /t=([^&]+)/g.exec(item.body.id);

let ot;
if(temporalOffsets && temporalOffsets[1]) {
Expand All @@ -119,7 +123,7 @@ namespace IIIFComponents {
offsetEnd = (ot[1]) ? parseInt(<string>ot[1]) : ot[1];

const itemData: any = {
'type': mediaItem.body.type,
'type': item.body.type,
'source': mediaSource,
'start': startTime,
'end': endTime,
Expand Down Expand Up @@ -305,7 +309,7 @@ namespace IIIFComponents {
mediaElementData.timelineElement = $timelineItem;

if (this.$playerElement) {
const $itemContainer: JQuery = this.$playerElement.find('.timelineItemContainer');
const $itemContainer: JQuery = this._getTimelineItemContainer();
$itemContainer.append($lineWrapper);
}
}
Expand Down Expand Up @@ -392,6 +396,10 @@ namespace IIIFComponents {
return this.$playerElement.find('.timelineContainer');
}

private _getTimelineItemContainer(): JQuery {
return this.$playerElement.find('.timelineItemContainer');
}

public highPriorityUpdater(): void {

const $timelineContainer: JQuery = this._getTimelineContainer();
Expand Down

0 comments on commit 2b58412

Please sign in to comment.