Popupdetail for Clientcide 3.0.8

[zipz]

I have used PopupdetailCollection with clientcide 2.1.0 but it seems
to be gone in 3.08

Can it be changed to something else?

[zipz]

I downloaded clientcide.3.0.8.js and added popupdetails from the old
file but also converted it to match for new version of mootools.

var PopupDetail = new Class({
Implements: [Options, Events],
visible: false,
observed: false,
hasData: false,
options: {
observerAction: 'mouseenter', //or click
closeOnMouseOut: true,
linkPopup: false, //or true to use observer href, or url
data: {}, //key/value parse to parse in to html
templateOptions: {}, //see simple template parser
useAjax: false,
ajaxOptions:{
method: 'get'
},
ajaxLink: false, //defaults to use observer.src
ajaxCache: {},
delayOn: 100,
delayOff: 100,
stickyWinOptions:{},
showNow: false,
htmlResponse: false,
regExp: /\\?%([^%]+)%/g
/* onPopupShow: $empty,
onPopupHide: $empty */
},
initialize: function(html, observer, options){
this.setOptions({
stickyWinToUse: StickyWin
}, options);
this.observer = document.id(observer);
this.html = (document.id(html))?
document.id(html).get('html'):html||'';
if (this.options.showNow) this.show.delay(this.options.delayOn,
this);
this.setUpObservers();
},
setUpObservers: function(){
var opt = this.options; //saving bytes here
this.observer.addEvent(opt.observerAction, function(){
this.observed = true;
this.show.delay(opt.delayOn, this);
}.bind(this));
if ((opt.observerAction == "mouseenter" || opt.observerAction ==
"mouseover") && this.options.closeOnMouseOut){
this.observer.addEvent("mouseleave", function(){
this.observed = false;
this.hide.delay(opt.delayOff, this);
}.bind(this));
}
return this;
},
parseTemplate: function(string, values){
return string.substitute(values, this.options.regExp);
},
makePopup: function(){
if (!this.stickyWin){
var opt = this.options;//saving bytes
if (opt.htmlResponse) this.content = this.data;
else this.content = this.parseTemplate(this.html, opt.data);
this.stickyWin = new
opt.stickyWinToUse(Object.merge(opt.stickyWinOptions, {
relativeTo: this.observer,
showNow: false,
content: this.content,
allowMultipleByClass: true
}));
if (document.id(opt.linkPopup) || typeOf(opt.linkPopup)=='string') {
this.stickyWin.win.setStyle('cursor','pointer').addEvent('click',
function(){
window.location.href = ($type(url)=='string')?url:url.src;
});
}
this.stickyWin.win.addEvent('mouseenter', function(){
this.observed = true;
}.bind(this));
this.stickyWin.win.addEvent('mouseleave', function(){
this.observed = false;
if (opt.closeOnMouseOut) this.hide.delay(opt.delayOff, this);
}.bind(this));
}
return this;
},
getContent: function(){
try {
new Request(Object.merge(this.options.ajaxOptions, {
url: this.options.ajaxLink || this.observer.href,
onSuccess: this.show.bind(this)
})
).send();
} catch(e) {
dbug.log('ajax error on PopupDetail: %s', e);
}
},
show: function(data){
var opt = this.options;
if (data) this.data = data;
if (this.observed && !this.visible) {
if (opt.useAjax && !this.data) {
var cachedVal = opt.ajaxCache[this.options.ajaxLink] ||
opt.ajaxCache[this.observer.href];
if (cachedVal) {
this.fireEvent('onPopupShow', this);
return this.show(cachedVal);
}
this.cursorStyle = this.observer.getStyle('cursor');
this.observer.setStyle('cursor', 'wait');
this.getContent();
return false;
} else {
if (this.cursorStyle) this.observer.setStyle('cursor',
this.cursorStyle);
if (opt.useAjax && !opt.htmlResponse) opt.data =
JSON.decode(this.data);
this.makePopup();
this.fireEvent('onPopupShow', this);
this.stickyWin.show();
this.visible = true;
return this;
}
}
return this;
},
hide: function(){
if (!this.observed){
this.fireEvent('onPopupHide');
if (this.stickyWin)this.stickyWin.hide();
this.visible = false;
}
return this;
}
});

var PopupDetailCollection = new Class({
Implements: [Options],
options: {
details: {},
links: [],
ajaxLinks: [],
useCache: true,
template: '',
popupDetailOptions: {}
},
cache: {},
initialize: function(observers, options) {
this.observers = $$(observers);
this.setOptions(options);
var ln = this.options.ajaxLinks.length;
if (ln <= 0) ln = this.options.details.length;
if (this.observers.length != ln) dbug.log("warning: observers and
details are out of sync.");
this.makePopupDetails();
},
makePopupDetails: function(){
this.popupDetailObjs = this.observers.map(function(observer, index){
var opt = this.options.popupDetailOptions;//saving bytes
var pd = new PopupDetail(this.options.template, observer,
Object.merge(opt, {
data: Array.pick(this.options.details[index], {}),
linkItem: Array.pick(this.options.links[index],
Array.pick(opt.linkItem, false)),
ajaxLink: Array.pick(this.options.ajaxLinks[index], false),
ajaxCache: (this.options.useCache)?this.cache:{},
useAjax: this.options.ajaxLinks.length>0
}));
return pd;
}, this);
}
});

[Aaron Newton]

Hi zipz,

Sorry it took me a while to get back to you; I just had a kid.

Yes, I deprecated PopupDetail - I just don't use it anymore. It's still on github (I see you found it) and you can use it as you like. I just don't support it.

You might also check out the popups in bootstrap:

http://anutron.github.com/mootools-bootstrap/

--
You received this message because you are subscribed to the Google Groups "Clientcide" group.
To post to this group, send email to clien...@googlegroups.com.
To unsubscribe from this group, send email to clientside+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/clientside?hl=en.

[zipz]

My converted popupdetail gave some nasty error which I can't solve. It
works on my local server machine but in the production environment I
get
Chrome
"Uncaught RangeError: Maximum call stack size exceeded".

Firefox
uncaught exception: [Exception... "Component returned failure code:
0x80004005 (NS_ERROR_FAILURE) [nsIDOMLocation.host]" nsresult:
"0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://?????/mootools-1.4.1-core-nc.js :: anonymous :: line 373" data:
no]
clone: function(object){
var clone = {};
for (var key in object) clone[key] = cloneOf(object[key]); <----row
373
return clone;
},


Old version works without any problems. Many pages work with new code
but one page type give this error and only on the production
environment.

I've checked the boostrap popup but that isn't what I want. I need to
load StickyWin.Pointy with Ajax content, is that even possible?

[Aaron Newton]

Not with the built-in application. You'd have to roll your own. You should try it; it's not that hard! Write it yourself!

[zipz]

StickyWin.PointyTip with ajax content, fast made and not a class. This
example seems to work but I'm not even close to satisfied as in my
production environment the arrow comes at wrong place. I also have
problems to get the gray border with the arrow to look nice, specially
as I have many different styles for my site which the user can chose
from.
http://jsfiddle.net/nvecL/3/

I think the best solution for my particular problem is still to use
the ordinary StickyWin.Ajax as I don't need the arrow right now.
I'm hoping to make a tutorial class which basically will be a tips
pointing to different links or texts to explain the purpose of the
links or words.

I'll probably show a live example when I'm finished.

[Aaron Newton]

I'd cache the response for each link so you don't fetch it twice. Otherwise it's a good start. If you want to turn this into an extension, you just need to create a new class that extends SW.PointyTip and overwrites the show method to check for a cached value and, if not found, it fetches it before it shows.

[zipz]

To solve the arrow position problem I had to change
stickyWin.position(stickyWin.options);
with
stickyWin.positioned = false;

http://jsfiddle.net/nvecL/4/

[Aaron Newton]

I welcome pull requests with improvements to the codebase!

[zipz]

Aaron, I don't know how to make a pull request but I just figured out
the best and easiest solution so I probably have to learn how to make
pull requests.

My solution to get ajax to the pointy tip was just to add
try { StickyWin.PointyTip.Ajax = new
Class(SWA(StickyWin.PointyTip)); } catch(e){}
at the end of your StickyWin.Ajax.js

I tried to add the line directly in my other file but that didn't work
as the SWA-function seems to have private access.

I'm going to extend the StickyWin.PointyTip.Ajax with caching. I don't
want to make a new request each time same link is hovered. This class
could be perfect for e-shops or in other applications to show more
information about items.

[Aaron Newton]

Nice work!

[zipz]

Aaron> I've sent a pull request with new option cacheRequest and also
added the StickyWin.PointyTip.Ajax

[Aaron Newton]

Pulled. Released.

On Fri, Jan 6, 2012 at 6:52 AM, zipz <anders....@gmail.com> wrote:

Aaron> I've sent a pull request with new option cacheRequest and also
added the StickyWin.PointyTip.Ajax