Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
265 lines (214 sloc) 8.19 KB
/**
* @jsx React.DOM
*/
var VideosOrder = React.createClass({
getInitialState: function(){
var currentField = this.props.orders.filter(function(field){
return field.field === this.props.currentSettings.PropertyName;
}, this);
return {
current: {
field: currentField[0],
direction: this.props.currentSettings.Direction
}
};
},
sortOrderChanged: function(event){
var target = event.target;
event.preventDefault();
if(event.target.nodeName === "SPAN")
{
target = event.target.parentElement;
}
var data = $(target).data(),
currentField = this.props.orders.filter(function(field){
return field.field === data.field;
}, this);
this.setState({ current: {
field: currentField[0],
direction: data.orderDirection
}});
$('#'+this.props.componentName)
.trigger("changeOrder", {
PropertyName: data.field,
Direction: data.orderDirection
});
},
render: function(){
var icon = (this.state.current.direction === this.props.directions.ascending)
? 'glyphicon glyphicon-sort-by-attributes'
: 'glyphicon glyphicon-sort-by-attributes-alt',
options = this.props.orders.map(function(field){
var active = field === this.state.current.field;
return (<div>
<li className="divider"></li>
<li className={active && this.state.current.direction == this.props.directions.ascending ? 'active' : '' }>
<a href="#" onClick={this.sortOrderChanged} data-order-direction={this.props.directions.ascending} data-field={field.field}>{field.label} <span className="glyphicon glyphicon-sort-by-attributes"></span></a>
</li>
<li className={active && this.state.current.direction == this.props.directions.descending ? 'active' : '' }>
<a href="#" onClick={this.sortOrderChanged} data-order-direction={this.props.directions.descending} data-field={field.field}>{field.label} <span className="glyphicon glyphicon-sort-by-attributes-alt"></span></a>
</li>
</div>);
}.bind(this));
return (
<div id={this.props.componentName} className="pull-right col-sm-4 col-md-4 col-lg-4 text-right order">
Kolejność:
<div className="btn-group">
<button type="button" className="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
{this.state.current.field.label} <span className={icon}></span> <span className="caret"></span>
</button>
<ul className="dropdown-menu" role="menu">
{options}
</ul>
</div>
</div>
);
}
});
var VideosList = React.createClass({
render: function(){
var self = this,
footerStyle = {
'margin-left': '10px'
},
lastElement = {
'margin-left': '10px',
'margin-right': '5px'
},
shortenCaption = function(caption){
if(caption && caption.length > self.props.captionLength)
{
var clipFrom = caption
.substring(0, self.props.captionLength)
.lastIndexOf(" ");
return caption.substring(0, clipFrom) + ' ...';
}
return caption;
},
prepareModal = function(video){
return (
<div className="modal fade bs-example-modal-lg" id={video.Id} tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 className="modal-title text-primary">{video.Title}</h4>
</div>
<div className="modal-body">
<p>{video.Description}</p>
</div>
</div>
</div>
</div>
);
},
player = function(video){
if(video.Url.toLowerCase().indexOf("vimeo") !== -1){
var link = '//player.vimeo.com/video/'+video.Id;
return (<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src={link} title="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>);
}
else if(video.Url.toLowerCase().indexOf("youtube") !== -1){
var link = 'https://www.youtube.com/embed/'+video.Id;
return (<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src={link} webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>);
}
return <div></div>;
},
videos = this.props.videos.map(function(video){
var caption = shortenCaption(video.Description),
playerFrame = player(video),
modalId = '#'+video.Id,
modal = prepareModal(video),
tags = video.Tags.map(function(tag){
var containerStyle = {
'display': 'inline',
'float': 'left'
};
return <div style={containerStyle}><span className="label label-info">{tag}</span></div>;
});
return (
<div className="video col-sm-4 col-lg-3 col-md-4">
<div className="thumbnail">
{playerFrame}
<div className="caption">
<h4><a href={video.Url} title={video.Title}>{video.Title}</a></h4>
<p data-toggle="modal" data-target={modalId} title={video.Description}>{caption}</p>
<div className="clearfix">
{tags}
</div>
</div>
<div>
<p className="pull-right" style={lastElement}><span className="glyphicon glyphicon-thumbs-down"></span>{video.Dislikes}</p>
<p className="pull-right" style={footerStyle}><span className="glyphicon glyphicon-thumbs-up"></span>{video.Likes} </p>
<p className="pull-right" style={footerStyle}><span className="glyphicon glyphicon-eye-open"></span>{video.Views}</p>
<p style={footerStyle}><a href={video.ChannelInfo.Link} title={video.ChannelInfo.Name}>{video.ChannelInfo.Name}</a></p>
</div>
</div>
{modal}
</div>
);
});
return (
<div className="row">
{videos}
</div>
);
}
});
var Pagination = React.createClass({
goTo: function(event){
var page = $(event.target).data().page;
event.preventDefault();
if(page === 0 || page === this.props.currentSettings.NumberOfPages + 1)
return;
$('#'+this.props.componentName)
.trigger('changePage', { Page: page });
},
render: function() {
var pages = [],
firstPage = (function(self){
var disabled = (self.props.currentSettings.Page === 1)
? 'disabled'
: '';
return <li className={disabled}><a href="#" data-page={self.props.currentSettings.Page-1} onClick={self.goTo}>«</a></li>;
})(this),
lastPage = (function(self){
var last = self.props.currentSettings.NumberOfPages,
disabled = (self.props.currentSettings.Page === last)
? 'disabled'
: '';
return <li className={disabled}><a href="#" data-page={self.props.currentSettings.Page+1} onClick={self.goTo}>»</a></li>;
})(this);
for (var current = this.props.currentSettings.Page,
all = this.props.currentSettings.NumberOfPages,
paginationSize = this.props.size,
toSubtract = (current%paginationSize === 0)
? 1
: current%paginationSize,
i = (current > paginationSize)
? current - toSubtract
: 1,
last = all,
stop = (i + paginationSize > last)
? last + 1
: i + paginationSize;
i < stop; i++) {
var active = (i === current)
? 'active'
: '';
pages.push(<li className={active}><a href="#" data-page={i} onClick={this.goTo}>{i}</a></li>);
};
pages.splice(0, 0, firstPage);
pages.push(lastPage);
return (
<div id={this.props.componentName} className="text-center">
<ul className="pagination">
{pages}
</ul>
</div>
);
}
});