/*! ==========================================================================
* pongstagr.am v3.0.4 jQuery Plugin | http://pongstr.github.io/pongstagr.am/
* ===========================================================================
* Copyright (c) 2014 Pongstr Ordillo. Licensed under MIT License.
* =========================================================================== */
+function ($) { "use strict";
var Pongstgrm = function (element, options) {
this.element = element
this.options = options
return this
}
Pongstgrm.defaults = {
// USER AUTHENTICATION
// ===========================
accessId: null
, accessToken: null
// DISPLAY OPTIONS
// ===========================
, count: 12
, likes: true
, comments: true
, timestamp: true
, effects: "scaling"
, show: "recent"
// HTML OPTIONS
// ===========================
, preload: "spinner"
, button: "madera-btn"
, buttontext: "Load more"
, column: "col-xs-12 col-sm-3 col-md-3 col-lg-3"
, likeicon: "glyphicon glyphicon-heart"
, muteicon: "glyphicon glyphicon-volume-off"
, videoicon: "glyphicon glyphicon-play"
, commenticon: "glyphicon glyphicon-comment"
, picture_size: 32
, show_counts: true
, profile_bg_img: null
, profile_bg_color: "#d9534f"
}
/* HTML TEMPLATES */
Pongstgrm.prototype.template = {
loadmore: function (options) {
var _load = '
Your browser does not support HTML5 Videos or MPEG-4 format.
'
, image = ''
modal += '
'
modal += '
'
modal += '
'
modal += '
'
// modal += '
'
modal += '
'
options.data.type !== 'video' ?
modal += image :
navigator.userAgent.match(/webkit/i) || navigator.userAgent.match(/(iPod|iPhone|iPad)/) ?
modal += video :
modal += alert + image
modal += '
'
modal += ''
modal += '
'
modal += '
'
modal += '
'
modal += '
'
$('#triggr-' + options.data.id).on('click', function(e) {
e.preventDefault()
$('body').append(modal)
$('#' + options.data.id)
.modal('show')
.on('shown.bs.modal', function() {
var video = document.getElementById(options.data.id +'-video')
Pongstgrm.prototype.preloadMedia({
imgid : '#' + options.data.id +'-full'
, loadr : '#' + options.data.id +'-full-loadr'
})
Pongstgrm.prototype.videoBtn({
trigger: '#play-pause'
, child: 'i'
, classes: 'glyphicon-play glyphicon-pause'
}, function () { video.paused === true ? video.play() : video.pause() })
Pongstgrm.prototype.videoBtn({
trigger: '#mute'
, child: 'i'
, classes: 'glyphicon-volume-up glyphicon-volume-off'
}, function() { video.muted === false ? video.muted = true : video.muted = false })
})
.on('hidden.bs.modal', function() {
$(this).remove()
})
})
return
}
}
Pongstgrm.prototype.preloadMedia = function (option) {
var $image = $(option.imgid)
, start = 0
$image.one('load', function () {
++start === $image.length &&
$(option.loadr).fadeOut()
$(this).addClass('fade')
}).each(function () {
this.complete && $(this).load()
})
return
}
Pongstgrm.prototype.videoBtn = function (option, callback) {
$(option.trigger).on('click', function(e) {
e.preventDefault(); callback();
$(option.child, this)
.toggleClass(option.classes)
})
return
}
Pongstgrm.prototype.stream = function () {
var element = this.element
, options = this.options
, apiurl = 'https://api.instagram.com/v1/users/'
, rcount = '?count=' + options.count + '&access_token=' + options.accessToken
function paginate (option) {
(option.url === undefined || option.url === null) ?
$('[data-paginate='+ option.show +']').on('click', function (e) {
$(this)
.removeClass()
.addClass('btn btn-default')
.attr('disabled','disabled')
e.preventDefault()
}) :
$('[data-paginate='+ option.show +']').on('click', function (e) {
e.preventDefault()
ajaxdata({
url: option.url
, opt: option.opt
})
$(this).unbind(e)
})
return
}
function media (data, option) {
$.each(data, function (a, b) {
var newtime = new Date(b.created_time * 1000)
, created = newtime.toDateString()
, defaults = {
dflt: option
, target: element
, data: {
id: b.id
, type: b.type
, video: b.videos && b.videos.standard_resolution.url
, image: b.images.standard_resolution.url
, caption: b.caption && b.caption.text
, username: b.user.username
, timestamp: created
, thumbnail: b.images.low_resolution.url
, likes_count: b.likes.count
, comments_count: b.comments.count
, comments_data: b.comments.data
, profile_picture:b.user.profile_picture
}
}
Pongstgrm.prototype.template.thumb (defaults)
Pongstgrm.prototype.preloadMedia({
imgid : '#' + option.show + '-' + b.id + '-thmb'
, loadr : '#' + option.show + '-' + b.id + '-thmb-loadr'
})
Pongstgrm.prototype.template.bsmodal (defaults)
})
}
function profile (data, option) {
Pongstgrm.prototype.template.profile ({
target: element
, bio: data.bio
, media: data.counts.media
, website: data.website
, follows: data.counts.follows
, username: data.username
, full_name: data.full_name
, followed_by: data.counts.followed_by
, picture_size: option.picture_size
, profile_bg_img: option.profile_bg_img
, profile_picture: data.profile_picture
, profile_bg_color: option.profile_bg_color
})
return
}
function ajaxdata (option) {
$.ajax({
url : option.url
, cache : true
, method : 'GET'
, dataType : 'jsonp'
, success : function(data){
option.opt.show !== 'profile' ?
media (data.data, option.opt) :
profile (data.data, option.opt)
option.opt.show !== 'profile' &&
paginate ({
show: option.opt.show
, url: data.pagination.next_url
, opt: option.opt
})
}
})
return
}
switch (options.show) {
case 'liked':
ajaxdata({
url : apiurl + 'self/media/liked' + rcount
, opt : options
})
break
case 'feed':
ajaxdata({
url: apiurl + 'self/feed' + rcount
, opt: options
})
break
case 'profile':
ajaxdata({
url: apiurl + options.accessId + '?access_token=' + options.accessToken
, opt: options
})
break
case 'recent':
ajaxdata({
url: apiurl + options.accessId + '/media/recent' + rcount
, opt: options
})
break
default:
ajaxdata({
url: 'https://api.instagram.com/v1/tags/' + options.show + '/media/recent' + rcount
, opt: options
})
}
return
}
Pongstgrm.prototype.create = function () {
var element = this.element
, options = this.options
$(element)
.attr('data-type', options.show)
.addClass('pongstagrm')
options.show !== 'profile' &&
Pongstgrm.prototype.template.loadmore({
show: options.show
, target: element
, button: options.button
, buttontext: options.buttontext
})
this.stream()
return
}
Pongstgrm.prototype.start = function () {
var option = this.options
if (option.accessId !== null || option.accessToken !== null) {
this.create(); return
}
}
// PONGSTAGR.AM PLUGIN DEFINITON
// =============================
$.fn.pongstgrm = function (option) {
var options = $.extend({}, Pongstgrm.defaults, option)
return this.each(function () {
var media = new Pongstgrm($(this)[0], options)
media.start()
})
}
// PONGSTAGR.AM DEFAULT OPTIONS
// =============================
$.fn.pongstgrm.defaults = Pongstgrm.options
}(window.jQuery);
' modal += ' '+ options.data.username +'' modal += '
' options.data.caption !== null ? modal += ''+ options.data.caption +'
': "" modal += '' modal += ' '+ b.from.username +'' modal += '
' modal += ''+ b.text +'
' modal += '