mercadolibre / chico Goto Github PK

Codelighter is rendering HTML when content has form tags

Replace component.public for component["public"]

Codelighter: Update color palette:

• Improve contrast
• and readability

Reference: http://ethanschoonover.com/solarized

Include elastic behavior and sizes configured by parameters

Only first movement don't work.

Add Accordion, Menu and Secondary skin button to Website and Webserver Showroom

And a mechanism to erase instances from the instances map to free browser memory on heavy works.

• Erase a component from itself:
  modal.erase( null );
• Erase a instance and his family:
  ch.eraser( 0 ); // uid
• Erase a type of component:
  ch.eraser( "tooltip" );
• Erase all:
  ch.eraser( "meltdown" );

With these things done

We need a delete method in every component to:

• Unbind events
• Remove HTML Snippets
• Erase variables

Make a plan.

Watchers and other components are repeating code for creating interfaces with the same structure. We could create a method somewhere to automate this process and shave some bytes.

The URL validator seem to be too permisive in Chico 0.5.7. For example the string "foo" is a valid URL, as well as any string with at least one non-whitespace character, like the string "½" or even "uʍop-ǝpısdn" or "☠".

The problem (probably) lies in the regex that Chico uses to validate URL's:

/((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/

As all the groups are optional except (\S+), it makes every string a valid URL except the empty ones:

>>> /((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test('|@#~½¬')
true
>>> /((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test('   ')
false

Maybe the regex should check that the characters are valid ones. Or use the jQuery Validation plugin.

Estuve viendo que los labels no dan foco al campo input.
Probé agregarle overflow:hidden; ya que los elementos internos están flotados y comenzó a tomar el evento.

FF 3.6.13 Ubuntu

http://wiki.ml.com/display/ux/Tablas+MP

We need a method to set and get content from floats.

Mesh dosen't have any link to download.

Al ingresar en el picture viewer se muestra la lupa, aunque no se este sobre la imagen para abrir el modal.

Watchers: Add suport to doble inputs validations, always use as a reference the second input.

We are not using that branch and its pretty old...

Rethink the structure and behaviors of Navs family.

As of now, there is no built-in mechanism to validate telephones in Chico. It would be neat to have one :)

Probably just a simple regex to validate that input consists of just numbers, spaces, and some symbols, like + - * ( )

En base a la definición: http://wiki.ml.com/display/ux/Input+de+precios

Cualquier duda, me consultan a mí o PatoBlanc que lo definió. Yo estoy encargado del seguimiento y soporte.

Saludos
Ivan

Avoid selecting text when double click. This behavior is odd when its comes to a Carousel, or Viewer, even Navs like Dropdown, or Accordeon,

If I have an element with a handler attached to the "blur" event:

$(element).blur(someHandler);

And a watcher for that element:

watcher = $(element).required();

When calling watcher.reset() the event handler someHandler gets unbound from the "blur" event.

This is quite annoying, as I have to remember to re-bind the handlers after calling reset, which makes the Chico-related code highly coupled with the rest of the application.

Taking a look at Chico's code, I noticed that the reset method is calling .unbind("blur") on the element, which unbinds all the blur handlers attached to it, when it probably should only unbind the handlers that Chico has attached, calling unbind with a second argument: unbind(event, handler).

Support

• Navigation
• Zoom
• Close

We need to be able to create components without a DOM trigger.

Support

• Navigation

Add support to Map on Viewer component: http://www.chico-ui.com.ar/?q=node/28.

Every Helper instances are exposing private data.

Carrousel: Add support to elastics widths and add a redraw method so carrousel data can be re-processed. Maybe is a good idea subscribe to the global event CHANGE_LAYOUT or something.

Lo probé en Chrome 10.0.648.204 en Ubuntu 10.10 usando la página de playground del www.chico-ui.com.ar

http://wiki.ml.com/display/ux/Checkbox+Desplegables

Según la definición de interacción: http://wiki.ml.com/display/ux/Calendar

El sprite está en: http://wiki.ml.com/download/attachments/48435923/sprite-calendar.png?version=1&modificationDate=1303911090387

Cualquier duda me consultan.

Saludos
Ivan

The expando shown always open on v0.6.0 in firefox4 and chome (both on mac). Add class ch-hide to hide the content.

Apply positioner method on dimmer.

Migrate methods show and hide to support CSS3 with a jQuery.animte fallback.

En el skin de ML el padding en

.ch-bellows-content li
es
3px 0 3px 20px; lo que hace que ese li quede más alto que el li contenedor (L1)

recomiendo usar el padding con valor:

0 0 0 20px;

Saludos!

Fer Martin

For example in http://chico-ui.com.ar/en/components Modal is positioning at center of iframe

Add support to Video on Viewer component: http://www.chico-ui.com.ar/?q=node/28

We have a serious issue with performance here. Viewer is creating a lot of modals and using a lot of memory.
We need to handle a singleton instance of a modal component.

Given a a watcher with validations other than required, on blur event it's not revalidated, hence validation errors don't go away.
This is due to pre-validation of ch.watcher.validate() method:
if ( !that.validations.hasOwnProperty("required") && that.isEmpty() ) { return; }
When the field isn't required and is empty, it just returns but it doesn't change watcher's active satus nor hides the helper message

Include Video support on Viewer test-cases

Algo para tablas! tipo el admin de mercadoclics :)

After upgrading our project from Chico 0.5.4 to 0.5.6 the Required watcher stopped working on select tags.

This is a sample page that shows the unexpected behavior:

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="es" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="es" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="es" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head>
    <script></script>
    <meta charset="utf-8">
    <title>Chico UI</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="http://download.chico-ui.com.ar/chico-min-0.5.6.js"></script>
    <link rel="stylesheet" href="http://download.chico-ui.com.ar/chico-min-0.5.6.css">
</head>
<body>
<div class="box">
    <form action="#">
        <fieldset>
            <ul>
                <li class="fieldBox">
                    <label class="required" for="field">
                        <span>Skub? <em>*</em></span>
                        <select id="field" required="required">
                            <option value="">-- Choose --</option>
                            <option value="1">Pro Skub</option>
                            <option value="2">Anti Skub</option>
                        </select>
                    </label>
                    <p class="help">Why is this not working?</p>
                </li>
            </ul>
        </fieldset>
        <p class="actions">
            <input type="submit" value="Send" class="btn primary">
        </p>
    </form>
</div>
<script>
var form = $('form').form({
    messages: {
        required: "It's required",
    }
});
$('#field').required();
</script>

</body>
</html>

No error message is shown when the form is submitted with the "-1" value.

With prevoius versions of Chico, the value "-1" is treated as a no selection and causes a validation error when trying to submit the form, but it doesn't seem to be the case anymore. Now the empty string value "" is the one that triggers the validation error.

Actually we are sending a querystring x=x to let the server know when is an ajax request. There is a better way to do this, by creating a header in the request. Available with jQuery 1.5

Don't remove the query string for backwards compatibility.

El padding de las cajas actuales son mayores a los definidos.
http://wiki.ml.com/download/attachments/20152485/error_generico.png?version=7&modificationDate=1291913227000
Saludos!
Ivan

We are using:
chico-min-0.5.7.css and chico-min-0.5.7.js

Support

• Close (only in components with close button)

Carousel: Define with and height trough arguments.

$().carousel({ width: 330, height: 100 });

Today Watchers are merging a lot of data and processing a lot of things without any particular reason. We need to improve the merge instances process.

Create a small keyboard event handler so components can lisent keyboard events and subscribe to call actions.
This handler should trigger friendly keyword event like "enter" or "esc" so in a component you could:
$(document).bind("enter", function(){ component.send(); });
$(document).bind("esc", function(){ component.close(); });
The handler should trigger like:
$(document).trigger(ch.events.KEY.ENTER);