Skip to content

Commit

Permalink
added lightbox like support
Browse files Browse the repository at this point in the history 
added readme.markdown
  • Loading branch information
@johnnypez
johnnypez committed Sep 7, 2011
1 parent 3adf017 commit 5279f63
Show file tree
Hide file tree
Showing 7 changed files with 249 additions and 172 deletions.
Empty file removed README
View file
Empty file.
Binary file added images/nextlabel.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/prevlabel.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/transparent.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
366 changes: 194 additions & 172 deletions javascripts/syrio.js
View file
@@ -1,175 +1,197 @@
if(!com) var com = {};
if(!com.betapond) com.betapond = {};
// jQuery Plugin for really basic modal window effects
// Syrio - The First Sword to the Sealord of Braavos
// version 0.1.2, 09 August 2011
// by Chris Gallagher
//$.syrio("", {html_content: gallery_item_html, parse_fbml: true }, function(){});
(function($) {
$.syrio = function(element, options) {
var defaults = {

com.betapond.photo_claim = function(options){

var defaults = {
};
var _t = this;
this.settings = $.extend({}, defaults, options);

this.current_photo = null;
this.photosets = $('.photosets li.photoset');
this.photos = $('.photos a.photo[rel=photoset]');
this.claim_form = $('.photos form');
this.claim_button = $('<button class="claim_button">'+I18n.claim_button_text+'</button>').click(function(){_t.claim_current_photo();});
this.entry_form = $('.new_entry form');
this.time_form = $('form#filter_time');
this.form_errors = [];
//init fbapp
this.fb = new com.betapond.bookface({perms:Settings.facebook.permissions.split(/, ?/)});
this.fb.init(function(){ _t.init(); });
};
overlay_div: 'modal_overlay',
modal_div: 'modal_display',
close_button : 'close_modal',
close_enabled: true,
modal_title: "",
parse_fbml: false,
html_content: "",
overlay: false,
after_open: function(el){ /** nothing **/ },
after_close: function(el){ /** nothing **/ },
show_nav: false,
next: "Next",
prev: "Prev"
};

com.betapond.photo_claim.prototype = {
init: function(){
_t = this;

$('a.vote').click(function(e){e.preventDefault(); _t.vote(this);});

$.syrio('.photos a.photo', {
html_content: function(clicked){ return _t.modal_content_for(clicked) },
parse_fbml:true,
overlay: false,
after_open: function(el){
_t.current_photo = el;
}
});

this.entry_form.submit(function(){ return _t.validate_entry_form(this); });

this.time_form.find('#time').change(function(){
_t.time_form.submit();
});

$("#close_flash").click(function(){
$("#flash_messages").fadeOut("slow");
});


_t.share_claimed_photo();

},

modal_content_for: function(element){
var photo = $(element);
if(photo.hasClass('claimed')){
var photo_id = element.id.match(/photo_([0-9]+)/)[1];
var response = null;
$.ajax({url:'/entries/' + photo_id + '?nolayout=true', async:false, success: function(data){
response = data;
}});
return response;
}
else{
var content = $('<div />').addClass('modal_claim');
var image = $('<img width="500" height="333"/>').attr('src', photo.attr('href'));
var title = $('<h3 />').text(photo.find('span').text());
var claim_text = $('<div class="claim_text" />').html(I18n.claim_text);
return content.append(image, title, claim_text, this.claim_button);
}
},

share_claimed_photo: function(){
var _t = this;
var cta_link = $("#photo_link").val();
var thumbnail_src = $("#thumbnail_src").val();

if ($('#share_my_photo').val() === "true"){
FB.ui(
{
method: 'stream.publish',
attachment: {
name: I18n.claimed.title,
caption: I18n.claimed.caption,
description: I18n.claimed.description,
href: cta_link,
media: [
{
type: 'image',
href: cta_link,
src: thumbnail_src
}
]
},
action_links: [
{
text: I18n.claimed.cta_label,
href: cta_link
var plugin = this;
plugin.settings = {};

plugin.el = $(element);

plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
plugin.el.click(function(e){
e.preventDefault();
plugin.show(this);
});

if(plugin.el.length > 1 && plugin.settings.show_nav === true){

var next_div = $('<div class="syrio_next" />')
.html("<span>"+plugin.settings.next+"</span>")
.click(function(){ plugin.next(); })
.hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');});

var prev_div = $('<div class="syrio_prev" />')
.html("<span>"+plugin.settings.prev+"</span>")
.click(function(){ plugin.prev(); })
.hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');});

$("#modal_content").parent().prepend(next_div, prev_div);
}
};

plugin.show = function(clicked){
plugin.centre_the_modal(function(){
plugin.close_controls();
plugin.set_modal_title();
plugin.show_overlay();
plugin.append_html_content(clicked);
plugin.bind_control_clicks();
if(plugin.el.length > 1 && plugin.settings.show_nav === true){
var current_index = plugin.el.index($('.syrio_active'));
if(current_index == 0){
$(".syrio_prev").addClass('first');
}
else if(current_index == (plugin.el.length - 1)){
$(".syrio_next").addClass('last');
}
}
plugin.settings.after_open.apply(plugin, [clicked]);
});
};

plugin.next = function(){
var current_index = plugin.el.index($('.syrio_active'));
var next_item = plugin.el[current_index + 1];
if( next_item !== undefined){
plugin.append_html_content(next_item);
}
((current_index + 1) >= plugin.el.length) ? $(".syrio_next").addClass('last') : $(".syrio_next").removeClass('last');
$(".syrio_prev").removeClass('first');
};

plugin.prev = function(){
var current_index = plugin.el.index($('.syrio_active'));
var prev_item = plugin.el[current_index - 1];
if( prev_item !== undefined){
plugin.append_html_content(prev_item);
}
((current_index - 1) <= 0) ? $(".syrio_prev").addClass('first') : $(".syrio_prev").removeClass('first');
$(".syrio_next").removeClass('last');
};

plugin.close_controls = function(){
if (plugin.settings.close_enabled){
$("#" + plugin.settings.overlay_div).click(function(){
plugin.close_all();
});

$("#" + plugin.settings.close_button).click(function(){
plugin.close_all();
});

$(document).keyup(function(e) {
if (e.keyCode == 13) { plugin.close_all(); }
if (e.keyCode == 27) { plugin.close_all(); }
});
}
else{
$("#close_modal").hide();
}
};

plugin.add_overlay = function(){
if($('#' + plugin.settings.overlay_div).length < 1){
var overlay = $("<div />").attr("id", plugin.settings.overlay_div);
$('body').prepend(overlay);
}
]
},
function() {
});
}
},

claim_current_photo: function(){
var photo_id = this.current_photo.id.match(/photo_([0-9]+)/)[1];
this.claim_form.get(0).photo_id.value = photo_id;
if( confirm(I18n.claim_confirm_message)){
var _t = this;
this.fb.while_connected(function(){
var user_field = $('<input type="hidden" name="user[fbid]" />').val(_t.fb.login.session.uid);
var access_token = $('<input type="hidden" name="user[access_token]" />').val(_t.fb.login.session.access_token);
_t.claim_form.append(user_field, access_token);
var spinner = new Spinner({
lines: 12, // The number of lines to draw
length: 20, // The length of each line
width: 7, // The line thickness
radius: 10, // The radius of the inner circle
color: '#fff', // #rbg or #rrggbb
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
shadow: true // Whether to render a shadow
}).spin();
var spinner_container = $("<div class='spinner' />");
$('#modal_content').append(spinner_container);
spinner_container.get(0).appendChild(spinner.el);
$('.claim_button').attr("disabled", "disabled");
_t.claim_form.submit();
});
}
},

validate_entry_form: function(form){
this.form_errors = [];
$(form).find('input[name=_method]').remove();
return (this.form_errors.length > 0) ? false : true;
},

vote: function(el){
var _t = this;
var link = $(el);
var photo_id = link.attr('rel').match(/photo_([0-9]+)/)[1];
var phase = '';
var matches = false;
if(matches = link.attr('class').match(/phase_[0-9]+/)){
phase = matches[0];
this.fb.while_connected(
function(){
var params = {
phase: phase,
fbid: _t.fb.login.session.uid
};
$.post('/photos/'+photo_id+'/vote', params, function(data){ _t.after_vote(data, link, photo_id);});
},
{with_permissions:[]} //basic perms needed only
);
}
else{
alert('Sorry, there was an error. Your vote could not be counted. - Competition Phase Error')
return false;
}
},

after_vote: function(data, link, photo_id){
if(data.status == 'error'){
alert(data.error);
}
else{
link.addClass('voted').unbind('click');
link.find('#photo_' + photo_id + '_votes_count').text(data.votes);
}
}
};
};

plugin.set_modal_title = function(){
if(plugin.settings.modal_title !== "")
$("#syrio_title").html(plugin.settings.modal_title);
};

plugin.centre_the_modal = function(callback){
var modal_ele = $("#" + plugin.settings.modal_div);
//this part is facebook specfic - if not in facebook then use scrolltop.
var page_info;
//hackety hack hack hack for bug - http://bugs.developers.facebook.net/show_bug.cgi?id=19946
if (document.location.protocol === "https:"){
$(modal_ele).css({top : "20px"});
$(modal_ele).css("left", (($(window).width() - modal_ele.outerWidth()) / 2) + $(window).scrollLeft() + "px");
callback();
}
else{
FB.Canvas.getPageInfo(function(info){
page_info = info;
$(modal_ele).css({top : page_info.scrollTop + "px"});
$(modal_ele).css("left", (($(window).width() - modal_ele.outerWidth()) / 2) + $(window).scrollLeft() + "px");
callback();
});
}

};

plugin.show_overlay = function() {
if(plugin.settings.overlay == true) plugin.add_overlay();
$("#" + plugin.settings.overlay_div).show();
$("#" + plugin.settings.modal_div).show();
};

plugin.append_html_content = function(clicked) {
if (plugin.settings.html_content != ""){
var content = "";
if(typeof(plugin.settings.html_content == "function")){
content = plugin.settings.html_content.apply(plugin, [clicked]);
}
else{
content = plugin.settings.html_content;
}
$("#modal_content").html(content);
plugin.parse_fbml();
$('.syrio_active').removeClass('syrio_active');
$(clicked).addClass('syrio_active');
}
};

plugin.bind_control_clicks = function() {

};

plugin.parse_fbml = function() {
if (plugin.settings.parse_fbml){
FB.XFBML.parse(document.getElementById('modal_content'));
}
};

plugin.close_all = function() {
$("#" + plugin.settings.overlay_div).hide();
$("#" + plugin.settings.modal_div).hide();
$('.syrio_active').removeClass('syrio_active');
plugin.settings.after_close.apply(plugin, [plugin.el]);
};

plugin.init();
};

$.fn.syrio = function(options) {
return this.each(function() {
if (undefined == $(this).data('syrio')) {
var plugin = new $.syrio(this, options);
$(this).data('syrio', plugin);
}
});
};

})(jQuery);
25 changes: 25 additions & 0 deletions readme.markdown
View file
@@ -0,0 +1,25 @@
#Are you for Syrio?

##Usage

Add the following to your document head
```
<link href="stylesheets/syrio.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/syrio.js" type="text/javascript"></script>
```

Then in your application.js or an inline script tag in your document head
```
var options = {
close_enabled: true,
modal_title: "",
parse_fbml: false,
html_content: "",
overlay: false,
after_open: function(clicked){ },
after_close: function(clicked){ },
show_nav: false
};
$.syrio("button.modal", options);
```

0 comments on commit 5279f63

Please sign in to comment.