These are useful, but I don't think most of them deserve their place in
core. The ones I'd like to have are:

   1. dynamic SCRIPT element
   2. injecting CSS content

Also, cookies could make an excellent add-on. Tobie, did you have some code
ready for cookie support? I think I can recall you mentioning it several
months ago.

- M

On Nov 21, 2007 11:29 AM, tbela99 <[EMAIL PROTECTED]> wrote:

>
> hello all the guys from the prototype core.
>
> I really adore what you're doing. it changed the way I was programming
> javascript for a while. anyway I have some features that will please
> me if they are incorporated in the prototype.js file.
>
> the first is the ability to dynamically load javascript and css into
> the page. i was looking for a solution a i used script from the google
> web toolkit, and a few days ago, while inspecting the code of
> mootools.js (http://mad4milk.net, an MIT-licence library, i saw a
> class implementing these fonctionnalities.
> here is the code:
>
>
> /*
> Script: Assets.js
>        provides dynamic loading for images, css and javascript files.
>
> License:
>        MIT-style license.
> */
>
> var Asset = new Abstract({
>
>        /*
>        Property: javascript
>                Injects a javascript file in the page.
>
>        Arguments:
>                source - the path of the javascript file
>                properties - some additional attributes you might want to
> add to the
> script element
>
>        Example:
>                > new Asset.javascript('/scripts/myScript.js', {id:
> 'myScript'});
>        */
>
>        javascript: function(source, properties){
>                properties = $merge({
>                        'onload': Class.empty
>                }, properties);
>                var script = new Element('script', {'src':
> source}).addEvents({
>                        'load': properties.onload,
>                        'readystatechange': function(){
>                                if (this.readyState == 'complete')
> this.fireEvent('load');
>                        }
>                });
>                delete properties.onload;
>                return script.setProperties(properties).inject(
> document.head);
>        },
>
>        /*
>        Property: css
>                Injects a css file in the page.
>
>        Arguments:
>                source - the path of the css file
>                properties - some additional attributes you might want to
> add to the
> link element
>
>        Example:
>                > new Asset.css('/css/myStyle.css', {id: 'myStyle', title:
> 'myStyle'});
>        */
>
>        css: function(source, properties){
>                return new Element('link', $merge({
>                        'rel': 'stylesheet', 'media': 'screen', 'type':
> 'text/css', 'href':
> source
>                }, properties)).inject(document.head);
>        },
>
>        /*
>        Property: image
>                Preloads an image and returns the img element. does not
> inject it to
> the page.
>
>        Arguments:
>                source - the path of the image file
>                properties - some additional attributes you might want to
> add to the
> img element
>
>        Example:
>                > new Asset.image('/images/myImage.png', {id: 'myImage',
> title:
> 'myImage', onload: myFunction});
>
>        Returns:
>                the img element. you can inject it anywhere you want with
> <Element.injectInside>/<Element.injectAfter>/<Element.injectBefore>
>        */
>
>        image: function(source, properties){
>                properties = $merge({
>                        'onload': Class.empty,
>                        'onabort': Class.empty,
>                        'onerror': Class.empty
>                }, properties);
>                var image = new Image();
>                image.src = source;
>                var element = new Element('img', {'src': source});
>                ['load', 'abort', 'error'].each(function(type){
>                        var event = properties['on' + type];
>                        delete properties['on' + type];
>                        element.addEvent(type, function(){
>                                this.removeEvent(type, arguments.callee);
>                                event.call(this);
>                        });
>                });
>                if (image.width && image.height) element.fireEvent('load',
> element,
> 1);
>                return element.setProperties(properties);
>        },
>
>        /*
>        Property: images
>                Preloads an array of images (as strings) and returns an
> array of img
> elements. does not inject them to the page.
>
>        Arguments:
>                sources - array, the paths of the image files
>                options - object, see below
>
>        Options:
>                onComplete - a function to execute when all image files are
> loaded
> in the browser's cache
>                onProgress - a function to execute when one image file is
> loaded in
> the browser's cache
>
>        Example:
>                (start code)
>                new Asset.images(['/images/myImage.png',
> '/images/myImage2.gif'], {
>                        onComplete: function(){
>                                alert('all images loaded!');
>                        }
>                });
>                (end)
>
>        Returns:
>                the img elements as $$. you can inject them anywhere you
> want with
> <Element.injectInside>/<Element.injectAfter>/<Element.injectBefore>
>        */
>
>        images: function(sources, options){
>                options = $merge({
>                        onComplete: Class.empty,
>                        onProgress: Class.empty
>                }, options);
>                if (!sources.push) sources = [sources];
>                var images = [];
>                var counter = 0;
>                sources.each(function(source){
>                        var img = new Asset.image(source, {
>                                'onload': function(){
>                                        options.onProgress.call(this,
> counter);
>                                        counter++;
>                                        if (counter == sources.length)
> options.onComplete();
>                                }
>                        });
>                        images.push(img);
>                });
>                return new Elements(images);
>        }
>
> });
> it is very easy to turn it into prototype based script.
>
> another great functionnality will be the ability to inject javascript
> code from an ajax request (not to evaluate it, but to create a
> <script> element) in the head section. let me explain:
> if you create a function in a script that is evaluated, using the
> function will cause an error beacuse the funtion does not exists. but
> injecting it in the head will make it visible and will no longer cause
> problem
>
> the following code will not work
>
> function multiply() { return arugments[1] * arguments[2]; }
> alert(multiply(2, 3));
>
> if you already load a function performing that injection, it will
> work:
>
> injectScript('function multiply() { return arugments[1] *
> arguments[2]; }');
> alert(multiply(2, 3));
>
> the other thing is the support for cookies (also provided by
> mootools):
>
> the code from mootools
>
>
> /*
> Class: Cookie
>        Class for creating, getting, and removing cookies.
> */
>
> var Cookie = new Abstract({
>
>        options: {
>                domain: false,
>                path: false,
>                duration: false,
>                secure: false
>        },
>
>        /*
>        Property: set
>                Sets a cookie in the browser.
>
>        Arguments:
>                key - the key (name) for the cookie
>                value - the value to set, cannot contain semicolons
>                options - an object representing the Cookie options. See
> Options
> below. Default values are stored in Cookie.options.
>
>        Options:
>                domain - the domain the Cookie belongs to. If you want to
> share the
> cookie with pages located on a different domain, you have to set this
> value. Defaults to the current domain.
>                path - the path the Cookie belongs to. If you want to share
> the
> cookie with pages located in a different path, you have to set this
> value, for example to "/" to share the cookie with all pages on the
> domain. Defaults to the current path.
>                duration - the duration of the Cookie before it expires, in
> days.
>                                        If set to false or 0, the cookie
> will be a session cookie that
> expires when the browser is closed. This is default.
>                secure - Stored cookie information can be accessed only
> from a
> secure environment.
>
>        Returns:
>                An object with the options, the key and the value. You can
> give it
> as first parameter to Cookie.remove.
>
>        Example:
>                >Cookie.set('username', 'Harald'); // session cookie
> (duration is
> false), or ...
>                >Cookie.set('username', 'JackBauer', {duration: 1}); //
> save this
> for 1 day
>
>        */
>
>        set: function(key, value, options){
>                options = $merge(this.options, options);
>                value = encodeURIComponent(value);
>                if (options.domain) value += '; domain=' + options.domain;
>                if (options.path) value += '; path=' + options.path;
>                if (options.duration){
>                        var date = new Date();
>                        date.setTime(date.getTime() + options.duration * 24
> * 60 * 60 *
> 1000);
>                        value += '; expires=' + date.toGMTString();
>                }
>                if (options.secure) value += '; secure';
>                document.cookie = key + '=' + value;
>                return $extend(options, {'key': key, 'value': value});
>        },
>
>        /*
>        Property: get
>                Gets the value of a cookie.
>
>        Arguments:
>                key - the name of the cookie you wish to retrieve.
>
>        Returns:
>                The cookie string value, or false if not found.
>
>        Example:
>                >Cookie.get("username") //returns JackBauer
>        */
>
>        get: function(key){
>                var value = document.cookie.match('(?:^|;)\\s*' +
> key.escapeRegExp()
> + '=([^;]*)');
>                return value ? decodeURIComponent(value[1]) : false;
>        },
>
>        /*
>        Property: remove
>                Removes a cookie from the browser.
>
>        Arguments:
>                cookie - the name of the cookie to remove or a previous
> cookie (for
> domains)
>                options - optional. you can also pass the domain and path
> here. Same
> as options in <Cookie.set>
>
>        Examples:
>                >Cookie.remove('username') //bye-bye JackBauer, cya in 24
> hours
>                >
>                >var myCookie = Cookie.set('username', 'Aaron', {domain:
> 'mootools.net'}); // Cookie.set returns an object with all values need
> to remove the cookie
>                >Cookie.remove(myCookie);
>        */
>
>        remove: function(cookie, options){
>                if ($type(cookie) == 'object') this.set(cookie.key, '',
> $merge(cookie, {duration: -1}));
>                else this.set(cookie, '', $merge(options, {duration: -1}));
>        }
>
> });
>
>
> in the hope my request will have a positive response, i'll thank you
> again for all the good job you're doing.
> >
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype: Core" group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-core?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to