/*******************************************************************************
* Plugin koji pozicionira element na stranici
* @param alignToElementSelector sa kojim elementom treba poravnati layer
*******************************************************************************/
(function($) {
$.fn.ccalign = function(alignToElementSelector, options) {
var static_box = null;
if (alignToElementSelector instanceof jQuery) {
static_box = alignToElementSelector;
}else {
static_box = $(alignToElementSelector);
}
var defaultPos = findWhere2Position(this, static_box);
options = $.extend(defaultPos, options);
// define defaults and override with options, if available
// by extending the default options, we don't modify the argument
options = $.extend({
bringToFront: true,//ako treba element podignuti u top layer po z-index-u, ako ovo nije selekcionirano samo se pozicionira
//(under|above|top) above: pomicni box se postavlja iznad staticnog,
//under: pomicni box se stavlja ispod staticnog,
//top: pomicni box je ispod ali su gornji rubovi poravnati
valign: "under",
//kako poravnati staticni i pomicni box (left|center|right|rightOnLeft).
//"left": poravnati lijeve rubove,
//"right": pravnati lijevi rub pomicnog boxa sa desnim staticnog,
//"center": poravnati sredine box-ova,
//rightOnLeft: poravnati desni rub pomicnog boxa sa lijevim staticnog
align: "left",//ako je align center box bi trebao imati definirane dimenzije u css-u
//alowNegativePosition: false,//da li je dozvoljeno da box ide u negativnu vrijednost, ako se poravnava po sredini
useOuterDimensions: false, //da li se koriste vanjske dimenzije (sa marginama) elementa sa kojim se poravnava
useMargins: true//izmjeriti dimenzije sa marginama
}, options);
var sb_width = (options.useOuterDimensions)?
static_box.outerWidth({ margin: options.useMargins }):
static_box.innerWidth({ margin: options.useMargins });
var sb_height = (options.useOuterDimensions)?
static_box.outerHeight({ margin: options.useMargins }):
static_box.innerHeight({ margin: options.useMargins });
var coordinates = static_box.offset();
var sbX = coordinates.left;//default x referentna tocka na staticnom boxu
var sbY = coordinates.top;//default y referentna tocka na staticnom box-u
var x = sbX;//default x vrijednost, poravnat kraj sa staticnim boxom
var y = sbY;//default y vrijednost
var maxZ = $.cc.getMaxZ();//default z index
//trazi maksimalni z index da bi mogao kako dovesti napred
//$('.__ccOverlayClass:visible').each(function() {
// maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || maxZ);
//});
//poravnava sve selektirane elemente
return this.each(function(){
var db_width = (options.useOuterDimensions)?
$(this).outerWidth({ margin: options.useMargins }):
$(this).innerWidth({ margin: options.useMargins });
var db_height = (options.useOuterDimensions)?
$(this).outerHeight({ margin: options.useMargins }):
$(this).innerHeight({ margin: options.useMargins });
//pomicni box je ispod staticnog
if (options.align == "left") {
x = sbX;
}else if (options.align == "right") {
x = sbX + sb_width;
}else if (options.align == "center") {
x = sbX + sb_width/2 - db_width/2;
}else if (options.align == "rightOnLeft") {
x = sbX - db_width;
}else {
alert("Unknown 'align' option: " + align);
}
if (options.valign == "under"){
y = sbY + sb_height;
}else if (options.valign == "top"){
y = sbY;
}else if (options.valign == "above"){
y = sbY - db_height;
}else {
alert("Unknown 'valign' option: " + valign);
}
if (options.bringToFront) {
if (!$(this).hasClass($.cc.overlayClass)) {
$(this).addClass($.cc.overlayClass)
}
maxZ++;
$(this).css("zIndex", maxZ);
}
$(this).css("position","absolute");
$(this).css("top",y);
$(this).css("left",x);
});
}
/**
* pozicionira blok na zadanu lokaciju
*/
$.fn.ccposition = function(position) {
return this.each(function(){
var self = $(this);
var maxZ = jQuery.cc.getMaxZ();
if (!self.hasClass(jQuery.cc.overlayClass)) {
self.addClass(jQuery.cc.overlayClass);
}
self.css("zIndex", maxZ);
self.css("position", "absolute");
self.css("top", position.top);
self.css("left", position.left);
});
}
/**
* unistava parametre postavljene od align funkcije
*/
$.fn.ccOverlayDestroy = function() {
$(this).removeClass($.cc.overlayClass);
$(this).css("zIndex", "");
$(this).css("position","");
$(this).css("top","");
$(this).css("left","");
}
/**
* Pronalazi gdje je najbolje smjestiti pomicni box,
* te eventualno skrola stranicu kako bi se isti bolje vidio
* @param movingBox jquery objekt sa tocno jednim elementom
* @param staticBox box sa kojim treba poravnati
*/
function findWhere2Position(movingBox, staticBox) {
var alignOptions = {};
//var dheight = $(document).height();
//var dwidth = $(document).width();
var wheight = $(window).height();
var wwidth = $(window).width();
var wScrollLeft = $(window).scrollLeft();
var wScrollTop = $(window).scrollTop();
var sbOffset = staticBox.offset();
var sbheight = staticBox.height();
//var sbwidth = staticBox.width();
var sbWievportTop = sbOffset.top - wScrollTop;
var sbWievportLeft = sbOffset.left - wScrollLeft;
var mbheight = movingBox.height();
var mbwidth = movingBox.width();
//provjerava prvo da li ima dovoljno mjesta da se otvori u vidljivom dijelu
//ekrana bez da se mora scrollati
//provjerava prvo vertikalnu poziiju
if (sbWievportTop + sbheight + mbheight <= wheight) {//moze se otvoriti prema dolje
alignOptions.valign = "under";
}else if (sbWievportTop - mbheight >= 0) {//moze se otvoriti prema gore
alignOptions.valign = "above";
}else if (sbWievportTop + mbheight <= wheight) {//moze se otvoriti prema dolje sa top-a
alignOptions.valign = "top";
}else {
alignOptions.valign = "under";
alignOptions.yAditionalScroll = sbWievportTop + sbheight + mbheight - wheight;
}
//zatim horozontalnu
if (sbWievportLeft + mbwidth <= wwidth) {
alignOptions.align = "left";
}else if (sbWievportLeft - mbwidth >= 0) {
alignOptions.align = "rightOnLeft";
}else {
alignOptions.align = "left";
alignOptions.xAditionalScroll = sbWievportLeft + mbwidth - wwidth;
}
return alignOptions;
}
})(jQuery);
/******************************************************************************
*Simple tooltip overlay kojeg nije postojalo :(
*Kreira layer iz html-a
*****************************************************************************/
(function($) {
$.widget("ui.simpleoverlay", {
_init: function() {
this.options = $.extend(
{draggable: null,//element, jquery expression ili selektor elementa koji sluzi kao drag handle
alignOptions: {},
alignTo: this.options.opener,//po defaultu se aligna sa elementom koji ga otvara
position: null,//{left: px, top: px} pozicija popupa, ima prednost pred alignTo parametrom
toggleSpeed: "fast",
resizable: false,
autohide: true,//skriva overlay na bilo koji klik na body
close: null //element na koji se klikom zatvara overlay
},
this.options);
var self = this;//this je objekt koji sadrzi jquery i opcije u sebi
var options = this.options;
this.element.hide();
self.ccOverlayVisible = false;
if (options.opener) {
$(options.opener).click(function() {
self.toggle();
});
}
if (options.close) {
var closeElem = $(this.element).find(options.close);
closeElem.click(function() {
self.close();
});
}
if (options.draggable) {
this.element.draggable(
{
handle: options.draggable,
drag: function(event, ui) {
if (self.ieframe) {
self.ieframe.css({left: ui.position.left,
top: ui.position.top, cursor: "move"})
}
}
});
}
},
/**
* Cini popu vidljivim ili nevidljivim, ovisno o prethodnom stanju
*/
toggle: function(){
options = this.options;
var self = this;
if (self.ccOverlayVisible) {
self.close();
}else {
self.open();
}
},
/**
* Zatvara popup elemente
*/
close: function(callback){
var options = this.options;
var self = this;
this.element.hide(options.toggleSpeed, callback);
self.ccOverlayVisible = false;
if (self.ieframe) {
self.ieframe.remove();
self.ieframe = null;
}
if (options.resizable) {
self.element.resizable("destroy");
}
},
/**
* Otvara popup elemente
*/
open: function(){
var options = this.options;
var self = this;
if (options.alignTo || options.position) {
if (options.position) {
self.element.ccposition(options.position);
}else {
self.element.ccalign(options.alignTo, options.alignOptions);
}
var jpopup = this.element;
this.element.show(options.toggleSpeed, function() {
// http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx
//dodaje iframe jedan layer ispod zbog hovera na select boxovima IE6
if ($.browser.msie && $.browser.version < 7) {
//funkcija kad se otvori popup do kraja
var coordinates = jpopup.offset();
var popup_width = jpopup.outerWidth({ margin: true });
var popup_height = jpopup.outerHeight({ margin: true });
self.ieframe = $('')
.css({ position: "absolute",
zIndex: self.element.css("zIndex") - 1,
left: coordinates.left, top: coordinates.top,
width: popup_width, height: popup_height})
.insertAfter(self.element);
}
if (options.autohide) {
function listener() {
$("body").unbind('click', listener);
self.close();
}
$("body").click(listener);
}
if (!options.position) self.element.ensureVisible();
});
}else {
this.element.show(options.toggleSpeed, function(){
if (options.autohide) {
function listener() {
$("body").unbind('click', listener);
self.close();
}
$("body").click(listener);
}
if (!options.position) self.element.ensureVisible();
});
}
if (options.resizable) {
self.element.resizable({
handles: "all",
autohide: false
});
}
self.ccOverlayVisible = true;
},
/**
* unistava popup
*/
destroy: function(callback) {
var self = this;
this.close(function() {
self.element.ccOverlayDestroy();
if (callback) {
callback();
}
});
}
});
})(jQuery);
/**
* Overlay koji se loada dinamicki na click
*/
(function($) {
$.widget("ui.loadingOverlay", {
_init: function() {
this.options = $.extend(
{template: null,//template, kod u koji se sprema fetchani URL, jquery ili selector ili element
ajaxData: {},//podaci koji se salju putem ajax-a
url: null,//url koji treba prikazati u elementu
/*jquery selector koji ce se izvrsiti na fetchanom dokumentu
*kako bi se dobio sadrzaj koji ide u container, npr #content ul
*/
contentSelector: null,
loadingHtml: "
",
toggleSpeed: "fast",
resizable: false,
autohide: false,
alignOptions: {},
loadError: "Loading error",//message to be shown in case of error
close: null, //element na koji se klikom zatvara overlay (jquery, element ili selektor)
draggable: null //element koji sluzi kao handle za "drag" operaciju
},
this.options);
options = this.options;
if (options.url == null) {
var eljq = $(this.element);
options.url = eljq.attr("href");
if (options.url != null) {
eljq.attr("href", "javascript:;");
}
}
if (options.template == null || options.url == null) {
throw "Opcije moraju sadrzavati slijedece parametre: template i url";
}
$(options.template).hide();
var self = this;
//this.element.
this.element.click(function() {
self.toggle();
});
},
toggle: function() {
if (!this.popupIdSelector || this.ajaxError) {
this.open();
}else if ($(this.popupIdSelector).is(":hidden")) {
this.open();
}else {
this.close();
}
},
open: function() {
var options = this.options;
if (this.popupIdSelector && !this.ajaxError) {
$(this.popupIdSelector).simpleoverlay("open");
return;
}
var popupId = $.cc.uniqueId();
$(options.template).clone().hide().attr("id", popupId).appendTo("body");
this.popupIdSelector = $("#" + popupId);
$(this.popupIdSelector).simpleoverlay({
alignTo: this.element,
autohide: options.autohide,
alignOptions: options.alignOptions,
close: options.close,
draggable: options.draggable,
resizable: options.resizable
});
var container = null;
if (options.contentSelector) {
container = this.popupIdSelector.find(options.contentSelector);
}else {
container = this.popupIdSelector;
}
//kreira wait overlay
var waitPopupId = $.cc.uniqueId();
$(options.loadingHtml).hide().attr("id", waitPopupId).appendTo("body");
$("#" + waitPopupId).simpleoverlay({alignTo: this.element, toggleSpeed: "", autohide: false});
$("#" + waitPopupId).simpleoverlay("open");
var self = this;
$.ajax({
type: "GET",
url: options.url,
data: options.ajaxData,
complete: function() {
$("#" + waitPopupId).simpleoverlay("destroy");
$("#" + waitPopupId).remove();
},
success: function(data){
container.html(data);
self.popupIdSelector.simpleoverlay("open");
},
error: function(request, textStatus, errorThrown) {
self.ajaxError = true;
$(self.popupIdSelector).simpleoverlay("destroy");
$(self.popupIdSelector).remove();
alert(options.loadError + ": " + errorThrown);
}
});
},
close: function() {
this.popupIdSelector.simpleoverlay("close");
}
})//end $.widget
})(jQuery);
/**
* layer sa iframe-om, koji se otvara
*/
(function($) {
$.widget("ui.iframeoverlay", {
_init: function() {
}
})//end $.widget
})(jQuery);
(function($) {
$.widget("ui.slidePanel", {
_init: function() {
this.options = $.extend(
{toggleHandle: null,//element na koji kad de klikne zatvara/otvara blok
openHtml: null,//sadrzaj toggleHandle elementa za otvaranje panela (npr "Open")
closeHtml: null,//sadrzaj toggleHandle elementa za otvaranje panela (npr "Close"),
opened: false,//Da li je panel kad se kreira otvoren, default je false
toggleSpeed: "fast",
handleOpenedClass: null,//klasa koju ima handle kad je panel otvoren
handleClosedClass: null//klasa koju ima handle kad je panel zatovren
},
this.options);
options = this.options;
if (options.toggleHandle == null) {
throw "Opcija toggleHandle moraja biti definirana";
}
var self = this;
this.toggleHandle = $(options.toggleHandle);
if (!options.opened) {
this.element.hide();
if (options.openHtml != null) this.toggleHandle.html(options.openHtml);
if (options.handleClosedClass) {
self.toggleHandle.addClass(options.handleClosedClass);
}
if (options.handleOpenedClass) {
self.toggleHandle.removeClass(options.handleOpenedClass);
}
}else {
this.element.show();
if (options.closeHtml != null) this.toggleHandle.html(options.closeHtml);
if (options.handleOpenedClass) {
self.toggleHandle.addClass(options.handleOpenedClass);
}
if (options.handleClosedClass) {
self.toggleHandle.removeClass(options.handleClosedClass);
}
}
$(options.toggleHandle).click(function() {
if (self.element.is(":hidden")) {
self.open();
}else {
self.close();
}
});
},
open: function() {
if (!this.element.is(":hidden")) return;
options = this.options;
var self = this;
this.element.slideDown(options.toggleSpeed, function() {
var options = {};
var sbOffset = self.element.offset();
var sbheight = self.element.height();
var sbwidth = self.element.width();
var handleOffset = self.toggleHandle.offset();
var handleheight = self.toggleHandle.height();
var handlewidth = self.toggleHandle.width();
if (sbOffset.top > handleOffset.top ) {//handle je iznad
options.visibleFromY = handleOffset.top;//pomice vidljivo polje vise
}else if (sbOffset.top + sbheight < handleOffset.top + handleheight) {//handle je ispod
options.visibleToY = handleOffset.top + handleheight;//pomice vidljivo polje nize, da se vidi i handle
}
self.element.ensureVisible(options);
});
if (options.closeHtml != null) self.toggleHandle.html(options.closeHtml);
if (options.handleOpenedClass) {
self.toggleHandle.addClass(options.handleOpenedClass);
}
if (options.handleClosedClass) {
self.toggleHandle.removeClass(options.handleClosedClass);
}
},
close: function() {
if (this.element.is(":hidden")) return;
options = this.options;
this.element.slideUp(options.toggleSpeed);
if (options.openHtml != null) this.toggleHandle.html(options.openHtml);
if (options.handleClosedClass) {
this.toggleHandle.addClass(options.handleClosedClass);
}
if (options.handleOpenedClass) {
this.toggleHandle.removeClass(options.handleOpenedClass);
}
}
})//end $.widget
})(jQuery);
/**
* generira unique id
* @param options:
* - override
* false: generira za sve elemente koji ga nemaju
* true: generira za sve eleemtne
*/
(function($) {
$.fn.generateId = function(options) {
options = $.extend({override: false}, options);
return this.each(function (i) {
if (options.override) {
$(this).attr("id", $.cc.uniqueId());
}else if (!$(this).attr("id")) {
$(this).attr("id", $.cc.uniqueId());
}
});
}
})(jQuery);
/**
* Osigurava da je navedeni blok vidljiv na ekranu, ukoliko je to moguce
* @options {scrollSpeed: 1000} milisekundi koliko treba biti brzina skrolanja.
* Ovo radi samo za prvi element u listi (jquery selectu) jer nema smisla podesavati
* za vise njih
* prozora ukoliko zeljeni blok nije vidljiv
*/
(function($) {
$.fn.ensureVisible = function(options) {
options = $.extend({
scrollSpeed: 500,
visibleFromX: null,//moguce je rucno definirati bilo koju
visibleToX: null,//od slijedecih koordinata koje trebaju biti vidljive
visibleFromY: null,//ako nisu definirane uzimaju se default vrijednosti
visibleToY: null//odnosno box (this vrijednost funkcije)
}, options);
return this.each(function (i) {
scroll4Visible(this, options, i);//samo jedan element pozicionira
});
}
//block je jquery element, ili selektor, ili dom element
function scroll4Visible(block, options, count) {
//alert(count);
if (count > 0) return;
var box = $(block);
var dheight = $(document).height();
var dwidth = $(document).width();
var wheight = $(window).height();
var wwidth = $(window).width();
var wScrollLeft = $(window).scrollLeft();
var wScrollTop = $(window).scrollTop();
var sbOffset = box.offset();
var sbheight = box.height();
var sbwidth = box.width();
var visibleFromY = wScrollTop;
var visibleToY = wScrollTop + wheight;
var visibleFromX = wScrollLeft;
var visibleToX = wScrollLeft + wwidth;
var requiredVisibleFromY = (options.visibleFromY)?options.visibleFromY:sbOffset.top;
var requiredVisibleFromX = (options.visibleFromX)?options.visibleFromX:sbOffset.left;
var requiredVisibleToY = (options.visibleToY)?options.visibleToY:sbOffset.top + sbheight;
var requiredVisibleToX = (options.visibleToX)?options.visibleToX:sbOffset.left + sbwidth;
if (visibleFromY <= requiredVisibleFromY &&
visibleFromX <= requiredVisibleFromX &&
visibleToY >= requiredVisibleToY &&
visibleToX >= requiredVisibleToX) {
return;//sve je vidljivo
}
//poravnava po visini
if (visibleFromY > requiredVisibleFromY) {
$('html,body').animate({scrollTop: wScrollTop -
(visibleFromY - requiredVisibleFromY)}, options.scrollSpeed);
}else if (requiredVisibleFromY > visibleToY) {
//box je ispod vidljivog prozora
$('html,body').animate({scrollTop: requiredVisibleFromY}, options.scrollSpeed);
}else if (visibleToY < requiredVisibleToY) {
var requiredScrollDown = requiredVisibleToY - visibleToY;
var thenVisibleFromY = visibleFromY + requiredScrollDown;//od koje tocke bi tada bilo vidljivo po Y-nu
if (thenVisibleFromY > requiredVisibleFromY) {
//nesmije se gornja strana pomaknuti izvan vidljivog prozora
requiredScrollDown = requiredScrollDown -
(thenVisibleFromY - requiredVisibleFromY);
}
$('html,body').animate({scrollTop: wScrollTop + requiredScrollDown},
options.scrollSpeed);
}
//poravnava po x osi
if (visibleFromX > requiredVisibleFromX) {
$('html,body').animate({scrollLeft: wScrollLeft -
(visibleFromX - requiredVisibleFromX)}, options.scrollSpeed);
}else if (requiredVisibleFromX > visibleToX) {
//box je desno od vidljivog prozora
$('html,body').animate({scrollLeft: requiredVisibleFromX}, options.scrollSpeed);
}else if (visibleToX < requiredVisibleToX) {
//desni kraj boxa se ne vidi, gledamo mozemo li scrollati u desno da ga obuhvatimo potpuno
var requiredScrollRight = requiredVisibleToX - visibleToX;
var thenVisibleFromX = visibleFromX + requiredScrollRight;
if (thenVisibleFromX > requiredVisibleFromX) {
requiredScrollRight = requiredScrollRight - (thenVisibleFromX - requiredVisibleFromX);
}
$('html,body').animate({scrollLeft: wScrollLeft + requiredScrollRight}, options.scrollSpeed);
}
}
})(jQuery);
/*******************************************************************************
* Utility funkcije
*******************************************************************************/
jQuery.cc = {
idSeed : "__ccGeneratedId",
lastGeneratedIdIndex: 0,
overlayClass: "__ccOverlayClass",//klasa za sve overlay-e
/**
* vraca id koji je jedinstven za cijeli dokument. Ideja je da se na idSeed
* dodaju inkrementirajuci brojevi, npr __ccGeneratedId1, __ccGeneratedId2 itd
*/
uniqueId: function() {
var currIndex = jQuery.cc.lastGeneratedIdIndex + 1;
while ( jQuery("#" + jQuery.cc.idSeed + currIndex).length > 0 ) {
currIndex++;
}
jQuery.cc.lastGeneratedIdIndex = currIndex;
return jQuery.cc.idSeed + currIndex;
},
getMaxZ: function() {
var maxZ = 1;//default z index
//trazi maksimalni z index da bi mogao kako dovesti napred
$('.' + jQuery.cc.overlayClass + ':visible').each(function() {
maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || maxZ);
});
return maxZ;
},
/**
* prikazuje poruku na ekranu
* @return id box-a
*/
showTempMessage: function(options) {
options = $.extend(
{template: "",
message: null,//poruka koju treba prikazati, moze biti html ili nedefinirana, kad se ista ne pokazuje
/*jquery selector koji ce se izvrsiti na fetchanom dokumentu
*kako bi se dobio sadrzaj koji ide u container, npr #content ul
*/
contentSelector: null,
toggleSpeed: "fast",
center: false,//ako teba centrirati popup na ekranu, po defaultu se pokazuje uz gornj rub prozora
timeoutPeriod: 0//u koje vrijeme je potrebno automatski zatvoriti popup. Ako je nedefinirano ne zatavara se sam
},
options);
var popupId = $.cc.uniqueId();
var self = $(options.template).clone().attr("id", popupId).appendTo("body").hide();
if (options.message) {
var container = (options.contentSelector)?self.find(options.contentSelector):self;
container.html(options.message);
}
var wheight = $(window).height();
var wwidth = $(window).width();
var wScrollLeft = $(window).scrollLeft();
var wScrollTop = $(window).scrollTop();
var boxWidth = self.outerWidth();
var boxHeight = self.outerHeight();
var x = wScrollLeft + wwidth/2 - boxWidth/2;
var y = (options.center)?(wScrollTop + wheight/2 - boxHeight/2) : wScrollTop;
//trazi ima li vec neka poruka koja bi se preklopila sa ovom....
//pomice box nize po y-lonu ako da
$('.__ccTmpMessage').each(function() {
var box = $(this);
var bOffset = box.offset();
var bheight = box.outerHeight();
if (bOffset.top >= y && y + boxHeight > bOffset.top) {
y = bOffset.top + bheight;
}
});
if (!self.hasClass("__ccTmpMessage")) {
self.addClass("__ccTmpMessage");
}
$("#" + popupId).simpleoverlay(
{
toggleSpeed: options.toggleSpeed,
position: {left: x, top: y}
});
$("#" + popupId).simpleoverlay("open");
if (options.timeoutPeriodSec > 0) {
jQuery.cc.removeTempMessage(popupId, options.timeoutPeriodSec);
}
return popupId;
},
/**
* zatvara temp message, odnosno uklanja ga iz html-a
* @param id id poruke, dobiven kao return value showTempMessage funkcije
* @param timeout nakon koliko vremena treba poceti zatvarati popup, moze biti 0, onda
* ide odmah
*/
removeTempMessage: function(id, timeout) {
var box = $("#" + id);
function doDestroy() {
box.simpleoverlay("destroy", function() {
box.remove();
});
}
if (timeout && timeout > 0){
setTimeout(doDestroy, timeout*1000);
}else {
doDestroy();
}
}
}