From: Geoff on
Hello

I do occasionally use Prototype but would like to try David Mark's My
Library.

Could someone please point me at a simple example as I have looked at
the website but have yet to get a foothold. It is no doubt an
excellent site but I need a really simple way in!

Cheers

Geoff
From: David Mark on
Geoff wrote:
> Hello
>
> I do occasionally use Prototype but would like to try David Mark's My
> Library.

That's a positive turn for sure. Sort of like occasionally using heroin
and deciding to try jogging. :)

>
> Could someone please point me at a simple example as I have looked at
> the website but have yet to get a foothold. It is no doubt an
> excellent site but I need a really simple way in!

Thank you for the kind words on the site. We are working feverishly on
it in preparation for our launch this spring. All signs point to
awesome. :)

Apologies that I haven't quite finished the Object Reference. The OO
interface is more friendly for beginners (as opposed to the API) and
that seems to be the biggest hole at this point. Happily, it's gone
from nowhere to about halfway done in the last 24-48 hours though. I
will have it wrapped up completely over the weekend.


As for a simple introductory example, you are in luck. Gabriel Gillini
created a nice little slide show, which I copied to my site for posterity:-

http://www.cinsoft.net/myimagegallery.html

var d = new D();
d.onReady(MyImageGallery);

function MyImageGallery()
{
var father = new E('pictures');
var mainImg = new I('detailedview');
var thumbsUl = father.query('ul');
var thumbsImg = father.query('ul img');
var preloadedImgs = {};
thumbsImg.forEach(function(img){
var src = API.getAttributeProperty(img, 'src');
preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
185, 185);
});
thumbsUl.on('mouseover', function(e){
var target = new E(API.getEventTarget(e));
if(target.isTag('img'))
{
thumbsImg.removeClass('selected');
target.addClass('selected');
mainImg.change(
preloadedImgs[target.getAttributeProperty('src')],
{
effects: API.effects.fade,
duration: 1500
}
);
}
});
}

Here's my quick take on it:-

var API, D, E;

if (API && E) {
D().onReady(function () {
var mainImg = I('detailedview');
var thumbsUl = E(E('pictures').descendants('ul', 0));
var thumbsImg = Q(API.toArray(thumbsUl.descendants('img')));
var preloadedImgs = {};
thumbsImg.forEach(function(img){
var src = E(img).getAttributeProperty('src');
preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
185, 185);
});
thumbsUl.on('mouseover', function(e){
var target = E(API.getEventTarget(e));
if(target.isTag('img'))
{
thumbsImg.removeClass('selected');
target.addClass('selected');
mainImg.change(
preloadedImgs[target.getAttributeProperty('src')],
{
effects: API.effects.fade,
duration: 1500
}
);
}
});
});
}

Notice that I declared API, D and E. This is a defensive measure in
case the My Library script did not load for some reason (e.g. an
overzealous firewall stripped it, network failure, etc.) It also makes
the following line more concise.

That second line makes sure that the required objects are there. As
long as the library loads (and it loads in _everything_, even NN4, but
better safe than sorry), API is guaranteed. E, however, could be
undefined (if Function.protoype.call is missing from the host
environment as in IE5.0). As I inherits from E, we don't have to check
that and D has the same requirements as E, so the single conjunction is
all that is needed to ensure the application will run.

BTW, you don't need to remember all of that. Wouldn't have hurt to just
do this:-

if (API && E && D && I) {

The only other changes were to eliminate queries (always a good idea)
and to remove the unneeded - new - operators (just for demonstration
purposes as I actually recommend using those with the constructors).
Note that you _must_ use the - new - operator when calling these
constructors from another frame (sort of like dialing a prefix for a
long distance call).

Also note that you can still use Q to juggle multiple elements as it
takes an array _or_ a selector as its first argument.

Now, I know what you are thinking. Why didn't I detect the fade effect?
Certainly it could be missing, so this would seem prudent:-

if (API && E && API.effects.fade) {

....or if really paranoid:-

if (API && E && API.effects && API.effects.fade) {

....as effects will not be there in browsers without basic CSS support.

But none of that is really necessary as the example only passes a
_single_ effect to the change method. So if API.effects.fade is
undefined, it will be as if no effect was passed at all and the slide
show will still work. Multiple effects in an array would require
feature detection. You can confirm this by testing in an older browser
that has no opacity support (e.g. Opera < 9). I tested the example back
to Opera 7 and IE5.5. The former worked without a fade effect and the
latter worked _perfectly_ (despite the fact that I am using a multi-IE
setup as the opacity-related functions in My Library are immune to the
DirectX problems that plague such setups). Anything older will degrade
gracefully (tested Opera 6 without error).

Thanks for your interest. I wish you luck and recommend you join our
forum:-

http://groups.google.com/group/my-library-general-discussion/
From: Geoff on
On Fri, 26 Mar 2010 09:38:59 -0400, David Mark
<dmark.cinsoft(a)gmail.com> wrote:

>Geoff wrote:
>> Hello
>>
>> I do occasionally use Prototype but would like to try David Mark's My
>> Library.
>
>That's a positive turn for sure. Sort of like occasionally using heroin
>and deciding to try jogging. :)
>
>>
>> Could someone please point me at a simple example as I have looked at
>> the website but have yet to get a foothold. It is no doubt an
>> excellent site but I need a really simple way in!
>
>Thank you for the kind words on the site. We are working feverishly on
>it in preparation for our launch this spring. All signs point to
>awesome. :)
>
>Apologies that I haven't quite finished the Object Reference. The OO
>interface is more friendly for beginners (as opposed to the API) and
>that seems to be the biggest hole at this point. Happily, it's gone
>from nowhere to about halfway done in the last 24-48 hours though. I
>will have it wrapped up completely over the weekend.
>
>
>As for a simple introductory example, you are in luck. Gabriel Gillini
>created a nice little slide show, which I copied to my site for posterity:-
>
>http://www.cinsoft.net/myimagegallery.html
>
>var d = new D();
>d.onReady(MyImageGallery);
>
>function MyImageGallery()
>{
> var father = new E('pictures');
> var mainImg = new I('detailedview');
> var thumbsUl = father.query('ul');
> var thumbsImg = father.query('ul img');
> var preloadedImgs = {};
> thumbsImg.forEach(function(img){
> var src = API.getAttributeProperty(img, 'src');
> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
>185, 185);
> });
> thumbsUl.on('mouseover', function(e){
> var target = new E(API.getEventTarget(e));
> if(target.isTag('img'))
> {
> thumbsImg.removeClass('selected');
> target.addClass('selected');
> mainImg.change(
> preloadedImgs[target.getAttributeProperty('src')],
> {
> effects: API.effects.fade,
> duration: 1500
> }
> );
> }
> });
>}
>
>Here's my quick take on it:-
>
>var API, D, E;
>
>if (API && E) {
> D().onReady(function () {
> var mainImg = I('detailedview');
> var thumbsUl = E(E('pictures').descendants('ul', 0));
> var thumbsImg = Q(API.toArray(thumbsUl.descendants('img')));
> var preloadedImgs = {};
> thumbsImg.forEach(function(img){
> var src = E(img).getAttributeProperty('src');
> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
>185, 185);
> });
> thumbsUl.on('mouseover', function(e){
> var target = E(API.getEventTarget(e));
> if(target.isTag('img'))
> {
> thumbsImg.removeClass('selected');
> target.addClass('selected');
> mainImg.change(
> preloadedImgs[target.getAttributeProperty('src')],
> {
> effects: API.effects.fade,
> duration: 1500
> }
> );
> }
> });
> });
>}
>
>Notice that I declared API, D and E. This is a defensive measure in
>case the My Library script did not load for some reason (e.g. an
>overzealous firewall stripped it, network failure, etc.) It also makes
>the following line more concise.
>
>That second line makes sure that the required objects are there. As
>long as the library loads (and it loads in _everything_, even NN4, but
>better safe than sorry), API is guaranteed. E, however, could be
>undefined (if Function.protoype.call is missing from the host
>environment as in IE5.0). As I inherits from E, we don't have to check
>that and D has the same requirements as E, so the single conjunction is
>all that is needed to ensure the application will run.
>
>BTW, you don't need to remember all of that. Wouldn't have hurt to just
>do this:-
>
>if (API && E && D && I) {
>
>The only other changes were to eliminate queries (always a good idea)
>and to remove the unneeded - new - operators (just for demonstration
>purposes as I actually recommend using those with the constructors).
>Note that you _must_ use the - new - operator when calling these
>constructors from another frame (sort of like dialing a prefix for a
>long distance call).
>
>Also note that you can still use Q to juggle multiple elements as it
>takes an array _or_ a selector as its first argument.
>
>Now, I know what you are thinking. Why didn't I detect the fade effect?
> Certainly it could be missing, so this would seem prudent:-
>
>if (API && E && API.effects.fade) {
>
>...or if really paranoid:-
>
>if (API && E && API.effects && API.effects.fade) {
>
>...as effects will not be there in browsers without basic CSS support.
>
>But none of that is really necessary as the example only passes a
>_single_ effect to the change method. So if API.effects.fade is
>undefined, it will be as if no effect was passed at all and the slide
>show will still work. Multiple effects in an array would require
>feature detection. You can confirm this by testing in an older browser
>that has no opacity support (e.g. Opera < 9). I tested the example back
>to Opera 7 and IE5.5. The former worked without a fade effect and the
>latter worked _perfectly_ (despite the fact that I am using a multi-IE
>setup as the opacity-related functions in My Library are immune to the
>DirectX problems that plague such setups). Anything older will degrade
>gracefully (tested Opera 6 without error).
>
>Thanks for your interest. I wish you luck and recommend you join our
>forum:-
>
>http://groups.google.com/group/my-library-general-discussion/

Many thanks David. I will work my way through the above and keep an
eye on your site over the weekend.

Best wishes

Geoff
From: David Mark on
Geoff wrote:
> On Fri, 26 Mar 2010 09:38:59 -0400, David Mark
> <dmark.cinsoft(a)gmail.com> wrote:
>
>> Geoff wrote:
>>> Hello
>>>
>>> I do occasionally use Prototype but would like to try David Mark's My
>>> Library.
>> That's a positive turn for sure. Sort of like occasionally using heroin
>> and deciding to try jogging. :)
>>
>>> Could someone please point me at a simple example as I have looked at
>>> the website but have yet to get a foothold. It is no doubt an
>>> excellent site but I need a really simple way in!
>> Thank you for the kind words on the site. We are working feverishly on
>> it in preparation for our launch this spring. All signs point to
>> awesome. :)
>>
>> Apologies that I haven't quite finished the Object Reference. The OO
>> interface is more friendly for beginners (as opposed to the API) and
>> that seems to be the biggest hole at this point. Happily, it's gone
>>from nowhere to about halfway done in the last 24-48 hours though. I
>> will have it wrapped up completely over the weekend.
>>
>>
>> As for a simple introductory example, you are in luck. Gabriel Gillini
>> created a nice little slide show, which I copied to my site for posterity:-
>>
>> http://www.cinsoft.net/myimagegallery.html
>>
>> var d = new D();
>> d.onReady(MyImageGallery);
>>
>> function MyImageGallery()
>> {
>> var father = new E('pictures');
>> var mainImg = new I('detailedview');
>> var thumbsUl = father.query('ul');
>> var thumbsImg = father.query('ul img');
>> var preloadedImgs = {};
>> thumbsImg.forEach(function(img){
>> var src = API.getAttributeProperty(img, 'src');
>> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
>> 185, 185);
>> });
>> thumbsUl.on('mouseover', function(e){
>> var target = new E(API.getEventTarget(e));
>> if(target.isTag('img'))
>> {
>> thumbsImg.removeClass('selected');
>> target.addClass('selected');
>> mainImg.change(
>> preloadedImgs[target.getAttributeProperty('src')],
>> {
>> effects: API.effects.fade,
>> duration: 1500
>> }
>> );
>> }
>> });
>> }
>>
>> Here's my quick take on it:-
>>
>> var API, D, E;
>>
>> if (API && E) {
>> D().onReady(function () {
>> var mainImg = I('detailedview');
>> var thumbsUl = E(E('pictures').descendants('ul', 0));
>> var thumbsImg = Q(API.toArray(thumbsUl.descendants('img')));
>> var preloadedImgs = {};
>> thumbsImg.forEach(function(img){
>> var src = E(img).getAttributeProperty('src');
>> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''),
>> 185, 185);
>> });
>> thumbsUl.on('mouseover', function(e){
>> var target = E(API.getEventTarget(e));
>> if(target.isTag('img'))
>> {
>> thumbsImg.removeClass('selected');
>> target.addClass('selected');
>> mainImg.change(
>> preloadedImgs[target.getAttributeProperty('src')],
>> {
>> effects: API.effects.fade,
>> duration: 1500
>> }
>> );
>> }
>> });
>> });
>> }
>>
>> Notice that I declared API, D and E. This is a defensive measure in
>> case the My Library script did not load for some reason (e.g. an
>> overzealous firewall stripped it, network failure, etc.) It also makes
>> the following line more concise.
>>
>> That second line makes sure that the required objects are there. As
>> long as the library loads (and it loads in _everything_, even NN4, but
>> better safe than sorry), API is guaranteed. E, however, could be
>> undefined (if Function.protoype.call is missing from the host
>> environment as in IE5.0). As I inherits from E, we don't have to check
>> that and D has the same requirements as E, so the single conjunction is
>> all that is needed to ensure the application will run.
>>
>> BTW, you don't need to remember all of that. Wouldn't have hurt to just
>> do this:-
>>
>> if (API && E && D && I) {
>>
>> The only other changes were to eliminate queries (always a good idea)
>> and to remove the unneeded - new - operators (just for demonstration
>> purposes as I actually recommend using those with the constructors).
>> Note that you _must_ use the - new - operator when calling these
>> constructors from another frame (sort of like dialing a prefix for a
>> long distance call).
>>
>> Also note that you can still use Q to juggle multiple elements as it
>> takes an array _or_ a selector as its first argument.
>>
>> Now, I know what you are thinking. Why didn't I detect the fade effect?
>> Certainly it could be missing, so this would seem prudent:-
>>
>> if (API && E && API.effects.fade) {
>>
>> ...or if really paranoid:-
>>
>> if (API && E && API.effects && API.effects.fade) {
>>
>> ...as effects will not be there in browsers without basic CSS support.
>>
>> But none of that is really necessary as the example only passes a
>> _single_ effect to the change method. So if API.effects.fade is
>> undefined, it will be as if no effect was passed at all and the slide
>> show will still work. Multiple effects in an array would require
>> feature detection. You can confirm this by testing in an older browser
>> that has no opacity support (e.g. Opera < 9). I tested the example back
>> to Opera 7 and IE5.5. The former worked without a fade effect and the
>> latter worked _perfectly_ (despite the fact that I am using a multi-IE
>> setup as the opacity-related functions in My Library are immune to the
>> DirectX problems that plague such setups). Anything older will degrade
>> gracefully (tested Opera 6 without error).
>>
>> Thanks for your interest. I wish you luck and recommend you join our
>> forum:-
>>
>> http://groups.google.com/group/my-library-general-discussion/
>
> Many thanks David. I will work my way through the above and keep an
> eye on your site over the weekend.
>

NP at all. That's what I'm here for. :)

BTW, I forgot to mention that the API.toArray call will be superfluous
after the next update (today or tomorrow). I don't like how some of the
methods return array-like host objects, so will be changing them to
return Array objects.
From: Garrett Smith on
Geoff wrote:
> Hello
>
> I do occasionally use Prototype but would like to try David Mark's My
> Library.
>

I recommend avoiding that.

I suggest instead to study the relevant specifications lined from the
resources section.

The pertinent FAQ Entry is in the resources section:
http://jibbering.com/faq/#libraryResources
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/