+ +
+
+
+ UIkit is an Open Source project developed by YOOtheme.
+
+
+
+
+
| Name | - *Parameter | - *Description | - *
|---|---|---|
show.uk.modal |
- * event | - *On modal show | - *
hide.uk.modal |
- * event | - *On modal hide | - *
- * $('.modalSelector').on({
- * 'show.uk.modal': function(){
- * console.log("Modal is visible.");
- * },
- *
- * 'hide.uk.modal': function(){
- * console.log("Element is not visible.");
- * }
- * });
- *
- * var modal = UIkit.modal(".modalSelector");
- *
- * if ( modal.isActive() ) {
- * modal.hide();
- * } else {
- * modal.show();
- * }
- * | Name | - *Parameter | - *Description | - *
|---|---|---|
show.uk.offcanvas |
- * event, panel, bar | - *On offcanvas show | - *
hide.uk.offcanvas |
- * event, panel, bar | - *On offcanvas hide | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
showitem.uk.lightbox |
- * event, data | - *On lightbox show | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
selectitem.uk.autocomplete |
- * event, data, acobject | - *On item selected | - *
show.uk.autocomplete |
- * event | - *On autocomplete dropdown show | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
show.uk.datepicker |
- * event | - *On datepicker dropdown show | - *
hide.uk.datepicker |
- * event | - *On datepicker dropdown hide | - *
update.uk.datepicker |
- * event | - *On calendar rendering | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
focusitem.uk.slider |
- * event, index, item | - *On item focus | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
show.uk.slideset |
- * event, set | - *On set show | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
show.uk.slideshow |
- * event, next slide | - *On showing a new slide (after animation is finished) | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
toggle.uk.accordion |
- * event, active, toggle, content | - *On item toggle | - *
<html> when moving
- * @default uk-nestable-moving
- * | Name | - *Parameter | - *Description | - *
|---|---|---|
start.uk.nestable |
- * event, nestable object | - *On nestable drag start | - *
move.uk.nestable |
- * event, nestable object | - *On nestable move item | - *
stop.uk.nestable |
- * event, nestable object | - *On nestable stop dragging | - *
change.uk.nestable |
- * event, sortable object, dragged element, action | - *On nestable change item | - *
| Name | - *Parameter | - *Description | - *
|---|---|---|
start.uk.sortable |
- * event, sortable object, dragged element | - *On sortable drag start | - *
move.uk.sortable |
- * event, sortable object | - *On sortable move item | - *
stop.uk.sortable |
- * event, sortable object, dragged element | - *On sortable stop dragging | - *
change.uk.sortable |
- * event, sortable object, dragged element, action | - *On sortable change item | - *
true to bind sticky to the parent or a Css selector to bind sticky to a specific element.
- * @default false
- * | Name | - *Parameter | - *Description | - *
|---|---|---|
active.uk.sticky |
- * event | - *Element getting sticky | - *
inactive.uk.sticky |
- * event | - *Element leaving sticky mode | - *
| Name | - *Parameter | - *
|---|---|
before |
- * settings, files | - *
beforeAll |
- * files | - *
beforeSend |
- * xhr | - *
progress |
- * percent | - *
complete |
- * response, xhr | - *
allcomplete |
- * response, xhr | - *
notallowed |
- * file, settings | - *
loadstart |
- * event | - *
load |
- * event | - *
loadend |
- * event | - *
error |
- * event | - *
abort |
- * event | - *
readystatechange |
- * event | - *
UIkit dialog!
'); } function testOffCanvas() { - UIkit.offcanvas.show("#id"); - UIkit.offcanvas.hide(); - UIkit.offcanvas.hide(true); -} - -function testLightBox() { - const element = "#group"; - const lightbox = UIkit.lightbox(element, {/* options */}); - const lightbox2 = UIkit.lightbox.create([ - {source: 'http://url/to/video.mp4', type: 'video'}, - {source: 'http://url/to/image.jpg', type: 'image'} - ]); - lightbox2.show(); - const lightbox3 = UIkit.lightbox(element); -} - -function testAutoComplete() { - UIkit.autocomplete("#group", {}); - UIkit.autocomplete("#group"); -} - -function testDatepicker() { - const datepicker = UIkit.datepicker("#element", {}); -} - -function testHtmlEditor() { - const htmleditor = UIkit.htmleditor("textarea", {/* options */}); -} - -function testSlider() { - const slider = UIkit.slider("element", {}); -} -function testSlideSet() { - const slideset = UIkit.slideset("element", {}); -} -function testSlideShow() { - const slideshow = UIkit.slideshow("element", {}); -} - -function testParallax() { - const parallax = UIkit.parallax("element", {}); -} -function testAccordion() { - const accordion = UIkit.accordion("element", {}); -} - -function testNotify() { - UIkit.notify({ - message: 'Bazinga!', - status: 'info', - timeout: 5000, - pos: 'top-center' - }); - - // Shortcuts - UIkit.notify('My message'); - UIkit.notify('My message', status); - UIkit.notify('My message', {/* options */}); - - UIkit.notify("Message...", {timeout: 0}); - UIkit.notify("...", {pos: 'top-center'}); - UIkit.notify("...", {status: 'info'}); -} - -function testSearch() { - const search = UIkit.search("element", {}); -} - -function testNestable() { - const nestable = UIkit.nestable('element', {}); -} -function testSortable() { - const sortable = UIkit.sortable('element', {}); -} -function testStick() { - const sticky = UIkit.sticky('element', {}); -} -function testTimePicker() { - const timepicker = UIkit.timepicker('element', {}); -} - -function testTooltip() { - const tooltip = UIkit.tooltip('element', {}); + UIkit.offcanvas("#id").show(); + UIkit.offcanvas("#id").hide(); } function testUpload() { - $(() => { - const progressbar = $("#progressbar"); - const bar = progressbar.find('.uk-progress-bar'); - const settings = { - action: '/', // upload url - allow : '*.(jpg|jpeg|gif|png)', // allow only images - loadstart() { - bar.css("width", "0%").text("0%"); - progressbar.removeClass("uk-hidden"); - }, - progress(percent: number) { - percent = Math.ceil(percent); - bar.css("width", percent + "%").text(percent + "%"); - }, - allcomplete(response: any) { - bar.css("width", "100%").text("100%"); - - setTimeout(() => { - progressbar.addClass("uk-hidden"); - }, 250); - - alert("Upload Completed"); - } - }; - - const select = UIkit.uploadSelect($("#upload-select"), settings); - const drop = UIkit.uploadDrop($("#upload-drop"), settings); - }); - - // Test with object literal - const select2 = UIkit.uploadSelect($("#upload-select"), { - action: '/', // upload url - allow: '*.(jpg|jpeg|gif|png)', // allow only images - loadstart: () => {}, - progress: (percent: number) => {}, - allcomplete: (response: any) => {} - }); - const drop2 = UIkit.uploadDrop($("#upload-drop"), { - action: '/', // upload url - allow: '*.(jpg|jpeg|gif|png)', // allow only images - loadstart: () => {}, - progress: (percent: number) => {}, - allcomplete: (response: any) => {} + UIkit.upload('#upload', { + abort: (asd: number) => { + return asd; + } }); } diff --git a/types/uikit/v2/README.md b/types/uikit/v2/README.md new file mode 100644 index 0000000000..76015e346f --- /dev/null +++ b/types/uikit/v2/README.md @@ -0,0 +1,88 @@ +# UIkit + +UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. + +* [Homepage](http://getuikit.com) - Learn more about UIkit +* [@getuikit](https://twitter.com/getuikit) - Get the latest buzz on Twitter +* [Google+ Community](https://plus.google.com/communities/114238665434626719878) - Share news and latest work + +Join our developer chat. We are online every work day between 8:00 and 18:00 UTC + +[](https://gitter.im/uikit/uikit) + +## Getting started + +You have following options to get UIkit: + +- Download the [latest release](https://github.com/uikit/uikit/releases/latest) +- Clone the repo, `git clone git://github.com/uikit/uikit.git`. +- Install with [Bower](http://bower.io): ```bower install uikit``` + +You find the compiled UIkit distribution in its own [repo](https://github.com/uikit/bower-uikit). + +## Developers + +First of all, install [Node](http://nodejs.org/). We use [Gulp](http://gulpjs.com) to build UIkit. If you haven't used Gulp before, you need to install the `gulp` package as a global install. + +``` +npm install --global gulp +``` + +If you haven't done so already, clone the UIkit git repo. + +``` +git clone git://github.com/uikit/uikit.git +``` +Install the Node dependencies. + +``` +cd uikit +npm install +``` + +Run `gulp` to lint, build and minify the release. + +``` +gulp [-t themename] +``` + +The built version of UIkit will be put in the `/dist` subdirectory. Pass a theme name parameter to only build the specified theme. + +### Browsersync + +``` +gulp sync +``` + +After running `gulp sync` a new browser instance will open, pointing to the uikit folder - `http://localhost:3000/`. The browser window will reload anytime you modify a source file. + +### Custom prefix + +Run gulp with your own prefix parameter ```-p``` to have all classes and JavaScript files custom prefixed. + +``` +gulp -p myprefix +``` + + +## Contributing + +UIkit follows the [GitFlow branching model](http://nvie.com/posts/a-successful-git-branching-model). The ```master``` branch always reflects a production-ready state while the latest development is taking place in the ```develop``` branch. + +Each time you want to work on a fix or a new feature, create a new branch based on the ```develop``` branch: ```git checkout -b BRANCH_NAME develop```. Only pull requests to the ```develop``` branch will be merged. + +## Versioning + +UIkit is maintained by using the [Semantic Versioning Specification (SemVer)](http://semver.org). + +## Browser Support + + |  |  |  |  +--- | --- | --- | --- | --- | +Latest ✔ | Latest ✔ | 9+ ✔ | 7.1+ ✔ | Latest ✔ | + +Tested with [BrowserStack](https://www.browserstack.com) (thanks for sponsoring!). + +## Copyright and License + +Copyright [YOOtheme](http://www.yootheme.com) GmbH under the [MIT license](LICENSE.md). diff --git a/types/uikit/v2/index.d.ts b/types/uikit/v2/index.d.ts new file mode 100644 index 0000000000..4a95c08225 --- /dev/null +++ b/types/uikit/v2/index.d.ts @@ -0,0 +1,1441 @@ +// Type definitions for uikit 2.27 +// Project: https://getuikit.com +// Definitions by: Giovanni Silva| Name | + *Parameter | + *Description | + *
|---|---|---|
show.uk.modal |
+ * event | + *On modal show | + *
hide.uk.modal |
+ * event | + *On modal hide | + *
+ * $('.modalSelector').on({
+ * 'show.uk.modal': function(){
+ * console.log("Modal is visible.");
+ * },
+ *
+ * 'hide.uk.modal': function(){
+ * console.log("Element is not visible.");
+ * }
+ * });
+ *
+ * var modal = UIkit.modal(".modalSelector");
+ *
+ * if ( modal.isActive() ) {
+ * modal.hide();
+ * } else {
+ * modal.show();
+ * }
+ * | Name | + *Parameter | + *Description | + *
|---|---|---|
show.uk.offcanvas |
+ * event, panel, bar | + *On offcanvas show | + *
hide.uk.offcanvas |
+ * event, panel, bar | + *On offcanvas hide | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
showitem.uk.lightbox |
+ * event, data | + *On lightbox show | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
selectitem.uk.autocomplete |
+ * event, data, acobject | + *On item selected | + *
show.uk.autocomplete |
+ * event | + *On autocomplete dropdown show | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
show.uk.datepicker |
+ * event | + *On datepicker dropdown show | + *
hide.uk.datepicker |
+ * event | + *On datepicker dropdown hide | + *
update.uk.datepicker |
+ * event | + *On calendar rendering | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
focusitem.uk.slider |
+ * event, index, item | + *On item focus | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
show.uk.slideset |
+ * event, set | + *On set show | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
show.uk.slideshow |
+ * event, next slide | + *On showing a new slide (after animation is finished) | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
toggle.uk.accordion |
+ * event, active, toggle, content | + *On item toggle | + *
<html> when moving
+ * @default uk-nestable-moving
+ * | Name | + *Parameter | + *Description | + *
|---|---|---|
start.uk.nestable |
+ * event, nestable object | + *On nestable drag start | + *
move.uk.nestable |
+ * event, nestable object | + *On nestable move item | + *
stop.uk.nestable |
+ * event, nestable object | + *On nestable stop dragging | + *
change.uk.nestable |
+ * event, sortable object, dragged element, action | + *On nestable change item | + *
| Name | + *Parameter | + *Description | + *
|---|---|---|
start.uk.sortable |
+ * event, sortable object, dragged element | + *On sortable drag start | + *
move.uk.sortable |
+ * event, sortable object | + *On sortable move item | + *
stop.uk.sortable |
+ * event, sortable object, dragged element | + *On sortable stop dragging | + *
change.uk.sortable |
+ * event, sortable object, dragged element, action | + *On sortable change item | + *
true to bind sticky to the parent or a Css selector to bind sticky to a specific element.
+ * @default false
+ * | Name | + *Parameter | + *Description | + *
|---|---|---|
active.uk.sticky |
+ * event | + *Element getting sticky | + *
inactive.uk.sticky |
+ * event | + *Element leaving sticky mode | + *
| Name | + *Parameter | + *
|---|---|
before |
+ * settings, files | + *
beforeAll |
+ * files | + *
beforeSend |
+ * xhr | + *
progress |
+ * percent | + *
complete |
+ * response, xhr | + *
allcomplete |
+ * response, xhr | + *
notallowed |
+ * file, settings | + *
loadstart |
+ * event | + *
load |
+ * event | + *
loadend |
+ * event | + *
error |
+ * event | + *
abort |
+ * event | + *
readystatechange |
+ * event | + *