Code Monkey home page Code Monkey logo

mootools-more's Introduction

MooTools More

MooTools Plugins and Enhancements Repository
Build Status


Contribute

You are welcome to contribute to MooTools! What we ask of you:

a. To report a bug:

  1. Create a jsFiddle with the minimal amount of code to reproduce the bug.
  2. Create a Github Issue, and link to the jsFiddle.

b. To fix a bug:

  1. Clone the repo.
  2. Fix the bug.
  3. Add a spec.
  4. Build and run the specs.
  5. Push to your Github fork.
  6. Create Pull Request, and send Pull Request.

Do try to contribute! This is a community project.

TO DO

  • change the interactive specs to work without the Clientcide dev app
  • deprecate and remove things from -More that are deprecated or not maintained anymore
  • add touch / mobile functionality
  • make detach method for all classes that attach to elements
  • make destroy method for all classes that create elements

StyleGuide

Building & Testing

Current build process uses Grunt, Grunt MooTools Packager plugin, and Karma related repos.

By default, the build process runs the tests (specs) relevant to the build. To build without testing see the packager build targets.

Testing locally

MooTools More has 2 test suites. One interactive that needs you to click & drag elements, and one non-interactive where the Jasmine & Karma do the whole job.

To run the interactive specs you have to install mootools-ui-runner. If you follow the link you find the 2 step quick setup.

To run the non-interactive specs you can follow these steps in order:

$ git clone https://github.com/mootools/mootools-more  # clone the MooTools repo
$ cd mootools-more                                     # get into the directory
$ npm install                                          # install de testing tools
$ npm install grunt-cli -g                             # install the Grunt command line interface
$ grunt default                                        # run the specs!

You can also change which browser to call in the Gruntfile.js. Note that most browsers need to be closed when starting tests so Grunt-Karma opens and closes the browser. Otherwise they might not close on its own and fire a timeout error for inactivity.

Example:

continuous: {
	browsers: ['PhantomJS', 'IE', 'Chrome', 'Firefox', 'Safari']
},

If the log is too long, or if you want to store it in a file you can do:

$ grunt > logs.txt   # This will create a new file called "logs.txt" in the local directory

Building MooTools With Compatibility

This means 1.5.x that is compatible with: 1.4.x, 1.3.x, 1.2.x, and so on.

Examples

grunt               # to build and run specs, or
grunt packager:all  # to only build the source

Building MooTools Without Compatibility

This means 1.5.x without deprecated code in 1.4.x, 1.3.x, 1.2.x, and so on.

'Proceed at your own risk'
See the changelog or the blog related to each version for migrating your code.

Examples

grunt nocompat           # to build and run specs, or
grunt packager:nocompat  # to only build the source

Testing on Travis & Sauce Labs

Every new Build and Pull Request is now tested on Travis and Sauce Labs. You can also open your own free account on Travis and Sauce Labs to test new code ideas there.

Travis testing uses PhantomJS which is a headless browser. When connected to Sauce Labs then it is possible to choose any number of different Browsers and Platforms. You will need in this case to change the login key so it will match your account.

Browsers, Platforms, and More

This test suite is ready for Travis & SauceLabs. You can also run locally.

Support:

  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera
  • PhantomJS (virtual browser)

More Information

mootools-more's People

Contributors

3n avatar anutron avatar appden avatar arian avatar barryvan avatar cpojer avatar csuwildcat avatar darkwing avatar diegomax avatar fakedarren avatar fat avatar gcheung55 avatar henrikh avatar holyshared avatar ibolmo avatar kassens avatar kentaromiura avatar lorenzos avatar nw avatar okolvik avatar rauchg avatar ryanflorence avatar salimbensiali avatar sebmarkbage avatar sergiocrisostomo avatar slik avatar subhaze avatar subtlegradient avatar timwienk avatar tonio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mootools-more's Issues

Waiter Request integration, useless waiterTarget option

Hy!

I've found a problem with Waiter's integration in Request. It doesn't care if the waiterTarget value set when it has an element to update.

So I changed the order of this.options.update || this.options.waiterTarget to the opposite, because in my opinion, the explicit option (waiterTarget) has to have more priority than defaulting to the updated element!

Here is a patch from what I exactly did :)
http://www.iwstudio.hu/~u-foka/WaiterTargetFix.patch

Scroller class not working

I have found that the Scroller class was not working properly.

scroll: function(){
  // ...
  pos = this.element != this.docBody ? this.element.getOffsets() : {x: 0, y:0},
  // ...
}

When instantiating class like this : new Scroller(window); ; the previous method calls getOffsets of window and it's not defined.

There is more than one way to fix this so I will let you decide.
Either you can implement getOffsets in window and document like this :

[Document, Window].invoke('implement', {
  // ...
  getOffsets: function(){
    return {x: 0, y: 0};
  },
  // ...
}

or you can fix the Scroller class the way you want.

It is your call, you probably know better than me.

Fx.Scroll toElementEdge / toElementCenter don't work as expected

This line in both methods prevents animating if the current x,y are the same as the target x,y:

if (to.x != scroll.x || to.y != scroll.y) this.start(to.x, to.y);

However, as start() is never called, this also prevents the onComplete callback or .chain functions from firing.
(This is different to how toElement works, which will always fire the callback, even if the coordinates remain the same.)

As a user of these methods, I would expect the onComplete callback to always fire, even if no scrolling actually happens.

Table.sort: problem with localized sorting

String sorting is not working properly for some languages, fe:
http://jsfiddle.net/jYsks/1/

In polish 'ń' goes after 'n', so it should be:

"koń", "kos", "kot".

Instead it is

"kos", "kot", "koń".

Best solution would be acceptance of additional function for parser object, then You could sort by any function user need (localized string sort, some special document number format sort, etc.).
https://github.com/testeria/mootools-more/blob/patch-1/Source/Interface/HtmlTable.Sort.js

Form.Validator - validate-date bug in FF4/IE9

The date validator doesn't work correctly in FF4 and IE9 (no others tested except Chrome, which works)

See:
http://jsfiddle.net/LgJsN/1809/

Entering 31/31/2009 results in a validated field, except that the value of the input field changes into "31/07/2011", which is obviously not the same as the (invalid) date input of "31/31/2009".

Also, when entering a valid date (dateFormat:'%d/%m/%Y') such as "31/02/1999" messes things up, as it changes into "02/07/2001"

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/359985-form-validator-validate-date-bug-in-ff4-ie9?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github).

Form.validator email does not validate correctly!

'[email protected]' passes as valid email even as it is not and 'foo#[email protected]' does not validate even tough it is valid. I suggest the following change:

from
/^[A-Z0-9.%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i
to (some char escaping could go here):
/^[a-z0-9!#$%&'*+-/=?^
`{|}~]{1,64}@([a-z0-9-]{1,63}.)+[a-z]{2,4}$/i

reference from http://en.wikipedia.org/wiki/Email_address#Syntax

There should be another method that "makes sure" there is no double dot (..) in the email.

Locale.it-IT.Date.js

Hi...

i've found that in the it-IT Locale there are some values missing:

week(s)Ago/Until, month(s)Ago/Until and year(s)Ago/Until

i don't know if also other languages have value missing...

cya

Sortables - event.rightClick check

Issue with using Sortables, if right clicking on an item in the list the list stops functioning maybe due to the check for event.rightClick in the Drag class.

can be fixed with doing a check for event.rightClick in the start function of Sortables class too

All the best

Tips.fireForParent calls itself recursively with arguments mixed up

The last line of Tips.fireForParent(event, element) looks like this:

else this.fireForParent(parentNode, event);

Given the argument signature of the method, this seems like the arguments are given in the wrong order, and that the event should be given before parentNode. This leads to an error in event propagation to parent element, preventing tooltips on parent elements from triggering on mouse events on their children.

Sortables: custom clone tag

It will be great to make custom clone tag (now it is DIV) changeable by options.
In some cases it is useful to sort table rows. In that cases DIV element breaks table structure and it is needed to use TR instead
Thanks.

[Enhancement] Lang: Autodetect current language

Browser.Language = (function(){
    var lang = navigator.language ? navigator.language : navigator.userLanguage;
    if(!lang.match(/\w+-\w+/))
        lang = lang + '-' + lang.toUpperCase();
    return lang;
})();

MooTools.lang.setLanguage(Browser.Language);

Drag.Move.calculateLimit: options.container within scrollable div content ignoring scroll offset

Hi,

I positioned a div with draggable elements within a container of style overflow:auto.
The div with the draggable elements are in the overflow area (need to scroll down to see it)

In this case, the limitations (options.container) are wrongly calculated since the scroll offset
is ignored.

I fixed this issue with the following lines of code at the end of Drag.Move.calculateLimit:

if (element.getOffsetParent()) {
  top += element.getOffsetParent().getScroll().y;
  bottom += element.getOffsetParent().getScroll().y;            
  left += element.getOffsetParent().getScroll().x;
  right += element.getOffsetParent().getScroll().x;         
}
return {
   x: [left, right],
   y: [top, bottom]
};

More>Object.Extras :: Object.setToPath

Hi MooTools pals.

Once time ago I wrote a XML2Js converter, and some of you helped me (at Google Group) with a function I was requiring that time, which I believe should be part of MooTools More Object.Extras.

It is a setToPath function, which basically create object paths from strings and fill it with a value.

Next, it's code:

function setToPath (source, path, val) {
        var parts = key.split('.'),
            source2 = source; // so we can return the object
        for (var i = 0, l = parts.length; i < l; i++) {
            // So when the value does not exist (and is an own property) or is not an object
            if (i < (l - 1) && (!source.hasOwnProperty(parts[i]) || !Type.isObject(source[i]))){
                source[parts[i]] = {};
            }

            if (i == l - 1) source[parts[i]] = val;
            else source = source[parts[i]];
        }
        // Return the modified object
        return source2;
    }

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/359991-more-object-extras-object-settopath?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github).

onDrag fires regardless of being outside of it's limit

Hi, discussed this a bit on #mootools, but it's good to get some more feedback about whether this is expected behaviour or not, so here goes:

The "issue" occurs when creating a Drag instance and attaching a limit to it. If you then try to drag the element outside of it's limit, the element itsself will halt nicely, however, onDrag will keep firing as long as you hold the mouse button and move the mouse around. For me, expected behaviour would be that onDrag only fires if the actual element moves.

Discuss! :)

URI.js source encoding incorrect.

The URI.js script has file encoding as ANSI, rather than "UTF-8".
Results in incorrect encoding saved when building scripts with build.rb.

Bad characters in author name should be fix, too.

Fx.Accordion previous index incorrect value in the events

Example:

var index = 0;

var myAccordion = new Fx.Accordion(togglers, elements, {
    onActive: function(toggler, element){
        alert(index===this.previous);
    }
});

myAccordion.display(index);  // return true (index = 0 and this.previous should be -1)
index++;
myAccordion.display(index); // return true (index = 1 and this.previous should be 0)

Suggestion #1:

Set "this.previous" before the last line of "display" method

display: function(index, useFx){
   ..
   ...
   this.previous = index;
   return useFx ? this.start(obj) : this.set(obj);
}

Suggestion #2:

Add "this.current" index value

initialize: function(){
  ..
  ...
  this.current = this.previous = -1;
  ..
},

display: function(index, useFx){
   ..
   ...
   this.current = index;
   this.selfHidden = false;
   ..
   ...
   this.previous = index;
   return useFx ? this.start(obj) : this.set(obj);
},

Element.getComputedSize not working with IE and relative dimensions. (LightHouse #537)

this was lighthouse ticket 537

The problem:
the function Element.getComputedSize doesn't return correct values of width and totalWidth.

Browsers affected:
Internet Explorer 7/8.

When this bug happen:
when the element has a relative width (ex. % or em).

Example:
http://jsfiddle.net/NKjoep/VvrAs/

Here also a JSSpec example:
http://dl.dropbox.com/u/1840263/getComputedSize/test1.html

So in these example, the Element.getSize is working well.
Why not to rely on it? Element.getComputedSize shouldnt get the actual real size
and then add the optional parameters (such as padding, borders...)?

Form.Validator.Spanish.js Typo

on the email error message there's a typo:

Por favor, introduce una direccione de email valida. Por ejemplo, "[email protected]

It should be:

Por favor, introduce una direccion de email valida. Por ejemplo, "[email protected]

Also I've noticed that there's no acute characters where they should be:

direccion

should be:

direcci&oacute ;n (there's a space there because this editor parses the acute code)

There are a lot of other ones

Documenation: validate-no-space

validate-no-space should be changed to validate-nospace or rather validate-nospace updated in the more to be validate-no-space.

Cheers

Suggestion to add Template class to Mootools-More

Hi,

Please have a look a this and see if it good enough to include in Mootools more, it started as a suggestion to extend String.substitue to become a class to deal with templates :)

http://allochi.wordpress.com/2011/08/19/mootools-html-templates/

If Mootools team likes it, I can spend more time on it (which I will anyway) and send you the code, otherwise I can add it to forge, in anyway it's part of my HTML5 editor project that I'm working on now, and I would be happy if it see its way to in Mootools-More.

Thanks for Mootools!

Option to pass Keyboard events to parent Keyboard

I have a certain Keyboard usage case that is not supported by the current implementation of Keyboard. I've found a workaround, but I want to see if this feature is feasible for a future release of MooTools More.

I have a UI control (X) that has its own keyboard. One of the events (X) handles is 'esc', which tells (X) to close.

Inside of (X) is another control (Y), which is held by but not coupled to (X). (Y) knows nothing of (X) or (X)'s Keyboard. (Y) does not care about the 'esc' key. However, even when (Y) has focus, the user is going to expect 'esc' to close (X).

I have implemented a KeyboardStack, such that when (Y) pushes its Keyboard onto the stack, (X)'s Keyboard (already on the stack) becomes the manager of (Y)'s Keyboard. This allows me to simply dependency-inject a KeyboardStack into (X) and (Y), without either control being aware of anything beyond the KeyboardStack. Very minimal, generic coupling. However, while this makes it easy to push and pop a Keyboard hierarchy, it doesn't give me the ability to send key events up a chain of command.

It makes no sense for me to couple (Y) directly to (X) just to tell (X) that (Y) received an 'esc' event. What I really want is for all key events NOT handled by (Y)'s Keyboard to merely propagate up to (X)'s Keyboard.

Current propagation model: Keyboard.manager > deepest Keyboard > window

The behavior I desire: deepest Keyboard > shallower Keyboard > Keyboard.manager > window.

I need to have an event to run up the Keyboard chain until one of the Keyboard instances stops that event.

To be less vague, I have a dialog window, and inside that dialog window is an auto-complete element. The auto-complete element needs to watch for 'up', 'down', and 'enter'. However, 'esc' should always close the dialog window, even if the auto-complete element has focus. Forcing the user to blur that element (which deactivates its Keyboard instance) before 'esc' will close the window is confusing to the user. Furthermore, adding logic to the auto-complete element that teaches it how to look for a parent dialog window and close that window on 'esc' makes no sense.

Is there any existing plan in More's development path that would enable some Keyboard instances use this "Propagate unhandled events upward" model, while making sure Keyboard instances still use the current model by default? Does anyone else like this feature idea?

Without that feature, my current workaround is:

myKeyboard._manager.fireEvent('keyup:keys(esc)');

This has obvious limitations and is really hacky.

version 1.2.3 - errorPrefix in Formvalidator not being presented correctly

setting errorPrefix: 'Fejl: ', inside MooTools.lang.set('da-DK', 'FormValidator', {
does not work.

Instead of showing the language specific text, it still shows 'Error: '.

All the other language specific messages are correctly shown.

Taken from the Formvalidator class:
errorPrefix: function(){
return FormValidator.getMsg('errorPrefix') || 'Error: ';
}

and from Formvalidator.Inline class:

this.errorPrefix = $lambda(this.options.errorPrefix)();

Drag.Move limit misbehaviour

A Drag.Move with a container, inside a Drag.Move with a border, will not have correct limits.
I think the error is related to the way the parent element might be repositioned upon initialization, but I'm not sure at all.
An example can be found here: http://mootools.net/shell/Ddcy4/

Mask Size

The Mask size has a problem when the scroll bar is present.
You can scroll down and see that there is no mask. It's a very simple change on the code of mask.js on line:

    if (this.target == document.body) {
        var win = window.getSize();

for this:

    if (this.target == document.body) {
        var win = window.getScrollSize();

Slider bug on full step mode

I need to use a slider without step, but it has a strange behavior when I click on the bar (it goes back to start).

How to reproduce :
new Slider('bar', 'knob', { steps: false });
Drag the knob, then click on the bar.

How to fix it :
In Slider.js :

70a71
>               this.steps = this.options.steps || this.full;
72c73
<               this.max = $chk(this.options.range[1]) ? this.options.range[1] : this.options.steps;

---
>               this.max = $chk(this.options.range[1]) ? this.options.range[1] : this.steps;
74d74
<               this.steps = this.options.steps || this.full;

Bye

:relay() doesn't listen to fireEvent

console.log('relay click'); never gets triggered if i rollover my green box. i think it's a bug. relay should be listening for elem.fireEvent();
here is a testcase, you obviously need a mootools-more version with relay support.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div id="box" style="width: 200px; height:200px; background: green"></div>
        <a href="http://google.de" id="plus">+</span>
        <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script> 
        <script src="mootools-more.js"></script> 
        <script>
            $('box').addEvent('mouseenter', function(e){
                $('plus').fireEvent('click', [e]);
            });
            document.body.addEvent('click:relay(a)', function(e){
                console.log('relay click');
                e.preventDefault();
            });
            $$('a').addEvent('click', function(e){
                console.log('fixed click');
                e.preventDefault();
            });
        </script>
    </body>
</html>

Review for package re-org

  1. Review all of the things
  2. Propose moving some stuff into other MooTools Milk packages
  3. Propose splitting off groups of related classes into new Milk packages

Be sure to take into account who tends to work on which things and don't make it unnecessarily difficult to maintain.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/359947-review-for-package-re-org?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github).

Fx.Reveal buggy in FF/Safari

Test case: http://mootools.net/shell/7FpZe/1/

Hovering back and forth between the menu items will eventually make a drop down freeze. Safari will output a "RangeError: Maximum call stack size exceeded.", while Firebug will show nothing(?).

I have tried running the same code with e.g. Fx.Slide, and it doesn't create any errors.

Better interface for URI.getData

Now it returns a string for single GET parameter and Array for multiple GET parameters with the same name. Because of this code that uses getData have to do typeOf('array') checks every time. I think this is easy to miss and the existing interface may cause many subtle bugs in the wild.

My proposal:

  • always return Arrays in getData because correct code for the existing behavior have to check typeOf('array') anyway and this check will be true so returning Array is almost backwards-compatible for the correct existing code;
  • add 'getDataObject' (not sure about the name) method that will always return single values.

setData may stay untouched and accept both variants.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/359945-better-interface-for-uri-getdata?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.