diff --git a/README.md b/README.md index 4f92f9d641..c59ab8b640 100755 --- a/README.md +++ b/README.md @@ -169,6 +169,7 @@ List of Definitions * [Vimeo](http://developer.vimeo.com/player/js-api) (by [Daz Wilkin](https://github.com/DazWilkin/)) * [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) (by [Ken Smith](https://github.com/smithkl42)) * [YouTube](https://developers.google.com/youtube/) (by [Daz Wilkin](https://github.com/DazWilkin/)) +* [Zepto.js] (http://zeptojs.com/) (by [Josh Baldwin](https://github.com/jbaldwin)) * [Zynga Scroller](https://github.com/zynga/scroller) (by [Boris Yankov](https://github.com/borisyankov)) * [ZeroClipboard](https://github.com/jonrohan/ZeroClipboard) (by [Eric J. Smith](https://github.com/ejsmith)) diff --git a/zepto/zepto-tests.ts b/zepto/zepto-tests.ts new file mode 100644 index 0000000000..aa23d79e77 --- /dev/null +++ b/zepto/zepto-tests.ts @@ -0,0 +1,308 @@ +/// + +$('div') //=> all DIV elements on the page +$('#foo') //=> element with ID "foo" +$("

Hello

") //=> the new P element +$("

", { text: "Hello", id: "greeting", css: { color: 'darkblue' } }) + +Zepto(function ($) { + alert('Ready to Zepto!'); +}) + +$.camelCase('hello-there') //=> "helloThere" +$.camelCase('helloThere') //=> "helloThere" + +$.each(['a', 'b', 'c'], function (index, item): bool { + console.log('item %d is: %s', index, item); + return true; +}); + +var hash = { name: 'zepto.js', size: 'micro' } +$.each(hash, function (key, value) { + console.log('%s: %s', key, value); + return true; +}); + +var target = { one: 'patridge' }, + source = { two: 'turtle doves' } + +$.extend(target, source); + +$.fn.empty = function () { + return this.each(function () { this.innerHTML = '' }); +} + +$.isPlainObject({}); // => true +$.isPlainObject(new Object); // => true +$.isPlainObject(new Date); // => false +$.isPlainObject(window); // => false + +$('form label').after('

A note below the label

'); + +$('ul').append('
  • new list item
    • '); + +$('
  • new list item
    • ').appendTo('ul'); + +var form = $('form') +form.attr('action') //=> read value +form.attr('action', '/create') //=> set value +form.attr('action', null) //=> remove attribute + +form.attr('action', '/create').attr('action'); // => create and read + +// multiple attributes: +form.attr({ + action: '/create', + method: 'post' +}); + +$('ol').children('*:nth-child(2n)'); + +var elem = $('h1') +elem.css('background-color') // read property +elem.css('background-color', '#369') // set property +elem.css('background-color', '') // remove property + +// set multiple properties: +elem.css({ backgroundColor: '#8EE', fontSize: 28 }); + +$('form input').each(function (index) { + console.log('input %d is: %o', index, this); + return true; +}); + + +$('li').eq(0); //=> only the first list item +$('li').eq(-1); //=> only the last list item + +var elements = $('h2') +elements.get() //=> get all headings as an array +elements.get(0) //=> get first heading node + +$('#foo').height(); // => 123 +$(window).height(); // => 838 (viewport height) +$(document).height(); // => 22302 + +$('.comment p').html(function (idx, oldHtml) { + return oldHtml.replace(/(^|\W)@(\w{1,15})/g, + '$1@$2') +}); + +$('li:nth-child(2)').index(); + +$('

    Emphasis mine.

    ').insertAfter('blockquote'); + +$('

    See the following table:

    ').insertBefore('table'); + +$('li').last(); + +elements.map(function () { return $(this).text() }).get().join(', '); + +$('dl dt').next(); //=> the DD elements + +$('h1').parents(); //=> [, , ] + +$('body > *').pluck('nodeName'); // => ["DIV", "SCRIPT"] + +var element = $("
    "); +var pos = element.position() + +// position a tooltip relative to the element +$('#tooltip').css({ + position: 'absolute', + top: pos.top - 30, + left: pos.left +}) + +$('ul').prepend('
  • first list item
    • '); + +$('
  • first list item
    • ').prependTo('ul'); + +var input = $('input[type=text]'); +$('#too_long').toggle(input.val().length > 140); + +$(document.body).append('

    Content

    '); +$('#wrapper p').unwrap().parents(); //=> [, ] + +$('#foo').width(); // => 123 +$(window).width(); // => 768 (viewport width) +$(document).width(); // => 768 + +// wrap each button in a separate span: +$('.buttons a').wrap(''); + +// wrap each code block in a div and pre: +$('code').wrap('
    ');
+
+// wrap all form inputs in a span with classname
+// corresponding to input type:
+$('input').wrap(function (index) {
+	return '';
+})
+//=> ,
+//   
+
+// WARNING: will not work as expected!
+$('broken').wrap('
  • ').appendTo(document.body);
+// do this instead:
+$('better').appendTo(document.body).wrap('
  • ');
+
+$('a.button').wrapAll('
    ');
+
+// wrap the contents of each navigation link in a span:
+$('nav a').wrapInner('');
+
+// wrap the contents of each list item in a paragraph and emphasis:
+$('ol li').wrapInner('
    ');
+
+$.Event('mylib:change', { bubbles: false });
+
+var obj = { name: 'Zepto' };
+var handler = function (e: Event) {
+	console.log("hello from + ", this.name);
+	return true;
+};
+
+// ensures that the handler will be executed in the context of `obj`:
+$(document).on('click', <(e: Event) => bool>$.proxy(handler, obj));
+
+elem = $('#content');
+// observe all clicks inside #content:
+elem.on('click', function (e) { return true; });
+// observe clicks inside navigation links in #content
+elem.on('click', 'nav a', function (e) { return true; });
+// all clicks inside links in the document
+$(document).on('click', 'a', function (e) { return true; });
+
+// add a handler for a custom event
+$(document).on(
+	'mylib:change',
+	<(e: Event) => bool>function (e, from, to) {
+		console.log('change on %o with data %s, %s', e.target, from, to);
+		return true;
+	}
+)
+// trigger the custom event
+$(document.body).trigger('mylib:change', ['one', 'two']);
+
+$(document).on('ajaxBeforeSend',
+	<(e: Event) => bool>function (e, xhr, options) {
+		// This gets fired for every Ajax request performed on the page.
+		// The xhr object and $.ajax() options are available for editing.
+		// Return false to cancel this request.
+		return true;
+	});
+
+$.ajax({
+	type: 'GET',
+	url: '/projects',
+	// data to be added to query string:
+	data: { name: 'Zepto.js' },
+	// type of data we are expecting in return:
+	dataType: 'json',
+	timeout: 300,
+	context: $('body'),
+	success: function (data) {
+		// Supposing this JSON payload was received:
+		//   {"project": {"id": 42, "html": "
    ..." }}
+		// append the HTML to context object.
+		this.append(data.project.html)
+	},
+	error: function (xhr, type) {
+		alert('Ajax error!')
+	}
+})
+
+// post a JSON payload:
+$.ajax({
+	type: 'POST',
+	url: '/projects',
+	// post payload:
+	data: JSON.stringify({ name: 'Zepto.js' }),
+	contentType: 'application/json'
+})
+
+$.get('/whatevs.html', function (response) {
+	$(document.body).append(response)
+});
+
+$.getJSON('/awesome.json', function (data) {
+	console.log(data)
+});
+
+// fetch data from another domain with JSONP
+$.getJSON('//example.com/awesome.json?callback=?', function (remoteData) {
+	console.log(remoteData)
+});
+
+$.param({ foo: { one: 1, two: 2 } });
+//=> "foo[one]=1&foo[two]=2)"
+
+$.param({ ids: [1, 2, 3] });
+//=> "ids[]=1&ids[]=2&ids[]=3"
+
+$.param({ ids: [1, 2, 3] }, true);
+//=> "ids=1&ids=2&ids=3"
+
+$.param({ foo: 'bar', nested: { will: 'not be ignored' } });
+//=> "foo=bar&nested[will]=not+be+ignored"
+
+$.param({ foo: 'bar', nested: { will: 'be ignored' } }, true);
+//=> "foo=bar&nested=[object+Object]"
+
+$.post('/create', { sample: 'payload' }, function (response) {
+	// process response
+});
+
+$.post('/create', $('#some_form').serialize(), function (response) {
+	// ...
+});
+
+$('#some_element').load('/foo.html #bar');
+
+$('form').serializeArray();
+//=> [{ name: 'size', value: 'micro' },
+//    { name: 'name', value: 'Zepto' }];
+
+$.fx.off = true;
+$.fx.speeds._default = 500;
+$.fx.speeds.fast = 100;
+$.fx.speeds.slow = 1000;
+($.fx.speeds).custom = 20;
+
+$("#some_element").animate({
+	opacity: 0.25, left: '50px',
+	color: '#abcdef',
+	rotateZ: '45deg', translate3d: '0,10px,0'
+}, 500, 'ease-out');
+
+$.os.phone;
+$.os.tablet;
+
+// specific OS
+$.os.ios;
+$.os.android;
+$.os.webos;
+$.os.blackberry;
+$.os.bb10;
+$.os.rimtabletos;
+
+// specific device type
+$.os.iphone;
+$.os.ipad;
+$.os.touchpad;
+$.os.kindle;
+
+// specific browser
+$.browser.chrome;
+$.browser.firefox;
+$.browser.silk;
+$.browser.playbook;
+
+// Additionally, version information is available as well.
+// Here's what's returned for an iPhone running iOS 6.1.
+!!$.os.phone;         // => true
+!!$.os.iphone;        // => true
+!!$.os.ios;           // => true
+!!$.os.version;       // => "6.1"
+!!$.browser.version;  // => "536.26"
diff --git a/zepto/zepto.d.ts b/zepto/zepto.d.ts
new file mode 100644
index 0000000000..56fbf6766e
--- /dev/null
+++ b/zepto/zepto.d.ts
@@ -0,0 +1,1548 @@
+/* 
+zepto-1.0rc1.d.ts may be freely distributed under the MIT license.
+
+Copyright (c) 2013 Josh Baldwin https://github.com/jbaldwin/zepto.d.ts
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation 
+files (the "Software"), to deal in the Software without 
+restriction, including without limitation the rights to use, 
+copy, modify, merge, publish, distribute, sublicense, and/or sell 
+copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be 
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 
+OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+interface ZeptoStatic {
+
+	/**
+	 * Core
+	 **/
+
+	/**
+	* Create a Zepto collection object by performing a CSS selector, wrapping DOM nodes, or creating elements from an HTML string.
+	* @param selector
+	* @param context
+	* @return
+	**/
+	(selector: string, context?: any): ZeptoCollection;
+
+	/**
+	* @see ZeptoStatic();
+	* @param collection
+	**/
+	(collection: ZeptoCollection): ZeptoCollection;
+
+	/**
+	* @see ZeptoStatic();
+	* @param element
+	**/
+	(element: HTMLElement): ZeptoCollection;
+
+	/**
+	* @see ZeptoStatic();
+	* @param htmlString
+	**/
+	(htmlString: string): ZeptoCollection;
+
+	/**
+	* @see ZeptoStatic();
+	* @param attributes
+	**/
+	(htmlString: string, attributes: any): ZeptoCollection;
+
+	/**
+	* @see ZeptoStatic();
+	* @param object
+	**/
+	(object: any): ZeptoCollection;		// window and document tests break without this
+
+	/**
+	* Turn a dasherized string into “camel case”. Doesn’t affect already camel-cased strings.
+	* @param str
+	* @return
+	**/
+	camelCase(str: string): string;
+
+	/**
+	* Check if the parent node contains the given DOM node. Returns false if both are the same node.
+	* @param parent
+	* @param node
+	* @return
+	**/
+	contains(parent: HTMLElement, node: HTMLElement): bool;
+
+	/**
+	* Iterate over array elements or object key-value pairs. Returning false from the iterator function stops the iteration.
+	* @param collection
+	* @param fn
+	**/
+	each(collection: any[], fn: (index: number, item: any) => bool): void;
+
+	/**
+	* @see ZeptoStatic.each
+	**/
+	each(collection: any, fn: (key: string, value: any) => bool): void;
+
+	/**
+	* Extend target object with properties from each of the source objects, overriding the properties on target.
+	* By default, copying is shallow. An optional true for the first argument triggers deep (recursive) copying.
+	* @param target
+	* @param sources
+	* @return
+	**/
+	extend(target: any, ...sources: any[]): any;
+
+	/**
+	* @see ZeptoStatic.extend
+	* @param deep
+	**/
+	extend(deep: bool, target: any, ...sources: any[]): any;
+
+	/**
+	* Zepto.fn is an object that holds all of the methods that are available on Zepto collections, such as addClass(), attr(), and other. Adding a function to this object makes that method available on every Zepto collection.
+	**/
+	fn: any;
+
+	/**
+	* Get a new array containing only the items for which the callback function returned true.
+	* @param items
+	* @param fn
+	* @return
+	**/
+	grep(items: any[], fn: (item: any) => bool): any[];
+
+	/**
+	* Get the position of element inside an array, or -1 if not found.
+	* @param element
+	* @param array
+	* @param fromIndex
+	* @return
+	**/
+	inArray(element: any, array: any[], fromIndex?: number): number;
+
+	/**
+	* True if the object is an array.
+	* @param object
+	* @return
+	**/
+	isArray(object: any): bool;
+
+	/**
+	* True if the object is a function.
+	* @param object
+	* @return
+	**/
+	isFunction(object: any): bool;
+
+	/**
+	* True if the object is a “plain” JavaScript object, which is only true for object literals and objects created with new Object.
+	* @param object
+	* @return
+	**/
+	isPlainObject(object: any): bool;
+
+	/**
+	* True if the object is a window object. This is useful for iframes where each one has its own window, and where these objects fail the regular obj === window check.
+	* @param object
+	* @return
+	**/
+	isWindow(object: any): bool;
+
+	/**
+	* Iterate through elements of collection and return all results of running the iterator function, with null and undefined values filtered out.
+	* @param collection
+	* @param fn
+	* @return
+	**/
+	map(collection: any[], fn: (item: any, index: number) => any): any[];
+
+	/**
+	* Alias for the native JSON.parse method.
+	* @param str
+	* @retrun
+	**/
+	parseJSON(str: string): any;
+
+	/**
+	* Remove whitespace from beginning and end of a string; just like String.prototype.trim().
+	* @param str
+	* @return
+	**/
+	trim(str: string): string;
+
+	/**
+	* Get string type of an object. Possible types are: null undefined boolean number string function array date regexp object error.
+	* For other objects it will simply report “object”. To find out if an object is a plain JavaScript object, use isPlainObject.
+	* @param object
+	* @return
+	**/
+	type(object: any): string;
+
+	/**
+	* Event
+	**/
+
+	/**
+	* Create and initialize a DOM event of the specified type. If a properties object is given, use it to extend the new event object. The event is configured to bubble by default; this can be turned off by setting the bubbles property to false.
+	* An event initialized with this function can be triggered with trigger.
+	* @param type
+	* @param properties
+	* @return
+	**/
+	Event(type: string, properties: any): Event;
+
+	/**
+	* Get a function that ensures that the value of this in the original function refers to the context object. In the second form, the original function is read from the specific property of the context object.
+	**/
+	proxy(fn: Function, context: any): Function;
+
+	/**
+	* Ajax
+	**/
+
+	/**
+	* Perform an Ajax request. It can be to a local resource, or cross-domain via HTTP access control support in browsers or JSONP.
+	* Options:
+	*	type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
+	*	url (default: current URL): URL to which the request is made
+	*	data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with $.param
+	*	processData (default: true): whether to automatically serialize data for non-GET requests to string
+	*	contentType (default: “application/x-www-form-urlencoded”): the Content-Type of the data being posted to the server (this can also be set via headers). Pass false to skip setting the default value.
+	*	dataType (default: none): response type to expect from the server (“json”, “jsonp”, “xml”, “html”, or “text”)
+	*	timeout (default: 0): request timeout in milliseconds, 0 for no timeout
+	*	headers: object of additional HTTP headers for the Ajax request
+	*	async (default: true): set to false to issue a synchronous (blocking) request
+	*	global (default: true): trigger global Ajax events on this request
+	*	context (default: window): context to execute callbacks in
+	*	traditional (default: false): activate traditional (shallow) serialization of data parameters with $.param
+	*  If the URL contains =? or dataType is “jsonp”, the request is performed by injecting a