it/itf/static/js/insidepage.js

480 lines
14 KiB
JavaScript
Raw Normal View History

2011-08-25 09:39:15 +00:00
$('#listLeft ul li a').live("click", function() {
2011-08-26 17:33:31 +00:00
if ($(this).hasClass("listLeftSelected")) {
return false;
}
$('.listLeftSelected').removeClass("listLeftSelected");
$(this).addClass('listLeftSelected');
2011-08-25 09:39:15 +00:00
var objId = $(this).attr("data-id");
var tab = $('.innerSelected').attr("data-slug");
var formData = getSearchFormJSON();
2011-10-24 00:19:04 +00:00
$('#textRight').text("Loading...");
$('#bottomRight').text("Loading...");
formData.object_id = objId;
var urlString = JSONtoQueryString(formData);
History.pushState(formData, "", urlString);
2011-08-25 09:39:15 +00:00
$.getJSON("/m/get_details", {
'tab': tab,
2011-08-25 09:39:15 +00:00
'object_id': objId
}, function(data) {
2011-10-05 15:36:58 +00:00
$('#imageInside').css({'backgroundImage': 'url(' + data.main_image.thumb + ')'});
$('#textRight').text(data.title).formatTitle();
2011-10-24 00:37:50 +00:00
var url = location.protocol + "//" + location.hostname + location.pathname + "?tab=" + $('.innerSelected').attr("data-slug") + "&object_id=" + objId;
var fb_url = url.replace("&", "&");
$('#fb_like').attr("data-href", fb_url);
2011-10-26 00:05:59 +00:00
$('#permalinkBtn').attr("href", url);
var searchTerm = $('.searchListField').val();
var html = data.html;
if (searchTerm != '') {
for (var i=0; i<searchTerm.split(" ").length; i++) {
html = highlightWordsNoCase(html, searchTerm.split(" ")[i]);
}
// html = html.replace(searchTerm, "<span class='highlight'>" + searchTerm + "</span>");
}
$('#bottomRight').html(html);
2011-08-25 09:39:15 +00:00
// console.log(data);
});
return false;
});
2011-11-07 10:21:12 +00:00
$('.lightboxNext').live("click", function(e) {
2011-11-07 10:26:40 +00:00
var $i = $(this).data("image");
$i.click();
2011-11-07 10:21:12 +00:00
});
$('.lightboxPrev').live("click", function(e) {
2011-11-07 10:26:40 +00:00
var $i = $(this).data("image");
$i.click();
2011-11-07 10:21:12 +00:00
});
2011-10-06 11:12:20 +00:00
$('.thumbsDetails').live("click", function(e) {
2011-10-11 12:45:41 +00:00
// alert($(this).attr("data-bigimage"));
var that = this;
2011-11-07 10:21:12 +00:00
var totalImages = $(this).parent().find(".thumbsDetails").length;
var thisIndex = $(this).index();
if (thisIndex < (totalImages - 1)) {
var hasNext = true;
2011-11-07 10:26:40 +00:00
var nextImage = $(this).parent().find(".thumbsDetails").eq(thisIndex + 1);
2011-11-07 10:21:12 +00:00
}
if (thisIndex > 0 && totalImages > 1) {
var hasPrev = true;
2011-11-07 10:26:40 +00:00
var prevImage = $(this).parent().find(".thumbsDetails").eq(thisIndex - 1);
2011-11-07 10:21:12 +00:00
}
2011-10-06 11:23:31 +00:00
var bigImage = $(this).attr("data-bigimage");
2011-10-11 12:42:00 +00:00
var $img = $('<img />').attr("src", bigImage);
showLightbox($img);
2011-10-11 12:45:41 +00:00
var title = $(this).hasAttr("title") ? $(this).attr("title") : '';
2011-11-07 10:21:12 +00:00
var $c = $('#lightboxContent');
2011-10-11 12:45:41 +00:00
if (title != '') {
2011-11-07 10:21:12 +00:00
var $caption = $('<div />').addClass("lightboxCaption").text(title).appendTo($c);
}
if (hasNext) {
2011-11-07 10:26:40 +00:00
var $next = $('<div />').addClass("lightboxNext").text("next").data("image", nextImage).appendTo($c);
2011-10-11 12:42:00 +00:00
}
2011-11-07 10:21:12 +00:00
if (hasPrev) {
2011-11-07 10:26:40 +00:00
var $prev = $('<div />').addClass("lightboxPrev").text("prev").data("image", prevImage).appendTo($c);
2011-11-07 10:21:12 +00:00
}
2011-10-06 11:12:20 +00:00
});
function hideLightbox() {
$('#lightbox, #lightboxPanel').fadeOut(400);
}
function showLightbox($content) {
2011-11-07 10:21:12 +00:00
if (!$('#lightbox').is("visible")) {
$('#lightbox, #lightboxPanel').fadeIn(400);
}
2011-10-25 21:50:23 +00:00
$('#lightboxContent').empty().append($content);
}
2011-10-06 11:18:42 +00:00
2011-09-28 11:46:08 +00:00
$('.toggleNext').live("click", function(e) {
e.preventDefault();
var $next = $(this).next();
if (!$next.is(":visible")) {
$next.slideDown();
} else {
$next.slideUp();
}
});
function highlightWordsNoCase(data, word)
{
var regex = new RegExp("(" + word + ")", "gi");
return data.replace(regex, "<span class='searchHighlight'>$1</span>");
}
2011-09-10 01:40:47 +00:00
/* Get a jquery <option> row for a sort field, requires s.operator, s.field_name, s.friendly_name */
function getOption(s) {
return $('<option />').val(s.operator + s.field_name).text(s.friendly_name);
}
/* Get a Jquery List Row object for an item - requires item.id and item.title*/
2011-08-25 09:39:15 +00:00
function getLi(item) {
2011-08-26 17:33:31 +00:00
var titleLength = 30;
2011-08-25 09:39:15 +00:00
var $li = $('<li />').addClass("tabListItem");
var $a = $('<a />').attr("href", '#').attr("data-id", item.id).appendTo($li);
2011-08-26 17:33:31 +00:00
// console.log(item.title.length);
var $span = $('<span />').text(item.title).appendTo($a);
2011-08-25 09:39:15 +00:00
return $li;
}
$(function() {
2011-11-01 04:10:12 +00:00
$('#lightbox, #closeImg').click(function() {
hideLightbox();
2011-10-06 11:18:42 +00:00
});
2011-11-01 04:10:12 +00:00
2011-09-10 01:40:47 +00:00
/* search button toggle */
$('.searchInnerField').hide();
$('#searchInner').toggle(function() {
$('.searchInnerField').slideDown();
}, function() {
$('.searchInnerField').slideUp();
});
/* search button end */
$('#aboutBtn').click(function() {
var about = $('#moduleAbout').html();
var $content = $('<div />').addClass("aboutLightbox").html(about);
showLightbox($content);
});
$('#addBtn').click(function() {
var add = $('#moduleAdd').html();
var $content = $('<div />').addClass("addLightbox").html(add);
showLightbox($content);
});
// $('#listLeft ul li a').eq(0).click();
2011-08-25 09:39:15 +00:00
// alert("hi");
2011-09-10 01:40:47 +00:00
2011-08-25 09:39:15 +00:00
$('.tabCategory').click(function() {
var $this = $(this);
if ($this.hasClass('.innerSelected')) {
return false;
}
2011-09-10 01:40:47 +00:00
2011-08-25 09:39:15 +00:00
$('.innerSelected').removeClass("innerSelected");
$this.addClass("innerSelected");
$('.displayedTab').removeClass("displayedTab");
var tab = $this.attr("data-slug");
2011-08-25 09:39:15 +00:00
var tabId = $this.attr("data-id");
$('#tabText_' + tabId).addClass("displayedTab");
2011-09-10 01:40:47 +00:00
doListLoading();
$.getJSON("/m/get_tab", {
'tab': tab,
2011-09-10 01:40:47 +00:00
// 'page_no': 1
2011-08-25 09:39:15 +00:00
}, function(data) {
2011-09-10 01:40:47 +00:00
// $('#loadingList').hide();
2011-10-10 10:30:18 +00:00
// stopListLoading(data.page);
2011-09-10 01:40:47 +00:00
/* begin if for has_list, ideally make into separate render function */
2011-09-28 11:27:19 +00:00
if (data.has_list) {
2011-09-10 01:40:47 +00:00
/* handle sort options on list */
$select = $('#orderBySelect');
$select.empty();
var sorts = data.sorts;
if (sorts.length == 0) { $select.hide(); } else { $select.show(); }
for (var j=0; j<sorts.length; j++) {
var s = sorts[j];
var $opt = getOption(s);
$select.append($opt);
}
/* end handle sort */
2011-10-10 10:30:18 +00:00
2011-10-24 00:04:15 +00:00
// $('#object_id').val('');
$('#page_no').val('1');
2011-09-10 01:40:47 +00:00
/* handle displaying initial list on page */
2011-10-10 10:30:18 +00:00
$('#listForm').submit();
// displayList(data.page.items);
2011-09-10 01:40:47 +00:00
/* end display initial list */
2011-09-28 11:27:19 +00:00
} else {
2011-09-10 01:40:47 +00:00
/* end if has_list */
$('#textRight').text(data.title).formatTitle();
2011-09-28 11:27:19 +00:00
var $html = getNoListHtml(data.page.items);
$('#bottomRight').empty().append($html);
History.pushState({'tab': tab}, "", "?tab=" + tab);
2011-09-28 11:27:19 +00:00
}
2011-08-25 09:39:15 +00:00
});
});
2011-09-10 01:40:47 +00:00
$('#orderBySelect').change(function(e) {
2011-09-28 16:48:29 +00:00
$('#listForm').submit();
2011-09-10 01:40:47 +00:00
});
2011-09-28 13:28:12 +00:00
$('#searchListIcon').click(function() {
2011-09-28 16:48:29 +00:00
$('#listForm').submit();
});
2011-09-28 16:48:29 +00:00
/*
$('.searchListField').keyup(function(e) {
e.preventDefault();
if (e.keyCode == 13) {
2011-09-28 16:48:29 +00:00
$('#listForm').submit();
}
});
2011-09-28 16:48:29 +00:00
*/
2011-09-28 16:48:29 +00:00
$('#listForm').submit(function(e) {
e.preventDefault();
2011-09-28 13:28:12 +00:00
doListLoading();
// var urlString = "?tab_id=" + $('.innerSelected').attr("data-id") + "&sort=" + sortString + "&search=" + searchTerm;
var formData = getSearchFormJSON();
var urlString = JSONtoQueryString(formData);
// console.log(urlString);
History.pushState(formData, "", urlString);
$.getJSON("/m/get_list", formData, function(data) {
2011-09-28 13:28:12 +00:00
stopListLoading(data);
displayList(data.items);
});
2011-09-28 13:28:12 +00:00
});
2011-09-10 01:40:47 +00:00
$('#triangleUp').click(function() {
goPreviousPage();
});
$('#triangleDown').click(function() {
goNextPage();
});
var State = History.getState();
// console.log(State);
var queryData = QueryStringToJSON(State.hash);
doState(queryData);
2011-08-25 09:39:15 +00:00
});
2011-09-10 01:40:47 +00:00
/*
this function will grow to be a monster. be gentle with it, ideally move state functions to a state namespace or so.
2011-10-10 10:30:18 +00:00
queryData:
object_id
tab
sort
search
page
*/
function doState(queryData) {
// console.log(queryData);
// var tab_slug = queryData.tab;
// alert(tab_slug);
2011-10-10 10:30:18 +00:00
if (queryData.hasOwnProperty("page")) {
$('#page_no').val(queryData.page);
}
if (queryData.hasOwnProperty("search")) {
$('#searchList').val(queryData.search);
}
if (queryData.hasOwnProperty("object_id")) {
$('#object_id').val(queryData.object_id);
}
if (queryData.hasOwnProperty("sort")) {
$('#orderBySelect').selectOption(queryData.sort);
}
//FIXME TO USE ABOUT / NO ABOUT LOGIC BASED ON USER PREFS.
2011-10-15 10:41:16 +00:00
/*
if (!queryData.hasOwnProperty("noAbout")) {
$('#aboutBtn').click();
}
2011-10-15 10:41:16 +00:00
*/
if (queryData.tab == undefined || queryData.tab == '') {
// alert("foo");
var $tab = $('.defaultTab');
} else {
var $tab = $('.tabCategory[data-slug=' + queryData.tab + ']');
if ($tab.length == 0) {
$tab = $('.defaultTab');
}
}
2011-10-10 10:30:18 +00:00
$tab.click();
}
/*
>>>var foo = {'var1': 'bar', 'var2': 'baz'}
>>> JSONtoQueryString(foo);
'?var1=bar&var2=baz'
*/
function JSONtoQueryString(obj) {
var s = "?";
for (var o in obj) {
if (obj.hasOwnProperty(o)) {
s += o + "=" + obj[o] + "&";
}
}
return s.substring(0, s.length - 1);
}
/*
>>>var foo = "/something/bla/?var1=bar&var2=baz";
>>>QueryStringToJSON(foo);
{'var1': 'bar', 'var2': 'baz'}
*/
function QueryStringToJSON(qstring) {
2011-10-03 02:53:38 +00:00
if (qstring.indexOf("?") == -1) {
return {};
}
var q = qstring.split("?")[1];
var args = {};
2011-10-03 02:53:38 +00:00
var vars = q.split('&');
// console.log(vars);
for (var i=0; i<vars.length; i++) {
var kv = vars[i].split('=');
var key = kv[0];
var value = kv[1];
args[key] = value;
}
return args;
}
2011-09-10 01:40:47 +00:00
function displayList(items) {
var state = QueryStringToJSON(History.getState().hash);
2011-10-10 10:30:18 +00:00
// console.log(state);
2011-09-10 01:40:47 +00:00
for (var i=0; i<items.length; i++) {
var $li = getLi(items[i]);
$('#listLeft ul').append($li);
}
if (state.object_id == undefined || state.object_id == '') {
$('#listLeft ul li a').eq(0).click();
} else {
2011-10-10 10:30:18 +00:00
var $a = $('#listLeft ul li a[data-id=' + state.object_id + ']');
if ($a.length > 0) {
$a.click();
} else {
$('#listLeft ul li a').eq(0).click();
}
}
2011-09-10 01:40:47 +00:00
}
function doListLoading() {
$('.tabListItem').remove();
2011-09-28 16:48:29 +00:00
$('#loadingList').show();
2011-09-10 01:40:47 +00:00
}
function stopListLoading(page) {
$('#currPageNo').text(page.page_no);
$('#totalPages').text(page.num_pages);
$('#loadingList').hide();
if (page.page_no == 1) {
$('#triangleUp').hide();
} else {
$('#triangleUp').show();
}
if (page.page_no == page.num_pages) {
$('#triangleDown').hide();
} else {
$('#triangleDown').show();
}
}
function goNextPage() {
var currPage = parseInt($('#currPageNo').text());
var totalPages = parseInt($('#totalPages').text());
if (currPage < totalPages) {
getPage(currPage + 1);
}
}
function goPreviousPage() {
var currPage = parseInt($('#currPageNo').text());
if (currPage > 1) {
getPage(currPage - 1);
}
}
function getPage(pageNo) {
$('#page_no').val(pageNo);
$('#listForm').submit();
/*
2011-09-10 01:40:47 +00:00
doListLoading();
$.getJSON("/m/get_list", {
'tab_id': $('.innerSelected').attr("data-id"),
'page': pageNo,
'sort': $('#orderBySelect').val()
}, function(page) {
stopListLoading(page);
displayList(page.items);
});
*/
2011-09-10 01:40:47 +00:00
}
2011-09-28 11:27:19 +00:00
function getNoListHtml(items) {
var $rhs = $('<div />');
for (var i=0; i<items.length; i++) {
var $obj = getNoListItemHtml(items[i]);
$rhs.append($obj);
}
return $rhs;
}
2011-09-28 16:48:29 +00:00
2011-09-28 11:27:19 +00:00
function getNoListItemHtml(item) {
if (item.hasOwnProperty("url")) {
var $ret = $('<div />').addClass("noListItem");
2011-09-28 11:46:08 +00:00
var $title = $("<div />").addClass("noListTitle").appendTo($ret);
var $a = $('<a />').attr("href", item.url).addClass("orangeLink").text(item.text).appendTo($title);
2011-09-28 11:27:19 +00:00
var $text = $("<div />").addClass("noListText").html(item.text).appendTo($ret);
} else {
var $ret = $('<div />').addClass("noListItem").addClass("collapsible");
var $title = $("<div />").addClass("orange").addClass("toggleNext").text(item.title).appendTo($ret);
var $text = $("<div />").addClass("noListText").addClass("hidden").html(item.text).appendTo($ret);
}
return $ret;
}
function getSearchFormJSON() {
return {
'tab': $('.innerSelected').attr("data-slug"),
2011-10-10 10:30:18 +00:00
'sort': $('#orderBySelect').val() != '' ? $('#orderBySelect').val() : '',
'search': $('#searchList').val(),
2011-10-10 10:30:18 +00:00
'page': $('#page_no').val(),
'object_id': $('#object_id').val()
}
}
2011-09-28 16:48:29 +00:00
jQuery.fn.formatTitle = function() {
var txt = $(this).text();
var fontSize;
// alert(txt.length);
2011-09-28 14:34:06 +00:00
if (txt.length < 32) {
2011-10-24 12:25:15 +00:00
fontSize = 40;
} else if (txt.length < 60) {
2011-09-28 14:24:14 +00:00
fontSize = 40;
} else if (txt.length < 100) {
fontSize = 30;
} else {
fontSize = 20;
}
this.css({'fontSize': fontSize + "px"});
}
2011-10-10 10:30:18 +00:00
jQuery.fn.selectOption = function(value) {
var that = this;
var options = that.find('option');
options.each(function() {
if ($(this).attr("value") == value) {
$(this).attr("selected", "selected");
return;
}
});
}
2011-10-11 12:47:21 +00:00
jQuery.fn.hasAttr = function(name) {
return this.attr(name) !== undefined;
};