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 [email protected] 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 -~----------~----~----~----~------~----~------~--~---
