mercadolibre / chico Goto Github PK
View Code? Open in Web Editor NEWA collection of easy-to-use UI components.
Home Page: http://chico.mercadolibre.com
License: MIT License
A collection of easy-to-use UI components.
Home Page: http://chico.mercadolibre.com
License: MIT License
Add support to Video on Viewer component: http://www.chico-ui.com.ar/?q=node/28
We are using:
chico-min-0.5.7.css and chico-min-0.5.7.js
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
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.
For example in http://chico-ui.com.ar/en/components Modal is positioning at center of iframe
And a mechanism to erase instances from the instances map to free browser memory on heavy works.
We need a delete method in every component to:
Make a plan.
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.
Al ingresar en el picture viewer se muestra la lupa, aunque no se este sobre la imagen para abrir el modal.
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
Add Accordion, Menu and Secondary skin button to Website and Webserver Showroom
Mesh dosen't have any link to download.
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);
Apply positioner method on dimmer.
Include elastic behavior and sizes configured by parameters
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.
Only first movement don't work.
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.
Add support to Map on Viewer component: http://www.chico-ui.com.ar/?q=node/28.
Migrate methods show and hide to support CSS3 with a jQuery.animte fallback.
Avoid selecting text when double click. This behavior is odd when its comes to a Carousel, or Viewer, even Navs like Dropdown, or Accordeon,
Include Video support on Viewer test-cases
Rethink the structure and behaviors of Navs family.
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.
Codelighter: Update color palette:
Reference: http://ethanschoonover.com/solarized
We are not using that branch and its pretty old...
We need to be able to create components without a DOM trigger.
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
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.
Every Helper instances are exposing private data.
The expando shown always open on v0.6.0 in firefox4 and chome (both on mac). Add class ch-hide to hide the content.
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)
.
We need a method to set and get content from floats.
Watchers: Add suport to doble inputs validations, always use as a reference the second input.
Replace component.public for component["public"]
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
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
Algo para tablas! tipo el admin de mercadoclics :)
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
Carousel: Define with and height trough arguments.
$().carousel({ width: 330, height: 100 });
Lo probé en Chrome 10.0.648.204 en Ubuntu 10.10 usando la página de playground del www.chico-ui.com.ar
Codelighter is rendering HTML when content has form tags
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 + - * ( )
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.