From d1601626fd206e4d7bd9620c46ea8b6519f78f3c Mon Sep 17 00:00:00 2001 From: Giovanni Silva Date: Sat, 17 Oct 2015 15:20:57 -0300 Subject: [PATCH 1/3] add uikit --- uikit/.gitignore | 2 + uikit/uikit-tests.ts | 186 ++++++ uikit/uikit.d.ts | 1416 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1604 insertions(+) create mode 100644 uikit/.gitignore create mode 100644 uikit/uikit-tests.ts create mode 100644 uikit/uikit.d.ts diff --git a/uikit/.gitignore b/uikit/.gitignore new file mode 100644 index 000000000..7c794a353 --- /dev/null +++ b/uikit/.gitignore @@ -0,0 +1,2 @@ +tsconfig.json +.idea/ \ No newline at end of file diff --git a/uikit/uikit-tests.ts b/uikit/uikit-tests.ts new file mode 100644 index 000000000..fc179f5a7 --- /dev/null +++ b/uikit/uikit-tests.ts @@ -0,0 +1,186 @@ +/// +import StickyOptions = UIkit.StickyOptions; +function testModal() { + UIkit.modal.alert("Attention!"); + UIkit.modal.confirm("Are you sure?", function () { + // will be executed on confirm. + }); + UIkit.modal.prompt("Name:", 'value', function (newvalue:string) { + // will be executed on submit. + }); + var modal = UIkit.modal.blockUI("Any content..."); + modal.hide(); + modal.show(); + var modal = UIkit.modal(".modalSelector"); + + if (modal.isActive()) { + modal.hide(); + } else { + modal.show(); + } +} + +function testOffCanvas() { + UIkit.offcanvas.show("#id"); + UIkit.offcanvas.hide(); + UIkit.offcanvas.hide(true); +} + +function testLightBox() { + var element = "#group"; + var lightbox = UIkit.lightbox(element, {/* options */}); + var lightbox2 = UIkit.lightbox.create([ + {'source': 'http://url/to/video.mp4', 'type': 'video'}, + {'source': 'http://url/to/image.jpg', 'type': 'image'} + ]); + lightbox2.show(); + var lightbox3 = UIkit.lightbox(element) +} + +function testAutoComplete() { + UIkit.autocomplete("#group", {}); + UIkit.autocomplete("#group"); +} + +function testDatepicker() { + var datepicker = UIkit.datepicker("#element", {}); +} + +function testHtmlEditor() { + var htmleditor = UIkit.htmleditor("textarea", {/* options */}); +} + +function testSlider() { + var slider = UIkit.slider("element", {}) +} +function testSlideSet() { + var slideset = UIkit.slideset("element", {}) +} +function testSlideShow() { + var slideshow = UIkit.slideshow("element", {}) +} + +function testParallax() { + var parallax = UIkit.parallax("element", {}) +} +function testAccordion() { + var 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() { + var search = UIkit.search("element", {}) +} + +function testNestable() { + var nestable = UIkit.nestable('element', {}); +} +function testSortable() { + var sortable = UIkit.sortable('element', {}); +} +function testStick() { + var sticky = UIkit.sticky('element', {}); +} +function testTimePicker() { + var timepicker = UIkit.timepicker('element', {}) +} + +function testTooltip() { + var tooltip = UIkit.tooltip('element', {}) +} + +function testUpload() { + $(function(){ + + var progressbar = $("#progressbar"), + bar = progressbar.find('.uk-progress-bar'), + settings = { + + action: '/', // upload url + + allow : '*.(jpg|jpeg|gif|png)', // allow only images + + loadstart: function() { + bar.css("width", "0%").text("0%"); + progressbar.removeClass("uk-hidden"); + }, + + progress: function(percent: number) { + percent = Math.ceil(percent); + bar.css("width", percent+"%").text(percent+"%"); + }, + + allcomplete: function(response: any) { + + bar.css("width", "100%").text("100%"); + + setTimeout(function(){ + progressbar.addClass("uk-hidden"); + }, 250); + + alert("Upload Completed") + } + }; + + var select = UIkit.uploadSelect($("#upload-select"), settings), + drop = UIkit.uploadDrop($("#upload-drop"), settings); + }); + + // Test with object literal + var select2 = UIkit.uploadSelect($("#upload-select"), { + + action: '/', // upload url + + allow: '*.(jpg|jpeg|gif|png)', // allow only images + + loadstart: function () { + + }, + + progress: function (percent:number) { + + }, + + allcomplete: function (response:any) { + + } + }); + var drop2 = UIkit.uploadDrop($("#upload-drop"), { + + action: '/', // upload url + + allow: '*.(jpg|jpeg|gif|png)', // allow only images + + loadstart: function () { + + }, + + progress: function (percent:number) { + + }, + + allcomplete: function (response:any) { + } + }); + +} diff --git a/uikit/uikit.d.ts b/uikit/uikit.d.ts new file mode 100644 index 000000000..6c9e5c3a1 --- /dev/null +++ b/uikit/uikit.d.ts @@ -0,0 +1,1416 @@ +// Type definitions for uikit 2.23.0 +// Project: http://getuikit.org +// Definitions by: Giovanni Silva +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module UIkit { + interface ModalElement { + /** + * Show the modal + */ + show(): void + /** + * Hide the modal + */ + hide(): void + /** + * Return if the modal is active on the page + * @return {boolean} True if the modal is current active on the page, false otherwise + */ + isActive(): boolean + } + /** + * Create modal dialogs with different styles and transitions + * Documentation: {@link http://getuikit.org/docs/modal.html} + * + *

Events

+ * + * + * + * + * + * + * + + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
show.uk.modaleventOn modal show
hide.uk.modaleventOn modal hide
+ * @example + * 

+     * $('.modalSelector').on({
+	 *
+	 *	'show.uk.modal': function(){
+	 *    console.log("Modal is visible.");
+	 *	},
+	 *
+	 *   'hide.uk.modal': function(){
+	 *    console.log("Element is not visible.");
+	 *  }
+	 *	});
+     *
+ */ + interface Modal { + /** + * Create a alert dialog + * @param {string} message The message to display. Can be Html + */ + alert(message:string): void + /** + * Create a confirm dialog and execute the function on positive confirmation + * @param {string} message The message to display. Can be Html + * @param {function} fn A function to execute on confirmation + */ + confirm(message:string, fn:() => any): void + /** + * Create a prompt dialog, where the user enter information + * @param {string} message The message to display. Can be Html + * @param {string} value A value to init the input + * @param {function} fn A function to execute on confirmation. The function + * receive the new value as a parameter + */ + prompt(message:string, value:string, fn:(newValue:string) => any): void + /** + * Create a modal that blocks the entire page + * @param {string} content A content to display. Can be Html + */ + blockUI(content:string): ModalElement + /** + * Select a modal element on page and return it. + * @example + * 

+         * var modal = UIkit.modal(".modalSelector");
+         *
+         * if ( modal.isActive() ) {
+	     *   modal.hide();
+	     *   } else {
+	     *   modal.show();
+	     * }
+         *
+ */ + (selector:string|JQuery): ModalElement + } + /** + * Create a smooth off-canvas sidebar that slides in and out of the page + *

Events:

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
show.uk.offcanvasevent, panel, barOn offcanvas show
hide.uk.offcanvasevent, panel, barOn offcanvas hide
+ */ + interface OffCanvas { + /** + * Show an off-canvas matching the passed CSS selector + * @param {string} selector A CSS selector + */ + show(selector:string): void + /** + * Hide any active offcanvas. Set force to true, if you don't want any + * animation + * @param {boolean} force When seted to true do not run animations. + * @default false + */ + hide(force?:boolean): void + } + interface LightBoxOptions { + /** + * Group name to group elements as a gallery to show. + * @default false + */ + group?: string + /** + * Animation duration between gallery item change + * @default 400 + */ + duration?: number + /** + * Allow keyboard navigation + * @default true + */ + keyboard?: boolean + } + interface LightBoxItem { + source: string + type: string + } + interface LightBoxElement { + /** + * Open the lightbox + */ + show(): void + } + /** + * Create a fancy lightbox for images and videos utilizing the @see {@link modal|Modal Component} + *

Events:

+ * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
showitem.uk.lightboxevent, dataOn lightbox show
+ */ + interface LightBox { + /** + * Create dynamic lightbox + * @param {Array} items Group of items on the lightbox + * @return {LightBoxElement} The lightbox element to show + */ + create(items:Array): LightBoxElement + /** + * Init element manually + */ + (element:string|JQuery, options?:LightBoxOptions): LightBoxElement + + } + type CallbackAutoComplete = () => string + interface AutoCompleteOptions { + /** + * Data source + * @default [] + */ + source?: string|string[]|CallbackAutoComplete + /** + * Min. input length before triggering autocomplete + * @default 3 + */ + minLength?: number + /** + * Query name when sending ajax request + * @default search + */ + param?: string + /** + * Delay time after stop typing + * @default 300 + */ + delay?: number + } + /** + * Create inputs that allow users to choose from a list of pre-generated values while typing + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
selectitem.uk.autocompleteevent, data, acobjectOn item selected
show.uk.autocompleteeventOn autocomplete dropdown show
+ */ + interface AutoComplete { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options?:AutoCompleteOptions): any + } + interface DatePickerOptions { + /** + * Start of the week + * integer (0..6) + * @default 1 + */ + weekstart?: number + /** + * Language string definitions + * @default { months:['January',...], weekdays:['Sun',..,'Sat'] } + */ + i18n?: {} + /** + * Date format string + * @default 'DD.MM.YYYY' + */ + format?: string + /** + * Offset to the input value + * @default 5 + */ + offsettop?: number + /** + * Min. date + * bool (false to ignore the option) + * string (date as in format) + * integer (offset in days from current date) + * @default false + */ + minDate?: string|boolean|number + /** + * Max. date + * bool (false to ignore the option) + * string (date as in format) + * integer (offset in days from current date) + * @default false + */ + maxDate?: string|boolean|number + /** + * Position of the datepicker + * 'auto', 'top', 'bottom' + * @default 'auto' + */ + pos?: string + + } + /** + * Create a toggleable dropdown with an datepicker + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
show.uk.datepickereventOn datepicker dropdown show
hide.uk.datepickereventOn datepicker dropdown hide
update.uk.datepickereventOn calendar rendering
+ */ + interface DatePicker { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options?:DatePickerOptions): any + } + interface HtmlEditorOptions { + /** + * View mode + * Possible values 'split','tab' + * @default 'split' + */ + mode?: string + /** + * Button list to appear in the toolbar + * @default [ "bold", "italic", "strike", "link", "picture", ... ] + */ + toolbar?: string[] + /** + * Min. browser width when to switch to responsive tab mode when in split mode + * @default 1000 + */ + maxsplitsize?: number + /** + * Label string for preview mode + * @default 'Preview' + */ + lblPreview?: string + /** + * Label string for code mode + * @default 'Markdown' + */ + lblCodeview?: string + } + interface HtmlEditor { + /** + * Init element manually + * @param element + * @param options + */ + (element: string|JQuery, options?: HtmlEditorOptions): any + } + interface SliderOptions { + /** + * Center items mode + * @default false + */ + center?: boolean + /** + * Mouse movement threshold in pixel until trigger element dragging + * @default true + */ + threshold?: boolean + /** + * Infinite scrolling + * @default true + */ + infinite?: boolean + /** + * Class added on active item in center mode + * @default uk-active + */ + activecls?: string + /** + * Defines whether or not the slider items should switch automatically + * @default false + */ + autoplay?: boolean + /** + * Pause autoplay when hovering a slider + * @default true + */ + pauseOnHover?: boolean + /** + * Defines the timespan between switching slider items + * @default 7000 + */ + autoplayInterval?: number + } + /** + * Create a list of items to use as a responsive carousel slider + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
focusitem.uk.sliderevent, index, itemOn item focus
+ */ + interface Slider { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options?:SliderOptions): any + } + interface SlideSetOptions { + /** + * Default visible items in a set + * @default 1 + */ + default?: number + /** + * Visible items in a set at small breakpoint + * @default null + */ + small?: number + /** + * Visible items in a set at medium breakpoint + * @default null + */ + medium?: number + /** + * Visible items in a set at large breakpoint + * @default null + */ + large?: number + /** + * Visible items in a set at xlarge breakpoint + * @default null + */ + xlarge?: number + /** + * Animation name + * @default 'fade' + */ + animation?: string + /** + * Animation duration in ms + * @default 200 + */ + duration?: number + /** + * Animation delay between items in a set + * @default 100 + */ + delay?: number + /** + * Items filter + * @default "" + */ + filter?: string + /** + * Defines whether or not the slideset items should switch automatically. + * @default false + */ + autoplay?: boolean + /** + * Pause autoplay when hovering a slideset. + * @default true + */ + pauseOnHover?: boolean + /** + * Defines the timespan between switching slideset items. + * @default 7000 + */ + autoplayInterval?: number + } + /** + * Create sets and groups of items, allowing to loop through the sets. + * + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
show.uk.slidesetevent, setOn set show
+ */ + interface SlideSet { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options?:SlideSetOptions): any + } + interface SlideShowOptions { + /** + * Defines the preferred transition between items. + * @default 'fade + */ + animation?: string + + /** + * Defines the transition duration. + * @default 500 + */ + duration?: number + + /** + * Defines the slideshow height. + * @default 'auto' + */ + height?: string + + /** + * Defines the first slideshow item to be displayed. + * @default 0 + */ + start?: number + + /** + * Defines whether or not the slideshow items should switch automatically. + * @default false + */ + autoplay?: boolean + + /** + * Pause autoplay when hovering a slideshow. + * @default true + */ + pauseOnHover?: boolean + + /** + * Defines the timespan between switching slideshow items. + * @default 7000 + */ + autoplayInterval?: number + + /** + * Defines whether or not a video starts automatically. + * @default true + */ + videoautoplay?: boolean + + /** + * Defines whether or not a video is muted. + * @default false + */ + videomute?: boolean + + /** + * Defines whether or not the Ken Burns effect is active. If kenburns is a numeric value, it will be used as + * the animation duration. + * @default false + */ + kenburns?: boolean + + /** + * Animation series. + * @default 'uk-animation-middle-left, uk-animation-top-right, uk-animation-bottom-left, uk-animation-top-center,uk-animation-bottom-right' + */ + kenburnsanimations?: string + + /** + * Defines the number of slices, if a "Slice" transition is set. + * @default 15 + */ + slices?: number + } + /** + * Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays. + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
show.uk.slideshowevent, next slideOn showing a new slide (after animation is finished)
+ */ + interface SlideShow { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:SlideShowOptions): any + } + interface ParallaxOptions { + + /** + * Animation velocity during scrolling + * @default 0.5 + */ + velocity?: number + /** + * Element dimension reference for animation duration. + * @default false + */ + target?: boolean + /** + * Animation range depending on the viewport. + *

Possible value

+ * float (0 to 1) + * @default false + */ + viewport?: number + /** + * Condition for the active status with a width as integer (e.g. 640) or a css media query + * @default false + *

Possible Value

+ * integer / string + */ + media?: number|string + + } + /** + * Animate CSS properties depending on the scroll position of the document. + */ + interface Parallax { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:ParallaxOptions): any + } + interface AccordionOptions { + /** + * Show first item on init + * @default true + *

Possible value

+ * boolean + */ + showfirst?: boolean + /** + * Allow multiple open items + * @default true + *

Possible value

+ * boolean + */ + collapse?: boolean + /** + * Animate toggle + * @default true + *

Possible value

+ * boolean + */ + animate?: boolean + /** + * Animation function + * @default swing + *

Possible value

+ * string + */ + easing?: string + /** + * Animation duration + * @default 300 + *

Possible value

+ * integer + */ + duration?: number + /** + * Css selector for toggles + * @default .uk-accordion-title + *

Possible value

+ * string + */ + toggle?: string + /** + * Css selector for content containers + * @default .uk-accordion-content + *

Possible value

+ * string + */ + containers?: string + /** + * Class to add when an item is active + * @default uk-active + *

Possible value

+ * string + */ + clsactive?: string + } + /** + * Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header. + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
toggle.uk.accordionevent, active, toggle, contentOn item toggle
+ */ + interface Accordion { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:AccordionOptions): any + } + + interface NotifyOptions { + /** + * The message to display + */ + message?: string + + /** + * A notification can be styled by adding a status to the message to indicate an info, success, warning or a + * danger status. + *

Possible values

+ * info, sucess, warning, danger + * If you want to create one set its style with the CSS class uk-notify-message-yourStatus + * @default 'info' + */ + status?: string + + /** + * Amount of tiem in milliseconds a messa is visible. Set to 0 for sticky message + * @default 5000 + */ + timeout?: number + + /** + * Adjust the notification's position to different corners. + * @default 'top-center' + *

Possible values

+ * top-center, top-left, top-right, bottom-center, bottom-left, bottom-right + * If you want to create one value set its style with the CSS uk-notify-yourPosition + */ + pos?: string + } + /** + * Create toggleable notifications that fade out automatically + */ + interface Notify { + /** + * Show a message with default options + * @param message The html message + */ + (message:string): any + /** + * Show a message with a different status + * @param message The html message + * @param status The string status + */ + (message:string, status:string): any + /** + * Show a message with diferente options + * @param message The html message + * @param options Options + */ + (message:string, options:NotifyOptions): any + /** + * Show a message with diferent options + * @param options Options + */ + (options:NotifyOptions): any + } + interface SearchOptions { + /** + * Data source url + * @default '' + *

Possible value

+ * string + */ + source?: string + + /** + * Min. input length before triggering autocomplete + * @default 3 + *

Possible value

+ * integer + */ + minLength?: number + + /** + * Query name when sending ajax request + * @default search + *

Possible value

+ * string + */ + param?: string + + /** + * Delay time after stop typing + * @default 300 + *

Possible value

+ * integer + */ + delay?: number + + } + /** + * Easily create a nicely looking search. + */ + interface Search { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:SearchOptions): any + } + interface NestableOptions { + /** + * List group + * @default false + *

Possible value

+ * string + */ + group?: string + /** + * Max nesting level + * @default 10 + *

Possible value

+ * integer + */ + maxDepth?: number + /** + * Pixel threshold before starting to drag + * @default 20 + *

Possible value

+ * integer + */ + threshold?: number + /** + * List node name + * @default ul + *

Possible value

+ * string + */ + listNodeName?: string + /** + * Item node name + * @default li + *

Possible value

+ * string + */ + itemNodeName?: string + /** + * List base class + * @default uk-nestable + *

Possible value

+ * string + */ + listBaseClass?: string + /** + * List class + * @default uk-nestable-list + *

Possible value

+ * string + */ + listClass?: string + /** + * List item class + * @default uk-nestable-list-item + *

Possible value

+ * string + */ + listitemClass?: string + /** + * Item class + * @default uk-nestable-item + *

Possible value

+ * string + */ + itemClass?: string + /** + * Class added to dragged list + * @default uk-nestable-list-dragged + *

Possible value

+ * string + */ + dragClass?: string + /** + * Class added to <html> when moving + * @default uk-nestable-moving + *

Possible value

+ * string + */ + movingClass?: string + /** + * Class for drag handle + * @default uk-nestable-handle + *

Possible value

+ * string + */ + handleClass?: string + /** + * Class for collapsed items + * @default uk-nestable-collapsed + *

Possible value

+ * string + */ + collapsedClass?: string + /** + * Class for placeholder of currently dragged element + * @default uk-nestable-placeholder + *

Possible value

+ * string + */ + placeClass?: string + /** + * Elements with this class will not trigger dragging. Useful when having the complete item draggable and not + * just the handle. + * @default uk-nestable-nodrag + *

Possible value

+ * string + */ + noDragClass?: string + /** + * Class for empty lists + * @default uk-nestable-empty + *

Possible value

+ * string + */ + emptyClass?: string + + } + /** + * Create nestable lists that can be sorted by drag and drop. + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
start.uk.nestableevent, nestable objectOn nestable drag start
move.uk.nestableevent, nestable objectOn nestable move item
stop.uk.nestableevent, nestable objectOn nestable stop dragging
change.uk.nestableevent, sortable object, dragged element, actionOn nestable change item
+ */ + interface Nestable { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:NestableOptions): any + } + interface SortableOptions { + /** + * List group + * @default false + *

Possible value

+ * string + */ + group?: string + /** + * Animation speed in ms + * @default 150 + *

Possible value

+ * integer + */ + animation?: string + /** + * Mouse movement threshold in pixel until trigger element dragging + * @default 10 + *

Possible value

+ * integer + */ + threshold?: string + /** + * Custom class to define elements which can trigger sorting + * @default '' + *

Possible value

+ * string + */ + handleClass?: string + /** + * Custom class added to the dragged element + * @default '' + *

Possible value

+ * string + */ + dragCustomClass?: string + + } + /** + * Create sortable grids and lists to rearrange the order of its elements. + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
start.uk.sortableevent, sortable object, dragged elementOn sortable drag start
move.uk.sortableevent, sortable objectOn sortable move item
stop.uk.sortableevent, sortable object, dragged elementOn sortable stop dragging
change.uk.sortableevent, sortable object, dragged element, actionOn sortable change item
+ */ + interface Sortable { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:SortableOptions): any + } + interface StickyOptions { + /** + * Top offset whent sticky should be triggered + * @default 0 + *

Possible value

+ * integer + */ + top?: number + /** + * UIkit animation class + * @default '' + *

Possible value

+ * string + */ + animation?: string + /** + * Init class when the element is sticky for the first time + * @default uk-sticky-init + *

Possible value

+ * string + */ + clsinit?: string + /** + * Active class to add, when element is sticky + * @default uk-active + *

Possible value

+ * string + */ + clsactive?: string + /** + * Class to add, when element is not sticky + * @default '' + *

Possible value

+ * string + */ + clsinactive?: string + /** + * Css selector where to get the width from in sticky mode. By default it takes the width from the created wrapper element. + * @default '' + *

Possible value

+ * string + */ + getWidthFrom?: string + /** + * Condition for the active status with a width as integer (e.g. 640) or a css media query + * @default false + *

Possible value

+ * integer / string + */ + media?: number|string + /** + * Make sure that a sticky element is not over a targeted element via location hash on dom-ready. + * @default false + *

Possible value

+ * boolean + */ + target?: boolean + /** + * Show sticky element only when scrolling up. + * @default false + *

Possible value

+ * boolean + */ + showup?: boolean + /** + * Set to true to bind sticky to the parent or a Css selector to bind sticky to a specific element. + * @default false + *

Possible value

+ * mixed + */ + boundary?: boolean|string + + } + /** + * Make elements remain at the top of the viewport, like a sticky navbar. + *

Events

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameterDescription
active.uk.stickyeventElement getting sticky
inactive.uk.stickyeventElement leaving sticky mode
+ */ + interface Sticky { + /** + * Init the element manually + * @param element + * @param options + */ + (element:string|JQuery, options:StickyOptions): any + } + interface TimepickerOptions { + /** + * Defines the preferred time notation + * @default '24h' + *

Possible value

+ * '24h' or '12h' + */ + format?: string + /** + * Start time + * @default 0 + *

Possible value

+ * Integer between 0 and 24 + */ + start?: number + /** + * End time + * @default 24 + *

Possible value

+ * Integer between 0 and 24 + */ + end?: number + + } + /** + * Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown. + */ + interface Timepicker { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:TimepickerOptions): any + } + interface TooltipOptions { + /** + * Offset to the source element + * @default 5 + *

Possible value

+ * integer + */ + offset?: number + /** + * Tooltip position + * @default 'top' + *

Possible value

+ * string + */ + pos?: string + /** + * Fade in tooltip + * @default false + *

Possible value

+ * boolean + */ + animation?: boolean + /** + * Delay tooltip show in ms + * @default 0 + *

Possible value

+ * integer + */ + delay?: number + /** + * Custom class to add on show + * @default '' + *

Possible value

+ * string + */ + cls?: string + /** + * Toggled active class + * @default 'uk-active' + *

Possible value

+ * string + */ + activeClass?: string + + } + /** + * Easily create a nicely looking tooltip. + */ + interface Tooltip { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:TooltipOptions): any + } + interface UploadOptions { + /** + * Target url for the upload + * @default '' + *

Possible value

+ * string + */ + action?: string + /** + * Send each file one by one + * @default true + *

Possible value

+ * boolean + */ + single?: boolean + /** + * Post query name + * @default files[] + *

Possible value

+ * string + */ + param?: string + /** + * Additional request parameters + * @default {} + *

Possible value

+ * JSON Object + */ + params?: {} + /** + * File filter + * @default *.* + *

Possible value

+ * string + */ + allow?: string + /** + * Limit the number of files to upload + * @default false + *

Possible value

+ * integer + */ + filelimit?: number + /** + * Response type from server + * @default text + *

Possible Value

+ * (text|json) + */ + "type"?: string + before?: (settings: UploadOptions, files: string|string[]) => any + beforeAll?: (files: string|string[]) => any + beforeSend?: (xhr: XMLHttpRequest) => any + progress?: (percent: number) => any + complete?: (response: any, xhr: XMLHttpRequest) => any + allcomplete?: (response: any, xhr: XMLHttpRequest) => any + notallowed?: (file: string|string[], settings: UploadOptions) => any + loadstart?: (event: any) => any + load?: (event: any) => any + loadend?: (event: any) => any + error?: (event: any) => any + abort?: (event: any) => any + readystatechange?: (event: any) => any + } + + /** + * Allow users to upload files through a file input form element or a placeholder area. + *

Callbacks

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
NameParameter
beforesettings, files
beforeAllfiles
beforeSendxhr
progresspercent
completeresponse, xhr
allcompleteresponse, xhr
notallowedfile, settings
loadstartevent
loadevent
loadendevent
errorevent
abortevent
readystatechangeevent
+ */ + interface Upload { + /** + * Init element manually + * @param element + * @param options + */ + (element:string|JQuery, options:UploadOptions): any + } + export var modal:Modal; + export var lightbox:LightBox; + export var offcanvas:OffCanvas; + export var autocomplete:AutoComplete; + export var datepicker:DatePicker; + export var htmleditor:HtmlEditor; + export var slider:Slider; + export var slideset:SlideSet; + export var slideshow:SlideShow; + export var parallax:Parallax; + export var accordion:Accordion; + export var notify:Notify; + export var search:Search; + export var nestable:Nestable; + export var sortable:Sortable; + export var sticky:Sticky; + export var timepicker:Timepicker; + export var tooltip:Tooltip; + export var uploadSelect: Upload; + export var uploadDrop: Upload; +} + +declare module 'uikit' { + export = UIkit +} From dc2c33d3fa52f0c0ea0bc84f2dd549498e6e13c2 Mon Sep 17 00:00:00 2001 From: Giovanni Silva Date: Sat, 17 Oct 2015 16:50:59 -0300 Subject: [PATCH 2/3] copy README from uikit repo for typedoc porposes and quick update to documentation comments --- uikit/README.md | 88 ++++++++++++++++++++++++++++++++++++++++++++ uikit/uikit-tests.ts | 4 +- uikit/uikit.d.ts | 22 ++++++++++- 3 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 uikit/README.md diff --git a/uikit/README.md b/uikit/README.md new file mode 100644 index 000000000..76015e346 --- /dev/null +++ b/uikit/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 + +[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](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 + +![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) +--- | --- | --- | --- | --- | +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/uikit/uikit-tests.ts b/uikit/uikit-tests.ts index fc179f5a7..8bc1f7b63 100644 --- a/uikit/uikit-tests.ts +++ b/uikit/uikit-tests.ts @@ -1,5 +1,5 @@ /// -import StickyOptions = UIkit.StickyOptions; + function testModal() { UIkit.modal.alert("Attention!"); UIkit.modal.confirm("Are you sure?", function () { @@ -30,7 +30,7 @@ function testLightBox() { var element = "#group"; var lightbox = UIkit.lightbox(element, {/* options */}); var lightbox2 = UIkit.lightbox.create([ - {'source': 'http://url/to/video.mp4', 'type': 'video'}, + {source: 'http://url/to/video.mp4', 'type': 'video'}, {'source': 'http://url/to/image.jpg', 'type': 'image'} ]); lightbox2.show(); diff --git a/uikit/uikit.d.ts b/uikit/uikit.d.ts index 6c9e5c3a1..c46507c37 100644 --- a/uikit/uikit.d.ts +++ b/uikit/uikit.d.ts @@ -101,6 +101,7 @@ declare module UIkit { } /** * Create a smooth off-canvas sidebar that slides in and out of the page + * Documentation: {@link http://getuikit.org/docs/offcanvas.html} *

Events:

* * @@ -163,6 +164,7 @@ declare module UIkit { } /** * Create a fancy lightbox for images and videos utilizing the @see {@link modal|Modal Component} + * Documentation {@link http://getuikit.org/docs/lightbox.html} *

Events:

*
* @@ -215,6 +217,7 @@ declare module UIkit { } /** * Create inputs that allow users to choose from a list of pre-generated values while typing + * Documentation {@link http://getuikit.org/docs/autocomplete.html} *

Events

*
* @@ -290,6 +293,7 @@ declare module UIkit { } /** * Create a toggleable dropdown with an datepicker + * Documentation {@link http://getuikit.org/docs/datepicker.html} *

Events

*
* @@ -350,6 +354,10 @@ declare module UIkit { */ lblCodeview?: string } + /** + * Create a rich HTML or markdown editor with an immediate preview and syntax highlighting + * Documentation {@link http://getuikit.org/docs/htmleditor.html} + */ interface HtmlEditor { /** * Init element manually @@ -397,6 +405,7 @@ declare module UIkit { } /** * Create a list of items to use as a responsive carousel slider + * Documentation {@link http://getuikit.org/docs/slider.html} *

Events

*
* @@ -483,7 +492,7 @@ declare module UIkit { } /** * Create sets and groups of items, allowing to loop through the sets. - * + * Documentation {@link http://getuikit.org/docs/slideset.html} *

Events

*
* @@ -582,6 +591,7 @@ declare module UIkit { } /** * Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays. + * Documentation {@link http://getuikit.org/docs/slideshow.html} *

Events

*
* @@ -634,6 +644,7 @@ declare module UIkit { } /** * Animate CSS properties depending on the scroll position of the document. + * Documentation {@link http://getuikit.org/docs/parallax.html} */ interface Parallax { /** @@ -703,6 +714,7 @@ declare module UIkit { } /** * Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header. + * Documentation {@link http://getuikit.org/docs/accordion.html} *

Events

*
* @@ -759,6 +771,7 @@ declare module UIkit { } /** * Create toggleable notifications that fade out automatically + * Documentation {@link http://getuikit.org/docs/notify.html} */ interface Notify { /** @@ -820,6 +833,7 @@ declare module UIkit { } /** * Easily create a nicely looking search. + * Documentation {@link http://getuikit.org/docs/search.html} */ interface Search { /** @@ -947,6 +961,7 @@ declare module UIkit { } /** * Create nestable lists that can be sorted by drag and drop. + * Documentation {@link http://getuikit.org/docs/nestable.html} *

Events

*
* @@ -1024,6 +1039,7 @@ declare module UIkit { } /** * Create sortable grids and lists to rearrange the order of its elements. + * Documentation {@link http://getuikit.org/docs/sortable.html} *

Events

*
* @@ -1136,6 +1152,7 @@ declare module UIkit { } /** * Make elements remain at the top of the viewport, like a sticky navbar. + * Documentation {@link http://getuikit.org/docs/sticky.html} *

Events

*
* @@ -1189,6 +1206,7 @@ declare module UIkit { } /** * Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown. + * Documentation {@link http://getuikit.org/docs/timepicker.html} */ interface Timepicker { /** @@ -1245,6 +1263,7 @@ declare module UIkit { } /** * Easily create a nicely looking tooltip. + * Documentation {@link http://getuikit.org/docs/tooltip.html} */ interface Tooltip { /** @@ -1321,6 +1340,7 @@ declare module UIkit { /** * Allow users to upload files through a file input form element or a placeholder area. + * Documentation {@link http://getuikit.org/docs/upload.html} *

Callbacks

*
* From d7d6451ca3a302af1bd9991e085ab35d8163fe2a Mon Sep 17 00:00:00 2001 From: Giovanni Silva Date: Sun, 18 Oct 2015 21:59:14 -0200 Subject: [PATCH 3/3] added forgeted function signature in uikit --- uikit/uikit.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/uikit/uikit.d.ts b/uikit/uikit.d.ts index c46507c37..f1ddfe9a5 100644 --- a/uikit/uikit.d.ts +++ b/uikit/uikit.d.ts @@ -71,6 +71,13 @@ declare module UIkit { * @param {function} fn A function to execute on confirmation */ confirm(message:string, fn:() => any): void + /** + * Create a prompt dialog, where the user enter information + * @param {string} message The message to display. Can be Html + * @param {function} fn A function to execute on confirmation. The function + * receive the new value as a parameter + */ + prompt(message:string, fn:(newValue:string) => any): void /** * Create a prompt dialog, where the user enter information * @param {string} message The message to display. Can be Html