Wishlist

Compatibility Web site/Documentation Effects Ajax.Updater Extensions for InPlaceEdit-fields
I would like to see some small features added to the inlineedit-fields. I already made some of them and will post them here when finished. The features are:

Resizables
It would be nice if there were a feature to make elements (selected either by class or by tags in contaier, a la Sortables) resizable so you can drag edges/corners to change the width/height and then serialize it with something similar to id[‘width’][]=newwidth&id[‘height’][]=newheight&..., optionally just width or just height would be changed and then only the correct field would be seralised (but still with the ‘width’ or ‘height’ specifier)

Droppables.removeAll
This would be a very useful function to clear all of the droppables (drops) array. Just by setting drops = false. This makes it easier than having to trawl through all of the droppable objects individually.

JoN : I made one but I used it on Sortable, I don’t if this apply

  dropAll: function(element) {
    var element = $(element);
    var sortableOptions = this.options(element);
    var options = Object.extend({
      tag:  sortableOptions.tag,
      only: sortableOptions.only,
      name: element.id
    }, arguments[1] || {});

    var items = $(element).childNodes;
    var queryComponents = new Array();

    for(var i=0; i<items.length; i++)
    {
      if(items[i].tagName && items[i].tagName==options.tag.toUpperCase() &&
        ( !options.only || (Element.Class.has(items[i], options.only)) ) )
      {
           Effect.Fade( items[i].id );
      }
    }
  }
Sortable

drag/drop one or more elements at the same time

Sorting lists in elements with overflow:auto. Currently the list is handled as if the element with overflow:auto is not scrolled.

You could try changing Droppables.isAffected to:

  isAffected: function(pX, pY, element, drop) {
    var includeScrollOffsets = Position.includeScrollOffsets;
    Position.includeScrollOffsets = true;
    returnValue = (
      (drop.element!=element) &&
      ((!drop._containers) ||
        this.isContained(element, drop)) &&
      ((!drop.accept) ||
        (Element.Class.has_any(element, drop.accept))) &&
      Position.within(drop.element, pX, pY) );
      Position.includeScrollOffsets = includeScrollOffsets;
      return returnValue;
  }

XHTML (application/xml+xhtml) compatibility

scriptaculous.js: There should also be the correct DOM-version for inserting the script-tags.
Sortable.findElement: children[i].tagName is in lowercase. At least in Fire Fox.

(Component) (Description)

Autocomplete select: Essentially an autocomplete that only allows values from a list. Might even be fed by a regular select tags (with options), or by an AJAX call. The control should behave like the autocomplete control, but stop the user from inputting any text that is not a list element. This control would be used as a more user friendly alternative to HTML’s standard select (which is absolutely useless if you have large lists, such as all the countries of the world).

DHTML Combo Box: All of the options I’ve found require a form to have a text input as well as a drop-down, are horribly implemented and require lots of intrusion into the code. The simplest method I can think of is to make a drop-down select and then have a js constructor with the select’s ID/class as the only required argument. The js should then add the textbox, replace it with anything selected in the list, and submit the text’s value instead of the select’s.

Example:

<script> combo = new ComboBox(‘dropdown’); </script>

<form>
<select name="dropdown" id=”dropdown” class=”dropdown”>
    <option value="1">asd</option>
    <option value="2">sdf</option>
    <option value="234">346</option>
</select>
</form>

The above would create a text input over the drop-down allowing the user to either use one of the listed values or type in his own. To ease use, as an option, if a user begins typing, the drop down can auto-complete any options that exist in the list with the remaining text selected. Basically, a local-level auto-complete with the option of pre-selected set values selectable with a drop-down menu.

Dylan: Why not use Autocompleter.Local?

Drag&Drop & cookies: Set a cookie to remember the order of the dragged elements (something like Google Personal Home Pages).

Drag&Drop: Make it possible to scroll with the dragged Icon. For example If the target at the bottom of the page an not in the current viewed screen.

Rounded corners: A way to round corners on objects, like in Rico http://openrico.org/rico/demos.page?demo=ricoEffectRound.html

Javascript Form Validators: ASP.NET has a pretty good client + server side validation framework (validates on the client side for speed, then validates on the server side to make sure no-one can hack the input). Rails needs an equivalent that isn’t tied directly to the model classes (Page Validation != Model Validation) though it would be nice not to have to duplicate validation types.

In-Place Textarea Editor:

Drag Grid: Something like the dragable sections in http://google.com/ig would be pretty cool.

Better progress bar: Make the progress bar not just do uploads but anything the server wants to push back (i.e. installation status). Also, it would be great if the bar smoothly increased rather than jerking. It doesn’t matter if it’s not perfect, you could probably design a smoothing function that updated “true” location every second or two.

Zoom Image Scroller: Like what google maps uses for letting the user drag the map around. This should integrate with some ruby code that automagicly breaks up the image in the pieces required for this type of scrolling.

Callbacks for Autocomplete: onSelect, gets called when someone clicks an option in the autocomplete, or, onBlur’s out of the field. Used when you have another, dependent, function to run. For example, populating another array for a second autocomplete.

Image Cropper Component for cropping images—like if a user uploads a “user picture” and needs to crop it to a square. See this for a good example.

Sortable Tables: Rails methods for creating tables with the option of making a client-side sortable table. See example.

Live Grid Tables: Allow very large tables to pull in data as needed. See example The latest version supports a server side sorting (nice for tables with large number of rows).

DHTML Spell Checker: Integrate this amazing dhtml spell checker that is better than google’s.

Sortable Containers: Add a way to add new elements to a container that has already been created. example

Effect Roll Back: Add a rollback function in Effect.Base

Exemple 

  rollBack: function() {
    this.render(0);
    this.cancel();
  }

Development

(Component): (Name/Contactinfo) (ETA)

Sortable trees: jemweblinc—Collapsible tree structures with nested ULs with complete drag-and-drop support (jemWeblinc: I am still working on this. I’ve been busy with client work and I have much revising to do with all the changes to script.aculo.us)

Fixed/Implemented

Smooth deletion of elements: Whenever an element is deleted using for example Element.fade the elements below it should move up smoothly instead of jerking. This is especially handy for when an effect is taking place below the fade..
sunsean: See the PhaseOut effect in Effects Treasure Chest

Slider Bars: A set of slider bar widgets that send a call back on change. (Maybe just 2 for starters, vertical then horizontal…). Now available in the SVN trunk.

Inline Text Editing: Jon Tirsen Flickr style inline editing will be sweet.

Slide in from Left/Right: Joao Prado Maia So on click an object can either slide in from right or left. Just like the Slide Down/Up Effects. (see the Effects Treasure Chest)

Clone option for Drag n Drop: The original remains in place, and only a semi-transparent clone is dragged. On drop, clone is “deleted”. Implemented via the “ghosting” option on Draggables. See Ghostly Sortable Demo.

Won’t fix

Caching: Sometimes calls are made to relatively static content (i.e. view post). It would be nice to have a parameter that allows results to be cached and if the exact same request was called it would not go to the server but simply the javascript cache.
madrobby: this is not necessary as XMLHttp Request should honor any HTTP expiration headers. So, this would only duplicate the build-in browser caching.

Invalid

Ditch inline event handlers: having inline event handlers makes the html code crufty. Seems ironic that such a tasty set of functions should be called using old nasty techniques. It would be nicer to see events attached using something like the Behaviour library
madrobby: this is something for the framework the geneartes the code, not script.aculo.us. Also, you can’t do everything with behaviours; most importantly the window.onload event is only called after all page elements are loaded, including images.

Server Push: Rather than polling every few seconds it is possible to push content to the browser via mixed-replace content type and and open connection (via HTTP 1.1). This should be very easy to implement and is described here. Although probably not a good idea with tons of simultaneous users, this could make things upload progress bar much smoother for intranet applications.
madrobby: this is something for the Prototype framework, not script.aculo.us. Maybe a Prototype wishlist would be a good thing?

Bug?
I went to http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo and click Blind Down. The page becomes rather scrambled with the footer in the midst of the squares.

Bug?
In IE6, if the list of autocompleted elements is long enough such that it extends beyond the visible window, when one scrolls down to catch the lower elements, the list just disappears and the lower elements cannot be selected. This is no problem in firefox, mozilla, and even IE5. Is there anything I can do to work around this as it’s unusable in that state.

Request
Unless I’ve missed something in the docs, the only value to get sent through in an autocomplete field is the currently selected field, via POST. How does one get the rest of the form elements to be submitted to the server handling script? I’ve had to hack controls.js to ensure the fields I need get sent through, which is nasty. This is because I’m doing an autocomplete based on 4 input fields (each depends on the values of the others), not just one. If there was an option to auto-route through all field vals, this would become an extremely powerful feature.

New idea for autocomplete
Let’s say I want to build a source code editor, with autocomplete. I need to be able to invoke the autocomplete engine from anywhere in the editor area… Is there a way to do it right now? I’ll need to call autocomplete when the user presses the dot or when it presses ctrl+space (to autocomplete a method name).

Thanks

BUG
1.5 RC3 Element.toggle from prototype is broken now, or does thes syntax changed?

Request
The only thing i don’t like at the autocompleter is, that the width of the dropdown box is fixed by the size of the input field! It would be great, if the width could be bigger or even smaller than the input field, so complex formatting of larger text would be possible.

Andre

I find the solution myself: min-/max-width does the trick

Request?
It would be nice if the Autocompleter had some sort of caching mechanism (like Google Suggest), so that when you hit backspace, it gets the last result from cache instead of doing another ajax request.

I’ve been looking at some of the examples. The one on the demo page just does a request every time. The example on the home page doesn’t do a request on a backspace, but also doesn’t update the dropdown list. I don’t know if this is intended behaviour? I’m using IE6.

Jeffry

IE6 and SlideDown

Several of the combo effects have problems in IE, but I have only investigated SlideDown. I have noticed that in relatively positioned elements, such as in the demo, the contents of the element block do not overflow correctly. This results in the contents (the text, etc) of the block appearing above the top of the block and sliding down, instead of growing downward.

I think this is due to IE requiring that relative position be explicitly declared, or it is just another IE bug. Anyway a solution is to set the element to position = relative, either in the css, or in the Java Script of SlideDown. I don’t how this would impact absolutely positioned divs that SlideDown is applied to.

-Dan

Request
It would be great if the Autocompleter.Base.updateChoices(choices) method accepted either a text representation of the UL element or an object representation.

I’m not much of a JS wizz but here is my attempt at an implementation (only tested in Firefox):

  updateChoices: function(choices) {
    if(!this.changed && this.hasFocus) {
      // if choices is an object representation of a UL element
      // remove all child element from the conainter (so UL doesn't just keep
      // growing as new choices become available) and append the new choices
      if (choices.nodeName && choices.nodeName.toUpperCase() == "UL") {
        while (this.update.childNodes.length > 0) {
          this.update.removeChild(this.update.firstChild);
        }
        this.update.appendChild(choices);
      }
      // presume choices is a string
      else {
        this.update.innerHTML = choices;
      }
      Element.cleanWhitespace(this.update);
      Element.cleanWhitespace(this.update.firstChild);

      if(this.update.firstChild && this.update.firstChild.childNodes) {
        this.entryCount = 
          this.update.firstChild.childNodes.length;
        for (var i = 0; i < this.entryCount; i++) {
          var entry = this.getEntry(i);
          entry.autocompleteIndex = i;
          this.addObservers(entry);
        }
      } else { 
        this.entryCount = 0;
      }

      this.stopIndicator();

      this.index = 0;
      this.render();

    }
  }

Cheers,
Dan Washusen

Bug
In Place Edit make two Editfields on Safari

"control.js" 
493:   enterEditMode: function() {
              if ($(this.options.formId)) return;  //Add line

please change.

I’ve fixed an issue with Ajax.Request which made it impossible to set an onSuccess event handler.
There’s only one change which is to add parantheses around parts of this expression:
this.options[‘on’ + this.responseIs Success ? ‘Success’ : ‘Failure’]
which can be found in the “prototype.js” file in line 271 inside the “respondTo Ready State” function.
All changes in total are FROM: respondTo Ready State: function(readyState) { var event = Ajax.Request.Events[readyState];

if (event == 'Complete')
    (this.options['on' + this.transport.status]
     || this.options['on' + this.responseIsSuccess ? 'Success' : 'Failure']
     || Prototype.emptyFunction)(this.transport);
}
(this.options['on' + event] || Prototype.emptyFunction)(this.transport);

TO:

respondToReadyState: function(readyState) {
  var event = Ajax.Request.Events[readyState];
}
if (event == 'Complete')
  (this.options['on' + this.transport.status]
   || this.options['on' + (this.responseIsSuccess ? 'Success' : 'Failure')]
   || Prototype.emptyFunction)(this.transport);
(this.options['on' + event] || Prototype.emptyFunction)(this.transport);

Email me at bill@yahho.com (replace bill with thomas and yahoo with gmail)

Great scripts btw, I never actually thought it was possible to do good architecture in Java Script before I saw this library :)

Thomas
———————————
Version: ‘1.5_rc5’
I’m using this code:

<script>
function startdragitem(id)
{
  // here I have code that produce this string
  //<div id='1'><table><tr><td>my data</td></tr></table>
  document.body.appendChild(mydiv);
  // don't know why mydiv.fireEvent == undefined
  dr = new Draggable(divId, {handle:divId, revert:false});
  dr.eventMouseDown(event);
}
</script>
<table>
<tr onmousedown='startdragitem(1)' id='abc'><td>my data1</td></tr>
<tr onmousedown='startdragitem(2)' id='bcd'><td>my data2</td></tr>
</table>

but it works incorrectly because Draggable doesn’t notifies about mouseup, mousemove and so on. Also Droppables doesn’t receive onDrop event too. I’m using your classes in one very urgent project and just stuck at that place. You can send me email directly to maksimail@hotbox.ru. Thanks in advance.

—

I’m trying to use an array with to classnames as strings with the only-option on Sortables.create, but it doesn’t work. And I found the error at row ~500 in dragdrop.js (1.5.1). The parameter className is sent directly to Array.include that doesn’t handle an array as param.

I modified it like such:

  hasClassName: function(element, classNames) {
    if (!(element = $(element))) return;
      if (classNames.constructor != Array)
        classNames = [classNames];
      className.each(function(cls) {
        if (Element.classNames(element).include(cls))
          return true;
      });
  },

but either I did something wrong or the error is somewhere else.

-Glenn Nilsson