Nitobi Spotlight Tour

[precariouspanther]

Take a look at the Simple Tour in "Spotlights" on the Nitobi website (another commercial JS library) - http://www.nitobi.com/products/completeui/demos/explorer/

Not mentioning it as a feature request as it doesn't look too tricky to pull off - but was wondering if anybody else has done anything like this with or without EXT? Very nice kind of effect for site tutorials.

[helloniko]

maybe GWT-Ext Showcase (http://www.gwt-ext.com/demo) is a good example ;)

[precariouspanther]

Thanks for the link niko but unless I'm mistaken it wasn't what I was looking for. I do like the showcase (except for the Jah-wah!) but I was refering to the actual spotlight example they had listed. It masks an entire area *except* for a circular 'spotlight' over the element you are trying to bring attention to, along with a textual dialog. Take a look at the screenshot:


http://extjs.com/forum/attachment.php?attachmentid=5627&stc=1&d=1206506965

Try out the example for a better idea of how it works :)

[wm003]

Something like this can already be found in the examples/core folder discussed here (http://extjs.com/forum/showthread.php?t=9972).
Unfortunately there still isn't any demopage nor api docs available and my first attempt to use it from scratch resulted in "Error in Line 70 of spotlight.js: this.el.getRegion is not a function"

i just tried to call it with


var spotlight = new Ext.Spotlight({});
spotlight.show();

I didn't went into the source any further, so play with it by yourself and please post working code, if you may succeed :D

[precariouspanther]

Just include the javascript then you can do something like the below :) Quite a cool effect (thanks for posting where you found it!); still I think the spotlighting in the example (with the png circular mask) looks nicer - however unlike the ext example it occludes the element so the user can't interact with it.


var spotlight= new Ext.Spotlight({duration:2});
spotlight.show(this.commitButton.getEl());


Anywho I shall have a play :D

[jack.slocum]

The idea behind Ext.Spotlight was to mask interaction with everything but a single component/element. Since most components are square, it made sense that the viewing area be square.

You should try moving it from one element to another (while active), it's kind of cool how it works.

I am just glad someone actually found it. It's been in there for ages. ;)

[precariouspanther]

It is indeed very cool how it moves - I'd like to set up a queueing mechanism for it similar to the element fx and tie dialogs to it at the same time to create a kind of step by step "tutorial" using it targeting element id's - perhaps something like




spotlightTutorial.queue({element: "el1", message: "This button can be used to add new items", delay:4});
spotlightTutorial.queue({element: "el2", message: "This button can be used to delete items", delay:4});

spotlightTutorial.startTutorial();


Cheers for pointing this one out though - I'm going to have a lot of fun with it :D

[wm003]

You should try moving it from one element to another (while active), it's kind of cool how it works.

Mmh, i'm stuck here. I got the spotlight working but i don't get the spotlight itself moved to another item without hiding the old and showing on the other element again (i guess, that was _not_ meant by you)

And if i left off the hide() and just show it on another element any animation is lost, it immediatly spotlights the other given element....

moveTo() on the spotlight element does not work and using moveTo on the Element does indeed work but the spotlight stays at its old position.
So i'm curious what "kind of cool when moving" was meant by you?:-/

Another thing:
spotlight seems to completely ignore any given config items. It always uses the default settings What am i doing wrong?

My code:

spotlight= new Ext.Spotlight({
duration: 5 ,
easing:'easeOut'
});
duration and easing take no effect. They only do, when i "hardcode" these values in the spotlight.js .... I don't get it. The spotlight function seems to be build like any other widget. Why doesn't it use the given values? Maybe it's too early in the morning to "see" the problem for me :)

[UPDATE]
Found the Bug for not accepting the given config items:

Change this Line in spotlight.js to get it working


Ext.apply(this.config);into


Ext.apply(this,config);(There was a dot instead of a comma set)
i already posted a bugreport here (http://extjs.com/forum/showthread.php?p=143722#post143722)

[brian.moeskau]

Fixed in SVN.

[davidp]

I'm working with the Spotlight example and I'd like to know if there's a way to use it with any layer <div> in the html or it has to be a component/element necessarily.

If it's not possible to bind it to a layer <div>, is there an easy way to create a component/element without any default style and embed there the content of the div?

thanks :)

[precariouspanther]

You'll need to work with it as an Element - perhaps the following will help from the API docs:



Ext.get( Mixed el ) : Element
Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
Returns:The Element object

soooo - perhaps the following will help:



var spotlight= new Ext.Spotlight({duration:2});
spotlight.show(Ext.get("ID_OF_DIV"));

[davidp]

awesome! simply worked :)

thanks,
david.

[davidp]

I'm trying to change the animation and instead of a curtain-like transition I'd like to keep the elements steady, but modify the alpha so it works as a fade out transition.

I haven't been able to find where the width of the elements is updated in the callback... any clues please? it's driving me crazy!

btw, does anyone know who created this example? it'd be great to be able to contact him.

thanks :)
david.

[hitekshu]

Use the following modified spotlight.js to get a fade in effect




Ext.Spotlight = function(config){
Ext.apply(this, config);
}
Ext.Spotlight.prototype = {
active : false,
animate : false,
animated : false,
duration: .25,
easing:'easeNone',

createElements : function(){
var bd = Ext.getBody();

this.right = bd.createChild({cls:'x-spotlight'});
this.left = bd.createChild({cls:'x-spotlight'});
this.top = bd.createChild({cls:'x-spotlight'});
this.bottom = bd.createChild({cls:'x-spotlight'});

this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
},

show : function(el, callback, scope){
if(this.animated){
this.show.defer(50, this, [el, callback, scope]);
return;
}
this.el = Ext.get(el);
if(!this.right){
this.createElements();
}
if(!this.active){
this.all.setDisplayed('');
this.applyBounds(true, false);
this.active = true;
Ext.EventManager.onWindowResize(this.syncSize, this);
this.applyBounds(false, this.animate, false, callback, scope);
}else{
this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
}
this.all.fadeIn({duration: .5, endOpacity: .5});
},

hide : function(callback, scope){
if(this.animated){
this.hide.defer(50, this, [callback, scope]);
return;
}
Ext.EventManager.removeResizeListener(this.syncSize, this);
this.applyBounds(true, this.animate, true, callback, scope);
//this.all.fadeOut();
},

doHide : function(){
this.active = false;
this.all.setDisplayed(false);
},

syncSize : function(){
this.applyBounds(false, false);
},

applyBounds : function(basePts, anim, doHide, callback, scope){

var rg = this.el.getRegion();

var dw = Ext.lib.Dom.getViewWidth(true);
var dh = Ext.lib.Dom.getViewHeight(true);

var c = 0, cb = false;
if(anim){
cb = {
callback: function(){
c++;
if(c == 4){
this.animated = false;
if(doHide){
this.doHide();
}
Ext.callback(callback, scope, [this]);
}
},
scope: this,
duration: this.duration,
easing: this.easing
};
this.animated = true;
}

this.right.setBounds(
rg.right,
basePts ? dh : rg.top,
dw - rg.right,
basePts ? 0 : (dh - rg.top),
cb);

this.left.setBounds(
0,
0,
rg.left,
basePts ? 0 : rg.bottom,
cb);

this.top.setBounds(
basePts ? dw : rg.left,
0,
basePts ? 0 : dw - rg.left,
rg.top,
cb);

this.bottom.setBounds(
0,
rg.bottom,
basePts ? 0 : rg.right,
dh - rg.bottom,
cb);

if(!anim){
if(doHide){
this.doHide();
}
if(callback){
Ext.callback(callback, scope, [this]);
}
}
},

destroy : function(){
this.doHide();
Ext.destroy(
this.right,
this.left,
this.top,
this.bottom);
delete this.el;
delete this.all;
}
};

[wm003]

mmh, it would look nicer with a fade OUT also, i guess.

[jay@moduscreate.com]

fades are very expensive CPU wise.