1 line
337 KiB
JSON
1 line
337 KiB
JSON
{"pages":[{"title":"Control-Freak","text":"Installation via zip download here Uncompress the zip file to location like \/Control-Freak. Installation via DMG2 download here Download via git (Recommended since you can receive updates with this method) 1.Download and install git or make sure git is installed (apt-get install git) 2.Download and install git-lfs 3.In a new console, after git-lfs install: # sudo mkdir \/Control-Freak # git clone https:\/\/github.com\/net-commander\/osx-dist.git Control-Freak 4.If the exe files are corrupt or it won't start: # git lfs pull Start Got to the location of Control-Freak.app In Finder, "Show Package Contents" Control-Freak.app\/Resources is a file "start_osx.command". You can create an alias on you desktop, or just double click it. Wait until a notification comes up: You can start now \u00e2\u0080\u009cControl-Freak\u00e2\u0080\u009d Start now Control-Freak\/Control-Freak.app Updates Zip installation 1.Close all windows of Control-Freak (stop_server.sh) 2.Re-download and uncompress the zip over your existing installation Via git Got to the location of Control-Freak.app In Finder, "Show Package Contents" double click "update.command"","tags":"","url":"index.html"},{"title":"Getting Started","text":"Control-Freak aka "Net-Commander" Pre-Compiled IDE & Server Here links to all-in-one bundles. It includes the server (MongoDB, PHP, NodeJS) and the desktop application (custom "Chromium app", except the web server version). Platform Linux - 32 Bit Linux - 64 Bit OSX - 11 64 Bit Windows - 64 Bit Web-Server Repo Github Github Github Github Github Help Installation Installation Installation Installation Installation Has IDE App Yes Yes Yes Yes No, but as web-app via URL Zip Nightly Nightly Nightly Nightly Nightly Installer DEB - Nightly DEB - Nightly Nightly DMG Nightly Pre-Compiled Device Server Platform Linux - 32 Bit Linux - 64 Bit OSX - 11 64 Bit Windows - 64 Bit ARM-v7 Repo Github Github Github Github Github Pre-Compiled Server Modules There are pre-built server binaries for PHP, NGINX and MongoDB (Windows, OSX, Linux-32, Linux-64, ARMv7-32) here References & Examples XBlox - jsFiddles Example Template XBlox - Examples React to variable changes Full - Driver - Examples React to variable changes Driver - Code Examples React to variable changes Expression - Code Examples Various Examples","tags":"","url":"Getting_Started.html"},{"title":"Windows","text":"Requirements - IDE: Windows-7-10 x64 A good\/recent computer with at least 2Ghz and 4GB RAM and hardware accelerated graphic card Requirements - Device - Server : Windows-7-10 x64 or x32 Installation via zip download here Uncompress the zip file to location like C:\\Control-Freak. Its important that the location is not a too deep folder due to path length limitations of the Windows platform Installation via Installer download here Choose an install location like C:\\Control-Freak. Its important that the location is not a too deep folder due to path length limitations of the Windows platform. Download via git (Recommended since you can receive updates with this method) 1.Download and install git 2.Download and install git-lfs 3.In a new console, after git-lfs install: # git clone https:\/\/github.com\/net-commander\/windows-dist.git Control-Freak 4.If the exe files are corrupt or it won't start: # git lfs pull Start Run c:\\Control-Freak\\start.bat (Wait until a notification comes up: You can start now \u00e2\u0080\u009cControl-Freak\\Control-Freak.exe\u00e2\u0080\u009d) Run Control-Freak\\Control-Freak.exe Updates Zip installation Close all windows of Control-Freak (stop_server.bat) Re-download and uncompress the zip over your existing installation Via git # double click in c:\\Control-Freak\\update2.bat or: # git reset --hard origin # git pull Note: Do not modify the existing files in Control-Freak\/data. Only add files.","tags":"","url":"Installation\/Windows.html"},{"title":"Linux","text":"**Installation via zip ** download here 64 Bit download here 32 Bit Uncompress the zip file to location like \/opt\/Control-Freak. **Installation via deb ** download here 64 Bit download here 32 Bit Uncompress the zip file to location like \/opt\/Control-Freak Download via git (Recommended since you can receive updates with this method) 1.Download and install git or make sure git is installed (apt-get install git) 2.Download and install git-lfs 3.In a new console, after git-lfs install: # sudo mkdir -p \/opt\/Control-Freak Linux - 32 Bit # git clone https:\/\/github.com\/net-commander\/linux-dist-32.git \/opt\/Control-Freak Linux - 32 Bit # git clone https:\/\/github.com\/net-commander\/linux-dist.git \/opt\/Control-Freak 4.If the exe files are corrupt or it won't start: # git lfs pull Start 1.Run in "Control-Freak\/" .\/start_linux.sh (Wait until a notification comes up: You can start now \u00e2\u0080\u009cControl-Freak\\Control-Freak\u00e2\u0080\u009d) 2.Start now the IDE in ".\/Control-Freak" : # .\/Control-Freak Updates Zip installation 1.Close all windows of Control-Freak (stop_server.sh) 2.Re-download and uncompress the zip over your existing installation Via git # cd .\/Control-Freak # git reset --hard origin # git pull Note: Do not modify the existing files in Control-Freak\/data. Only add files.","tags":"","url":"Installation\/Linux.html"},{"title":"Raspberry-PI","text":"Pre-Requisites Mongo-Server (when using pre-compiled built-in server) #sudo apt-get install libpcrecpp0 #sudo apt-get install install libsnappy1 Mongo-Server (when using web-server release) #sudo apt-get install mongodb-server PHP Shell addon #sudo apt-get install gawk MQTT Stack apt-get install libzmq3 VLC - Driver sudo apt-get install libvlc-dev Audio - Driver sudo apt-get install libasound2-dev GPIO - Driver sudo apt-get install python3-pigpio OpenCV - Base sudo apt-get install libjpeg-dev libtiff5-dev libjasper-dev libpng12-dev -y sudo apt-get install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev -y sudo apt-get install libgtk2.0-dev -y sudo apt-get install libatlas-base-dev gfortran -y cd ~\/workspace mkdir opencv cd opencv git clone https:\/\/github.com\/Itseez\/opencv.git git clone https:\/\/github.com\/Itseez\/opencv_contrib.git cd opencv cmake -D CMAKE_BUILD_TYPE=RELEASE \\ -D CMAKE_INSTALL_PREFIX=\/usr\/local \\ -D BUILD_SHARED_LIBS=ON \\ -D OPENCV_EXTRA_MODULES_PATH=~\/workspace\/opencv\/opencv_contrib\/modules \\ -D BUILD_PERF_TESTS=OFF \\ -D BUILD_TESTS=OFF \\ -D BUILD_NEW_PYTHON_SUPPORT=ON \\ -D INSTALL_PYTHON_EXAMPLES=ON \\ -D BUILD_DOCS=OFF . make -j4 sudo make install sudo ldconfig pip3 install "picamera[array]"","tags":"","url":"Installation\/Raspberry-PI.html"},{"title":"OSX","text":"Installation via zip download here Uncompress the zip file to location like \/Control-Freak. Installation via DMG download here Download via git (Recommended since you can receive updates with this method) 1.Download and install git or make sure git is installed (apt-get install git) 2.Download and install git-lfs 3.In a new console, after git-lfs install: # sudo mkdir \/Control-Freak # git clone https:\/\/github.com\/net-commander\/osx-dist.git Control-Freak 4.If the exe files are corrupt or it won't start: # git lfs pull Start Got to the location of Control-Freak.app In Finder, "Show Package Contents" Control-Freak.app\/Resources is a file "start_osx.command". You can create an alias on you desktop, or just double click it. Wait until a notification comes up: You can start now \u00e2\u0080\u009cControl-Freak\u00e2\u0080\u009d Start now Control-Freak\/Control-Freak.app Updates Zip installation 1.Close all windows of Control-Freak (stop_server.sh) 2.Re-download and uncompress the zip over your existing installation Via git Got to the location of Control-Freak.app In Finder, "Show Package Contents" double click "update.command"","tags":"","url":"Installation\/OSX.html"},{"title":"WEB","text":"General This distribution allows you to run Control-Freak on your own web server. Please notice that you need these standard server programs: PHP, Apache or NGINX, NodeJS and the Mongo database server. Apart from the web-server components. Its necessary to install the Control-Freak NodeJS modules which also have certain native dependencies. Whilst on Linux and OSX its not a problem to install these, you may have problems to install them on Windows. However, on Windows you only need Visual-Studio installed to compile the native extensions. Requirements Please find here more information. Installation via zip download here. Uncompress the zip file to location like \/Control-Freak. Installer Script Run this here in your web server directory: wget -O - https:\/\/raw.githubusercontent.com\/net-commander\/web-dist\/master\/installFromWeb.sh | bash What it does (see here script source): create a sub-directory "control-freak" download latest zip ball und unzip in "control-freak" Install system dependencies Install Nodejs dependencies You can now: cd control-freak sh start_linux.sh Then, open in your browser http:\/\/localhost\/control-freak Your user workspace will be in .\/control-freak\/user Download via git (Recommended since you can receive updates with this method) 1.In a new console inside your 'htdocs' directory: git clone https:\/\/github.com\/net-commander\/web-dist.git .\/Control-Freak Post-Installation, install NodeJS dependencies: Attention: Make sure you have npm version > 3 installed. If not: sudo npm install -g npm@next Inside ".\/Control-Freak\/server\/nodejs", type the following in the terminal: npm install Attention RaspberryPI users! You may use: npm install --unsafe-perm Attention Linux\/RaspberryPI users: Please install required packages before npm install: sudo apt-get install build-essential sudo apt-get install gawk sudo apt-get install libzmq3-dev Optional, needed by the audio players (raw or VLC) sudo apt-get install libasound2-dev sudo apt-get install libvlc-dev Windows users: If you're on x67 but using a x32 NodeJS version, please run in server\\nodejs: install32.bat Attention OSX users: For using the VLC driver, you need to install libvlc: port install libVLC Start 1.Start if not already the Mongo-DB server. - Windows users: there is a start_mongo.bat! - OSX make sure you installed mongodb, then run the mongod server : # mongod 2.Start the device server: Windows: start.bat Linux: sh start_linux.sh OSX: start_osx.command Got to the location of your web server, eg: http:\/\/localhost\/Control-Freak. Now you're ready to go! Important Use latest Chrome or Chromium for the IDE! You may append the IDE url with &userDirectory=\/home\/pi\/Documents\/Control-Freak ! Otherwise your changes will be colliding with git updates. If you're on Windows, make sure you escape the path to your Control-Freak user directory. Tips You can make the device server running permanently: sudo npm install -g forever cd \/htdocs\/control-freak\/server\/nodejs forever start start.js","tags":"","url":"Installation\/WEB\/index.html"},{"title":"Requirements","text":"Requirements Windows: please note: you can simply install "xampp" to get Apache & PHP Mongo-DB Any version will do. Windows users: Even after installing Mongo-DB, the server won't be started automatically. There is a file "start_mongo.bat" to overcome this. PHP PHP Version 5.4+ PHP Extensions -MCrypt -File-Info (Optional) -Curl (Optional) Linux users: Install missing PHP extensions: sudo apt-get install php5-mcrypt sudo apt-get install php5-curl PHP Settings -Needs shell access Web-Server -NGINX, Apache or Light-HTTP with PHP extension OSX\/Windows: You can use ["xampp"].(https:\/\/www.apachefriends.org\/download.html) Linux: You may already have it installed but in case not: sudo apt-get install apache2 sudo apt-get install libapache2-mod-php Node-JS Supported: Node-JS - v4.4.x. Download and install from here. Updates Zip installation 1.Close all windows of Control-Freak (stop_server.sh) 2.Re-download and uncompress the zip over your existing installation Via git Got to the location of Control-Freak.app In Finder, "Show Package Contents" double click "update.command"","tags":"","url":"Installation\/WEB\/Requirements.html"},{"title":"Interface Designer","text":"Overview Quick - Tutorial Step Copy & paste the workspace:\/\/index.dhtml file to myscene.dhtml You can do this with your preferred file manager. Just reload the file tab in the IDE. Open myscene.dhtml The IDE creates now 2 files: myscene.css and myscene.xblox. You can edit that files with your preferred editor. Changing myscene.css or myscene.dhtml from outside will update the visual editor in real-time Activate your device which you want to use, make sure its up and running and contains some commands. Set "relative" or "absolute" for the scene: View\/Flow->Relative\/Absolute Drag a "Button" from the "Palette" tab (delite\/delite\/Button) into the scene Now drag any command from your "Device" onto the button. Make sure you drop the command in the center of the button. The button will be colored in violet.","tags":"","url":"Interface_Designer\/index.html"},{"title":"Guide","text":"Widgets Guide Animations For animations the 'Velocity Engine has been choosen': 30+ preset animations animations of multiple properties: 'opacity', anything which is a valid CSS property Online Documentation of 'Velocity' Tutorials for 'Velocity' Examples \/\/make the element bounce $(this).velocity('callout.bounce',100); Widgets Widget documentation Tutorial for making a 'Button Group'","tags":"","url":"Interface_Designer\/Guide.html"},{"title":"Button Group","text":"Tutorial "Making Button Group" Goals Change the visuals of all other buttons when a certain button is clicked In particular we want for the 'pressed' button background color green and for all non pressed buttons "Background color" gray. Add effects for mouse over and mouse out events. The simple way, using block scripts and Ids and\/or CSS classes Alternatively you can use a single script block In this variant we create for each button a script for the 'on click' event which 'resets' the visual style of all buttons and then sets the styles as desired for the pressed state. Notice, that is not the most ideal and short solution but it demonstrates the very basics. There are more tips in this solution to do the same but shorter. 1. First we need to give each button an unique 'Id' repeat this step for all other buttons and set the id as it makes sense: TV: btnTV Radio: btnRadio DVD: btnDVD MediaPlayer: btnMediaPlayer Notice, you can also set the \"CSS\" class for each button to \"inputSourceButton\" for targeting buttons by CSS class instead of Ids 2. Then open the 'scripts' tab for "Media-Player" 3. Now create the script for "Media-Player" for the 'on-click' event 4. Add the "Set Style" block for resetting all buttons background color to gray Repeat this for every other button as well (Step 3. you can copy & paste the block) Notice, you don't need to add that block to each other button when you target all other buttons via the CSS class: If every button has the CSS class "inputSourceButton", set in the 'Target' field "inputSourceButton" and set 'Mode' to "By CSS Query". This will apply the "Set Style" block to all elements in the scene having this CSS class. 5. Now add a "Set Style" block to set the "pressed" state: Repeat this for every other button as well (you can copy & paste the block) The fast way, using Javascript and jQuery Please find more documentation about jQuery here 1. This variant assumes you did read the basics of the method above. Please do the steps 1. & 2. and then create new block group for the 'load' event: 2. As next we add a 'RunScript' block to the Media-Player button, and then we edit the script: Notice since the 'load' event will be emitted once the entire scene has been loaded, you must press the 'Reload' button to run the 'RunScript' Block at least once. 3. Now the code! The first variant does basically this, using ids: reset the background to gray if any button has been clicked set the background to green for any clicked button \/\/ 1. resetting background color \/\/ add a click handler to each button using Ids: $('#btnDVD, #btnTV, #btnRadio, #btnMediaPlayer').on('click',function(evt){ \/\/update background-color, notice you select elements by Id by using the '#' prefix to the buttons id: $('#btnDVD, #btnTV, #btnRadio, #btnMediaPlayer').css('background-color','gray'); \/\/get the clicked button var buttonClicked = $(evt.target); \/\/2. set the clicked button to green: buttonClicked.css('background-color','green'); }); The second variant does basically this, using CSS classes: reset the background to gray if any button has been clicked set the background to green for any clicked button \/\/ 1. resetting background color \/\/ add a click handler to each button using CSS class query, make sure all buttons have the CSS class 'inputSourceButton': $('.inputSourceButton').on('click',function(evt){ \/\/update background-color, notice you select elements by CSS class using the '.' prefix $('.inputSourceButton').css('background-color','gray'); \/\/get the clicked button var buttonClicked = $(evt.target); \/\/2. set the clicked button to green: buttonClicked.css('background-color','green'); });","tags":"","url":"Interface_Designer\/Examples\/Button_Group.html"},{"title":"States","text":"States Widget can have "states" which can contain visual properties and have also a unique name. There is the "CSS State" (Palette\/xblox\/Controls\/CSSState)","tags":"","url":"Interface_Designer\/Examples\/States.html"},{"title":"States","text":"States Widget can have "states" which can contain visual properties and have also a unique name. There is the "CSS State" (Palette\/xblox\/Controls\/CSSState). It has to be a child element of a widget and it has 2 modes it can operate: The "cssClass" mode will add a css class to the parent widget when selected: <button label="PlayState" state="off"> <d-xstate-css name="off" cssClass="offClass"><\/d-xstate-css> <\/button> This will set the state "off" on the button and it will add the CSS class "offClass"; The "inline CSS" mode will create dynamic CSS to the document, specified in the inner text on the CSS state: <button label="PlayState" state="off"> <d-xstate-css name="off" > .foo{ color:red; } <\/d-xstate-css> <\/button> This will set the state "off" on the button and adds a dynamic CSS class with the declarations "color:red";","tags":"","url":"Interface_Designer\/States.html"},{"title":"VariableStates","text":"Mapping variable changes to widget states Introduction Consider a simple button: <button label="myButton' label="Test"> <\/button> Now, if you want to link a variable's value to a widget property like "state", the interface designer wizard will create a binding element for you which set's the widget property "state" to the variables value: <button label="myButton' label="Test"> <d-xscript bidirectional="false" mode="1" targetproperty="state" sourceevent="onDriverVariableChanged" sourceeventvaluepath="item.value" sourceeventnamepath="item.name" block="variable:\/\/deviceScope=user_devices&amp;device=bc09b5c4-cfe6-b621-c412-407dbb7bcef8&amp;driver=9db866a4-bb3e-137b-ae23-793b729c44f8&amp;driverScope=user_drivers&amp;block=74e15697-d98e-a96b-f57f-6b8199ed7ca1"\/> <\/button> Every time the variable changes, it will set the widget property "state" to the variable's value. Now lets add some states which add CSS classes: <button label="PlayState" state="1"> <d-xscript bidirectional="false" mode="1" targetproperty="state" sourceevent="onDriverVariableChanged" sourceeventvaluepath="item.value" sourceeventnamepath="item.name" block="variable:\/\/deviceScope=user_devices&amp;device=bc09b5c4-cfe6-b621-c412-407dbb7bcef8&amp;driver=9db866a4-bb3e-137b-ae23-793b729c44f8&amp;driverScope=user_drivers&amp;block=74e15697-d98e-a96b-f57f-6b8199ed7ca1"\/> <d-xstate-css name="1" cssClass="state_1"><\/d-xstate-css> <d-xstate-css name="2" cssClass="state_2"><\/d-xstate-css> <\/button> As soon the variable's value is 1, it will activate the state with the name "1". In this case, it's adding the CSS class "state_1" to the button. Rejecting state selection for variable changes There are moments where you don't want to apply a state when the variable changes. This can be done with the "accept" function. Such expression can be defined as part of the binding element to our variable. <button label="PlayState" state="1"> <d-xscript .... accept="accept"> <d-script name="accept"> var value = arguments[0]; \/\/variable value return value ==1 || value ==2; <\/d-script> <\/d-xscript> <d-xstate-css name="1" cssClass="state_1"><\/d-xstate-css> <\/button> Transforming variable value to another state name Sometimes a variable may not have very friendly values or at least values which can't be used as state name. In this case you can "transform" or map a variable value to a state name. For this you can define a transform function: For example, we want to activate the state named "another state" when our variable value is "foo"; <button label="PlayState" state="1"> <d-xscript .... transform="transform"> <d-script name="transform"> var value = arguments[0]; \/\/variable value if(value === "foo"){ return "another state"; } return null; \/\/return nothing if you want let the default behaviour take place <\/d-script> <\/d-xscript> <d-xstate-css name="1" cssClass="state_1"><\/d-xstate-css> <d-xstate-css name="another state" cssClass="anotherStateClassName"><\/d-xstate-css> <\/button>","tags":"","url":"Interface_Designer\/VariableStates.html"},{"title":"Widgets","text":"Introduction How to load deliteful custom elements & modules Introduction to styling deliteful custom element widgets Basic Widgets Button Checkbox Combobox ProgressBar ProgressIndicator RadioButton Select Slider StarRating Switch Toaster ToggleButton List List PageableList Containers & Layouts LinearLayout ScrollableContainer SidePane ViewStack SwapView ResponsiveColumns Other Widgets ViewIndicator Non Visual Custom Elements Store Other Modules features channelBreakpoints","tags":"","url":"Interface_Designer\/Widgets\/index.html"},{"title":"deliteful\/Accordion","text":"deliteful\/Accordion deliteful\/Accordion is a layout container that displays a vertically stacked list of Panels whose titles are all visible, but only one or at least one panel's content is visible at a time (depending on the mode property value). Once the panels are in an accordion, they become collapsible Panels by replacing their headers by ToggleButtons. When a panel is open, it fills all the available space with its content. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle works. Declarative Instantiation require(["deliteful\/Accordion", "deliteful\/Panel", "requirejs-domready\/domReady!"], function () { }); <html> <d-accordion id="accordion" selectedChildId="panel1"> <d-panel id="panel1" label="panel1"> <div>Content - Panel1 (Default open panel)<\/div> <\/d-panel> <d-panel id="panel2" label="panel2"> <div>Content - Panel2<\/div> <\/d-panel> <d-panel id="panel3" label="panel3"> <div>Content - Panel3<\/div> <\/d-panel> <\/d-accordion> <\/html> Programmatic Instantiation require([ "deliteful\/Accordion", "deliteful\/Panel", "requirejs-domready\/domReady!" ], function(Accordion, Panel) { var panel1 = new Panel({label: "panel1"}); var panel2 = new Panel({label: "panel2"}); var panel3 = new Panel({label: "panel3"}); var accordion = new Accordion ({mode: "multipleOpen"}); accordion.addChild(panel1); accordion.addChild(panel2); accordion.addChild(panel3); accordion.placeAt(document.body); }); Element Configuration deliteful\/Accordion support delite display infrastructure by inheriting from delite\/DisplayContainer. For more informations, see delite\/DisplayContainer documentation. Properties The following properties can be set on a deliteful\/Accordion instance: mode: The mode of the Accordion. Its value is either singleOpen or multipleOpen. On singleOpen mode, only one panel is open at a time. The current open panel is closed when another panel is open. on multipleOpen mode, several panels can be open at a time. Panels can be closed but there's always at least one open. selectedChildId: The id of the panel to be open at initialization. If not specified, the default open panel is the first one. On singleOpen mode, this property contains the id of the current open panel. animate: If true, animation is used when a panel is opened or closed. Animations are disabled on IE. openIconClass: The default CSS class to apply to DOMNode in children headers to make them display an icon when they are open. If a child panel has its own iconClass specified, that value is used on that panel. closedIconClass: The default CSS class to apply to DOMNode in children headers to make them display an icon when they are closed. If a child panel has its own closedIconClass specified, that value is used on that panel. Showing a panel's content To show the content of a child Panel of the Accordion, call the show method: accordion.show(panel2); The show method takes as argument a DOM node instance or id. The content of the respective panel will be shown. On singleOpen mode, this method will hide the content of the current open Panel. If the panel is already open, the method doesn't has any effect. Hiding a panel's content Hiding the content of a panel is only possible on multipleOpen mode. To hide the content of a child Panel of the Accordion, call the hide method: accordion.hide(panel2); The hide method takes as argument a DOM node instance or id. The content of the respective panel will be hidden. If the panel is the only one open, the method doesn't has any effect. Element Styling deliteful\/Accordion does not provide any CSS class for styling, but the panels can be stylized using the deliteful\/Panel CSS classes and the deliteful\/ToggleButton CSS classes. The default height of a deliteful\/Accordion is 100%. When the height of a Accordion is expressed as a percentage, you must ensure that the height of its parent is defined, you must recursively apply the same rule, up to <body> and <html> elements if needed. An HTML full-screen application has its <body> and <html> elements height set to 100%. You can set height of <body> and <html> to 100% by including defaultapp.css User Interactions The user interactions are given by the toggle button used in the panels header. User can activate\/deactivate in order to show\/hide (respectively) the content of the panel by: Clicking it using a mouse, Tapping it on a touch screen device, Pressing the SPACE\/Enter key when the button has keyboard focus. When focus is on a panel's header, user can navigate between the different panels by using the following key commands: up\/left arrow: move focus to the previous panel's header. If focus is on first panel's header, moves focus to last panel's header. down\/right arrow: move focus to the next panel's header. If focus is on last panel's header, moves focus to first panel's header. home: move focus to the first panel's header. end: move focus to the last panel's header. Enter\/Space: if panel is closed, shows the content of the panel. (see Showing a panel's content). If panel is open, hides the content of the panel. (see Hiding a panel's content) Note: On singleOpen mode, clicking, tapping or pressing the SPACE\/Enter key on the button of the open panel, doesn't has any effect. Same thing on multipleOpen mode when there's only one open panel. In both case, in order to keep always at least one panel open. Element Events deliteful\/Accordion support delite display events by inheriting from delite\/DisplayContainer. For more informations, see delite\/DisplayContainer documentation. Note: When show() method is called an additional delite-display-load event is fired with as dest property the reference to the content to load on the specified panel. Writing a Controller for Accordion An application framework such as dapp can setup a controller to listen to events from deliteful\/Accordion and provide alternate\/customized features. In the following example the controller is listening to delite-display-load event in order to create a panel loading the content on demand: document.addEventListener("delite-display-load", function (evt) { \/\/ Verify if the panel already exists var panel = typeof evt.dest === "string" ? document.getElementById(evt.dest) : evt.dest if (!panel) { evt.setChild(new Promise(function (resolve, reject) { \/\/ load the data for the specified id, then create a panel with that data loadData(evt.contentId).then(function (data) { var child = new Panel({label: evt.dest, id: evt.dest}); evt.setContent(child, data); resolve({child: child}); }); })); } }); In order to notify delite\/Accordion that the controller is handling child loading, the controller must call the event's setChild() method, passing in either a value or a promise for the value. The value is of the form {child: HTMLElement}. The event also provides the method setContent() that must be used to specify the content for the panel. It's important to note that evt.dest make reference to the Panel id and evt.contentId to the content id. The user would have access to this through the show() and hide() methods. e.g; show("p1", {contentId: newContent}). The example could be changed to load new content even if the panel already exists. See samples\/Accordion-controller. Another interesting behaviour that can be achieved by using a controller is creating empty panels and loading their content only when the panel is opened. In the following example there's a way to achieve that: HTML: <d-accordion id="accordion"> <d-panel id="p1" label="Panel1"> <\/d-panel> <d-panel id="p2" label="Panel2"> <\/d-panel> <\/d-accordion> JS: document.addEventListener("delite-display-load", function (evt) { \/\/ find the panel using its id var panel = typeof evt.dest === "string" ? document.getElementById(evt.dest) : evt.dest \/\/ verify if the panel is empty if (panel && isEmpty(panel)) { evt.setChild(new Promise(function (resolve, reject) { \/\/ load the content for the specified id, then set that data to the panel loadContent(evt.dest).then(function (content) { evt.setContent(panel, content); resolve({child: panel}); }); })); } }); Enterprise Use Accessibility type status comment Keyboard ok It is keyboard navigable (see User Interactions) Visual Formatting ok Supports high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader ok Based on WAI-ARIA Pattern for Accordion: http:\/\/www.w3.org\/TR\/2013\/WD-wai-aria-practices-20130307\/#accordion. Tested with JAWS and VoiceOver Globalization deliteful\/Accordion does not provide any internationalizable bundle. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class. Browser Support This widget supports all supported browsers. On Internet Explorer, animations are disabled.","tags":"","url":"Interface_Designer\/Widgets\/Accordion.html"},{"title":"deliteful\/Button","text":"deliteful\/Button The deliteful\/Button widget is a push button that can display a label and \/ or an icon. It extends the HTML 5 button element. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Mixins Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <button is="d-button">I am a Button!<\/button> <\/html> Programmatic Instantiation require([ "deliteful\/Button" ], function (Button) { var b = new Button({label: "I am a Button"}); b.placeAt(document.body); }); Element Configuration The following properties can be set on the widget to configure it: label: the label to display in the button; iconClass: DOM class to apply to a DOM node before the label in order to render an icon; showLabel: set it to true so that the button only displays an icon (especially useful for buttons in toolbars). The disabled attribute is also supported, in order to disable the button. A disabled button appears as disabled and does not emit any event when clicked. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark Widget CSS Classes The following CSS classes are automatically set by the widget and can be reused for overriding the default style. CSS Class Description d-button The base class for a button Styling CSS classes The following CSS classes provided by the widget can be set explicitly on the element yourself. CSS Class Description d-button-success Indicates a successful or positive action d-button-info Indicates a neutral informative change or action d-button-warning Indicates a warning that might need attention d-button-danger Indicates a dangerous or potentially negative action Example of a custom button: checkout the sample on JSFiddle User Interactions The only user interaction with a button is to activate it by: clicking it using a mouse; tapping it on a touch screen; pressing the SPACE key when the button has keyboard focus. Mixins No mixin currently available for this widget. Element Events This widget does not emit any custom event. Enterprise Use Accessibility The widget has the same accessibility than a standard HTML 5 <button> element. Globalization This widget does not provide any internationalizable bundle. The only string displayed by the button is the one defined by its label property. This widget supports both left to right and right to left orientation. Security This widget has no specific security concern. Browser Support This widget supports all supported browsers without any degrated behavior.","tags":"","url":"Interface_Designer\/Widgets\/Button.html"},{"title":"deliteful\/channelBreakpoints","text":"deliteful\/channelBreakpoints This module returns an object containing properties that define values for breakpoints of CSS media queries based on screen size: smallScreen: defines the screen size limit between phone-like and tablet-like channels. mediumScreen: defines the screen size limit between tablet-like and desktop-like channels. The values of the breakpoints are used by CSS media queries of deliteful\/features for setting the has()-flags "phone-like-channel", "tablet-like-channel", and "desktop-like-channel". For more information, see the deliteful\/features documentation. Using deliteful\/channelBreakpoints Multichannel widgets (such as deliteful\/Combobox) typically do not use channelBreakpoints directly. Instead, they rely on the channel has() flags set by deliteful\/features. These flags are set by deliteful\/features using CSS media queries based on screen size and using the breakpoint values provided by deliteful\/channelBreakpoints. Responsive widgets deliteful\/ResponsiveColumns) typically use their own CSS media queries and share the default breakpoint values with the multichannel widgets by getting them from deliteful\/channelBreakpoints, for instance: require(["deliteful\/channelBreakpoints", ...], function (channelBreakpoints, ...) { var smallScreenBreakpoint = channelBreakpoints.smallScreen; var mediumScreenBreakpoint = channelBreakpoints.mediumScreen; \/\/ Use these values as default breakpoint values for creating media queries ... }); Configuring deliteful\/channelBreakpoints The default values of the breakpoints can be configured statically in a hashmap provided through requirejs module configuration, for instance: <script> \/\/ configuring RequireJS require.config({ ... config: { "deliteful\/channelBreakpoints": { smallScreen: "200px", mediumScreen: "500px" } } }); <\/script>","tags":"","url":"Interface_Designer\/Widgets\/channelBreakpoints.html"},{"title":"deliteful\/Checkbox","text":"deliteful\/Checkbox The deliteful\/Checkbox widget represents a form-aware 2-state widget similar to the HTML5 input type="checkbox" element. It provides all the standard facilities of a native input and supports deliteful theming capability. Example Table of Contents Element Instantiation Element Configuration Element Styling Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <label> <d-checkbox name="option1" checked="true"><\/d-checkbox> Option 1 <\/label> <label> <d-checkbox name="option2"><\/d-checkbox> Option 2 <\/label> <label> <d-checkbox disabled="true" name="option3"><\/d-checkbox> Option 3 <\/label> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require([ "deliteful\/Checkbox" ], function (Checkbox) { var cb = new Checkbox({checked:true}); cb.placeAt(document.body); cb = new Checkbox({disabled:true, name: "option1"}); cb.placeAt(document.body); }); Element Configuration The state of a Checkbox widget (checked or unchecked) is defined by the checked property, inherited from the deliteful\/Toggle class. In addition, the Checkbox widget supports the following form-related properties of an HTML5 input element of type "checkbox": name, value, disabled and alt, inherited from delite\/FormWidget. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes CSS classes are bound to the structure of the widget declared in its template deliteful\/Checkbox\/Checkbox.html. The following table lists all the CSS classes that can be used to style the checkbox. class name\/selector applies to d-checkbox Checkbox widget node d-checkbox::before Checkmark node In addition, the following classes are used in combination with the classes above: class name\/selector applies to d-checked Checkbox and checkmark nodes in checked state d-focused Checkbox widget node in focus state d-disabled Checkbox and checkmark nodes in disabled state d-rtl Checkbox and checkmark nodes in right-to-left configuration Element Events The widget deliteful\/Checkbox provides a change event when its state is changed following a user interaction. event name dispatched cancelable bubbles properties change on state change No Yes standard HTML5 Event propeties Enterprise Use Accessibility type status comment Keyboard yes Value is toggled when the space bar is pressed. Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader yes Tested with JAWS and VoiceOver Browser Support This widget supports all supported browsers without any degraded behavior. See also Samples deliteful\/samples\/Buttons.html","tags":"","url":"Interface_Designer\/Widgets\/Checkbox.html"},{"title":"deliteful\/Combobox","text":"deliteful\/Combobox deliteful\/Combobox is a form-aware and store-aware widget leveraging the deliteful\/list\/List widget for displaying the list of options. Main features: Allows to benefit from the customization mechanism of the list item rendering. Provides single and multiple selection modes. Provides optional interactive filtering of list of options (single selection mode only). Multichannel rendering. Example of deliteful\/Combobox (single choice mode, on desktop browser): Example of deliteful\/Combobox (multiple choice mode, on mobile browser): Table of Contents Element Instantiation Using Combobox Element Styling Enterprise Use Element Instantiation For details on the instantiation lifecycle, see delite\/Widget. Declarative Instantiation require(["deliteful\/Combobox", "requirejs-domready\/domReady!"], function () { }); <html> <d-combobox> <d-list> { "label": "France", ... }, ... <\/d-list> <\/d-combobox> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require(["dstore\/Memory", "dstore\/Trackable", "deliteful\/Combobox", "deliteful\/list\/List", "requirejs-domready\/domReady!"], function (Memory, Trackable, Combobox, List) { \/\/ Create the store var dataSource = new (Memory.createSubclass(Trackable))({}); \/\/ Add options dataSource.add(...); ... \/\/ Create the List var list = new List({source: dataSource, ...}); \/\/ Create the Combobox var Combobox = new Combobox({list: list, selectionMode: "multiple"}); Combobox.placeAt(document.body); }); Or with an array in source property of the list : require(["decor\/ObservableArray", "decor\/Observable", "deliteful\/Combobox", "deliteful\/list\/List", "requirejs-domready\/domReady!"], function (ObservableArray, Observable, Combobox, List) { \/\/ Create the store var dataSource = new ObservableArray(); \/\/ Add options dataSource.push(new Observable(...)); ... \/\/ Create the List var list = new List({source: dataSource, ...}); \/\/ Create the Combobox var Combobox = new Combobox({list: list, selectionMode: "multiple"}); Combobox.placeAt(document.body); }); checkout the sample on JSFiddle Note that the list property is set by default to a newly created instance of deliteful\/list\/List. Hence, applications can write: var combobox = new Combobox(); \/\/ Create the store combobox.list.source = ...; ... Using Combobox Selection The widget provides two selection modes through the selectionMode property: "single" (only one option can be selected at a time) and "multiple" (one or more options can be selected). Options can be selected programmatically using the selectedItem property (or, for multiple selection mode, selectedItems) inherited from delite\/Selection. Auto Filtering In single selection mode, if the property autoFilter is set to true (default is false) the widget allows to type one or more characters which are used for filtering the list of shown list items. By default, the filtering is case-insensitive, and an item is shown if its label contains the entered string. The default filtering policy can be customized using the filterMode and ignoreCase properties. The valid values of filterMode are: "startsWith": the item matches if its label starts with the filter text. "contains": the item matches if its label contains the filter text. "is": the item matches if its label is the filter text. The matching is case insensitive by default. Setting ignoreCase to false turns it case sensitive. The filtering is performed by the filter(fitlerTxt) method, which is called automatically while the user types into the editable input element, with filterTxt being the currently entered text. The default implementation of this method uses dstore\/Filter.match(). The matching is performed against the list.labelAttr attribute of the source items. The method can be overridden for implementing other filtering strategies. Attribute Mapping The customization of the mapping of source item attributes into render item attributes can be done on the List instance using the mapping API of deliteful\/list\/List, as supported by its superclass delite\/StoreMap. See the delite\/StoreMap documentation for more information about the available mapping options, and the section Store capabilities of List's documentation. Multichannel rendering The widget provides multichannel rendering: the popup is displayed on large screens (desktop-like) below\/above the main element, while on small and medium screens (phone-like and tablet-like), to optimize the usage of the available space, the popup is displayed in a centered overlay (an instance of deliteful\/Combobox\/ComboPopup is used in this case). The channel is controlled by the value of the has() channel flags set by deliteful\/features using CSS media queries depending on the screen size. See the deliteful\/features documentation for information about how to configure the channel. Also, see the deliteful\/channelBreakpoints documentation for information about how to customize the values of the screen size breakpoints used by the media queries. Value and form support The widget supports the following form-related properties: value, name, disabled and alt, inherited from delite\/FormWidget, and readOnly inherited from delite\/FormValueWidget. The value property of the widget contains: Single selection mode: the value of the selected list items. By default, the value of the first item is selected. Multiple selection mode: an array containing the values of the selected items. Defaults to []. If the widget is used in an HTML form, the submitted value contains: Single selection mode: the same as widget's value property. Multiple selection mode: a string containing a comma-separated list of the values of the selected items. Defaults to "". By default, the label field of the List's render items is used as value of the item. If the value needs to be different than the label, an attribute mapping needs to be set for value on the List instance, for example: \/\/ Create the store var dataSourceWithValue = new Memory({idProperty: "label", data: [ { label: "France", value: "FR" }, { label: "Germany", value: "DE" }, ... ]}); \/\/ Create the List and set valueAttr to specify the name of the field \/\/ which stores the value of the item (valueFunc can also be used \/\/ for dynamically computed values) var list = new List({source: dataSourceWithValue, valueAttr: "value", ...}); \/\/ Create the Combobox var combobox = new Combobox({list: list, ...}); combobox.placeAt(document.body); or in markup: <html> <d-combobox> <d-list valueAttr="value"> { "label": "France", "value": "FR" }, ... <\/d-list> <\/d-combobox> <\/html> If no mapping is specified for value, the item label is used as value (itself subject to attribute mapping using List.labelAttr or List.labelFunc). Element Styling Supported themes This widget provides default styling for the following delite theme: bootstrap CSS Classes CSS classes are bound to the structure of the widget declared in its template deliteful\/Combobox\/Combobox.html. The following table lists the CSS classes that can be used to style the Combobox widget. Class name\/selector Applies to d-combobox Combobox widget root node. d-combobox-input The native <input> nodes used by the Combobox widget. d-combobox-list The List widget displayed inside the popup. d-combo-ok-button The OK button used in some cases inside the popup. d-combo-cancel-button The Cancel button used in some cases inside the popup. Enterprise Use Accessibility type status comment Keyboard ok For details, see below this table. Visual Formatting ok Tested for high constrast and browser zoom (200%), in IE and Firefox. Screen Reader ok Tested on JAWS 15 and iOS VoiceOver. Keyboard navigation details: DOWN arrow opens the focused combobox. In single selection mode: UP and DOWN arrows select the next, respectively the previous option. RETURN and ESCAPE validate the change. In multiple selection mode: UP and DOWN arrows navigate to the next, respectively the previous option. SPACE toggles the selected state of the currently navigated option. RETURN and ESCAPE validate the change. Globalization deliteful\/Combobox provides an internationalizable bundle that contains the following messages: Key Role "multiple-choice" Text written in the combo in multiple selection mode if more than one item is selected. "multiple-choice-no-selection" Text written in the combo in multiple selection mode if no item is selected. "search-placeholder" Set as placeholder attribute of the input element used for filtering the list of options. "ok-button-label" The label of the OK button used for multiple selection mode on mobile. "cancel-button-label" The label of the Cancel button used for multiple selection mode on mobile. The first 3 strings in the table above are used as default values for the widget properties multipleChoiceMsg, multipleChoiceNoSelectionMsg, and respectively searchPlaceHolder. To customize these strings on a per-widget basis, set directly these properties. Right to left orientation is supported by setting the dir attribute to rtl on the widget. Security This class has no specific security concern. Browser Support This class supports all supported browsers.","tags":"","url":"Interface_Designer\/Widgets\/Combobox.html"},{"title":"deliteful\/features","text":"deliteful\/features This module leverages requirejs-dplugins\/has and augments the has() tests with media query based tests, such that multichannel widgets can rely on the has() API for determining the channel. Using this approach in conjunction with an optimizing compiler at build time, it is possible to optimize out unwanted code paths for specific channel policies. The deliteful\/features module sets the following has-features: has("phone-like-channel"): true for small screens, false otherwise. has("tablet-like-channel"): true for medium screens, false otherwise. has("desktop-like-channel"): true for large screens, false otherwise. The flags are set depending on the screen size, using CSS media queries that compare the actual screen width (the device-width media feature) with the corresponding breakpoint values provided by deliteful\/channelBreakpoints. Note that the screen size is the only criteria used for determining the channel. When a channel flag is set to true, the other channel flags are set to false. Using deliteful\/features Example of use for determining different code paths depending on the channel: require(["deliteful\/features", ...], function (has, ...) { if (has("phone-like-channel")) { \/\/ only for the phone channel (small screen) ... } else { \/\/ tablet-like and desktop-like channels (medium and large screens) ... } }); Example of conditional loading of dependent modules depending on the channel, using a chained ternary operator applied to the deliteful\/features module used as a requirejs plugin: require(["deliteful\/features!phone-like-channel?.\/PhoneModule:tablet-like-channel?.\/TabletModule:.\/DesktopModule", ...], function (Module, ...) { \/\/ The Module argument points to the return value of either PhoneModule, TabletModule, \/\/ or DesktopModule depending on the channel. ... }); Configuring deliteful\/features The channel flags can be configured statically in a hashmap provided through requirejs module configuration, for instance: <script> \/\/ configuring RequireJS require.config({ ... config: { "requirejs-dplugins\/has": { "phone-like-channel": false, "tablet-like-channel": true, "desktop-like-channel": false, } } }); <\/script> Note that only one channel flag should be set to true. If the channel flags are not configured statically, they are computed dynamically using CSS media queries based on breakpoints values provided by deliteful\/channelBreakpoints. The breakpoint values can be configured using require.config(). For details, see the documentation of deliteful\/channelBreakpoints.","tags":"","url":"Interface_Designer\/Widgets\/features.html"},{"title":"deliteful\/LinearLayout","text":"deliteful\/LinearLayout deliteful\/LinearLayout is a CSS layout container based on the CSS3 Flexible Box Layout Module. The children of a deliteful\/LinearLayout container can be laid out horizontally or vertically, and can fill unused space. Table of Contents Element Instantiation Element Configuration Element Styling Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/LinearLayout", "requirejs-domready\/domReady!"], function () { }); <html> <d-linear-layout vertical="false" style="width:100%, height:50px"> <div style="width: 20%">Left (20%)<\/div> <div class="fill">Center (Fill Space)<\/div> <div style="width: 50px">Right (50px)<\/div> <\/d-linear-layout> <\/html> Programmatic Instantiation require(["deliteful\/LinearLayout", "requirejs-domready\/domReady!"], function (LinearLayout) { var layout = new LinearLayout({vertical: false}); layout.style.width = "100%"; var leftChild = document.createElement("div"); var centerChild = document.createElement("div"); var rightChild = document.createElement("div"); leftChild.style.width = "20%"; centerChild.class = "fill"; rightChild.style.width = "50px"; layout.addChild(leftChild); layout.addChild(centerChild); layout.addChild(rightChild); layout.placeAt(document.body); }); Element Configuration Properties The layout direction is controlled by the vertical property which is true by default. The main direction of a LinearLayout is controlled by the vertical property which is true by default. The direction perpendicular to the main axis is called the cross direction. For example, if the main direction is vertical, the cross direction is horizontal. Setting the main size of children In the main direction, children of a LinearLayout widget support the following sizing constraints: Constraint Example Natural Size (no size set explicitly) Fixed Size style="width: 150px" Percentage Size style="width: 30%" Fill Available Space class="fill" These constraints can be mixed together for children of the same container. checkout the sample on JSFiddle Setting the cross size of children If nothing specified, a child fill its parent in the cross direction. If the cross size of the LinearLayout is set, you can specify a percentage size for the cross size of children. The cross size of a child can be also a fixed size. checkout the sample on JSFiddle Nesting LinearLayout containers Nesting LinearLayout instances can be used to build layouts in two dimensions. checkout the sample on JSFiddle Getting the sub-child of a LinearLayout to fill 100% in height If you set style="width:100%; height:100%" or class="width100 height100" (defined in defaultapp.css) on a LinearLayout sub-child and if its computed height is greater than its parent height, it will be displayed out of bounds of the container. To avoid this behaviour, you must add position: absolute on the sub-child. checkout the sample on JSFiddle Getting equal-size children in the main direction You just have to set the fill class on all children. checkout the sample on JSFiddle Examples Header \/ Stretched List \/ Footer Element Styling LinearLayout has no visual appearance, it does not provide any CSS class for styling. If vertical is true, the height of LinearLayout must be explicitly set, otherwise the width must be explictly set. To set the height of a LinearLayout using a percentage expression, the height of all its ancestors (including <body>) must also be expressed as percentage. CSS Good Practices LinearLayout CSS position property should not be changed. Direct children of a LinearLayout have their CSS position attribute set to relative. This should not be changed. Setting padding for both the LinearLayout and its children is discouraged since it's not well supported on Firefox. Using position:absolute, top, right, bottom and left for the position\/size of content inside a direct children of LinearLayout is discouraged since it's not supported on some Android stock browser. Setting display:inline-flex on a LinearLayout is discouraged since it's not well supported on Safari iOS and Android stock browsers. Enterprise Use Accessibility Relies on browser. Globalization deliteful\/LinearLayout does not provide any internationalizable bundle. Right to left orientation is supported by setting the dir attribute to rtl on the LinearLayout element: <d-linear-layout dir="rtl"><\/d-linear-layout> Security This widget has no specific security concern. Refer to delite\/Widget documentation for general security advice on this base class that LinearLayout is using. Browser Support This widget supports all supported browsers except Internet Explorer 9.","tags":"","url":"Interface_Designer\/Widgets\/LinearLayout.html"},{"title":"deliteful\/list\/List","text":"deliteful\/list\/List The deliteful\/list\/List custom element (d-list custom tag) renders an optionally scrollable list of items that are retrieved from an array or a store object from the dstore project. The list inherits from the delite\/Store class and as such any valid dstore\/Store implementation can be used to provide data to the list. No store is provided by default and the application developer has to provide one created either programmatically or in markup. Items rendered by the list are standard javascript objects. The list delegates the rendering of its items to an item renderer widget. The default item renderer implementation (deliteful\/list\/ItemRenderer) renders objects that define any of the following properties: label: the label of the item, displayed on the left (or on the right if direction is right to left) righttext: a text to display on the right (or on the left if direction is right to left) iconclass: css class to apply to a div before the label in order to display an icon righticonclass: css class to apply to a div after the right text in order to display an icon Here is a screenshot of a list that displays items using the default renderer: Any custom item renderer can be specified using the itemRenderer property of the widget. The widget also provides the following capabilities: List items can be grouped into categories (see Categorized items); List items can be selectable (see Selection support); For maximum flexibility, both grid, listbox, and menu WAI-ARIA roles are supported (see Accessibility). Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Mixins Element Events Enteprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <!-- A list of categorized items that uses the default item renderer, --> <!-- mapping the sales property of items to righttext, and using the --> <!-- region property as the item category. The store is referenced through --> <!-- the source property --> <d-list righttextAttr="sales" categoryAttr="region"> <!-- Add the following items to the store --> { "label": "France", "sales": 500, "profit": 50, "region": "EU" }, { "label": "Germany", "sales": 450, "profit": 48, "region": "EU" }, { "label": "UK", "sales": 700, "profit": 60, "region": "EU" }, { "label": "USA", "sales": 2000, "profit": 250, "region": "America" }, { "label": "Canada", "sales": 600, "profit": 30, "region": "America" }, { "label": "Brazil", "sales": 450, "profit": 30, "region": "America" }, { "label": "China", "sales": 500, "profit": 40, "region": "Asia" }, { "label": "Japan", "sales": 900, "profit": 100, "region": "Asia" } <\/d-list> Programmatic Instantiation With dstore\/Memory as source require(["dstore\/Memory", "deliteful\/list\/List", "requirejs-domready\/domReady!"], function (Memory, List) { \/\/ Create a memory store for the list and initialize it var dataSource = new Memory({idProperty: "label", data: [ { label: "France", sales: 500, profit: 50, region: "EU" }, { label: "Germany", sales: 450, profit: 48, region: "EU" }, { label: "UK", sales: 700, profit: 60, region: "EU" }, { label: "USA", sales: 2000, profit: 250, region: "America" }, { label: "Canada", sales: 600, profit: 30, region: "America" }, { label: "Brazil", sales: 450, profit: 30, region: "America" }, { label: "China", sales: 500, profit: 40, region: "Asia" }, { label: "Japan", sales: 900, profit: 100, region: "Asia" } ]}); \/\/ A list of categorized items from dataSource, that uses the default item renderer, \/\/ mapping the sales property of items to righttext and using the region property \/\/ as the item category. var list = new List({source: dataSource, righttextAttr: "sales", categoryAttr: "region"}); list.placeAt(document.body); }); With an array as source require(["deliteful\/list\/List", "requirejs-domready\/domReady!"], function (List) { \/\/ Create a memory store for the list and initialize it var dataSource = [ { label: "France", sales: 500, profit: 50, region: "EU" }, { label: "Germany", sales: 450, profit: 48, region: "EU" }, { label: "UK", sales: 700, profit: 60, region: "EU" }, { label: "USA", sales: 2000, profit: 250, region: "America" }, { label: "Canada", sales: 600, profit: 30, region: "America" }, { label: "Brazil", sales: 450, profit: 30, region: "America" }, { label: "China", sales: 500, profit: 40, region: "Asia" }, { label: "Japan", sales: 900, profit: 100, region: "Asia" } ]; \/\/ A list of categorized items from dataSource, that uses the default item renderer, \/\/ mapping the sales property of items to righttext and using the region property \/\/ as the item category. var list = new List({source: dataSource, righttextAttr: "sales", categoryAttr: "region"}); list.placeAt(document.body); }); Element Configuration Scroll capabilities Store capabilities Categorized items Custom renderers Scroll capabilities Note that the list is only scrollable if the size of its content (the rendered items) is longer than the height of the list widget. If you do not want the list to be scrollable, you can set its scrollDirection property to "none" in order to remove the default scrolling capability. Store capabilities Store instantiation No source is created by default and one has to provided to the list for it to display its items. The source can be instanciate with 3 different ways. Declaratively <d-list> {"label": "First item", "iconclass": "my-icon-class-a"}, {"label": "Second item", "iconclass": "my-icon-class-b"}, ..., {"label": "Last item", "iconclass": "my-icon-class-z"} <\/d-list> Programmatically with a dstore\/Store require(["dstore\/Memory", "dstore\/Trackable", "deliteful\/list\/List"], function (Memory, Trackable, List) { var list = new List(); var source = new (Memory.createSubclass([Trackable], {}))(); var item1 = {...}; var item2 = {...}; source.add(item1); source.add(item2, {beforeId: item1.id}); list.source = source; }); If the provided source is trackable (see dstore documentation), that is when it extends dstore\/Trackable, the widget will react to addition, deletion, move and update of the source content and refresh its rendering accordingly. Programmatically with an array require(["decor\/ObservableArray", "decor\/Observable", "deliteful\/list\/List"], function (ObservableArray, Observable, List) { var list = new List(); var source = new ObservableArray(); var item1 = new Observable({...}); var item2 = new Observable({...}); source.push(item1); source.push(item2); list.source = source; }); If the provided source is observable, that is when it is an decor\/ObservableArray, the widget will react to addition, deletion and move of the source content and refresh its rendering accordingly. If the items of the array are decor\/Observable, the widget will also react to update. Mapping capability Because the List widget inherit from delite\/StoreMap, you can redefine at will the mapping between your source items and the ones expected by the renderer using mapping attributes and functions, as in the following example: require([ "deliteful\/list\/List", "requirejs-domready\/domReady!" ], function (List) { var list = new List(); \/\/ Map the title property of a source item to \/\/ the label property supported by the renderer list.labelAttr = "title"; \/\/ Map a substring of the title property \/\/ of a source item to the righttext property \/\/ supported by the renderer list.righttextFunc = function (item, source, value) { return item.title.split(" ")[0]; }; list.source.add({title: "first item"}); ... list.placeAt(document.body); }); See the delite\/StoreMap documentation for more information about all the available mapping options. If you were not to use the delite\/StoreMap capabilities but decided to redefine the itemToRenderItem(item) method (inherited from delite\/Store), be aware that your custom implementation of the method MUST return items that have the same identity than the corresponding source items, as the List is relying on it. Here is an example of redefinition of the itemToRenderItem(item) method, using the default store with an identityAttribute value set to the default one, id: require(["deliteful\/list\/List"], function (List) { var list = new List(); list.itemToRenderItem = function () { \/\/ The list expect an identity for the item so is MUST be copied in the render item. return {id: item.id, righttext: item.label}; } }); Errors encountered when querying the store are reported by the widget through a "query-error" event. It should be listened to in order to react to it in the application, as in the following example: var list = new List(); list.on("query-error", function (error) { \/\/ Report the error to the user ... }); Categorized items The List widget supports categorized items, that are rendered with a category header that separates each category of items in the list. To enable this feature, use the categoryAttr property to define the name of the item property that holds the category of the item, as in the following example: var list = new List(); list.categoryAttribute = "category"; list.source = ...; list.source.add({label: "first item", category: "Category A"}); list.source.add({label: "second item", category: "Category A"}); list.source.add({label: "third item", category: "Category B"}); checkout the sample on JSFiddle An alternative is to set categoryFunc to a function that extract the category from the source item, as in the following example: var list = new List(); list.categoryFunc = function(item, source) { return item.category; }); list.source = ...; list.source.add({label: "first item", category: "Category A"}); list.source.add({label: "second item", category: "Category A"}); list.source.add({label: "third item", category: "Category B"}); As with the rendering of items, the actual rendering of the categories in the list is delegated to a category renderer widget. The default one is deliteful\/list\/CategoryRenderer, but a custom category renderer can be specified using the categoryRenderer property of the list (see the custom renderers section for more details). Custom renderers Custom item renderer The actual rendering of the items in the list is delegated to an item renderer widget. The default one is deliteful\/list\/ItemRenderer, but a custom item renderer can be specified using the itemRenderer property of the list. A custom item renderer must extends deliteful\/list\/ItemRenderer. It accesses the item to render in its item property. It must assign to its renderNode property the node in which the item is rendered . If the rendered item have actionable \/ keyboard navigable nodes, those are set using the navindex attribute, that behave simillarily to the standard tabindex attribute. Here are is an example of custom item renderer that illustrate these concepts: checkout the sample on JSFiddle Custom category renderer The actual rendering of the categories in the list is delegated to a category renderer widget. The default one is deliteful\/list\/CategoryRenderer, but a custom category renderer can be specified using the categoryRenderer property of the list. A custom category renderer is similar to a custom item renderer, except that it extends deliteful\/list\/CategoryRenderer. Here are is an example of custom category renderer: checkout the sample on JSFiddle Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap CSS Classes The List widget comes with two different styling that are applied by setting the baseClass property to one of the following values: class name effect d-list the list is displayed with an edge to edge layout. This is the default baseClass. d-rounded-list the list has rounded corners and both a left and right margin. Rendered Item Styling Items are rendered inside a DIV element with the CSS class d-list-item. By default, all items are rendered with the same height defined using the following CSS: .d-list-item .d-list-cell { height: ...; } To define variable height for the items, use the following CSS: .d-list-item .d-list-cell { height: inherit; } When an item has the focus, the style of the cell in which it is rendered can be defined using the css selector .d-list-item .d-list-cell:focus. The default item renderer allows further styling of its content using the following CSS classes: class name applies to d-list-item-icon the div before the label d-list-item-label the label d-list-item-right-text the right text d-list-item-right-icon the div after the right text Rendered Category Styling Categories are rendered inside a DIV element with the CSS class d-list-category. By default, all categories are rendered with the same height defined using the following CSS: .d-list-category .d-list-cell { height: ...; } To define variable height for the categories, use the following CSS: .d-list-category .d-list-cell { height: inherit; } When a category has the focus, the style of the cell in which it is rendered can be defined using the css selector .d-list-category .d-list-cell:focus. Selection Styling Depending on the selectionMode property value, the following CSS classes are added to the list: d-selectable when selectionMode is single; d-multiselectable when selectionMode is multiple. The CSS class d-selected is added to each list item that is currently selected. The style of a selected item can be customized using the following css: \/* CSS selector for a selected item in a list with selectionMode = "single" *\/ .d-selectable .d-list-item.d-selected { ... } \/* CSS selector for a selected item in a list with selectionMode = "multiple" *\/ .d-multiselectable .d-list-item.d-selected { ... } To illustrate these concepts, here is a sample that demonstrates how to use CSS to display a checkmark on selected items using the default item renderer: checkout the sample on JSFiddle User Interactions Scroll The widget uses the browser native scroll to allow the user to scroll its content: all the standard scroll interaction of the platform are supported (including using a mousewheel). Action In most cases, when the user clicks or taps a list item the application needs to perform an action. This can easily be achieved by listening to regular click events. It is typically easier to wait for the events to bubble and listen to them at the list level as follows: <d-list onclick="actionHandler(event)"><\/d-list> with function actionHandler(event) { var renderer = event.currentTarget.getEnclosingRenderer(event.target); if (renderer) { \/\/ use the info on renderer.item and perform an action } } Selection When the action on the list items has to be permanent you should consider using the list selection mechanism instead of listening to click events. In addition to managing the list of selected items this will provide with with a default CSS rendering for the selected items. The list uses the delite\/Selection mixin to provide support for selectable items. By default, items in the list are not selectable, but you can change this behavior using the selectionMode property of the widget: <d-list selectionMode="multiple"><\/d-list> When the selection mode is "single", a click or tap on a item (or a press on the Space key when an item has the focus) select it and de-select any previously selected item. Clicking on a selected item has the effect of de-selecting it. When the selection mode is "radio", a click or tap on a item (or a press on the Space key when an item has the focus) select it and de-select any previously selected item. Clicking on a selected item has no effect. When the selection mode is "multiple", a click or tap on an item (or a press on the Space key when an item has the focus) toggle its selected state. See the Events\/Selection section for how to listen to selection events. Mixins No Mixin is currently provided for this widget. Element Events Store query When the widget has finished rendering the items queried from the source, it emits a query-success event. The renderItems property of the event is an array of the items displayed by the widget. If the widget fails to query its source to retrieve the items to render, it emits a query-error event (see Store capabilities for more information). Selection When the current selection changes, a selection-change event is emitted. Its oldValue property contains the previous selection, and its newValue property contains the new selection. You can register the event programmatically using the Widget.on method or in markup as follows: <d-list on-selection-change="selectionHandler(event)"><\/d-list> with function selectionHandler(event) { console.log("newly selected item: "+event.newValue); } Enterprise Use Accessibility The widget supports three different WAI-ARIA roles: grid, which is the default role listbox, which can be simply using setAttribute method. menu, which can be simply using setAttribute method. grid role When using the default grid role, the List widget implements a single column grid navigation pattern as defined in the WAI-ARIA 1.0 Authoring Practices, except for the selection \/ deselection of item, that is performed using the Space key on a focused item (no support for Ctrl+Space, Shift+Space, Control+A, Shift+Arrow and Shift+F8). The list items can then be navigated using the UP and DOWN arrow keys. Pressing the DOWN arrow while the last item has focus will focus the first item. Pressing the UP arrow while the first item has the focus will focus the last item. Note that in some browsers (such as Firefox) the List needs first to be given focus by pressing TAB after loading the page before using the UP and DOWN arrow keys. When a List item has the focus, you can press the ENTER or F2 keys to focus its first actionable node (if any), and then use the (Shift+)TAB key to move from one actionable node to the (previous)next. Pressing the ESC key will end actionable nodes navigation and resume to the previous mode. Note that Enter and F2 only activate the Actionable Mode when using a custom renderer that render DOM nodes with a navindex attribute, as the default renderers do not render any actionable nodes. Pressing the PAGE UP key will focus the first item of the list, while pressing the PAGE DOWN key will focus the last one. You can also search for items by typing their first letter on the keyboard, and the next item element which text begins with the letters will get the focus. When the selectionMode of a List is "multiple", its aria-multiselectable attribute is set to "true". When an item is selected in a list, its aria-selected attribute is set to the value "true". listbox role When using the listbox role, the List widget behaves as previously described for the grid role, with the following differences: The list cannot have a selectionMode of "none". If the selectionMode is "none" when setting the role attribute to listbox, it is automatically set to "single"; The item and category renderers should not be actionable, and there is no way to enter actionable mode by pressing the ENTER or F2 keys; If the list is categorized, the category headers are not focusable. menu role When using the menu role, the List widget behaves as previously described for the listbox role, except that there is no concept of selection. Globalization This widget does not provide any internationalizable bundle. The only strings displayed by the list are coming from the user data through the store from which items are retrieved. This widget supports both left to right and right to left orientation. Security This widget has no specific security concern. Refer to delite\/Widget and delite\/StoreMap for general security advice on this base class and mixin that this widget is using. Browser Support This widget supports all supported browsers without any degraded behavior. Note however that the default item renderer is not supported on IE9.","tags":"","url":"Interface_Designer\/Widgets\/list\/List.html"},{"title":"deliteful\/list\/PageableList","text":"deliteful\/list\/PageableList The deliteful\/PageableList custom element (d-pageable-list custom tag) extends the deliteful\/list\/List element and adds paging capabilities to it. A pageable list does not load and display all its content all at once, but only loads and displays a subset of the content while providing user controls to load and display more data. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Mixins Element Events Enteprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <!-- A pageable list of categorized items that uses the default item renderer, --> <!-- mapping the sales property of items to righttext, and using the --> <!-- region property as the item category --> <d-pageable-list height="100%" righttextAttr="sales" categoryAttr="region"> <!-- Add the following items to the store --> { "label": "France", "sales": 500, "profit": 50, "region": "EU" }, { "label": "Germany", "sales": 450, "profit": 48, "region": "EU" }, { "label": "UK", "sales": 700, "profit": 60, "region": "EU" }, { "label": "USA", "sales": 2000, "profit": 250, "region": "America" }, { "label": "Canada", "sales": 600, "profit": 30, "region": "America" }, { "label": "Brazil", "sales": 450, "profit": 30, "region": "America" }, { "label": "China", "sales": 500, "profit": 40, "region": "Asia" }, { "label": "Japan", "sales": 900, "profit": 100, "region": "Asia" } <\/d-list> Programmatic Instantiation with a dstore\/Store in source property require(["dstore\/Memory", "deliteful\/list\/PageableList", "requirejs-domready\/domReady!"], function (Memory, PageableList) { \/\/ Create a memory store for the list and initialize it var dataSource = new Memory({idProperty: "label", data: [ { label: "France", sales: 500, profit: 50, region: "EU" }, { label: "Germany", sales: 450, profit: 48, region: "EU" }, { label: "UK", sales: 700, profit: 60, region: "EU" }, { label: "USA", sales: 2000, profit: 250, region: "America" }, { label: "Canada", sales: 600, profit: 30, region: "America" }, { label: "Brazil", sales: 450, profit: 30, region: "America" }, { label: "China", sales: 500, profit: 40, region: "Asia" }, { label: "Japan", sales: 900, profit: 100, region: "Asia" } ]}); \/\/ A pageable list of categorized items from dataSource, that uses the default item renderer, \/\/ mapping the sales property of items to righttext and using the region property \/\/ as the item category. var list = new PageableList({source: dataSource, righttextAttr: "sales", categoryAttr: "region"}); list.style.height = "100%"; list.placeAt(document.body); }); checkout the sample on JSFiddle Programmatic Instantiation with an array in source property require(["deliteful\/list\/PageableList", "requirejs-domready\/domReady!"], function (PageableList) { \/\/ Create a memory store for the list and initialize it var dataSource = [ { label: "France", sales: 500, profit: 50, region: "EU" }, { label: "Germany", sales: 450, profit: 48, region: "EU" }, { label: "UK", sales: 700, profit: 60, region: "EU" }, { label: "USA", sales: 2000, profit: 250, region: "America" }, { label: "Canada", sales: 600, profit: 30, region: "America" }, { label: "Brazil", sales: 450, profit: 30, region: "America" }, { label: "China", sales: 500, profit: 40, region: "Asia" }, { label: "Japan", sales: 900, profit: 100, region: "Asia" } ]; \/\/ A pageable list of categorized items from dataSource, that uses the default item renderer, \/\/ mapping the sales property of items to righttext and using the region property \/\/ as the item category. var list = new PageableList({source: dataSource, righttextAttr: "sales", categoryAttr: "region"}); list.style.height = "100%"; list.placeAt(document.body); }); Note : When using array you must also define a function in respond of an event -> more details here : Element Events Element Configuration See also deliteful\/list\/List configuration for the element configuration inherited from the deliteful\/list\/List widget. Table of content Defining the length of pages Defining the maximum number of pages to display at once Hiding the list while it is busy loading and displaying a page of items Other properties Defining the length of pages When started, a pageable list will load and display only one page of data, and will provide user controls to load and display more pages of data (if there is more data). The pageLength property of a pageable list defines the number of items in a page of data. Note that this number is a maximum, and that a page may contain less items. If this property is set to 0 or less, the list will load and display all the items from the source (as a non pageable list does). Here is an example of setting a pageLength of 100 items: require([ "deliteful\/list\/PageableList", "requirejs-domready\/domReady!" ], function (PageableList) { var pageableList = new PageableList(); pageableList.pageLength = 100; ... pageableList.placeAt(document.body); }); Here is the same example using markup: <head> ... <script> require([ "deliteful\/list\/PageableList", "requirejs-domready\/domReady!" ], function (PageableList) { }); <\/script> <\/head> <body> <d-pageable-list source="..." pageLength="100"> <\/d-pageable-list> <\/body> In this example, the list will load (up to) the first 100 items from the source, display them, and provide user controls to load another page of (up to) 100 items if there are more items in the source. Defining the maximum number of pages to display at once The property maxPages defines the maximum number of pages to display at the same time, allowing to keep the size of the DOM under control when using very large lists of items. When a pageable list loads and displays a new page of data, it makes sure not to display more pages than the maximum number of pages allowed by unloading some other pages. Here is an example that illustrates the unloading mechanism, using a pageable list on a source of 1000 items, with a page length of 50 and a maximum number of 2 pages displayed at the same time: Initially, the list loads and displays the 50 first items of the source (index 0 to 49), and creates a user control to load the following page; When the user control is activated, the following 50 items (index 50 to 99) are loaded from the source and appended to the list (the list now displays the 100 first items from the source); When the user control is activated once again: the following 50 items (index 100 to 149) are loaded from the source and appended to the list; the first page of items (index 0 to 49) is removed from the DOM, and a user control is created to load the previous page. If the maxPages property is set to 0 or less, there is no maximum number of pages (pages are never unloaded). Hiding the list while it is busy loading and displaying a page of items The pageable list provides the options to hides its content when loading a page of data. This is activated by setting the hideOnPageLoad property to true. Other properties See the User Interactions section for the other available properties of a pageable list. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap CSS Classes See also deliteful\/list\/List styling for the element styling inherited from the deliteful\/list\/List widget. The CSS class of a page loader is d-list-loader. When a page is currently loading, the CSS class d-loading is added to the page loader. The progress indicator that is displayed when a page is loading can also be styled using CSS. See Progress indicator styling for more details. The following example demonstrate how to customize the progress indicator using CSS, so that both the progress indicator and the text are displayed in red: .d-list-loader { color: red; } .d-list-loader.d-loading { color: red; } .d-list-loader.d-loading .d-progress-indicator-lines { stroke: red; } User Interactions See also deliteful\/list\/List user interactions for the user interactions inherited from the deliteful\/list\/List widget. The list provides up to two user controls to load and display more data: A user control to load the next page of data from the source. It is only present if there is more data to load from the source. A user control to load the previous page of data from the source. It is only present if there is previous data to load from the source. The user controls can be activated using one of the following interactions, as described in the next sections: Activation with a mouse click \/ the keyboard SPACE key Activation by scrolling Activation with a mouse click \/ the keyboard SPACE key The user controls for loading pages are clickable (or activable using the SPACE key when navigating the list using the keyboard). If there is a next page of data in the source, the user control is displayed at the end of the list: The message that is displayed by the control can be customized using the loadNextMessage of a pageable List (see the API documentation for more information). When the user control is activated, its appearance changes while the list is busy retrieving data from the source and displaying it: The message that is displayed when the list is busy can also be customized, using the loadingMessage property of a pageable list. When the new page of items is displayed, the first new item gains the focus and the user control is either deleted (if there is no more data in the source) or moved to the end of the list: The user control to load the previous page of data follows the same pattern, except that it is displayed at the top of the list rather than at the end of the list, and that the property loadPreviousMessage defines what it displays: Activation by scrolling The user controls, when they exist, can be automatically activated when the user scrolls to the top of the bottom of the list. To activate this behavior, the autoPaging property must be set to true on the pageable list. Mixins See also deliteful\/list\/List mixins for the mixins provided for the inherited deliteful\/list\/List widget. No specific Mixin is currently provided for this widget. Element Events See also deliteful\/list\/List element events for the element events inherited from the deliteful\/list\/List widget. In the case of one uses an array as the source, an event "new-query-asked" is emitted when all the items contained in the list are displayed. Also one must define the following function : require(["deliteful\/list\/PageableList", "requirejs-domready\/domReady!"], function (PageableList) { \/\/ Create a memory store for the list and initialize it var dataSource = [...]; var list = new PageableList({source: dataSource, righttextAttr: "sales", categoryAttr: "region"}); list.on("new-query-asked", function(evt) { evt.setPromise(new Promise (function (resolve) { ... \/\/return the elements asked by the query in the resolve promise (can be []) resolve(list.source.slice(evt.start, evt.end)); })) }); list.style.height = "100%"; list.placeAt(document.body); }); The event is send by the function fetchRange() of delite\/Store which can not finish its execution until a promise is resolved. One can use the function in response of the event to add items in the array and achieve the query. The function must then use the function setPromise of the event in arguments and create a promise to resolve. The promise resolved must return an array representing the items asked. Enterprise Use See also deliteful\/list\/List enterprise use for the enterprise use inherited from the deliteful\/list\/List widget. Globalization deliteful\/list\/PageableList provides an internationalizable bundle that contains only one message, with the key default-load-message. This is the message displayed by page loaders. This message supports the keyword ${pageLength}, that is replaced by the current value of the pageLength property of the widget.","tags":"","url":"Interface_Designer\/Widgets\/list\/PageableList.html"},{"title":"deliteful\/Panel","text":"deliteful\/Panel deliteful\/Panel is a container widget with a Title Bar on top, that uses CSS3 Flexible box to always show the title and fill the available space with its children. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle works. Declarative Instantiation require(["deliteful\/Panel", "requirejs-domready\/domReady!"], function () { }); <html> <d-panel id="panel"> <div>Content - Panel<\/div> <\/d-panel> <\/html> Programmatic Instantiation require([ "deliteful\/Panel", "requirejs-domready\/domReady!" ], function(Panel) { var panel = new Panel({label: "panel"}); var content = document.createElement("div"); panel.addChild(content); panel.placeAt(document.body); }); Element Configuration The following properties can be set on the widget to configure it: label: the label to display in the panel header; iconClass: CSS class to apply to a DOM node before the label in order to render an icon; closedIconClass: this CSS class is only used when the panel is inside a deliteful\/Accordion and it is used to display an icon when the panel is closed. deliteful\/Panel support delite container infrastructure by inheriting from delite\/Container. For more informations, see delite\/Container documentation. Element Styling Widget CSS Classes The following CSS classes are automatically set by the widget and can be reused for overriding the default style. CSS Class Description d-panel The panel container d-panel-header The title bar d-panel-content The content of the panel Styling CSS classes The following CSS classes provided by the widget can be set explicitly on the element itself: CSS Class Description d-panel-success Indicates a successful or positive information d-panel-info Indicates a neutral informative change or information d-panel-warning Indicates a warning that might need attention d-panel-danger Indicates a dangerous or potentially negative information User Interactions deliteful\/Panel does not provide any predefined interactions. Enterprise Use Accessibility type status comment Keyboard N\/A No user interaction Visual Formatting ok Supports high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader ok Title bar has an ARIA role of heading and content has an ARIA role of region. Tested with JAWS and VoiceOver Globalization deliteful\/Panel does not provide any internationalizable bundle. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class. Browser Support This widget supports all supported browsers.","tags":"","url":"Interface_Designer\/Widgets\/Panel.html"},{"title":"deliteful\/ProgressBar","text":"deliteful\/ProgressBar The deliteful\/ProgressBar widget displays the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete, or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed. Overview of the Progress Bar by theme (bootstrap, iOS, Holodark) When the progress bar is determinate, a default message displays the percentage of progression. This message can be customized. ProgressBar theme style typically defines a looping animation to highlight its indeterminate state. Table of Contents Element Instantiation Element Configuration Element Styling Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <d-progress-bar message="Please wait..."><\/d-progress-bar> <\/html> <html> <d-progress-bar value=0 max=100><\/d-progress-bar> <\/html> Programmatic Instantiation require([ "deliteful\/ProgressBar" ], function (ProgressBar) { var pb = new ProgressBar({max:100, value: 0}); pb.placeAt(document.body); pb.value = 20; }); Element Configuration There are two properties that determine the current task completion represented by the element: the value property specifies how much of the task has been completed, the max property specifies how much work the task requires in total. The units are arbitrary and not specified. When Value isn't NaN, it always varies from 0 to max. Determinate vs indeterminate By default, deliteful\/ProgressBar is indeterminate in a sense it doesn't indicate the level of completion of the ongoing task. Set a value comprised between 0 and the max property to make the progress bar determinate. A value greater than max is converted to the max value. An invalid or negative value is converted to 0. Set value = NaN to make the progress bar indeterminate. checkout the sample on JSFiddle Default message The default behavior of ProgressBar is to displays the percentage of completion when the state is determinate, and to display no message when state is indeterminate. The property fractionDigits allows to specify the number of fraction digits to display. checkout the sample on JSFiddle Static custom message Set the message property with a non-empty string to use a custom message. checkout the sample on JSFiddle Dynamic custom message You can override the method formatMessage() to generate a dynamic custom message. checkout the sample on JSFiddle Additional message Depending on the theme, an additional message may be displayed. For themes that display both messages, typically message is on one side and the additional message is on the other side. You can override the method formatExtMsg() to customize this additional message. It will be visible only on supported themes. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes Style is defined by the CSS classes from the themes of the widget. CSS classes are bound to the structure of the widget declared in its template deliteful\/ProgressBar\/ProgressBar.html class name applies to d-progress-bar ProgressBar widget node d-progress-bar-background background node d-progress-bar-msg message node d-progress-bar-msg-invert inverted message node d-progress-bar-indicator indicator node d-progress-bar-a11y dedicated node used to show the indicator in contrast mode on supported browsers Customizing the colors ProgressBar provides a set of CSS classes with predefined colors: checkout the sample on JSFiddle Customizing the size Default widget size is 100% of its container. You may use the width standard CSS properties to specify the width. .d-progress-bar { width: 200px; } Due to the nature of ProgressBar and to ensure consistent rendering under the provided themes, we recommend that you rely on font-size CSS property to change the progress bar height. checkout the sample on JSFiddle Element Events This widget does not emit any custom event. Enterprise Use Accessibility type status comment Keyboard N\/A No user interaction Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader yes Supports ARIA role progressbar. Tested with JAWS and VoiceOver Browser Support This widget supports all supported browsers without any degraded behavior. See also Samples deliteful\/samples\/ProgressBar-basic.html deliteful\/samples\/ProgressBar-handler.html deliteful\/samples\/ProgressBar-messages.html","tags":"","url":"Interface_Designer\/Widgets\/ProgressBar.html"},{"title":"deliteful\/ProgressIndicator","text":"deliteful\/ProgressIndicator The deliteful\/ProgressIndicator widget indicates that a task is ongoing. It displays a round spinning graphical representation. For a task whose end is determined, you can provide a number from 0 to 100 to indicate the level of progression. Overview of the Progress Indicator by theme (bootstrap, iOS, Holodark) Table of Contents Element Instantiation Element Configuration Element Styling Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <d-progress-indicator id="pi" active="true"><\/d-progress-indicator> <\/html> ProgressIndicator must be active to become visible and start its animation. require([ "deliteful\/ProgressIndicator" ], function () { \/\/ perform some tasks... \/\/ then deactivate the progress indicator var pi = document.getElementById("pi"); pi.active = false; }); Programmatic Instantiation require([ "deliteful\/ProgressIndicator" ], function (ProgressIndicator) { var pi = new ProgressIndicator({active: true}); pi.placeAt(document.body); \/\/do some other tasks (load data...) pi.active = false; pi.destroy(); \/\/this instance won't be reused, so destroy it. }); Element Configuration The following properties can be set on the widget to configure it: active: Set to false to hide the widget and stop any ongoing animation. Set to true to show the widget: animation automatically starts unless you set a number to the "value". value: A value from 0 to 100 that indicates a percentage of progression of an ongoing task. Defaults to NaN. speed: The relative speed of the spinning animation. Accepted values are "slow", "normal" and "fast". Other values are converted to "normal". Determinate vs indeterminate ProgressIndicator is indeterminate as long as ProgressIndicator.value = NaN, which is the default value. deliteful\/ProgressIndicator is indeterminate in the sense that it doesn't indicate the level of completion of the ongoing task, it will spin until it is deactivated. checkout the sample on JSFiddle Animation speed The speed attribute lets you change the relative speed of the animation. Accepted values are "slow", "normal" and "fast". Other values are converted to "normal". Note that the actual\/real speed of the animation depends of the device\/os\/browser capabilities. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes Style is defined by the CSS classes from the themes of the widget. CSS classes are bound to the structure of the widget declared in its template deliteful\/ProgressIndicator\/ProgressIndicator.html class name applies to d-progress-indicator the ProgressIndicator widget node d-progress-indicator text the child node which contains the text to display when a value is set d-progress-indicator-lines the child node which declare the 12 lines of the ProgressIndicator Customizing the colors Here is an example that shows how to set the lines and the text in red: <html> <d-progress-indicator id="pi"><\/d-progress-indicator> <\/html> #pi .d-progress-indicator-lines { stroke: red; } #pi.d-progress-indicator text { fill: red; } checkout the sample on JSFiddle Customizing the size Default widget size is 40x40px on all themes. You may use width and height standard CSS properties to specify the size. We recommend that you keep width and height equal (or close) in order to get nicer results. Example of ProgressIndicator which fills its container <d-progress-indicator style="width: 100%; height: 100%"><\/d-progress-indicator> checkout the sample on JSFiddle Note the the text size automatically stretch\/expand itself, so you do not have to set\/change the font size. Enterprise Use Accessibility type status comment Keyboard N\/A No user interaction Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader no There is no ARIA role for progress indicator, for long running tasks that require sounds feedback, consider using deliteful\/ProgressBar Browser Support This widget supports all supported browsers without any degraded behavior. See also Samples deliteful\/samples\/ProgressIndicator-basic.html deliteful\/samples\/ProgressIndicator-overlay.html deliteful\/samples\/ProgressIndicator-percentage.html","tags":"","url":"Interface_Designer\/Widgets\/ProgressIndicator.html"},{"title":"deliteful\/RadioButton","text":"deliteful\/RadioButton The deliteful\/RadioButton widget represents a 2-state widget similar to the HMTL5 input type="radio" element. Contrary to other checkbox widgets like deliteful\/Checkbox or deliteful\/Switch, a RadioButton is usually used with other RadioButton widgets to form a group of exclusive options. Only one RadioButton can be checked at a time within a group. Example of RadioButton widgets Table of Contents Element Instantiation Element Configuration Element Styling Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <body> <d-radio-button checked="true" name="category" value="SUV"><\/d-radio-button> <d-radio-button name="category" value="Sport"><\/d-radio-button> <d-radio-button name="category" value="Executive"><\/d-radio-button> <\/body> <\/html> Check the following jsfiddle example: checkout the sample on JSFiddle Programmatic Instantiation require([ "deliteful\/RadioButton" ], function (RadioButton) { var sw = new RadioButton({checked:true, name: "category", value: "SUV"}); sw.placeAt(document.body); sw = new RadioButton({name: "category", value: "Sport"}); sw.placeAt(document.body); sw = new RadioButton({name: "category", value: "Executive"}); sw.placeAt(document.body); }); Element Configuration A RadioButton widget is used in relation with other RadioButton widgets to form a group of exclusive choices. A radio button group is defined as a logical group of RadioButton widgets that share the same name attribute value. When a form is submitted, only the value of the checked RadioButton is submitted. The state of a RadioButton widget (checked or unchecked) is defined by the checked property, inherited from the deliteful\/Toggle class. There can be only one RadioButton checked within a radio button group. In addition, the Switch widget supports the following form-related properties of an HTML5 input element of type "checkbox": name, value, disabled and alt, inherited from delite\/FormWidget. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap CSS Classes CSS classes are bound to the structure of the widget declared in its template deliteful\/RadioButton\/RadioButton.html. The following table lists all the CSS classes that can be used to style the widget. class name\/selector applies to d-radio-button RadioButton widget node d-radio-button::before RadioButton "reticule" In addition, the following classes are used in combination with the classes above: class name\/selector applies to d-checked RadioButton widget node in checked state d-focused RadioButton widget node in focus state Element Events The widget deliteful\/RadioButton emits a change event when its checked state is changed following a user interaction. event name dispatched cancelable bubbles properties change on state change No Yes standard HTML5 Event properties Enterprise Use Accessibility type status comment Keyboard N\/A No user interaction Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader yes Supports ARIA role radio. Tested with JAWS and VoiceOver Globalization deliteful\/RadioButton does not provide any internationalizable bundle. Browser Support This widget supports all supported browsers without any degraded behavior. Security This class has no specific security concern. See also Samples deliteful\/samples\/Buttons.html","tags":"","url":"Interface_Designer\/Widgets\/RadioButton.html"},{"title":"deliteful\/ResponsiveColumns","text":"deliteful\/ResponsiveColumns A container that lays out its children according to the screen width. This widget relies on CSS media queries (http:\/\/www.w3.org\/TR\/css3-mediaqueries). You can define any number of screen classes by setting the breakpoints attribute. Then you must set the layout attribute on each child to configure a width for each screen class. The following example defines two screen classes: "phone" and "other" with a breakpoint at 500px. If the "phone" class is active, the first child width is 100% and the second child is hidden. If the screen is larger than 500px then the first child width is 20% and the second one fill the remaining space. <d-responsive-columns breakpoints="{phone: '500px', other: ''}"> <div layout="{phone: '100%', other: '20%'}">...<\/div> <div layout="{phone: 'hidden', other: 'fill'}">...<\/div> <\/d-responsive-columns> When the screen width changes (browser window resize or actual device orientation change) and if a new screen class is applied by the container, a "change" event is emitted with 2 specific properties: screenClass (the new screen class) and mediaQueryList (the MediaQueryList instance at the origin of the change). checkout the sample on JSFiddle Table of Contents Element Instantiation Element Configuration Events Element Styling Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/ResponsiveColumns", "requirejs-domready\/domReady!"], function () { } ); <html> <d-responsive-columns breakpoints="{phone: '500px', other: ''}"> <div layout="{phone: '100%', other: '20%'}">...<\/div> <div layout="{phone: 'hidden', other: 'fill'}">...<\/div> <\/d-responsive-columns> <\/html> Programmatic Instantiation require([ "deliteful\/ResponsiveColumns", "requirejs-domready\/domReady!" ], function(ResponsiveColumns){ rc = new ResponsiveColumns(); rc.breakpoints = "{'small': '500px', 'medium': '900px', 'large': ''}"; var child = document.createElement("div"); child.setAttribute("layout", "{'small': '100%', 'medium': '200px', 'large': '10%'}"); child.innerHTML = "Child 1"; rc.addChild(child); child = document.createElement("div"); child.setAttribute("layout", "{'small': 'hidden', 'medium': 'fill', 'large': '30%'}"); child.innerHTML = "Child 2"; rc.addChild(child); child = document.createElement("div"); child.innerHTML = "Child 3"; child.setAttribute("layout", "{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}"); rc.addChild(child); rc.placeAt(document.body); }); Element Configuration deliteful\/ResponsiveColumns support delite display infrastructure by inheriting from delite\/DisplayContainer. For more informations, see the delite\/DisplayContainer documentation. Defining screen classes and children layout Screen classes represent the different types of layout to be managed by the container. You can define any number of screen classes by setting the breakpoints attribute. Children of the container must define their width for each screen class by setting their layout attribute. For example if breakpoints is '{small: "480px", medium: "1024px", large: ""}', this means that the class "small" is applied if the width is smaller than 480px, then the "medium" will be applied between 480px and 1024px. The class "large" is applied for larger screens. Defining the last class bound as an empty string is interpreted as +Infinity. Each child must have a layout property that defines values for "small", "medium" and "large" keys. Here is the full example: <d-responsive-columns id="rc" class="fill" breakpoints="{'small': '500px', 'medium': '900px', 'large': ''}"> <div layout="{'small': '100%', 'medium': '200px', 'large': '10%'}">A<\/div> <div layout="{'small': 'hidden', 'medium': 'fill', 'large': '30%'}">B<\/div> <div layout="{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}">C<\/div> <\/d-responsive-columns> Both breakpoints and layout properties are strings parsed internally by the standard JSON.parse(). To facilitate writing markup you can use single quotes when defining these properties, single quotes will be replaced by double quotes before interpreted by JSON.parse. Note that the widget computes the default value of its breakpoints property using the values of the breakpoins provided by the deliteful\/channelBreakpoints module. See the deliteful\/channelBreakpoints documentation for information about how to statically customize these default breakpoint values. Events The delite\/ResponsiveColumns class provides the following event: event name dispatched cancelable bubbles properties change the current screen class has changed True True screenClass: the new screen class mediaQueryList: the MediaQueryList that triggered the change Element Styling The default height of a deliteful\/ResponsiveColumns is 100%. As a consequence, you must ensure that the height of every parent is defined (this includes <body> and <html>). You can read this external article for more information. You can set height of <body> and <html> to 100% by including defaultapp.css Enterprise Use Accessibility Relies on browser. Globalization deliteful\/ResponsiveColumns does not provide any internationalizable bundle. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class that deliteful\/ResponsiveColumns is using. Browser Support This widget supports all supported browsers except Internet Explorer 9.","tags":"","url":"Interface_Designer\/Widgets\/ResponsiveColumns.html"},{"title":"deliteful\/ScrollableContainer","text":"deliteful\/ScrollableContainer deliteful\/ScrollableContainer is a container widget with scrolling capabilities. This widget which can scroll its contents horizontally and\/or vertically. Its scrolling capabilities and API are provided by its parent class delite\/Scrollable. Example of deliteful\/ScrollableContainer on mobile: Example of deliteful\/ScrollableContainer on desktop: Table of Contents Element Instantiation Using ScrollableContainer Element Styling User Interactions Events Extending ScrollableContainer Enterprise Use Element Instantiation For details on the instantiation lifecycle, see delite\/Widget. Declarative Instantiation require(["deliteful\/ScrollableContainer", "requirejs-domready\/domReady!" ], function () { }); <html> <d-scrollable-container scrollDirection="both"> <div>...<\/div> <div>...<\/div> <\/d-scrollable-container> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require([ "deliteful\/ScrollableContainer" ], function (ScrollableContainer) { var sc = new ScrollableContainer({scrollDirection: "both"}); sc.placeAt(document.body); \/\/ add content to the scrollable container: var child = document.createElement("div"); sc.addChild(child); \/\/ If needed, listen to native "scroll" events: sc.on("scroll", function (event) { ... }); }); checkout the sample on JSFiddle Using ScrollableContainer By default, the scrolling capabilities are added to the widget's root node (that is, the widget itself). A sublcass of deliteful\/ScrollableContainer can chose the node thanks to the property scrollableNode. This property must be set by the subclass at latest in its render() method. Scroll Direction The widget provides several scrolling modes through the scrollDirection property. For details, see Using delite\/Scrollable. Programmatic Scroll In additional to the interactive scroll, the API of deliteful\/ScrollableContainer provides methods for programmatic scroll. For details, see Using delite\/Scrollable. Element Events During interactive or programmatic scrolling, native "scroll" events are emitted. For details, see Events in delite\/Scrollable. Element Styling Style is defined by the CSS classes from the themes of the widget. In addition to the CSS classes defined by the superclass delite\/Scrollable (see Element Styling in delite\/Scrollable, deliteful\/ScrollableContainer adds an empty marker class d-scrollable-container. User Interactions The scrolling interaction is handled natively by the browser in a multi-channel responsive manner. For details, see Interactions in delite\/Scrollable. Extending ScrollableContainer By default, the scrolling capabilities are added to the widget's root node (that is, the widget itself). A sublcass of deliteful\/ScrollableContainer can chose the node thanks to the property scrollableNode. This property must be set by the subclass at latest in its render() method. First use-case: creating a widget extending deliteful\/ScrollableContainer define(["delite\/register", "deliteful\/ScrollableContainer", ...], function (register, Scrollable, ...) { return register("mywidget", [HTMLElement, ScrollableContainer, ...], { ... render: dcl.superCall(function (sup) { return function () { \/\/ Create a child element: var myScrollableDiv = document.createElement("div"); ... this.appendChild(myScrollableDiv); \/\/ Indicate the scrollable child element: this.scrollableNode = myScrollableDiv; sup.apply(this, arguments); }; }) }); Characteristics: Fits for widgets with one single scrollable element. Exposes the API of the parent classes, including the scrolling API of delite\/Scrollable. Second use-case: creating a widget embedding widgets extending deliteful\/ScrollableContainer define(["delite\/register", "deliteful\/ScrollableContainer", ...], function (register, Scrollable, ...) { \/\/ In this use-case, does not extend delite\/Scrollable \/\/ nor deliteful\/ScrollableContainer return register("mywidget", [HTMLElement, ...], { ... render: dcl.superCall(function (sup) { return function () { var scrollableNode = \/\/ or your own scrollable widget new ScrollableContainer(...); ... this.appendChild(scrollableNode); \/\/ If needed, add other scrollable widgets as child elements sup.apply(this, arguments); }; }) }); Characteristics: Allows a widget to have more than one scrollable element. Allows to hide the API of the parent classes, including the scrolling API of delite\/Scrollable. Enterprise Use deliteful\/ScrollableContainer's characteristics in terms of accessibility, globalization, security, and browser support are similar to those of delite\/Scrollable. For details, see Enterprise Use of delite\/Scrollable.","tags":"","url":"Interface_Designer\/Widgets\/ScrollableContainer.html"},{"title":"deliteful\/Select","text":"deliteful\/Select deliteful\/Select is a form-aware and store-aware widget leveraging the native HTML5 select element. Example of deliteful\/Select (single choice mode): Example of deliteful\/Select (multiple choice mode): Table of Contents Element Instantiation Using Select Element Styling Enterprise Use Element Instantiation For details on the instantiation lifecycle, see delite\/Widget. Declarative Instantiation require(["deliteful\/Select", "requirejs-domready\/domReady!"], function () { }); <html> <d-select selectionMode="multiple"> {"text": "Option 1", "value": "1"}, ... <\/d-select> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require(["dstore\/Memory", "dstore\/Trackable", "deliteful\/Select", "requirejs-domready\/domReady!"], function (Memory, Trackable) { var select = new Select({selectionMode: "multiple"}); \/\/ Create the store var source = new (Memory.createSubclass(Trackable))({}); select.source = source; \/\/ add options to the Select widget source.add({text: "Option 1", value: "1"}); ... select.placeAt(document.body); }); Or with an array in source property : require(["decor\/ObservableArray", "decor\/Observable", "deliteful\/Select", "requirejs-domready\/domReady!"], function (ObservableArray, Observable) { \/\/ Create the store var source = new ObservableArray(); select.source = source; \/\/ add options to the Select widget source.push(new Observable({text: "Option 1", value: "1"})); ... select.placeAt(document.body); }); checkout the sample on JSFiddle Using Select Selection Mode The widget provides several selection modes through the selectionMode property inherited from delite\/Selection. For details, see Using delite\/Selection. Note that deliteful\/Select only supports for this property the values single and multiple. Attribute Mapping deliteful\/Select uses the following attributes of source items: The text attribute for the label of the option elements. The value attribute for their value attribute. The disabled attribute for the disabled state of the option (an option is enabled if the attribute is absent, or its value is falsy, or it is the string "false"). Because the widget inherits from delite\/StoreMap, the mapping between the attributes of the source items and the attributes used by deliteful\/Select can be redefined using the labelAttr, valueAttr, and disabledAttr properties, or using labelFunc, valueFunc, and disabledFunc properties. See the delite\/StoreMap documentation for more information about the available mapping options. Element Styling Supported themes This widget provides default styling for the following delite theme: bootstrap CSS Classes CSS classes are bound to the structure of the widget declared in its template deliteful\/Select\/Select.html. The following table lists the CSS classes that can be used to style the Select widget. class name\/selector applies to d-select Select widget node d-select-inner The inner native HTML <select> In addition, the following class is used in combination with the classes above: class name\/selector applies to d-select-focus Select widget in focus state Note that level of support for styling the inner native HTML <select> (and particularly its <option> children) is browser-dependent. Enterprise Use Accessibility type status comment Keyboard ok All supported desktop browsers provide keyboard accessibility for the native HTML5 select element. Visual Formatting ok Tested for high constrast and browser zoom (200%), in IE and Firefox. Screen Reader ok Relies on screen reader's ability to work with the native HTML5 select element. Tested on JAWS 15 and iOS 8 VoiceOver. With Chrome 35, it does not announce the selected option (although it correctly announces the option initially selected). No issue with VoiceOver. Globalization deliteful\/Select does not provide any internationalizable bundle. The only strings displayed by the widget are coming from the user data through the source from which the options are retrieved. Right to left orientation is supported by setting the dir attribute to rtl on the widget. Security This class has no specific security concern. Browser Support This class supports all supported browsers.","tags":"","url":"Interface_Designer\/Widgets\/Select.html"},{"title":"deliteful\/SidePane","text":"deliteful\/SidePane deliteful\/SidePane is a sliding pane displayed on the side of the screen. It can be displayed on top of the page (mode=overlay) or can push the content of the page (mode=push or mode=reveal). In push mode, the SidePane comes from out of the screen, like if the SidePane was pushing the content of the page. In reveal mode, the SidePane is already below the content of the page, the page reveals the SidePane during the transition. This widget is hidden by default. Its visibility is controlled by show and hide methods. Push and Reveal mode (left), Overlay mode (right) Table of Contents Element Instantiation Element Configuration Showing\/Hiding the SidePane Element Styling User Interactions Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/SidePane", "requirejs-domready\/domReady!"], function () { }); <html> <d-side-pane mode="overlay"> Place content Here <\/d-side-pane> <div style="width: 100%; height: 100%"> Main Page <\/div> <\/html> Programmatic Instantiation require(["deliteful\/SidePane", "requirejs-domready\/domReady!"], function (SidePane) { var sp = new SidePane({mode: "overlay"}); sp.placeAt(document.body); }); Element Configuration This widget must be a sibling of html's body element. The position attribute can be start or end which means left or right respectively in LTR mode. The resulting left or right position of the pane depends on the globalization configuration. See Enterprise Use for more informations. If mode is set to "push" or "reveal", the width of the SidePane can't be changed in the markup (15em by default). However it can be changed in SidePane_template.less file. See Delite themes. For disabling sliding animated transition, set animate attribute to false. Showing\/Hiding the SidePane The SidePane is not visible by default. Use the show method to open it and the hide method to close it. checkout the sample on JSFiddle Element Styling deliteful\/SidePane has no visual appearance, it does not provide any CSS class for styling. The height of a deliteful\/SidePane is set to "100%" by default. As a consequence, the height of all its ancestors (including <body>) must also be expressed as percentage. Styling Limitations The following CSS layout attributes must NOT be changed. They are explicitly set by the container and are required for a correct behaviour of it: position, height, width (if mode is "push" or "reveal"). User Interactions deliteful\/SidePane can be closed using a swipe gesture. Set swipeClosing to true. Element Events Emits a sidepane-after-show event after the SidePane has been displayed. Enterprise Use Accessibility Relies on browser. Globalization deliteful\/SidePane does not provide any internationalizable bundle. Right to left orientation is supported by setting the dir attribute to rtl on the deliteful\/SidePane element. Globalization Mode position Value Resulting position LTR "start" Left LTR "end" Right RTL "start" Right RTL "end" Left Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class that deliteful\/SidePane is using. Browser Support This widget supports all supported browsers. On Internet Explorer 9, transitions are not animated.","tags":"","url":"Interface_Designer\/Widgets\/SidePane.html"},{"title":"deliteful\/Slider","text":"deliteful\/Slider The deliteful\/Slider widget allows selecting one value or a pair of values, from a range delimited by a minimum and a maximum value. Slider can be oriented vertically or horizontally. The selected value depends on the position of the handle and the step, which specifies the value granularity. The position of the minimum and maximum depends on the text direction, and can be forced using the flip property. Handles can be moved using pointers (mouse, touch) or keys (up, down, home or end). A change event is fired after the user selects a new value, either by releasing a pointer, or by pressing a selection key. Before a change event, input events are fired while the user moves the Slider handle. The Slider Widget supports ARIA attributes aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation. Most of the Slider behavior (default values, out of bound values reconciliations...) is similar to the HTML5.1 input type=range element, but it doesn't strictly conform to the specification, in particular for: the multiple attribute (single\/range Slider is directly determined from the content of the value property) the datalist attribute (see https:\/\/github.com\/ibm-js\/deliteful\/issues\/252) Like the native input type=range element, this widget can be used in a form. Table of Contents Element Instantiation Element Configuration Element Styling Mixins Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <d-slider><\/d-slider> <d-slider value="12,32"><\/d-slider> <\/html> checkout the sample on JSFiddle You can also specify the initial value in an input element: <html> <d-slider> <input value="32"> <\/d-slider> <d-slider> <input value="24,32"> <\/d-slider> <\/html> That way you allow Slider to benefit from the browser capability to track the value when user select back\/forward buttons. Programmatic Instantiation require([ "deliteful\/Slider" ], function (Slider) { var slider = new Slider({value:10, step:5, min:10, max:50}); slider.placeAt(document.body); }); Element Configuration Using value, min, max and step properties min (default=0) and max (default=100) allow to set the minimum and maximum boundaries of the allowed range of values. step (default=1) specifies the value granularity. It causes the slider handle to snap\/jump to the closest possible value. value, min, max and step properties must be valid floating-point numbers. Any other value is defaulted according to the HTML 5.1 specification. value accept two values separated by a comma. Selecting or sliding a range of values When value contains two values separated by a comma, the Slider displays two handles. slideRange (default=true) allow sliding the area between the handles to change both values at the same time. When slideRange=false, pointing the area between the handles cause the closest handle to move at the pointer position (Thus, changing only one value). Slider direction and orientation Default Slider orientation is horizontal. The vertical property (default=false) allow setting the vertical orientation. The Slider direction follows the language direction: with RTL languages the min is placed on the right. You may force the orientation using the flip property (default=false). Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap CSS Classes Style is defined by the CSS classes from the themes of the widget. CSS classes are bound to the structure of the widget declared in its template deliteful\/Slider\/Slider.html class name applies to d-slider the Slider widget node d-slider-container the container node, which represents the full length of slider progress bar. d-slider-progress-bar the progress bar node which represent the range between min and value or the range between both values in the case of a range Slider| |d-slider-handle|slider handle(s)| |d-slider-handle-max|the handle which represent the selected value (or the larger of the two values)| |d-slider-handle-min|the handle which represent the smaller of the two values in the case of a range Slider| There are other classes prefixed by d-slider, but they aren't meant to be overridden by the application. Customizing the colors checkout the sample on JSFiddle Customizing the size TODO + jsfiddle The thick padding around the component helps the user interact with it on a touch screen. For desktop, you might want to have a slimmer padding. You can change it thanks to the LESS variable @d-slider-halo-size (or alternatively directly reduce the d-switch element padding). User Interactions The value of the Slider can be changed by: Using a pointer (touch, click...) moving a handle moving the bar between two handles when slideRange=true and value contains two values separated by a comma pointing anywhere else on the Slider area: moves the handle that is the closest from the pointer position Using the arrow left, arrow right or arrow up, arrow down and home, end keys when the widget has the focus. Mixins No Mixin is currently provided for this widget. Element Events Emits a change event after that the value has been changed since that the slider has the focus, whenever the user releases its pointer or a presses a key from the keyboard. Emits input events when the value changes, whenever the user moves a handler. Enterprise Use Accessibility The Slider supports WAI-ARIA role slider and ARIA attributes aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation on handle nodes. type status comment Keyboard ok when handle has focus: arrow left, arrow right or arrow up, arrow down and home, end keys Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Browser Support This widget supports all supported browsers without any degraded behavior. See also Samples deliteful\/samples\/Slider.html","tags":"","url":"Interface_Designer\/Widgets\/Slider.html"},{"title":"deliteful\/StarRating","text":"#deliteful\/StarRating The StarRating widget displays a rating, usually with stars, that can be edited by touching or clicking the stars. The StarRating widget is a form field, which means that when included in an HTML form, its value will be submitted with those of the other form fields, under the name defined by its nameattribute. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Mixins Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <!-- Editable StarRating with: --> <!-- * a minimum value of 0 --> <!-- * a maximum value of 7 --> <!-- * an initial value of 3.5 --> <!-- * values set by increments of .5 --> <d-star-rating name="rating" max="7" value="3.5" editHalfValues="true"><\/d-star-rating> Programmatic Instantiation require(["deliteful\/StarRating", "requirejs-domready\/domReady!"], function (StarRating) { var starRating = new StarRating({max: 7, value: 3.5, editHalfValues: true}); starRating.placeAt(document.body); }); Element Configuration Using StarRating in a Form The StarRating widget is a form field, which means that when included in an HTML form, its value will be submitted with those of the other form fields, under the name defined by its nameattribute. Here is an example of a StarRating widget included in a form, under the name rating: <form action="..."> <span id="lb1">Rating:<\/span><d-star-rating id="input1" name="rating" value="4" aria-labelledby="lb1"><\/d-star-rating> <input type="submit"> <\/form> Note that is the StarRating is disabled, its value will not be submited. Properties The following properties can be set on a StarRating instance: max: the maximum rating, that is also the number of stars to show. value: the current value of the Rating. readOnly: if false, the widget is editable and allows editing the value of the Rating by touching \/ clicking the stars name: mandatory if using the star rating widget in a form, in order to have its value submited disabled: if true, the widget is disabled (its value will not be submited if it is included in a form) editHalfValues: if the Rating is not read only, define if the user is allowed to set half values (0.5, 1.5, ...) allowZero: if false, the user is not allowed to set the value to 0 (default is true) Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes The star characters displayed for an empty star and a full star are font characters. Half stars are created by displaying the first half of a full star character followed by the second half of an empty star character. The stars displayed can be fully customized by using the following CSS selectors: .d-star-rating-star-icon { font-size: 150%; } .d-star-rating-empty::before { content: "\\2605"; \/* The font character to use to display an empty star *\/ color: #CCC; \/* The color of an empty star *\/ } .d-star-rating-full::before { content: "\\2605"; \/* The font character to use to display a full star *\/ color: yellow; \/* The color of a full star *\/ } It is also possible to use an image stripes to render the stars, using a few more CSS selectors, as demonstrated in the following sample: checkout the sample on JSFiddle User Interactions If the StarRating widget properties readOnly and \/ or disabled are not set to true, the value of the widget can be edited by: Touching the stars on a touch screen device; Clicking the stars when using a mouse. When the stars are hovered by the mouse pointer, the widget highlight the value that will be set if the user click the mouse at the current position, as in the following picture: Using the arrow up, arrow down, arrow left and arrow right keys when the widget has the keyboard focus. Mixins No mixin currently available for this widget. Element Events This widget emits a change event when its value is updated following a user action on the widget node. No change event is emitted if the value is updated programmatically. Enterprise Use Accessibility The StarRating widget has an ARIA role of slider. It is keyboard navigable: unless it is read only, its value can be edited using the arrow keys (see User Interactions). Limitation when using Apple VoiceOver When a deliteful\/StarRating widget is selected in Safari while VoiceOver is on: The rating value is announced as a percentage instead as a number of stars ; VoiceOver announce that the widget value can be adjusted by swiping up or down, but this is not the case. To edit the widget value, you must double tap the widget and keep pressing. When VoiceOver announce that the widget is editable, you can adjust the value by moving left and right. Globalization deliteful\/StarRating provide an internationalizable bundle that contains only one message, with the key aria-valuetext. This message supports the keyword ${value}, that is replaced by the current value of the widget to set its aria-valuetext property every time that the value is updated. Right to left orientation is supported. Security This widget has no specific security concern. Refer to delite\/FormValueWidget documentation for general security advice on this base class. Browser Support This widget supports all supported browsers without any degraded behavior.","tags":"","url":"Interface_Designer\/Widgets\/StarRating.html"},{"title":"styling","text":"Styling deliteful custom element widgets Deliteful widgets come as one SomeWidget.js file and a folder SomeWidget\/. The latter holds one template and one CSS file for each of the provided themes: bootstrap, holodark (android) and ios. The styles for each theme are first written in LESS then compiled to CSS browsers understand. As for the template, it's written using the Handlebars syntax then converted to HTML on the fly by the browser and inserted into the page. For example let's look at the Slider widget. Like every widget, it has a Slider.js file and a Slider\/ folder - Slider.js, holds the logic of the widget - Slider\/ |_ Slider.html, is the template. It's compiled into HTML and inserted into the page. |_ themes\/ |_ bootstrap\/ |_ Slider.css: is the CSS stylesheet for slider under the bootstrap theme. You don't have to link it youself: you'll just need to specify which theme you're using and it's automatically fetched when you require the widget. |_ Slider.less: is the LESS file that compiles to Slider.css, when typing `grunt less` in your console. |_ holodark\/ |_ ios\/ - samples\/Slider.html Open samples\/Slider.html in your browser if you want to see what it looks like. By default, the bootstrap theme is loaded. If you want to customize the look of Slider under the bootstrap theme, there are two ways you can do this. Edit Slider\/themes\/bootstrap\/Slider.css: this won't affect the other themes. Also this isn't the recommended way as you can lose your changes with a single unfortunate grunt less. However, it is simpler as it doesn't require a build step. Edit Slider\/themes\/bootstrap\/Slider.less: this won't affect the other themes. If you're familiar with CSS preprocessors, we recommend this approach. Once you've made your changes, type grunt less in your console to regenerate the matching Slider.css. You'll notice most classes inside Slider.css start with d-slider. That's a convention. Leveraging this you can also choose to simply override theses classes with your own styles either by: creating a stylesheet and link it in your page. <link rel="stylesheet" href="path\/to\/my-styles.css" type="text\/css" \/> opening a <style> tag directly in your page. <style> .d-slider { ... } <\/style> With both ways, your styles will be prioritized by the browser over the CSS files inside Slider\/. Note that this will affect the look of Slider under all themes.","tags":"","url":"Interface_Designer\/Widgets\/styling.html"},{"title":"deliteful\/SwapView","text":"deliteful\/SwapView deliteful\/SwapView is a container that extends deliteful\/ViewStack and adds a swipe interaction to show the next\/previous child. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Enterprise Use Element Instantiation A SwapView is created like a ViewStack. See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/SwapView", "requirejs-domready\/domReady!"], function () { }); <html> <d-swap-view style="width:100%; height:200px"> <div style="background-color: darkblue">Child 1 (Default visible child)<\/div> <div style="background-color: white">Child 2<\/div> <div style="background-color: crimson">Child 3<\/div> <\/d-swap-view> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require(["deliteful\/SwapView", "requirejs-domready\/domReady!"], function (SwapView) { var sv = new SwapView({style: "width:100%; height: 200px"}); var child1 = document.createElement("div"); var child2 = document.createElement("div"); var child3 = document.createElement("div"); sv.addChild(child1); sv.addChild(child2); sv.addChild(child3); sv.placeAt(document.body); }); Element Configuration See deliteful\/ViewStack documentation for configuration of the ViewStack base class. Properties The swapThreshold property defines the amount of swiping necessary to change the visible child. It is a value between 0 and 1 and corresponds to a fraction of the SwapView width. By default, swapThreshold is 0.25, which means that you must swipe by more than 1\/4 of the size of the SwapView to change the visible child. Element Styling deliteful\/SwapView has no visual appearance, it does not provide any CSS class for styling. See deliteful\/ViewStack documentation for styling of the ViewStack base class. User Interactions During a swipe interaction, the next\/previous child is partially shown next to the current child and both children slide following the finger\/mouse position. If you swipe by more than the value of the swapThreshold property, the next\/previous child is shown with a slide transition. If you swipe less than the swapThreshold, the current child slides back to its initial position. Page Up\/Down keyboard keys to go the next\/previous child. Enterprise Use Accessibility ViewStack provides keyboard accessibility support: pressing the Page Up key shows the next child, pressing Page Down shows the previous child. Globalization deliteful\/SwapView does not provide any internationalizable bundle. Right to left orientation is supported by setting the dir attribute to rtl on the deliteful\/SwapView element. It affects the swipe interaction. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class that deliteful\/SwapView is using. Browser Support This widget supports all supported browsers. On Internet Explorer 9, transitions are not animated.","tags":"","url":"Interface_Designer\/Widgets\/SwapView.html"},{"title":"deliteful\/Switch","text":"deliteful\/Switch The deliteful\/Switch widget represents a toggle switch with a sliding knob. Its state can be changed either by a direct tap\/click or by sliding the knob to toggle the switch. Example of Switch widgets with and without labels Table of Contents Element Instantiation Element Configuration Element Styling Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <body> <d-switch checked="true"><\/d-switch> <d-switch checkedLabel="ON" uncheckedLabel="OFF" name="bluetooth"><\/d-switch> <\/body> <\/html> Programmatic Instantiation require([ "deliteful\/Switch" ], function (Switch) { var sw = new Switch({checked:true}); sw.placeAt(document.body); sw = new Switch({checkedLabel: "ON", uncheckedLabel: "OFF", name: "bluetooth"}); sw.placeAt(document.body); }); Element Configuration The state of a Switch widget (checked or unchecked) is defined by the checked property, inherited from the deliteful\/Toggle class. The Switch widget can display optional labels corresponding to the checked and unchecked states via the checkedLabel and uncheckedLabel properties. In addition, the Switch widget supports the following form-related properties of an HTML5 input element of type "checkbox": name, value, disabled and alt, inherited from delite\/FormWidget. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes CSS classes are bound to the structure of the widget declared in its template deliteful\/Switch\/Switch.html. The following table lists all the CSS classes that can be used to style the widget. class name\/selector applies to d-switch Switch widget node d-switch-width Switch widget node d-switch-rounded Switch widget and knob nodes d-switch-leading Switch leading node (aka the node displayed in checked state). d-switch-trailing Switch trailing node (aka the node displayed in unchecked state). In addition, the following classes are used in combination with the classes above: class name\/selector applies to d-checked Switch widget node in checked state d-focused Switch widget node in focus state d-rtl Switch node in right-to-left configuration Customizing the appearance of the Switch The rendering style used to display the checked and unchecked sides of a switch are defined by the d-switch-leading and d-switch-trailing css classes. The rounded border used to display both the switch main shape and the knob shape is defined by the d-switch-rounded class. The width of a switch is defined by the d-switch-width class and is equal to 70px by default. Note that due to the way the switch was designed, you can't express its width in '%'. Any other unit will work. A Switch widget does not define any specific height by default but strech according to the current line-height. The following example shows how to override these classes to change the appearance of the switch: checkout the sample on JSFiddle Element Events The widget deliteful\/Switch emits a change event when its checked state is changed following a user interaction. event name dispatched cancelable bubbles properties change on state change No Yes standard HTML5 Event properties Enterprise Use Accessibility type status comment Keyboard yes Value is toggled when the space bar is pressed. Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader yes Supports ARIA role checkbox. Tested with JAWS and VoiceOver Globalization deliteful\/Switch does not provide any internationalizable bundle. The only strings displayed by the widget are coming from the checkedLabel and uncheckedLabel properties that are empty by default. Browser Support This widget supports all supported browsers without any degraded behavior. Security This class has no specific security concern. See also Samples deliteful\/samples\/Buttons.html","tags":"","url":"Interface_Designer\/Widgets\/Switch.html"},{"title":"deliteful\/Toaster","text":"deliteful\/Toaster deliteful\/Toaster is a widget that allows an application to notify the user in a non obtrusive way (it will not steal the focus), through a quick little message. A toaster is an unobtrusive mechanism for displaying messages. Like toasts, messages "pop up" in the window corner, temporarily overlaying any content there. The message stays up for a certain duration, or until the user dismisses it explicitly (with a swipe gesture or by clicking on the dismiss button). Toasters are preferable to alert boxes. Alerts must always be modal, meaning all action on the page stops until the user clicks OK or Cancel. Toasters are non-modal, so the user can continue working and finish their thought before responding. Note that the Toaster widget depends on the ToasterMessage widget. The behavior in a nutshell The Toaster widget serves as a host for ToasterMessage instances, each with its own type, duration, etc. When created, each instance goes through a lifecycle of 4 states: inserted: the instance is inserted in the DOM but still invisible, shown: the instance is made visible, with a fade-in animation, hidden: the instance is made invisible, either because it expired or it was dismissed, removed: the instance is removed from the DOM; You can hook up animations on each of theses 4 states. (see animations). Note that a message that is dismissed or that has expired is not immediately removed from DOM. First, it's only hidden, and stay hidden until all the other expirable (and only expirable) messages reach the hidden state as well (either by being manually dismissed by the user or by expiring). This prevents the message that haven't expired from moving around as some of them disappear, but at the same time, it avoids having awkward permanent holes in between persistent messages as it ends up stacking them together. Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Element Events Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle works. Declarative Instantiation var mytoaster; require([ "deliteful\/Toaster", "requirejs-domready\/domReady!" ], function(Toaster){ \/\/ posting a message mytoaster.postMessage("Form submitted"); }); <d-toaster id="mytoaster"><d-toaster> Programmatic Instantiation var mytoaster; require([ "deliteful\/Toaster", "requirejs-domready\/domReady!" ], function(Toaster){ mytoaster = new Toaster(); mytoaster.placeAt("container"); \/\/ posting a message mytoaster.postMessage("Form submitted"); }); <div id="container"><\/div> The Toaster.postMessage() also supports messages as widgets var mytoaster; require([ "deliteful\/ToasterMessage", "deliteful\/Toaster", "requirejs-domready\/domReady!" ], function(ToasterMessage, Toaster){ mytoaster = new Toaster(); mytoaster.placeAt("container"); \/\/ defining the message as a widget var myMessage = new ToasterMessage("Form submitted"); \/\/ posting mytoaster.postMessage(myMessage); }); checkout the sample on JSFiddle Element Configuration Placement of the toaster The Toaster widget has a placement property which will determine where the messages will appear on the screen (top-left corner, etc.). It is a string representing a regular CSS class that is applied to the widget on creation. If you choose not to set this property, it will default to "d-toaster-placement-default". Note that the widget comes with 7 placement options (i.e. 7 CSS classes that work right out of the box). It goes without saying that you can set this property to your own placement class. top-left d-toaster-placement-tl top-center d-toaster-placement-tc top-right d-toaster-placement-tr default d-toaster-placement-default bottom-left d-toaster-placement-bl bottom-center d-toaster-placement-bc bottom-right d-toaster-placement-br Message types The type property of ToasterMessage can be set to either "info", "error", "warning" or "success". In case no type or an incorrect type is provided, "info" type is used by default. var m = new ToasterMessage({message: "content of my message", type: "success"}); mytoaster.postMessage(m); \/\/ the shortcut mytoaster.postMessage("content of my message", {type: "success"}); Each type is associated with a CSS class named d-toaster-type-{{type}} which defines its styling. Duration of a message By default a message lasts for 2000ms after it is "posted" in the toaster. The property duration can be set to any positive integer. However, if set to -1 the message will remain visible until the user explicitly dismisses it (by clicking the dismiss button or swiping it out of the screen). NB: if duration is set to -1 and dismissible to false, you'll obtain a persistent message which your user has no way to dismiss - probably not ideal from a user experience perspective. \/\/ a message that fades after 6s var m1 = new ToasterMessage({message: "This will auto-destruct in 6s", duration: 6000}); mytoaster.postMessage(m1); \/\/ a message that waits for the user to dismiss it manually var m2 = new ToasterMessage({message: "This will always stay there", duration: -1}); mytoaster.postMessage(m2); \/\/ the shortcut mytoaster.postMessage("This will auto-destruct in 6s", {duration: 6000}); mytoaster.postMessage("This will always stay there", {duration: -1}); Making a message dismissible If dismissible is set to "on", the user can dismiss the message (either with a swipe or the dismiss button). If set to "off", the user can only wait for the message to disappear on its own. When dismissible is set to "auto", the behavior depends on whether the message expires: a message that expires (duration >= 0) will not be dismissible, a message that does not expire (duration === -1) will be dismissible. mytoaster.postMessage("content of my message", {dismissible: "off"}); NB: if dismissible is set to "off" on a persistent message, your user will have no way to dismiss it and it will stay on the screen forever which probably is not ideal from a user experience perspective. Checking if a message is dismissible This methods returns a boolean that indicates whether a message is dismissible. If returns true (resp. false) when dismissible is set to "on" (resp. "off"). If controls the visibility of the dismiss button and enables\/disables the swipe-to-dismiss. When dismissible is set to "auto", the output of the method also depends on the duration property: a message that is expirable (duration >= 0) will have no dismiss button or swipe-to-dismiss (isDismissible() === false) a message that does not expire (duration === -1) will have a dismiss button and swipe-to-dismiss (isDismissible() === true) dismissible duration isDismissible() on * true off * false auto >= 0 false auto -1 true animations For each of the 4 states of a ToasterMessage instance, an animation class is added mytoaster = new Toaster({ animationInitialClass: "d-toaster-initial", \/\/ added on insertion animationEnterClass: "d-toaster-fadein", \/\/ added on show animationQuitClass: "d-toaster-fadeout", \/\/ added on hide animationEndClass: "d-toaster-fadefinish" \/\/ added on removal }); A fade-in\/fade-out set of animation classes comes by default but you can define and use your own. You need to make sure that animationEnterClass and animationQuitClass classes emit either a transitionendor animationend sort of event, as moving from one state to the other requires animations ending to be properly detected. Message templating The ToasterMessage widget comes with a default template <template class="{{ messageTypeClass }}" data-touch-action="none"> <button type="button" class="d-toaster-dismiss" attach-point="_dismissButton"><\/button> <span class="d-toaster-icon"><\/span> <span class="d-toaster-message-content"> {{ message }} <\/span> <\/template> Currently, there is no way to set up your own template as the template file path is hard coded in the widget. If you want to set up your own template, one way to do it could be to create your own widget inheriting from ToasterMessage. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS classes Placement of the Toaster all placement classes d-toaster-placement-* are documented in this section. .d-toaster-placement-default .d-toaster-inner { left: 20%; bottom: 10%; width: 60%; } Message types there is one class for each message type allowed. .d-toaster-type-error { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; } .d-toaster-type-info {...} .d-toaster-type-warning {...} .d-toaster-type-success {...} The dismiss button this class allows to set its position and any property a button can take. Use the content property to change the character used to represent the button. .d-toaster-dismiss {...} .d-toaster-dismiss::before { content: "\u00c3\u0097"; } Entering\/Leaving animations Regarding the animations used by default when a message enters\/leavers the screen. Though you can easily override theses classes, it is probably better to define your own and set your instance of Toaster to use them see [configuration section)(#animations). .d-toaster-initial { \/\/ sets the initial state opacity: 0; transition-property: opacity; transition-timing-function: linear; } .d-toaster-fadein { opacity: 1; transition-duration: 700ms } .d-toaster-fadeout { opacity: 0; transition-duration: 1000ms } Regarding the swipe-to-dismiss animation, it is controlled by: .d-toaster-swipeout { animation-name: d-toaster-swipeout; \/* you can reference here your own @keyframes *\/ animation-timing-function: linear; animation-duration: 700ms; animation-fill-mode: both; \/* omitting their -webkit- prefixed equivalent *\/ } User interaction Dismissal of a message A user can dismiss a message either by clicking on the dismiss button, or swiping the message off the screen. You can control this through the dismissible property. You can call ToasterMessage.dismiss() anytime to dismiss a message - regardless of the fact that the dismissible property was set to "on" or "off". The message will enter the hidden state and disappear from the screen. This is the very same method called after a swipe is detected or the dismiss button is clicked. You can also provide an animation class to accompany the dismissal, such as a slide-out animation. var m = new ToasterMessage({message: "content of my message", dismissible: "off"}); ... m.dismiss("slide-out"); Element Events event name dispatched cancelable bubbles properties messageInserted When a new message is inserted in the toaster Yes Yes message: the instance of ToasterMessage that was inserted messageExpired When a message expires Yes Yes message: the instance of ToasterMessage that expired messageRemoved When a message is removed Yes Yes message: the instance of ToasterMessage that was removed Enterprise Use Accessibility type status comment Keyboard none The widget does not provide with any kind of interaction through the keyboard, besides Visual Formatting partial The message type information, which is conveyed only through color, disappears in high contrast mode. A few options are to be considered to solve this: the developer could use icons or explicitly indicate the type in the content of the message. Screen Reader ok Tested on JAWS 15 and iOS 6 VoiceOver. Globalization Nothing in particular here. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class. Browser Support This widget supports all supported browsers without any degraded behavior.","tags":"","url":"Interface_Designer\/Widgets\/Toaster.html"},{"title":"deliteful\/ToggleButton","text":"deliteful\/ToggleButton The deliteful\/ToggleButton widget represents a form-aware 2-state (pressed or unpressed) button with optional icons and labels for each state. It is a subclass of the deliteful\/Button class. Example Table of Contents Element Instantiation Element Configuration Element Styling Element Events Enterprise Use See also Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation <html> <button is="d-toggle-button">Wifi<\/button> <button is="d-toggle-button" checked>Wifi<\/button> <button is="d-toggle-button" checkedLabel="Enabled">Enable<\/button> <button is="d-toggle-button" checkedLabel="Bookmarked" iconClass="icon-star-empty" checkedIconClass="icon-star-full">Bookmark<\/button> <\/html> checkout the sample on JSFiddle Programmatic Instantiation require([ "deliteful\/ToggleButton" ], function (ToggleButton) { var tb = new ToggleButton({ checked: true, checkedLabel: "On", checkedIconClass: "iconButtonPressed", label: "Off" }); tb.placeAt(document.body); tb = new ToggleButton({checked: true, label: "WiFi"}); tb.placeAt(document.body); }); Element Configuration The state of a ToggleButton widget (checked or unchecked) is defined by the checked property, inherited from the deliteful\/Toggle class. By default, the label of the button is specified in markup as a child of the button element, or via the label property, inherited from the deliteful\/Button class. In addition to this label, an optional label can be defined for the checked state via the checkedLabel property. An optional icon can be specified via the iconClass property which takes a css class, inherited from the deliteful\/Button class. In addition to this icon, an optional icon can be defined for the checked state via the checkedIconClass property. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap Widget CSS Classes The following CSS classes are automatically set by the widget and can be reused for overriding the default style. They are bound to the structure of the widget declared in its template deliteful\/ToggleButton\/ToggleButton.html. CSS Class Description d-toggle-button The base class for a toggle button d-checked Checkbox and checkmark nodes in checked state Styling CSS classes The following CSS classes provided by the widget can be set explicitly on the element yourself. CSS Class Description d-button-success Indicates a successful or positive action d-button-info Indicates a neutral informative change or action d-button-warning Indicates a warning that might need attention d-button-danger Indicates a dangerous or potentially negative action Element Events The widget deliteful\/ToggleButton provides a change event when its state is changed following a user interaction. event name dispatched cancelable bubbles properties change on state change No Yes standard HTML5 Event properties Enterprise Use Accessibility type status comment Keyboard yes checked property is toggled when the space bar or the enter key are pressed. Visual Formatting ok Support high contrast on Firefox and Internet Explorer desktop browsers. Screen Reader yes Tested with JAWS and VoiceOver Browser Support This widget supports all supported browsers without any degraded behavior. See also Samples deliteful\/samples\/Buttons.html","tags":"","url":"Interface_Designer\/Widgets\/ToggleButton.html"},{"title":"tutorial","text":"The deliteful tutorial guides you, step by step, to build a photo feed viewer based on Flickr services. Part 1 - Getting Started with Deliteful Part 2 - A Quick Look at Deliteful Components Part 3 - Introducing the Photo Feed Application Part 4 - The Photo List View Part 5 - Enhancing the List View Part 6 - Adding a Details View Part 7 - The Settings View Part 8 - Building the Application for Production","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/index.html"},{"title":"Deliteful Tutorial Part 1","text":"#Deliteful Tutorial (Part 1) - Getting Started with Deliteful Welcome to deliteful, a set of multi channel, enterprise class Web Components to be used in Web & Mobile Hybrid applications. This tutorial is part of a series showing how to create a simple web application using the deliteful components. In this first part, you will learn how to get started with deliteful and quickly create a basic web application that can run both on mobile and desktop browsers. Note: This tutorial explains all the steps that you can follow to create a simple application from scratch. If you want to follow that path, just skip this and go to the next section. However, if you don't want to follow all the steps explained in this tutorial, you can just get the tutorial application from the ibm-js\/deliteful-tutorial github project. You can clone it to your machine and look at the code for each part of the tutorial. The different parts can be fetched using branches (part1, etc). To get the code for this first part, run this in a shell window: $ git clone https:\/\/github.com\/ibm-js\/deliteful-tutorial $ cd deliteful-tutorial $ git checkout part1 ##Installing Tools Deliteful leverages some industry standard tools that you need to install. ###Node.js All tools are JavaScript-based and run on top of Node.js, that you can install from nodejs.org. ###Yeoman Yeoman is the tool that we will use to generate a basic skeleton for our application. To install yeoman, run this in a shell window: $ npm install -g yo $ npm install -g generator-deliteful-app ##Creating the Application Skeleton Create a directory of your choice, then run yeoman in it: $ mkdir gettingstarted $ cd gettingstarted $ yo deliteful-app Yeoman will ask you the name of your application, type deliteful-tutorial since this is what we will use throughout this tutorial. [?] What is the name of your deliteful application package? deliteful-tutorial Answer n to the next question: [?] Do you want to use build version of deliteful package (instead of source version)? No You could answer y and use the build version from the start, but for this tutorial we will use the source version for now, and change to the build version later (see Part 8 - Building the Application). ##Deploying the Application on a Web Server You need to deploy the application on a web server to be able to view it correctly in a browser. If you already have a web server setup and you are familiar with deploying applications on it, you can skip this step. Otherwise, a very easy way to deploy the application is to use the local-web-server npm package: $ npm install -g local-web-server $ ws Now point your web browser to http:\/\/localhost:8000. You should see the application skeleton created by the Yeoman generator: Congratulations! You just created and deployed your first deliteful application. ##Running on a Mobile Device Deliteful components are designed to run on mobile as well as desktop. You can run the application on a mobile device, for this you just have to add some directives at the top of index.html: <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"\/> <meta name="apple-mobile-web-app-capable" content="yes"\/> ... <\/head> ##Run the Demo Click here to see the live demo: Deliteful Tutorial - Part 1 ##Next Step Before we start building our own app, let's now have a quick look at some deliteful components that make up this basic application. Next Step - A Quick Look at Deliteful Components","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part1GettingStarted.html"},{"title":"Deliteful Tutorial Part 2","text":"#Deliteful Tutorial (Part 2) - A Quick Look at Deliteful Components In the first step of this tutorial we have setup the tools and created a first deliteful application. Let's now go through the application source to get familiar with some deliteful components. HTML Markup Let's first have a look at the HTML markup of our application. <!-- left menu side pane --> <d-side-pane mode="push" position="start" id="leftPane"> ... <\/d-side-pane> <!-- page content --> <d-linear-layout class="page width100 height100"> ... <\/d-linear-layout> The body contains two toplevel elements: <d-side-pane> and <d-linear-layout>. These are custom HTML elements defined by deliteful (all deliteful components have a d- prefix). Let's start with the second element. The <d-linear-layout> component is a container that stacks other elements vertically or horizontally. It is used here to build the main page of the application. <!-- page content --> <d-linear-layout class="page width100 height100"> <!-- page content header --> <d-linear-layout vertical="false" class="pageHeader"> <div><button is="d-button" iconClass="icon" class="toggle" onclick="leftPane.toggle()"><\/button><\/div> <div class="fill titleStyle">deliteful app<\/div> <\/d-linear-layout> <!-- stacked content --> <d-view-stack id="vs" class="fill"> <div id="first"> <!-- fill the first view with content --> <p>1st view<\/p> <d-star-rating value="0.5"><\/d-star-rating> <\/div> <div id="second"> <!-- fill the second view with content --> <p>2nd view<\/p> <d-progress-bar value=30 max="100" essage="Uploading..." style="width: 50%"><\/d-progress-bar> <\/div> <div id="third"> <!-- fill the third view with content --> <span>3rd view<\/span> <\/div> <\/d-view-stack> <\/d-linear-layout> Note the width100 and height100 CSS classes on the toplevel d-linear-layout, they indicate that it should fill the whole width and height of the page. These classes are defined in the defaultapp.css style sheet that is included by the application generator. The toplevel d-linear-layout element contains two children: another nested d-linear-layout element, which will be the header of the page, and a d-view-stack element. The nested d-linear-layout element has a vertical="false" attribute, which means that it will stack its children horizontally. The children of the header are a button (nested inside a div) and another div that displays the title text. The button has an onclick event listener to show\/hide the side pane (see below). The second child of the toplevel d-linear-layout element is a d-view-stack element. This is another deliteful container that shows one of its children at time. In our default application it contains three divs, one containing a deliteful d-star-rating element (visible on the first screen shot above), a second one containing a deliteful d-progress-bar element, and a third one containing just standard HTML elements. Let's go back to the first toplevel element of our application, the d-side-pane component. It is used to display a sliding pane on the side of a main application view. It can be seen in action by clicking the top-left icon: The d-side-pane contains elements with a similar structure as the main view, with a vertical d-linear-layout containing a header (a nested d-linear-layout), but below the header we now have a deliteful d-list element. The d-list is an important deliteful component that displays a list of items. <d-side-pane mode="push" position="start" id="leftPane"> <d-linear-layout class="height100"> <!-- left menu header --> <d-linear-layout vertical="false" class="pageHeader"> <div class="fill titleStyle">Menu<\/div> <\/d-linear-layout> <!-- left menu content --> <d-list id="list" on-selection-change="vs.show(event.newValue.id)" selectionMode="radio"> {"label": "First View", "id": "first" }, {"label": "Second View", "id": "second" }, {"label": "Third View", "id": "third" } <\/d-list> <\/d-linear-layout> <\/d-side-pane> Note the on-selection-change="vs.show(event.newValue.id)" attribute on the d-list. It adds a event listener so that when an element is selected in the list, one of the children of the d-view-stack in the main view is shown: CSS As usual when creating web applications, the CSS part is also very important, so you can have a look at the css\/app.css file which contains the CSS rules that define the layout and style of the page elements. Note in particular that all deliteful components have a CSS class with the same name as their HTML tag, for example: .d-side-pane { border-right: 1px solid #357ebd; } JavaScript The default application contains some JavaScript code that you can often reuse to get started. \/* index.html *\/ require.config({ baseUrl: "bower_components", paths: { "js": "..\/js" } }); \/\/ Start the application. require(["js\/app"]); The require.config calls tells the browsers where to find the various delite, deliteful and other libraries, as well as the app in js\/app. The require(["js\/app"]) call loads the js\/app AMD module which will be the application entry point. \/* js\/app.js *\/ define([ "delite\/theme!delite\/themes\/{%raw%}{{theme}}{%endraw%}\/global.css", "deliteful\/ViewStack", "deliteful\/SidePane", "deliteful\/LinearLayout", "deliteful\/Button", "deliteful\/StarRating", "deliteful\/ProgressBar", "deliteful\/list\/List", "requirejs-domready\/domReady!" ], function () { document.body.style.display = ""; list.selectedItem = list.source.get("first"); \/* app code will go here *\/ }); The define call loads the AMD modules containing the components used in the application. The body of the application is initially hidden by a display: none style. This is a well-known technique to make sure that the DOM will not be displayed before it is fully initialized by the delite\/deliteful code. The document.body.style.display = ""; line makes the body visible once everything is correctly setup. ##Next Step Now that you have a basic understanding of how to create a simple deliteful application, let's move to the next step where we will describe the application that we will create. Previous Step - Getting Started with Deliteful Next Step - Introducing the Photo Feed Application","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part2QuickLook.html"},{"title":"Deliteful Tutorial Part 3","text":"#Deliteful Tutorial (Part 3) - Introducing the Photo Feed Application In the previous part of this tutorial we had a quick look at some deliteful components. Let us now introduce the Flickr photo feed viewer application that we will create in the following steps of this tutorial. These sketches show the design that we want to obtain and the workflow between the views: The main view (center) shows a list of photos with a thumbnail and some summarized information. The header has two buttons, one to show a settings pane and another one to refresh the list. The details view (right) appears when the user clicks a photo in the list. It shows a larger version of the photo and the full description. The settings pane (left) lets the user enter his choices about the photo tags and the language used to display the date. ##Next Step In the next step we will create the first view of the application, that is, the list view. Previous Step - A Quick Look at Deliteful Components Next Step - The Photo List View","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part3PhotoFeedApp.html"},{"title":"Deliteful Tutorial Part 4","text":"#Deliteful Tutorial (Part 4) - The Photo List View We will now begin to create our Flickr photo feed viewer application. It is time to open your favorite editor or IDE and load the index.html file of the application in it. If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part4 branch now: $ git checkout part4 ##HTML and CSS The layout of the default application that we generated using Yeoman is roughly similar to what we want: a header on top, and contents that fit the remaining page space below. So we will keep the existing structure to make our list view, that is, a (vertical) d-linear-layout and another nested, horizontal d-linear-layout for the header. Edit the contents of the body element as follows : <!-- left menu side pane --> <d-side-pane mode="push" position="start" id="leftPane"> <\/d-side-pane> <!-- page content --> <d-linear-layout class="width100 height100" id="listView"> <!-- view content header --> <d-linear-layout vertical="false" class="pageHeader"> <div> <button is="d-button" onclick="leftPane.toggle()">Settings<\/button> <\/div> <div class="fill titleStyle">Flickr Photo Feed<\/div> <div> <button is="d-button">Refresh<\/button> <\/div> <\/d-linear-layout> <!-- view content will go here --> <\/d-linear-layout> We have removed the contents of the left pane (we will fill it again later when we implement the Settings view), changed some labels, set an id attribute on the view and added a second button after the title (the nested d-linear-layout will automatically stack it on the right because the middle div has a fill class). We also need to change the CSS, so open css\/app.css in your editor. To keep things simple, remove all the existing content and add these rules to define the look of our new header: .pageHeader { background-color: #428bca; color: white; height: 48px; border-bottom: 2px solid #357ebd; padding: 0.3em; } .titleStyle { text-align: center; line-height: 40px; font-weight: bold; font-size: 16px; } .d-button { border-radius: 0; } You can also remove Font-Awesome dependency from the bower.json as we won't use it in this tutorial. If you open index.html in your browser now, you should get something like this: A difference with the default application, though, is that in our case, we want a second view (the details view) to completely replace the list view (including the header), whereas in the default application only the contents is replaced and the header stays. To achieve that, we will wrap our toplevel d-linear-layout inside a d-view-stack: <!-- page content --> <d-view-stack class="width100 height100" id="vs"> <d-linear-layout id="listView"> ... <\/d-linear-layout> <\/d-view-stack> (Note that we moved the class="width100 height100" to the toplevel d-view-stack) Finally, we want to display a list of photos, so let's add a d-list component as the contents of our view. For this, replace the <!-- view content will go here --> placeholder by a d-list. <!-- scrollable list --> <div class="fill"> <d-list class="width100 height100" id="photolist"> <\/d-list> <\/div> Note our List widget has a photolist id, this will allow us to reference the widget in our JavaScript code later. And also add this in css\/app.css to ensure the list is correctly sized (see the LinearLayout doc for more details on why this is needed) #photolist { position: absolute } ##Getting the Photo List from Flickr It is now time to write some JavaScript code. Open js\/app.js and let's remove things that we don't need: the "deliteful\/StarRating" and "deliteful\/ProgressBar" modules and the last instruction: define([ "delite\/theme!delite\/themes\/{%raw%}{{theme}}{%endraw%}\/global.css", "deliteful\/ViewStack", "deliteful\/SidePane", "deliteful\/LinearLayout", "deliteful\/Button", "deliteful\/list\/List", "requirejs-domready\/domReady!" ], function () { document.body.style.display = ""; \/* app code will go here *\/ }); To get the photos, we will use the Flickr API to retrieve photos feeds based on tags. We will request the photos in json format and use the JSONP communication technique. (JSONP is not very commonly used in real world applications, but it has the advantage of not requiring to setup any server-side code, and it is good enough to simulate a server request in our example app). Here is the code that does the JSONP request, use it to replace the \/* app code will go here *\/ comment in js\/app.js: var script; \/\/ Makes a request to the Flickr API to get recent photos with the specified tag. \/\/ When the request completes, the "photosReceived" function will be called with json objects \/\/ describing each photo. function getPhotos(tags) { requestDone(); \/\/ abort current request if any var url = (window.location.protocol || "http:") + "\/\/api.flickr.com\/services\/feeds\/photos_public.gne?format=json&jsoncallback=photosReceived&tags=" + tags + "&tagmode=all"; script = document.createElement("script"); script.type = 'text\/javascript'; script.src = url; script.async = true; script.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(script); } \/\/ Must be called to cleanup the current JSONP request (i.e. remove the "script" element). function requestDone() { if (script && script.parentNode) { script.parentNode.removeChild(script); script = null; } } We won't go into the details of the code, but in short the getPhotos function sends a request to the Flickr server. The URL contains the photo tags that we are interested in, and the name of a callback function to call when the request completes. The reply sent by Flickr will be a JSON string containing a call to that function (photosReceived in our case), with an array of JavaScript objects as parameter, each object describing a photo: the URL of a thumbnail image, the photo title, etc. ##Displaying the Photo List OK, that was the hard part! We would like to see something on the screen now, the good news is that it's really easy. We have asked for a photoReceived global function to be called, so let's create it: photosReceived = function (json) { \/\/ cleanup request requestDone(); \/\/ show the photos in the list by simply setting the list's source photolist.source = new Memory({data: json.items}); }; We must first call requestDone() (that's part of our quick JSONP implementation). Then, we just set the source property of our photolist widget. The source property is a common property that lets you connect data to many deliteful widgets. Deliteful has built-in connections to data stores defined by the dstore project. In our case, we will use a Memory store that wraps JavaScript objects, since that is what our JSONP request returned to us. Note that you must also add "dstore\/Memory" to the list of AMD dependencies and bind it to a Memory parameter in the define callback: define([ "dstore\/Memory", ... ], function(Memory) { ... We must now initiate the request somehow. Let's create a global function for this: refreshPhotoList = function () { photolist.source = new Memory(); getPhotos("bridges,famous"); }; The refreshPhotoList function first clears the list then sends a new request (with hardcoded tags for now). Let us add a call to the function now, so the photos are retrieved and displayed at startup. refreshPhotoList(); Let us also set a click handler on the "Refresh" button if the user wants to reload the photos: <button is="d-button" onclick="refreshPhotoList()">Refresh<\/button> We can already try that and open index.html in a browser: OK, we can see that our code works because the list is populated with items, but they are empty. We just miss one piece: we need to tell the List widget what to display exactly. Our JSON photo descriptions have a title property that we would like to display in the list. Again that's very easy, just add a labelAttr attribute to the d-list element: <d-list class="width100 height100" id="photolist" labelAttr="title"> And here is the result: ##Run the Demo Click here to see the live demo: Deliteful Tutorial - Part 4 ##Next Step We learned the basic techniques to connect a deliteful widget to data retrieved from a server. In the next step, we will further customize our list view to enhance the display. Previous Step - Introducing the Photo Feed Application Next Step - Enhancing the List View","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part4ListView.html"},{"title":"Deliteful Tutorial Part 5","text":"#Deliteful Tutorial (Part 5) - Enhancing the List View In the previous step of this tutorial we started to build our Flickr photo feed application. We will now refine it to display more information for each photo. Remember, we wanted to obtain something like this: If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part5 branch now: $ git checkout part5 ##Defining a Custom List Item Renderer The deliteful List widget can be customized to some extent, but for this we will need to define custom item renderer. An item renderer is a subclass of deliteful\/list\/ItemRenderer that defines the content of each list item. Add the following code in js\/app.js, before the refreshPhotoList() call: photolist.itemRenderer = register("d-photo-item", [HTMLElement, ItemRenderer], { template: handlebars.compile("<template>" + "<div attach-point='renderNode'>" + "<div class='photoThumbnailBg'>" + "<img class='photoThumbnail' src='{%raw%}{{item.media.m}}{%endraw%}'>" + "<\/div>" + "<div class='photoSummary'>" + "<div class='photoTitle'>{%raw%}{{item.title}}{%endraw%}<\/div>" + "<div class='publishedTime'>{%raw%}{{item.published}}{%endraw%}<\/div>" + "<div class='author'>{%raw%}{{item.author}}{%endraw%}<\/div>" + "<\/div>" + "<\/div>" + "<\/template>") }); This needs some explanations. The itemRenderer property of the deliteful List widget can be set to an instance of a subclass of deliteful\/list\/ItemRenderer. For each element of the data source, an instance of the renderer class will be created. The DOM contents of each item is defined by the template property, which is parsed and processed by the handlebars module. The template can contain bindings: for example, {%raw%}{{item.title}}{%endraw%} will be replaced by the value of the title property of each data item of the source. In the added code we use two new AMD modules: "deliteful\/list\/ItemRenderer" (the base class of our custom renderer) and "delite\/handlebars" which contains the deliteful templating engine. Let's add them to our dependency list: define([ "dstore\/Memory", "deliteful\/list\/ItemRenderer", "delite\/handlebars", ... ], function (Memory, ItemRenderer, handlebars) { ... Add the following rules in css\/app.css to style the item elements correctly: .d-list-item .d-list-cell { line-height: 20px; height: 100px; width: 100%; overflow-x: hidden; } .photoThumbnailBg { width: 90px; height: 90px; min-width: 90px; background-color: #000000; text-align: center; line-height: 90px; } .photoThumbnail { max-width: 90px; max-height: 90px; vertical-align: middle; } .photoSummary { padding-left: 10px; padding-bottom: 0; margin: 0; position: relative; vertical-align: middle; height: 100%; } .photoTitle { font-size: 15px; font-weight: bold; } .publishedTime { font-size: 12px; font-weight: normal; } .author { font-size: 10px; color: #777; font-weight: normal; position: absolute; bottom: 0; text-overflow: ellipsis; white-space: nowrap; } We also need to modify the markup. We can remove the labelAttr that we added previously on the d-list element, as the custom item renderer directly maps the data item properties to DOM properties in its template. In parallel, we must set copyAllItemProps="true", which means that all the properties of the data items will be available to the custom item renderer. <d-list class="width100 height100" id="photolist" copyAllItemProps="true"> OK, let's try that, our list looks a lot better now: ##Formatting the Date Flickr returns dates in ISO format, which is not very user friendly. We want to format this better, and this is the opportunity to show that templates can contain any JavaScript expression. Let us add a function to format a date: photolist.itemRenderer = register("d-photo-item", [HTMLElement, ItemRenderer], { ... , \/\/ Formats a date in ISO 8601 format into a more readable format. formatDate: function (d) { return d && new Intl.DateTimeFormat("en-us", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }).format(new Date(d)); } }); And we use yet another AMD module for this, the "ecma402\/Intl" project for internationalization, let's add it to our dependency list: define([ ..., "ecma402\/Intl", ... ], function (..., Intl) { ... We also need to add a config object to the require.config call in index.html to say which locales we want to load (just "en-us" for now, we will add more later). require.config({ ..., config: { "ecma402\/locales": ["en-us"] } }); Now let's modify the template to use the formatDate function, for this we replace the {%raw%}{{item.published}}{%endraw%} binding by an expression: "<div class='publishedTime'>{%raw%}{{this.formatDate(this.item.published)}}{%endraw%}<\/div>" + (Note that, in binding expressions, this refers to the item renderer instance, and this.item is the data item that the renderer represents. If you use a simple binding like {%raw%}{{item.published}}{%endraw%}, you may omit the this. prefix, it is implicit). OK, now our dates are formatted more cleanly: ##Adding a Progress Indicator One last little thing we will do on this list view is to add a progress indicator that will spin while the request is being processed. For this let's add this markup next to the d-list element: <!-- scrollable list --> <div class="fill"> <d-list ...> <\/d-list> <d-progress-indicator id="pi"><\/d-progress-indicator> <\/div> Let's add it to our dependency list: define([ ..., "deliteful\/ProgressIndicator", ... ], ... (We don't need to add corresponding argument to the define callback since we don't explicitly use these modules in our code, we just need to have them loaded so that the delite parser can initialize them.) Add this rule to css\/app.css to center the progress indicator in the view: .d-progress-indicator { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } Finally show the indicator in the getPhotos function, and hide it in requestDone: function getPhotos(tags) { requestDone(); pi.active = true; .... } function requestDone() { .... pi.active = false; } We now have a nice feedback to show that the request is being processed: Our list view is now completed! ##Run the Demo Click here to see the live demo: Deliteful Tutorial - Part 5 ##Next Step We will now learn how to add a details view that will show more details when a user clicks a photo in the list. Previous Step - The Photo List View Next Step - Adding a Details View","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part5CustomRenderer.html"},{"title":"Deliteful Tutorial Part 6","text":"#Deliteful Tutorial (Part 6) - Adding a Details View In the previous step of the deliteful tutorial we enhanced the display of our photo list view. We will now add a second view that shows the details of a photo. The details view will appear when we select one of the items in the photo list. If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part6 branch now: $ git checkout part6 ##Markup and CSS As we have seen previously or main view is made of a toplevel d-view-stack component which, so far, contains only one view (the list view). The new details view will be added to this view stack, so it can replace completely the list view: <!-- page content --> <d-view-stack class="width100 height100" id="vs"> <d-linear-layout id="listView"> ... <\/d-linear-layout> <!-- details view --> <d-linear-layout id="detailsView"> <!-- page content header --> <d-linear-layout vertical="false" class="pageHeader"> <div> <button is="d-button">Back<\/button> <\/div> <div class="fill titleStyle">Photo Details<\/div> <\/d-linear-layout> <!-- page content --> <div id="photoDetails" class="fill"><\/div> <\/d-linear-layout> <\/d-view-stack> The details view contains a header (implemented using a d-linear-layout, we are familiar with this already), and a simple div that will contain the photo details. Let's also add a little rule in css\/app.css to set a margin on the details div and allow vertical scrolling on it: #photoDetails { margin: 9px; overflow-y: auto; } As we will rely on the List's selection to show the details view, we must set the List's selectionMode so that items can be selected: <d-list ... selectionMode="single"> ##JavaScript Add this code to js\/app.js: photolist.on("selection-change", function (event) { var renderer = event.renderer; if (renderer && renderer.item) { document.getElementById("photoDetails").innerHTML = renderer.item.description.replace(\/href=\/ig, "target=\\"_blank\\" href="); vs.show(detailsView); } }); This code adds a selection-change event handler to the list. The handler first finds which item was selected (using the renderer property of the event) and accesses its data item (that is, the JavaScript object returned by the Flickr query and that describes the photo). The item contains a description property that is an HTML fragment, so it is really easy to populate the details view by setting the innerHTML property of the photoDetails div to this description. We only change it slightly so that the anchors contained in the description open a separate window instead of replacing our page. Then, the important call is vs.show(detailsView). The vs variable is our d-view-stack widget, and it has a show function that makes one of its children visible. By default, the new view will be shown using a slide transition, so that's OK for us. We also want to be able to go back from the details view to the list view, and we added a Back button in the header for this. let's just add an event handler in the markup to do this: <button is="d-button" onclick="vs.show(listView, {reverse:true})">Back<\/button> We are done, you can try that new feature and click on an item to see the details view: ##Run the Demo Click here to see the live demo: Deliteful Tutorial - Part 6 ##Next Step In the next step we will complete our small app by customizing the side pane to implement a settings view. Previous Step - Enhancing the List View Next Step - The Settings View","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part6DetailsView.html"},{"title":"Deliteful Tutorial Part 7","text":"#Deliteful Tutorial (Part 7) - The Settings View Our example app is almost complete now that we added the details view. We will now add the last piece: a settings view which will allow the user to choose the photo tags and other options. This will be the opportunity to see more deliteful widgets in action. Our settings view is shown and hidden by clicking the Settings button in the header of the main view: If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part7 branch now: $ git checkout part7 ##Markup and CSS Our app already contains a d-side-pane, and it is a good fit to implement a settings view. Let's just modify its contents: <!-- left pane (Settings) --> <d-side-pane mode="push" position="start" id="leftPane"> <d-linear-layout class="height100"> <!-- left menu header --> <d-linear-layout vertical="false" class="pageHeader"> <div class="fill titleStyle">Settings<\/div> <\/d-linear-layout> <d-linear-layout> <div class="formLabel">Tags:<\/div> <input id="tagsInput" class="formInput" onchange="tagsChanged()"> <d-linear-layout vertical="false"> <div class="formLabel switchLabel">Tag mode:<\/div> <d-switch id="tagModeSwitch" uncheckedLabel="Any" checkedLabel="All" onchange="tagModeChanged()"><\/d-switch> <\/d-linear-layout> <div class="formLabel">Language:<\/div> <d-select id="languageSelect" onchange="languageChanged()"><\/d-select> <\/d-linear-layout> <\/d-linear-layout> <\/d-side-pane> Add this to css\/app.css to style the side pane and its elements: .d-side-pane { border-right: 1px solid #357ebd; } .formLabel { font-size: 14px; font-weight: bold; margin: 12px 6px 6px 6px; } .formInput { margin: 6px; } .d-switch { height: auto; align-self: center; margin: 12px 6px 6px 6px; } .d-select { align-self: flex-start; margin: 6px; } ##JavaScript Code We added new elements that we did not use before in our settings view so let's first add these new AMD modules to the dependency list: define([ ..., "deliteful\/Select", "deliteful\/Switch", ... ], ... (We don't need to add corresponding argument to the define callback since we don't explicitly use these modules in our code, we just need to have them loaded so that the delite parser can initialize them.) Here is now the code to add to initialize the settings view and handle changes in it: \/\/ Initial settings var settings = { tags: "famous,bridges", tagMode: "all", language: "en-us" } \/\/ Possible display languages var languages = [ {text: "English", value: "en-us"}, {text: "French", value: "fr-fr"}, {text: "German", value: "de-de"}, {text: "Italian", value: "it-it"}, {text: "Korean", value: "ko-kr"}, {text: "Portuguese (Br)", value: "pt-br"}, {text: "Spanish", value: "es-us"}, {text: "Trad. Chinese (HK)", value: "zh-hk"} ]; \/\/ Initialize elements of the settings view based on initial settings: tagsInput.value = settings.tags; tagModeSwitch.checked = settings.tagMode === "all" ? true : false; languageSelect.source = new Memory({data: languages}); languageSelect.on("query-succes", function () { languages.forEach(function (l) { languageSelect.setSelected(l, l.value === settings.language); }); }); \/\/ callbacks called when a settings input field is modified tagsChanged = function () { settings.tags = tagsInput.value; refreshPhotoList(); }; tagModeChanged = function () { settings.tagMode = tagModeSwitch.checked ? "all" : "any"; refreshPhotoList(); }; languageChanged = function () { settings.language = languageSelect.value; refreshPhotoList(); }; We define a settings object that contains our options. We then initialize the widgets of the settings view with these settings. Finally, we create the callback functions that will be called when a widget value is changed by the user. The callback functions update the settings in memory based on the new widget state. OK, we can now modifiy slightly our existing code to use the settings properties instead of the hardcoded values that we had so far: ... refreshPhotoList = function () { ... getPhotos(settings.tags); }; ... function getPhotos(tags) { ... var url = ... + "&tagmode=" + settings.tagMode; ... } ... formatDate: function (d) { return d && new Intl.DateTimeFormat(settings.language, { ... } ... One last change: now that we can format dates in several locales, we have to change our configuration so that these locales are loaded. For this, we add the possible locales in the require.config call in index.html: require.config({ ..., config: { "ecma402\/locales": ["en-us", "fr-fr", "de-de", "it-it", "ko-kr", "pt-br", "es-us", "zh-hk"] } }); Our settings view should work now! Try it out: click the Settings button, change the "bridges" tag to "landscapes" for example, and change the language to French: ##Run the Demo Click here to see the live demo: Deliteful Tutorial - Part 7 ##Congratulations! Our app is now fully functional. In the next step we will learn how to build it to reduce its load time. Previous Step - Adding a Details View Next Step - Building the Application for Production","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part7SettingsView.html"},{"title":"Deliteful Tutorial Part 8","text":"#Deliteful Tutorial (Part 8) - Building the Application for Production We finished the development part of our example by adding a settings view. If you open the debugging tools in your browser (usually F12), and look at the network traffic when you load the app, you will see a lot of HTTP requests to load each individual source file (.js, .css, ...). This is OK while developing but when you deploy your application for production you will want to reduce the number and size of the HTTP requests so that your app loads as quickly as possible. We will now learn two alternative ways of doing this: using build versions of the dependency packages, or, even better, building the application code and its dependencies into a single layer file. Warning: If you want to follow both ways, you should make a backup of the application now to easily revert the changes made for the build. ##Using Build Versions of Dependency Packages If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part8-1 branch now: $ git checkout part8-1 In the first step of the tutorial we chose to use the source versions of the dependency packages, since this is usually easier for debugging and looking around in the code: [?] Do you want to use build version of deliteful package (instead of source version)? No We could have answered y, in that case the application would use the build version of all packages on which our application depends. Build versions are functionally equivalent but are packed into single layer files, which reduces the number and size of HTTP requests. Let's change our app to use build versions, as if we had answered y to the question above. If you chose to use build versions from the beginning, you wouldn't need to do this of course. First, we need to tell bower that we want to use build versions, not source versions. For this, we simply change deliteful into deliteful-build in the bower.json file: { ... "dependencies": { "deliteful-build": "0.4.x", ... } Run bower again to load the build packages: $ bower install Now we need to slightly modify our code to use the build packages. In index.html, wrap the existing require(["js\/app"]) call inside another require call that loads the deliteful layer: \/\/ Load the minified layer. require(["deliteful-build\/layer"], function () { \/\/ Start the application. require(["js\/app"]); }); Finally, change the path of the defaultapp.css stylesheet that we load directly from the delite package: <link rel="stylesheet" href="bower_components\/delite-build\/themes\/defaultapp.css"> (as the build version of the delite package is now contained in bower_components\/delite-build instead of bower_components\/delite). Good, our app now uses build packages. It works the same, except it makes much less HTTP requests and loads faster. ###Run the Demo Click here to see the live demo of the optimized app using build versions of the dependency packages: Deliteful Tutorial - Part 8.1 ##Building the Application Into a Single Layer If you have chosen to get the tutorial application from the ibm-js\/deliteful-tutorial project, switch to the part8-2 branch now: $ git checkout part8-2 If you followed the steps explained in previous section, you need to restore the application as it was at the end of step 7. We reduced the load time of our app, that's good, and it may be enough for many apps. But we can do even better by generating a single .js file that will contain all the code of our app plus its dependencies. For this, we will use the ibm-js\/grunt-amd-build project, which provides a Grunt plugin that can generate our layer. The grunt-amd-build plugin is really powerful and flexible and provides many options, so to make things really easy, we will use another Yeoman generator, ibm-js\/generator-amd-build, that will do the hard work for us. Note: Because of a known problem with requirejs-dplugins\/jquery, you need to add the following map property as a temporary workaround in the config section of index.html: <script> require.config({ baseUrl: "bower_components", ..., map: { jquery: { "jquery\/src\/selector": "jquery\/src\/selector-native" \/\/ don't pull in sizzle } } }); require(["js\/app"]); <\/script> So let's install ibm-js\/generator-amd-build first: $ npm install -g generator-amd-build and run it: $ yo amd-build The generator asks some questions, accept all the defaults. Our generator has created a Gruntfile.js that contains the configuration information for our build. Let's run Grunt now to actually generate our layer: $ grunt build The output of the build is in the build directory, which now contains all the code and dependencies that we need, so we need to modify our index.html as follows: <script> require.config({ baseUrl: "build\/bower_components", ... }); require(["js\/app"]); <\/script> If you launch the application now and look at the browser's debugger, you should see a minimal set of HTTP requests. Our application is now fully optimized! ###Run the Demo Click here to see the live demo of the fully optimized app: Deliteful Tutorial - Part 8.2 ##Congratulations! You have now completed this deliteful tutorial. More documentation and examples are available on the deliteful web site. Previous Step - The Settings View","tags":"","url":"Interface_Designer\/Widgets\/tutorial\/Part8Build.html"},{"title":"deliteful\/ViewIndicator","text":"deliteful\/ViewIndicator deliteful\/ViewIndicator is a companion widget to deliteful\/ViewStack (or its subclass deliteful\/SwapView) that shows which child of the ViewStack is currently visible. It displays a set of small dots corresponding to the children of the ViewStack. The dot representing the visible child is white while the other dots are gray. checkout the sample on JSFiddle Table of Contents Element Instantiation Element Configuration Element Styling User Interactions Enterprise Use Element Instantiation When creating a ViewIndicator, you must specify which ViewStack it is associated with using the viewStack property. See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/SwapView", "deliteful\/ViewIndicator", "requirejs-domready\/domReady!"], function () {} ); <html> <d-swap-view id="sv" style="width:100%; height:200px"> <div style="background-color: darkblue">Child 1 (Default visible child)<\/div> <div style="background-color: white">Child 2<\/div> <div style="background-color: crimson">Child 3<\/div> <\/d-swap-view> <d-view-indicator viewstack="sv" style="width:100%"><\/d-view-indicator> <\/html> Programmatic Instantiation require(["deliteful\/SwapView", "deliteful\/ViewIndicator", "requirejs-domready\/domReady!"], function (SwapView, ViewIndicator) { var sv = new SwapView({style: "width:100%; height: 200px"}); var child1 = document.createElement("div"); var child2 = document.createElement("div"); var child3 = document.createElement("div"); sv.addChild(child1); sv.addChild(child2); sv.addChild(child3); sv.placeAt(document.body); var vi = new ViewIndicator({viewStack: sv, style: "width:100%"}); vi.placeAt(document.body); }); Element Configuration Properties The viewStack property must be set to a deliteful\/ViewStack or deliteful\/SwapView id or instance. The ViewIndicator will track visibility changes of the children of the specified ViewStack and update its display accordingly. Element Styling Supported themes This widget provides default styling for the following delite themes: bootstrap ios holodark CSS Classes The dots can be customized using the following CSS classes: -d-view-indicator-dot is added to all dots, -d-view-indicator-dot-selected is added to the dot representing the visible child. For example, the following rules would give a square shape to the dots and make the selected dot red: .d-view-indicator .-d-view-indicator-dot { -moz-border-radius: 0; border-radius: 0; } .d-view-indicator .-d-view-indicator-dot-selected { background-color: red; } User Interactions Clicking or touching a dot shows the corresponding child in the ViewStack. If the ViewIndicator is large enough (which depends on how it is laid out in the HTML page), clicking in the empty area on the right of the dots shows the next child in the ViewStack, and clicking on the left of the dots shows the previous child. Enterprise Use Accessibility ViewIndicator does not provide accessibility support, as the ViewStack is already accessible through the Page Up \/ Down keys. Globalization deliteful\/ViewIndicator does not provide any internationalizable bundle. Right to left orientation is supported by setting the dir attribute to rtl on the deliteful\/ViewIndicator element. This affects clicks outside of the dots: in right-to-left mode, clicking in the empty area on the right of the dots shows the previous child in the ViewStack, and clicking on the left of the dots shows the next child. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class that deliteful\/ViewIndicator is using. Browser Support This widget supports all supported browsers.","tags":"","url":"Interface_Designer\/Widgets\/ViewIndicator.html"},{"title":"deliteful\/ViewStack","text":"deliteful\/ViewStack deliteful\/ViewStack is a container that has multiple children, but shows only one child at a time. Moving from one child to another is accomplished via a transition. This container supports 8 transition types: slide, slidev, reveal, revealv, cover, coverv, fade, flip. Some of the transition types are described in the following picture: Slide Reveal Flip Fade checkout the sample on JSFiddle Table of Contents Element Instantiation Element Configuration Element Styling Enterprise Use Element Instantiation See delite\/Widget for full details on how instantiation lifecycle is working. Declarative Instantiation require(["deliteful\/ViewStack", "requirejs-domready\/domReady!"], function () { }); <html> <d-view-stack style="width:100%; height:200px"> <div style="background-color: darkblue">Child 1 (Default visible child)<\/div> <div style="background-color: white">Child 2<\/div> <div style="background-color: crimson">Child 3<\/div> <\/d-view-stack> <\/html> Programmatic Instantiation require(["deliteful\/ViewStack", "requirejs-domready\/domReady!"], function (ViewStack) { var vs = new ViewStack({width:"100%, height: 200px"}); var child1 = document.createElement("div"); var child2 = document.createElement("div"); var child3 = document.createElement("div"); vs.addChild(child1); vs.addChild(child2); vs.addChild(child3); vs.placeAt(document.body); }); Loading additional transition types The ViewStack container include by default 2 transition types: "slide" and "reveal". To use another transition type, you must require it: Example: Load all additional transition types require(["requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/cover.css", "requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/coverv.css", "requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/fade.css", "requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/flip.css", "requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/slidev.css", "requirejs-dplugins\/css!deliteful\/ViewStack\/transitions\/revealv.css"],...); Element Configuration deliteful\/ViewStack support delite display infrastructure by inheriting from delite\/DisplayContainer. For more informations, see delite\/DisplayContainer documentation. Displaying a child To display a child of the container, call the show method. Example: vs.show(child2, {transition: "reveal", reverse: true}); The show method takes as first argument a DOM node instance or id. The second argument is optional. Available properties are transition and\/or reverse. The reverse property applies only to Slide and Reveal transitions. Set transition to "none" for disabling animated transition. Properties If show method is called without a second argument, the transition is controlled by the transition and reverse properties. Default values are {transition: "slide", reverse: false}. Element Styling deliteful\/ViewStack has no visual appearance, it does not provide any CSS class for styling. The default height of a deliteful\/ViewStack is 100%. When the height of a ViewStack is expressed as a percentage, you must ensure that the height of its parent is defined. If the height of the parent is also defined as a percentage, you must recursively apply the same rule, up to <body> and <html> elements if needed. An HTML full-screen application has its <body> and <html> elements height set to 100%. You can read this external article for more information. You can set height of <body> and <html> to 100% by including defaultapp.css The position CSS attribute of this element must be set to absolute or relative (default). The following CSS layout attributes must NOT be changed. They are explicitly set by the container and are required for a correct behaviour of it. ViewStack node: display, box-sizing, overflow-x ViewStack children: box-sizing, width Note: In some circumstances the animated transition between two children can be broken, for example if a deliteful\/List is a direct child of ViewStack. To fix this wrong behaviour, wrap the child into a block level element. Enterprise Use Accessibility Relies on browser. Globalization deliteful\/ViewStack does not provide any internationalizable bundle. Right to left orientation is supported by setting the dir attribute to rtl on the deliteful\/ViewStack element. It affects Slide and Reveal transitions. Security This widget has no specific security concern. Refer to delite\/Widget for general security advice on this base class that deliteful\/ViewStack is using. Browser Support This widget supports all supported browsers. On Internet Explorer 9, transitions are not animated.","tags":"","url":"Interface_Designer\/Widgets\/ViewStack.html"},{"title":"Driver","text":"Driver Programming Guide Overview General Requirements Definitions Terminology Lifecycle FAQ General This guide is for developers who would like to add support for more devices to the Control Freak IDE. the IDE provides all necessary tools and assistance to minimize this task best as possible. Requirements Basic understanding of programming or simple script languages. Currently only Javascript is to be used. Definitions A Driver is a system entity which writes and handles device messages but also contains information about it self. Driver Meta database is a collection of settings, fully editable in the IDE. A Device is a system entity which contains information only about the network details of a device and the used driver, for instance IP address and port. A Block is a system entity which contains data and\/or code. A 'block' represents the base unit in the driver system. A block is used for Variables and Commands. Run-Time-Configuration sets the name of the configuration within the applications: IDE or Run-Time. There is currently the "debug" and "release" configuration. When running a driver in the IDE, its set to "debug" and when running fully deployed, its running with the "release" configuration. Terminology Drivers A driver consists out of: A Javascript file, more precisely a 'class' inheriting some basic functionality A meta database, currently stored as a 'JSON' file. This meta database contains information such as the name of the driver but also the link to the Javascript file. A collection of blocks which do the logic but also contain data as variables. Since a block can be entire program in it self, it may call other blocks as well. Devices A device consists out of: A meta database, currently stored as a 'JSON' file. This meta database contains information such as the name of the device, the IP address or the port. Blocks A block consists out of: A Javascript file or class, holding data but also running code. A driver for instance contains variables and commands which are all blocks. The system runs these blocks in a specific order and logic. There are blocks which will be called upon start and there are blocks which be called when a device message comes in. Blocks and driver code do work hand in hand and are 100% compatible to each other. Lifecycle The begin of a driver The life of driver begins as soon a device is marked as active and references this driver. The end of a driver It ends when no device referencing this driver. Run-Time Notes When developing the driver in the IDE, the "debug" configuration is being used. In this case, the driver runs in the browser, thus enabling easy debugging with the browser's built-in developer tools. Currently Firefox, Firebug and Chrome console is supported. When running a driver in a fully deployed application, the driver runs on the server (Node.JS Device-Control-Server) FAQ","tags":"","url":"Driver\/index.html"},{"title":"Expressions","text":"General Notes Scoping the this keyword refers to the scope of execution. In case its part of a command or an expression (driver console), this will be the driver instance. Each time a device will be connected, its creates an instance of the driver code. Each driver has its own JS code and will be sub classed from a driver base class. See also the API documentation here So if your driver code contains a method "doSomething", you can write this.doSomething(2) The base driver class contains also methods to send messages to the device. Here a number of expressions being used in the console or as command string Send hex values some string x0d will be replaced to some string \\r Make sure "Replace Hex" is on Using variables "mv" + [Volume] +"x0d" will be modified to return "mv" + this.getVariable("Volume") + "x0d"; and evaluates to (Volume variable is set to 60) mv60\\r Using variables II var Volume = this.getVariable("Volume"); return "mv" + (Volume + 2) + "x0d"; evaluates to (Volume variable is set to 60) mv62\\r Make sure "Replace Hex" and "Expression" is on","tags":"","url":"Driver\/Code_Examples\/Expressions.html"},{"title":"Variable Changes","text":"Example: React on Variable changes via driver code 1.Open from driver view : My - Driver - > File\/Code 2.Now go down to method "start" and replace this method with: \/** * This function is called as soon the device is connected *\/ start:function(){ \/\/some debugging message console.log('started Marantz',this); \/\/Example: we subscribe on variable changes, globally this.subscribe("onDriverVariableChanged"); \/\/Example, specify the event handler explizit \/\/this.subscribe("onDriverVariableChanged",this.onDriverVariableChanged); } 3.Now insert the event handler: onDriverVariableChanged:function(evt){ \/\/grab the variable var variable = evt.item; \/\/grab the xblox scope var blockScope = variable.scope; \/\/abort if is not ours, we also receive here variable changes from other devices \/\/ notice: we use != instead of !== \/\/ this is because we compare 2 object pointers and not two primitive's values if(blockScope != this.blockScope){ return; } \/\/Example: make some special effort for variable "Volume" if(variable.name ==="Volume"){ console.info("Volume changed : " + variable.value); } \/\/Example: abort if it is not a certain variable if(variable.name !=="value"){ console.warn("skip variable " + variable.name); return; } \/\/Example: print something in console console.log('onDriverVariableChanged ' + variable.name + ' new value:' + variable.value); \/\/Example: do something with the variable var value = "" + variable.value; \/\/important, build a new string value++; \/\/Example: call a command if(value ==='whatever'){ this.callCommand("Command Name"); } \/\/Example: store it in another variable if(value ==='whatever'){ this.setVariable("the other variable's name ",value); } } 4.Now re-connect the device (Toggle "Enabled") to see you code running. Since the driver method "start" is only called once, you need to do this every time you changed the code. This is a special case only with event handlers. 5.Your entire code file should look like this now: define([ "dcl\/dcl" ], function (dcl) { return dcl(null, { updatePower: function (value) { value = value || this.getVariable('value'); var out = 0; if (value.indexOf('@PWR:') != -1) { var _pw = value.split(':')[1]; if (!isNaN(_pw)) { this.setVariable('PowerState', _pw == 2 ? 'on' : 'off'); out = _pw; } } return out; }, updateVolume: function (value) { value = value || this.getVariable('value'); var out = 0; if (value.indexOf('MV') != -1 && value.indexOf('MVMAX') == -1) { var _volume = value.substring(2, value.length); _volume = parseInt(_volume.substring(0, 2)); if (!isNaN(_volume)) { this.setVariable('Volume', _volume); out = _volume; } else { return null; } } else { return null; } return out; }, onMessage: function (data) { var message = data.message; this.updateVolume(message); this.updatePower(message); if (data.message.indexOf('MVMAX') != -1) { return; } \/* this.log('warn', 'Marantz', message + ' PowerState: ' + this.getVariable('PowerState'), { some: 'extra', message: data }); *\/ }, onDriverVariableChanged: function (evt) { \/\/grab the variable var variable = evt.item; \/\/grab the xblox scope var blockScope = variable.scope; \/\/abort if is not ours, we also receive here variable changes from other devices \/\/ notice: we use != instead of !== \/\/ this is because we compare 2 object pointers and not two primitive's values if (blockScope != this.blockScope) { return; } \/\/Example: make some special effort for variable "Volume" if (variable.name === "Volume") { console.info("Volume changed : " + variable.value); } \/\/Example: abort if it is not a certain variable if (variable.name !== "value") { console.warn("skip variable " + variable.name); return; } \/\/Example: print something in console console.log('onDriverVariableChanged ' + variable.name + ' new value:' + variable.value); \/\/Example: do something with the variable var value = "" + variable.value; \/\/important, build a new string value++; \/\/Example: call a command if (value === 'whatever') { this.callCommand("Command Name"); } \/\/Example: store it in another variable if (value === 'whatever') { this.setVariable("the other variable's name ", value); } }, \/** * This function is called as soon the device is connected *\/ start: function () { \/\/some debugging message console.log('started Marantz', this); \/\/Example: we subscribe on variable changes, globally this.subscribe("onDriverVariableChanged"); \/\/Example, specify the event handler explizit \/\/this.subscribe("onDriverVariableChanged",this.onDriverVariableChanged); } }); });","tags":"","url":"Driver\/Code_Examples\/Variable_Changes.html"},{"title":"Built-In","text":"Built-In Drivers Overview","tags":"","url":"Driver\/Built-In\/index.html"},{"title":"VLC","text":"Built-In Drivers Overview","tags":"","url":"Driver\/Built-In\/VLC.html"},{"title":"Guide","text":"Programming Overview General The Control-Freak IDE and Run-time does already some legwork: Creating the Javascript class file from a template, ready to be completed by your code. Instantiating the class when a device is referencing this driver Cleanup and stop the driver when not needed anymore Calling the driver API for each device or system event adding useful attributes to the instance like quick access the drivers meta database or more methods to access other drivers, devices and also calling xblox. The Driver base class Please find its API documentation here All driver code is written in OOP. The system inherits your driver class automatically from a driver base class which provides the most wanted functions. It also enforces a a strict API (signature) when it comes to device communication but its entirely up to you to you to make use of it. General Entry Points The most important methods being called by the system are: sendMessage(string,now) onMessage(data) start() stop(data) You may override or complete this methods. If you don't override it, then the methods of the base class will be called. Tools There are more utils functions in your driver instance to have direct access to variables, commands or xBlox. Here some of them: Variables getVariable(title) setVariable(title,value) Commands callCommand('PowerOn') xBlox runBlock('BlockTitle',args)","tags":"","url":"Driver\/Guide.html"},{"title":"API","text":"API Overview Driver Base Class API Documentation","tags":"","url":"Driver\/API.html"},{"title":"Editors","text":"The Control Freak IDE provides already a sophisticated Editor which comes with auto completion and snippets by the default. Since most developers prefer their own editors and key bindings, the IDE allows also to write driver code outside of the IDE. All you you need to do is open the driver Javascript file and start coding. The IDE server will recognize file those changes and updates the running driver instance with your changes. Be aware that you will loose the auto-completion of the IDE which shows common methods by default. Recommended Editors Best fit: WebStorm or PHPStorm with the "More Dojo" plugin enabled. Sublime","tags":"","url":"Driver\/Editors.html"},{"title":"Debugging","text":"First things first: when developing drivers with the Control Freak IDE or external editors, code changes are automatically applied! When being in the debug mode (IDE), you can debug your driver with the browser tools. Drivers are in that case like any other Javascript. Just hit the F12 key whilst the IDE is open and see the console tab. When being in the release mode (Run-time), since the driver runs on the server(Device Control Server) you can't debug the driver with the browser at the moment. There is a feature in progress to debug that driver from the IDE. References Javascript API Documentation Console API console.log console.error console.dir Debugger API You can stop the driver code at any position: \/\/halt the program and open the debugger here debugger; There is currently also a private API to run a debug session for any driver. TBC... Examples when using the browser debugger \/\/print this driver instance in the console console.log('my instance',this); \/\/print this driver instance more readable in the console console.dir(this); \/\/print an error in the console, show the current instance as well console.error('my error',this);","tags":"","url":"Driver\/Debugging.html"},{"title":"Intern","text":"IDE Driver - Client - Side Create Driver - Instance : yes Driver - Server - Side :","tags":"","url":"Driver\/Intern.html"},{"title":"Fiddle","text":"","tags":"","url":"Driver\/Fiddle\/index.html"},{"title":"Blocks Example","text":"","tags":"","url":"Driver\/Fiddle\/Blocks_Example.html"},{"title":"Blocks Template","text":"Steps: Run File\/Download action and copy the content of that file into the clipboard Open the template fiddle, and fork it (signup first) Replace from clipboard in the JS file : var MY_BLOCKS = []; to var MY_BLOCKS = PASTE_HERE","tags":"","url":"Driver\/Fiddle\/Blocks_Template.html"},{"title":"Protocols","text":"Device Protocols Index 1. TCP 2. UDP 3. Serial 4. SSH 5. Driver 6. MQTT 1. TCP Device Network Options { fd: null, allowHalfOpen: false, readable: false, writable: false } fd allows you to specify the existing file descriptor of socket. Set readable and\/or writable to true to allow reads and\/or writes on this socket (NOTE: Works only when fd is passed). About allowHalfOpen, refer to createServer() and 'end' event. Node-JS Module: net.Socket Node-JS Module - Documentation: here Node-JS Wrapper: nxapp\/protocol\/TCP 2. UDP Device Network Options server: false Set to true to create a server. It needs the following 2 options specified as well: ip: 129.168.1.1 The ip address to bind the server. port: 9999 The port to bind the server. Node-JS Module: net.Socket Node-JS Module - Documentation: here Node-JS Wrapper: nxapp\/protocol\/UDP Client & Server example: here 3. Serial Device Network Options baudrate Baud Rate, defaults to 9600. Should be one of: 115200, 57600, 38400, 19200, 9600, 4800, 2400, 1800, 1200, 600, 300, 200, 150, 134, 110, 75, or 50. Custom rates as allowed by hardware is supported. databits Data Bits, defaults to 8. Must be one of: 8, 7, 6, or 5. stopbits Stop Bits, defaults to 1. Must be one of: 1 or 2. parity Parity, defaults to 'none'. Must be one of: 'none', 'even', 'mark', 'odd', 'space' rtscts defaults to false xon defaults to false xoff defaults to false xany defaults to false flowControl true for rtscts or an array with one or more of the following strings to enable them xon, xoff, xany, rtscts. Overwrites any individual settings. bufferSize Size of read buffer, defaults to 65536. Must be an integer value. parser The parser engine to use with read data, defaults to rawPacket strategy which just emits the raw buffer as a "data" event. Can be any function that accepts EventEmitter as first parameter and the raw buffer as the second parameter. Defaults to "raw". platformOptions - sets platform specific options, see below. Node-JS Module: serialport Node-JS Wrapper: nxapp\/protocol\/Serial 4. SSH Device Network Options host - string - Hostname or IP address of the server. Default: 'localhost' port - integer - Port number of the server. Default: 22 forceIPv4 - boolean - Only connect via resolved IPv4 address for host. Default: false forceIPv6 - boolean - Only connect via resolved IPv6 address for host. Default: false hostHash - string - 'md5' or 'sha1'. The host's key is hashed using this method and passed to the hostVerifier function. Default: (none) hostVerifier - function - Function with parameters (hashedKey[, callback]) where hashedKey is a string hex hash of the host's key for verification purposes. Return true to continue with the handshake or false to reject and disconnect, or call callback() with true or false if you need to perform asynchronous verification. Default: (auto-accept if hostVerifier is not set) username - string - Username for authentication. Default: (none) password - string - Password for password-based user authentication. Default: (none) agent - string - Path to ssh-agent's UNIX socket for ssh-agent-based user authentication. Windows users: set to 'pageant' for authenticating with Pageant or (actual) path to a cygwin "UNIX socket." Default: (none) agentForward - boolean - Set to true to use OpenSSH agent forwarding (auth-agent@openssh.com) for the life of the connection. agent must also be set to use this feature. Default: false privateKey - mixed - Buffer or string that contains a private key for either key-based or hostbased user authentication (OpenSSH format). Default: (none) passphrase - string - For an encrypted private key, this is the passphrase used to decrypt it. Default: (none) localHostname - string - Along with localUsername and privateKey, set this to a non-empty string for hostbased user authentication. Default: (none) localUsername - string - Along with localHostname and privateKey, set this to a non-empty string for hostbased user authentication. Default: (none) tryKeyboard - boolean - Try keyboard-interactive user authentication if primary user authentication method fails. If you set this to true, you need to handle the keyboard-interactive event. Default: false keepaliveInterval - integer - How often (in milliseconds) to send SSH-level keepalive packets to the server (in a similar way as OpenSSH's ServerAliveInterval config option). Set to 0 to disable. Default: 0 keepaliveCountMax - integer - How many consecutive, unanswered SSH-level keepalive packets that can be sent to the server before disconnection (similar to OpenSSH's ServerAliveCountMax config option). Default: 3 readyTimeout - integer - How long (in milliseconds) to wait for the SSH handshake to complete. Default: 20000 sock - ReadableStream - A ReadableStream to use for communicating with the server instead of creating and using a new TCP connection (useful for connection hopping). strictVendor - boolean - Performs a strict server vendor check before sending vendor-specific requests, etc. (e.g. check for OpenSSH server when using openssh_noMoreSessions()) Default: true algorithms - object - This option allows you to explicitly override the default transport layer algorithms used for the connection. Each value must be an array of valid algorithms for that category. The order of the algorithms in the arrays are important, with the most favorable being first. For a list of valid and default algorithm names, please review the documentation for the version of ssh2-streams used by this module. Valid keys: **kex** - _array_ - Key exchange algorithms. **cipher** - _array_ - Ciphers. **serverHostKey** - _array_ - Server host key formats. **hmac** - _array_ - (H)MAC algorithms. **compress** - _array_ - Compression algorithms. compress - mixed - Set to true to enable compression if server supports it, 'force' to force compression (disconnecting if server does not support it), or false to explicitly opt out of compression all of the time. Note: this setting is overridden when explicitly setting a compression algorithm in the algorithms configuration option. Default: (only use compression if that is only what the server supports) debug - function - Set this to a function that receives a single string argument to get detailed (local) debug information. Default: (none) Authentication method priorities: Password -> Private Key -> Agent (-> keyboard-interactive if tryKeyboard is true) -> Hostbased -> None exec(< string >command[, < object >options], < function >callback) - boolean - Executes command on the server. Returns false if you should wait for the continue event before sending any more traffic. callback has 2 parameters: < Error >err, < Channel >stream. Valid options properties are: env - object - An environment to use for the execution of the command. pty - mixed - Set to true to allocate a pseudo-tty with defaults, or an object containing specific pseudo-tty settings (see 'Pseudo-TTY settings'). Setting up a pseudo-tty can be useful when working with remote processes that expect input from an actual terminal (e.g. sudo's password prompt). x11 - mixed - Set to true to use defaults below, set to a number to specify a specific screen number, or an object with the following valid properties: **single** - _boolean_ - Allow just a single connection? **Default:** `false` **screen** - _number_ - Screen number to use **Default:** `0` shell([[< mixed >window,] < object >options]< function >callback) - boolean - Starts an interactive shell session on the server, with an optional window object containing pseudo-tty settings (see 'Pseudo-TTY settings'). If window === false, then no pseudo-tty is allocated. options supports the x11 option as described in exec(). callback has 2 parameters: < Error >err, < Channel >stream. Returns false if you should wait for the continue event before sending any more traffic. forwardIn(< string >remoteAddr, < integer >remotePort, < function >callback) - boolean - Bind to remoteAddr on remotePort on the server and forward incoming TCP connections. callback has 2 parameters: < Error >err, < integer >port (port is the assigned port number if remotePort was 0). Returns false if you should wait for the continue event before sending any more traffic. Here are some special values for remoteAddr and their associated binding behaviors: '' - Connections are to be accepted on all protocol families supported by the server. '0.0.0.0' - Listen on all IPv4 addresses. '::' - Listen on all IPv6 addresses. 'localhost' - Listen on all protocol families supported by the server on loopback addresses only. '127.0.0.1' and '::1' - Listen on the loopback interfaces for IPv4 and IPv6, respectively. unforwardIn(< string >remoteAddr, < integer >remotePort, < function >callback) - boolean - Unbind from remoteAddr on remotePort on the server and stop forwarding incoming TCP connections. Until callback is called, more connections may still come in. callback has 1 parameter: < Error >err. Returns false if you should wait for the continue event before sending any more traffic. forwardOut(< string >srcIP, < integer >srcPort, < string >dstIP, < integer >dstPort, < function >callback) - boolean - Open a connection with srcIP and srcPort as the originating address and port and dstIP and dstPort as the remote destination address and port. callback has 2 parameters: < Error >err, < Channel >stream. Returns false if you should wait for the continue event before sending any more traffic. sftp(< function >callback) - boolean - Starts an SFTP session. callback has 2 parameters: < Error >err, < SFTPStream >sftp. For methods available on sftp, see the SFTPStream client documentation (except read() and write() are used instead of readData() and writeData() respectively, for convenience). Returns false if you should wait for the continue event before sending any more traffic. subsys(< string >subsystem, < function >callback) - boolean - Invokes subsystem on the server. callback has 2 parameters: < Error >err, < Channel >stream. Returns false if you should wait for the continue event before sending any more traffic. openssh_noMoreSessions(< function >callback) - boolean - OpenSSH extension that sends a request to reject any new sessions (e.g. exec, shell, sftp, subsys) for this connection. callback has 1 parameter: < Error >err. Returns false if you should wait for the continue event before sending any more traffic. openssh_forwardInStreamLocal(< string >socketPath, < function >callback) - boolean - OpenSSH extension that binds to a UNIX domain socket at socketPath on the server and forwards incoming connections. callback has 1 parameter: < Error >err. Returns false if you should wait for the continue event before sending any more traffic. openssh_unforwardInStreamLocal(< string >socketPath, < function >callback) - boolean - OpenSSH extension that unbinds from a UNIX domain socket at socketPath on the server and stops forwarding incoming connections. callback has 1 parameter: < Error >err. Returns false if you should wait for the continue event before sending any more traffic. openssh_forwardOutStreamLocal(< string >socketPath, < function >callback) - boolean - OpenSSH extension that opens a connection to a UNIX domain socket at socketPath on the server. callback has 2 parameters: < Error >err, < Channel >stream. Returns false if you should wait for the continue event before sending any more traffic. Node-JS Module - Documentation: here Node-JS Module: ssh2 5. Driver This protocol will simply re-route to the Javascript file created for the Driver. For instance, you created a Driver called "My Driver", then driver will run the node module : .\/My Driver.js Device Network Options Custom { driver: '.\/DriverName.js' } driver Optional, this defaults to DRIVER LOCATION \/ My Driver Name.js. Otherwise, its relative to the driver's location. Node-JS Module: nxapp\/protocols\/Driver Example: Arduino - Johnny Five Driver File 6. MQTT Device Network Options Defaults: keepalive: 10 seconds, set to 0 to disable reschedulePings: reschedule ping messages after sending packets (default true) clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8) protocolId: 'MQTT' protocolVersion: 4 clean: true, set to false to receive QoS 1 and 2 messages while offline reconnectPeriod: 1000 milliseconds, interval between two reconnections connectTimeout: 30 * 1000 milliseconds, time to wait before a CONNACK is received username: the username required by your broker, if any password: the password required by your broker, if any incomingStore: a Store for the incoming packets outgoingStore: a Store for the outgoing packets will: a message that will sent by the broker automatically when the client disconnect badly. The format is: topic: the topic to publish payload: the message to publish qos: the QoS retain: the retain flag Node-JS Module: mqtt Node-JS Wrapper: nxapp\/protocol\/MQTT","tags":"","url":"Protocols\/index.html"},{"title":"Blocks","text":"XBlocks Reference Driver related Command","tags":"","url":"Blocks\/index.html"},{"title":"Command","text":"Description The command block is meant for holding a string to be send to a device. Parameters Enabled Field Name : "enabled" Type : Boolean Remarks: If disabled at run-time, it will stop the block and cancels also the interval timer. Send on Startup If true, this block will be executed when the device is connected. Field Name: "startup" Type: Boolean Interval If greater than 0, the block will be looped by that interval in ms. Field Name: "interval" Type: Boolean Has Response Some protocols like the built-in SSH return standard execution marks, like std-error, std-data. When this setting is on, the system will mark the command as running but not finished. As soon such command receives and "end" from the server, it will mark the command as finished and proceeds with sub blocks. Field Name: "waitForResponse" Type: Boolean Flags "Dont parse" : will send the string in "Send" as is. "Expression" : This flag is on by default! When on, the string in "Send" will be treated and evaluated as Javascript. Field Name: "flags" Type: integer Remarks: -When "Expression" is on, it will replace variables in "Send" -When "Expression" is on, it will add "return" in front of what's in "Send" if missing","tags":"","url":"Blocks\/Command.html"},{"title":"OnEvent","text":"Description This block enables to subscribe to system events. Parameters Enabled Field Name : "enabled" Type : Boolean Filter Path Every event comes with its own payload object and its own structure differs per event. This field enables to specify the path to a value inside that payload. This needs be set only if the payload is an object, and not already primitive. So this field enables you to filter events and the block will only be triggered if Filter Value matches the value inside the payload path. Example We want to subscribe to "Driver Variable Changed", but only for a certain variable: "Volume". The event payload object for "onDriverVariableChanged" looks like this: { item:variable } where the variable object looks like this: { value:"variable value", name:"Volume" } To trigger this block only for "Volume", this field needs to be set to: item.name Filter Value Needs to be set when the block should only trigger if the event payload contains a certain value, specified by "Filter Path" Example We want to subscribe to "Driver Variable Changed", but only for a certain variable: "Volume". The event payload object for "onDriverVariableChanged" looks like this: { item:variable } where the variable object looks like this: { value:"variable value", name:"Volume" } To trigger this block only for "Volume", this field needs to be set to: "Volume", and the "Filter Path" needs to be set to "item.name" Value Path The path to the value to be forward to sub blocks within the payload. Example If we want to forward the variable's value to sub blocks, this field needs to be set to "item.value" For instance, you can access this value in sub blocks with arguments[0]; Tips: Attach a Run Script block with this code: console.log(arguments); to see the event payload in the Dev-Tools console","tags":"","url":"Blocks\/Events\/OnEvent.html"},{"title":"ReadJSON","text":"Description The block reads JSON data from a file Parameters Enabled Field Name : "enabled" Type : Boolean Remarks: If disabled at run-time, it will stop the block and cancels also the interval timer. Path Field Name : "path" Type : String Description : An absolute path. This path must exist on the device server. Select Field Name : "jsonPath" Type : String Description : A path within the data. If set, the selected data will be forwarded to child blocks. For instance, if the data is: { "boolean":true, "number":10.0, "array":[1,2,3], "myField":"my field value" } You can select the value of "myField" by using 'myField' which returns my field value. You can select the second field of "array" by using 'array.2' which returns 2. Tips: In child blocks you can retrieve the data by using "return arguments[0]".","tags":"","url":"Blocks\/File\/ReadJSON.html"},{"title":"Exporter","text":"Usage Windows Drag your user folder (MyUser\\Documents\\Control-Freak) onto Control-Freak\\export.bat Linux\/OSX run .\/Control-Freak\/export.sh --user=MyUser\/Documents\/Control-Freak wait til terminal closes (may last up to 5 minutes) your exported app is located at \/exported (will be overridden the next time) run \/exported\/start.bat (linux\/osx: start.sh) run \/exported\/stop_servers.bat (linux\/osx: stop_servers.sh) to shutdown the app (important if you export the second time) on a non IDE computer, otherwise press CTRL-C in the existing running server terminal window Data & Servers web-server : runs at 8889, so you open this url: http:\/\/localhost:8889\/ your workspace, located then at http:\/\/localhost:8889\/user\/workspace. You must open the files with *.html extension, not *.dhtml devices : all tagged with "Run Server-Side". The device server tries connecting\/re-connecting every 3 secs drivers : no modification device-server: runs at 9997 database-server: runs at 27018 (Mongo) mqtt-server: 1884 (Mosca) More options: The export script (export.bat or export.sh) sets only default options. It basically goes in the server directory and runs: .\/server noob --client="..\/..\/Code\/client\/" --file=export.js --system="..\/..\/data" --user="$1" --target="..\/..\/exported" --dist="..\/..\/server\/" "$@" You see that it is using the first argument to specific the source location of your default user workspace (Documents\\Control-Freak). Options: -h, --help output usage information -V, --version output the version number -f, --file <path> run a file -r, --root <path> root path to Control-Freak -u, --user <path> user directory -t, --target <path> target directory -s, --system <name> path to system scope location -d, --dist <path> path to the pre-compiled NodeJS servers --windows <boolean> true\/false to export windows NodeJS server --osx <boolean> true\/false to export OSX NodeJS server --linux32 <boolean> true\/false to export Linux-32 Bit NodeJS server --linux64 <boolean> true\/false to export Linux-64 NodeJS server --arm <boolean> true\/false to export ARM-v7 NodeJS server --client <string> path to client root The more interesting option is --target. It specifies where to export your application.","tags":"","url":"Exporter\/index.html"},{"title":"Device Server","text":"General IDE Mode or Deployed\/Exported Depending on the platform, the device server is located in \/server\/windows (x64) \/server\/linux_32 \/server\/linux_64 \/server\/arm (x32) \/server\/osx (x64) Command line arguments General When ever a command line argument needs to be passed, it is necessary to add a dummy command: .\/server dummy option This are the parsed options: -h, --help output usage information -V, --version output the version number -i, --info return service profile -f, --file <path> run a file -u, --user <path> user directory --start <boolean> start devices --serverSide <boolean> make devices server side -s, --system <name> path to system scope location -j, --jhelp output options as json Option "info" This option is for internal usage only and returns a JSON structure: #server dummy --info returns {"host":"http:\/\/0.0.0.0","port":9998} Option "file" This option is for internal usage only and enables to run a Node JS source file: #server dummy --file=export.js Since the "server" is a pre-compiled Node.js binary with some addons and an own command-parser, its necessary to specify a file to be executed this way. Option "user" This option will specify the location of the user workspace. This location is only required for the exporter. Also, this option is set by default by the IDE to the user's "Documents Folder\/Control-Freak" This option accepts relative paths to the server executable. Option "system" This option will specify the location of the system scope and defaults to the IDE's \/data\/system location. This option accepts relative paths to the server executable. Option "serverSide" This option marks enabled devices as server-side and is used by exported apps. Configuration (IDE\/Exported) There is a configuration file located in the server's main-directory: server\/nxappmain\/profile_device_server.json In the file certain settings are specified: Port\/Host of the device server it self Port\/Host of the Mongo-Database Port\/Host of the MQTT server Path to the system scope","tags":"","url":"Device_Server\/index.html"},{"title":"Tutorials","text":"Red Orange Dropdown Green Blue Tabs-enabled widget You will never know exactly how something will go until you try it. You can think three hundred times and still have no precise result. If you see attractive girl all you need to do is to go and ask her to give you her phone. You don\u00e2\u0080\u0099t need to think about HOW it can turn out. All you have to do is to GO and DO IT. It should be super-fast and easy. No hesitation. You ask me: \u00e2\u0080\u009cWhat to do with these fearful thoughts preventing me from doing that?\u00e2\u0080\u009d The answer is to ignore them, because they can\u00e2\u0080\u0099t disappear immediately. The same thing is for startups and ideas. If you have an idea right away after it appears in your mind you should go and make a first step to implement it. Cancel Some button The same thing is for startups and ideas. If you have an idea right away after it appears in your mind you should go and make a first step to implement it. If you will think too much it will sink in the swamp of never implemented plans and ideas or will just go away or will be implemented by someone else. 5 months of doing everything to achieve nothing. I had an idea named Great Work. It was a service aimed to help people find their passion. Yes I know it sound crazy and super na\u00c3\u00afve but I worked on that. I started to work on planning, graphics, presentations, pictures, descriptions, articles, investments and so on. I worked on everything but not the project itself Some button Cancel I realized really simple thing recently. Try is million times better than think. The real world is much more representative than any models either they are built in mind or on the shit of paper. Some button Tabs inside of the body Home Profile Dropdown @fat @mdo Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it: We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one. We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. They sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan. Tabs on the bottom Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it: We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one. We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real. Food truck fixie locavore, single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it! But the goal of this text is different. So a bit of Lore Ipsum is always great practice Home Profile Search Tabs on the left Home Profile Search Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it: We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one. We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real. Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it! But the goal of this text is different. So a bit of Lore Ipsum is always great practice Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. Tabs on the right Home Profile Search Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it! But the goal of this text is different. So a bit of Lore Ipsum is always great practice. Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it: We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one. We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.","tags":"","url":"Tutorials\/index.html"},{"title":"Raspberry PI","text":"Layouts PI-3 PI-3 Examples tbc Built-in GPIO driver Control-Freak has a built-in GPIO driver which is using a Node-JS library. The module however needs some extra installation: cd \/home\/pi\/Control-Freak\/drivers\/Raspberry #or for the web-distribution cd \/var\/www\/html\/control-creak\/drivers\/Raspberry npm install If you run the web distribution, be warned that the GPIO needs root access to function. This is because of the access to \/dev\/mem. See issue here.","tags":"","url":"Raspberry_PI\/index.html"},{"title":"Software","text":"List of Software written with this proposal in mind Hardware Interfaces hm2mqtt - Interface between EQ-3's Homematic line of smarthome devices and MQTT. knx2mqtt - Interface between the KNX home automation standard and MQTT. Uses the Calimero KNX library. onkyo2mqtt - Interface between Onkyo AVR's EISCP network remote protocol and MQTT. Uses the onkyo-eiscp library. hue2mqtt - Interface between the Philips Hue bridge and MQTT. eno2mqtt - Interface between an Enocean USB300 (TCM310) adapter and MQTT. modbus2mqtt - Modbus master which publishes register values via MQTT. cul2mqtt - Interface between Busware CUL (FS20, HMS, EM, ...) and MQTT. bcontrol2mqtt - Publish values from TQ Energy Manager to MQTT. mqtt-dmx-sequencer - Control DMX devices via Art-Net by MQTT rpi2mqtt - Connect a RaspberryPis GPIOs and 1-Wire Temperature Sensors to MQTT flowerpower2mqtt - Connect Parrot Flower Power plant sensors to MQTT Logic, Visualization, Logging logic4mqtt - Logic and scripting engine for use with MQTT. Uses Java's general scripting interface, so scripts can be written in a multitude of languages like Javascript, Groovy etc. mqtt-scripts - Logic and scripting engine for use with MQTT. Node.js based, require command works as expected. influx4mqtt - Insert incoming MQTT values into InfluxDB. Misc kodi2mqtt - Interface between a Kodi mediacenter instance and MQTT. homekit2mqtt - Interface between HAP-NodeJS and MQTT. Can be used to control MQTT attached devices with Siri airtunes2mqtt - MQTT controlled Multi-Room Audio with Airplay\/Airtunes Devices. List of Software (maybe) otherwise usable Node-RED - A visual tool for wiring the Internet of Things mqtt2graphite - Subscribe to MQTT topics and push to Graphite's Carbon server mqtt-panel - A web interface for MQTT Owntracks - Location tracking and geofencing for MQTT mqtt-dss-bridge - MQTT digitalSTROM-Server Bridge fritz2mqtt - Connect FRITZ!Box to MQTT agi-mqtt - Interface between Asterisk and MQTT mqtt-google-calendar - Google Calendar to MQTT bridge mqtt-os-status - Operating-system related data, published to an MQTT broker at fixed intervals. Smarthome-Software with MQTT adapters ccu.io has a MQTT adapter since V1.0.49 fhem has a MQTT module since V5.6 ioBroker has a MQTT adapter openhab has a MQTT binding","tags":"","url":"Resources\/Software\/MQTT\/Software.html"},{"title":"Architecture","text":"Overview This document describes an architectural concept for a Smart Home Automation system which ties together heterogeneous hardware using a centralized message bus: MQTT. Effectively, it just defines a convention for exchanging messages, and a message format. It's goal is to provide an interoperability layer close to the hardware level. Logic and Visualization are to be implemented at a higher level, on top of the MQTT bus. +---------------+ | | +----------------------+ | Logic Engine +-------+ +-----+ Hardware Interface A | | | | | | (e.g. KNX) | +---------------+ +--+----------+-+ +----------------------+ | | | MQTT-Broker | | | +---------------+ +--+----------+-+ +----------------------+ | | | | | Hardware Interface B | | Visualization +-------+ +-----+ (e.g. Homematic) | | | +----------------------+ +---------------+ This convention does make no attempt at abstracting hardware messages into higher level concepts like "Lights" or "Switches". Current home automation hardware and their hardware interfaces have a wide range of different design concepts, ranging from simply addressing devices directly (like many basic RF protocols) over abstracting devices into channels and datapoints (e.g. Homematic) to the link-orientied Group Address concept used by KNX. This abstraction, if required, needs to happen at a higher level, e.g. inside a logic engine. Message Bus A MQTT broker (http:\/\/en.wikipedia.org\/wiki\/MQTT) serves as the central message bus. In short, MQTT allows applications to exchange messages under so-called "topics". Applications which are interested in certain topics subscribe to them, and other applications publish messages to them. Topic Hierarchy MQTT topics are hierarchically structured, much like files and directories in a file system. Example: toplevelname\/function\/item... By convention, in mqtt-smarthome the toplevelname will always refer to a specific instance of a hardware interface or other participent in the system. The second level function defines a function like status, set etc. The subsequent levels are defined by the specific interface. For example, a KNX gateway might reflect the KNX Group Address hierarchy, which might look like knxgateway1\/status\/Kitchen\/Lights\/Front Left whereas a Homematic interface may represent device\/channel names and datapoints: hm\/status\/Light Kitchen Front Left\/LEVEL The toplevelname should be configurable so that multiple instances of interfaces can coexist on a single message bus. Status reports Interfaces report states (values from sensors, feedback from actuators) by publishing into the topic toplevelname\/status\/itemname The retain flag should be set depending on whether the status is a one-shot event (e.g. a keypress) or a measurement or other state (e.g. a temperature). One-shot events should not be retained, whereas states should have retain set. Change\/Action requests Visualization UIs and Logic Engines request state changes by publishing the requested new value into the topic toplevelname\/set\/itemname The itemname hierarchy for set should be the same as the one used for the status function tree. Messages published to this hierarchy should never have the MQTT retain flag set. Connected status Each interface should maintain a topic toplevelname\/connected which is an integer enum: 0 - disconnected from MQTT broker 1 - connected to MQTT, but disconnected from hardware 2 - connected to MQTT and hardware, i.e. fully operational It should ensure that this is set to 0 using MQTT's Last Will and Testament functionality upon a disconnect. Active get Interfaces which support active value requests from hardware devices (like KNX or Homematic) may support a hierarchy toplevelname\/get\/itemname A write of any value to that hierarchy should trigger an active read operation of the given itemname. The result of the read should be published by the interface as a status update. Messages published to this hierarchy should never have the MQTT retain flag set. Command channel Interfaces may support a command scheme which may not be representable by the normal item hierarchy. In this case, the interface may listen to toplevelname\/command to receive such commands. Messages published to this hierarchy should never have the MQTT retain flag set. QoS recommendations MQTT supports various QoS (Quality of Service) levels for messages and connections: 0 - no guaranteed delivery, no duplicates possible 1 - guaranteed delivery, duplicates possible 2 - guaranteed delivery, no duplicates possible In the context of this proposal, it is recommended that QoS 1 is best avoided due to the chance that messages may be delivered multiple times. It should be assumed that duplicated messages in the set, get and command hierarchies may cause unwanted repeated hardware interaction, and that duplicated messages in the status hierarchy may trigger unwanted repeated events in a logic layer. Message format The message format for status reports may either be a simple value or a JSON encoded object which contains the simple value and possible additional information. The message format for set operations is always a simple value. The actual type of simple value depends on the underlying hardware. It may be a boolean, a integer or floating point number, or a string. If the status message is a JSON encoded object, the object will always have at least the field val, which holds aforementioned simple value. Additional possible fields: ts - the timestamp when the value was obtained. Milliseconds since Epoch. lc - the timestamp when the value last changed. Milliseconds since Epoch. Example: { "val": 17.9, "ts": 1421792677000, "lc": 1421792677000 } Interfaces may include additional fields in the object. Those fields always should be prefixed with a mnemonic identifier denoting the interface. For example, a KNX interface may include a field "knx_src_addr" which holds the originating bus address of a KNX write message.","tags":"","url":"Resources\/Software\/MQTT\/Architecture.html"},{"title":"Tools","text":"Here a list of useful tools and resources Tools for HTML & Javascript && CSS Sandbox HTML & CSS Below, you will find: Expert Guidance Books & Reference CSS: \u00c2\u00a0 Animation \u00e3\u0083\u00bb Effects \u00e3\u0083\u00bb Frameworks \u00e3\u0083\u00bb Grid Systems Design: \u00c2\u00a0 Colors & Patterns \u00e3\u0083\u00bb Icons & Fonts \u00e3\u0083\u00bb Responsive Web Design Tools: \u00c2\u00a0 Code Playgrounds \u00e3\u0083\u00bb CSS Preprocessors \u00e3\u0083\u00bb Image Editors \u00e3\u0083\u00bb Interactive Mockups \u00e3\u0083\u00bb Vector Graphics Editors Expert Guidance These sites are the best of the best at providing compelling, current content on design and CSS coding. Highest Recommendation CSS-Tricks Other Recommended Options A List Apart Boxes and Arrows Codrops Articles & Discussions * { box-sizing: border-box } FTW Centering in the Unknown When is a stylesheet really loaded? Books & Reference These resources are more static in nature and provide a great foundation for your CSS learning. Highest Recommendation Mozilla Developer Network (MDN) Other Recommended Options A Beginner\u00e2\u0080\u0099s Guide to HTML & CSS An Advanced Guide to HTML & CSS CSS Programming Field Guide Google Style Guide Scalable and Modular Architecture for CSS CSS: Animation Animation, transitions, and motion effects have become essential for an effective user experience. Highest Recommendation Animate.css Processing Other Recommended Options Adobe Edge Ceaser - CSS Easing Animation Tool Sencha Animator Tumult Hype Articles & Discussions Loading Animations Transitional Interfaces CSS: Effects Techniques used to achieve various visual effects using CSS. Articles & Discussions 3d Ribbons Accordion with CSS3 CSS3 Patterns Library Custom Forms Image Content Slider Item Blur Effect reveal.js Rotating Billboard Shiny Knobs Text on a Circle CSS: Frameworks Front-end frameworks allow you to style and layout your UI's more efficiently. Highest Recommendation Bootstrap also useful: Bootswatch) Other Recommended Options Foundation Articles & Discussions Responsive CSS Framework Comparison Twitter Bootstrap 101 CSS: Grid Systems Grids allow you to split your screen up into blocks, similar to newspapers, allowing you to more easily control layout. Highest Recommendation Bootstrap Scaffolding Other Recommended Options 960.gs Blueprint Foundation: Grid System Gridless YAML CSS Framework YUI 2: Grids CSS Articles & Discussions Designing With Grid-Based Approach Don't Overthink It Grids Grid CSS layouts. Tell me the reasons to not use Design: Colors & Patterns An effective color palette can enhance the appeal of your site or app. Highest Recommendation Color Scheme Designer Other Recommended Options COLOURlovers CSS3 Patterns Library kuler Design: Icons & Fonts Using icon fonts in today's world of varying screen sizes and resolutions is a very effective technique. Highest Recommendation IcoMoon Other Recommended Options Entypo Font Awesome Font Squirrel Fontello Google Web Fonts Raphael.js Free Icons Articles & Discussions Beautiful web type Creating and Using a Custom Icon Font Icon Fonts Are Awesome Why And How To Use Icon Fonts Design: Responsive Web Design RWD is without a doubt one of the most overused, overhyped, and overloaded buzzwords in the history of the web. That being said, it remains a solid design technique for many situations. Articles & Discussions Cross Device Tutorial Density Converter Fluid grids, orientation & resolution independence Hardboiled CSS3 Media Queries How to Approach a Responsive Design Media Queries for Standard Devices Media Queries Multi-Device Layout Patterns Responsive Data Table Roundup Responsive Navigation Patterns Responsive Wireframes Simple Responsive Device Diagram The Goldilocks Approach Use CSS transitions to link Media Queries and JavaScript Tools: Code Playgrounds If you want to have a sandbox, where you can play around with your latest CSS ideas and tests, these resources will give you what you need. Make changes to your changes in your code and instantly see the results, all within your browser. Highest Recommendation CodePen Other Recommended Options Dabblet Articles & Discussions A Round-up On CSS Playgrounds Meet CodePen: Dribbble for Coders Tools: CSS Preprocessors Preprocessors save you time and make your CSS code more manageable through the use of variables, mix-in's (reusable groups of styles), and many other constructs. The preprocessing "language" is a superset of CSS and compiles into pure CSS for deployment. Highest Recommendation LESS Other Recommended Options Sass Articles & Discussions An Introduction to CSS Preprocessors Get into LESS The problem with CSS pre-processors Tools: Image Editors These tools are a must have for any graphic designer. They are essential for creating app icons, backgrounds, or nearly any other graphic resource. Highest Recommendation Adobe Photoshop Other Recommended Options GIMP - The GNU Image Manipulation Program Pixelmator Tools: Interactive Mockups While static images have their place, they are just not enough to convey user interactions, and things like animation. This is where interactive mockups can help get the point across. Highest Recommendation Keynote with templates: Keynote Kung-Fu Keynotopia Other Recommended Options balsamiq Loremify Quartz Composer Articles & Discussions Creating Interactive Prototypes With Keynote Facebook Home prototyped in Quartz Composer - Tutorial Tools: Vector Graphics Editors These tools seem to be more relevent now than ever. Due to the increase in the variation of screen size, resolutions, and pixel densities, more and more products require the use of scalable vector graphics. These tools are used to create such graphics. Highest Recommendation Adobe Illustrator Other Recommended Options Corel Draw Inkscape JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Bundlers Testing Frameworks QA Tools MVC Frameworks and Libraries Node-Powered CMS Frameworks Templating Engines Articles\/Posts Data Visualization Timeline Editors Utilities Files Functional Programming Reactive Programming Data Structure Date String Number Storage Color I18n And L10n Class Control Flow Routing Security Log RegExp Media Voice Command API Vision Detection Browser Detection UI Code Highlighting Loading Status Validation Keyboard Wrappers Tours And Guides Notifications Sliders Range Sliders Form Widgets Tips Modals and Popups Scroll Menu Table\/Grid Frameworks Mobile Gesture Maps Animations Image processing ES6 SDK Misc Worth Reading Other Awesome Lists Contributing Package Managers Host the javascript libraries and provide tools for fetching and packaging them. npm - npm is the package manager for javascript. Bower - A package manager for the web. component - Client package management for building better web applications. spm - Brand new static package manager. jam - A package manager using a browser-focused and RequireJS compatible repository. jspm - Frictionless browser package management. Ender - The no-library library. volo - Create front end projects from templates, add dependencies, and automate the resulting projects. Duo - Next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless. Loaders Module or loading system for JavaScript. RequireJS - A file and module loader for JavaScript. browserify - Browser-side require() the node.js way. SeaJS - A Module Loader for the Web. HeadJS - The only script in your HEAD. curl - A small, fast, extensible module loader that handles AMD, CommonJS Modules\/1.1, CSS, HTML\/text, and legacy scripts. lazyload - Tiny, dependency-free async JavaScript and CSS loader. script.js - Asyncronous JavaScript loader and dependency manager. systemjs - AMD, CJS & ES6 spec-compliant module loader. LodJS - Module loader based on AMD ESL - Module loader browser first, support lazy define and AMD. modulejs - Lightweight JavaScript module system. Bundlers browserify - Browserify lets you require('modules') in the browser by bundling up all of your dependencies. webpack - Packs CommonJs\/AMD modules for the browser. Testing Frameworks Frameworks mocha - Simple, flexible, fun javascript test framework for node.js & the browser. jasmine - DOM-less simple JavaScript testing framework. qunit - An easy-to-use JavaScript Unit Testing framework. jest - Painless Javascript Unit Testing. prova - Node & Browser test runner based on Tape and Browserify DalekJS - Automated cross browser functional testing with JavaScript Assertion chai - BDD \/ TDD assertion framework for node.js and the browser that can be paired with any testing framework. Sinon.JS - Test spies, stubs, and mocks for JavaScript. expect.js - Minimalistic BDD-style assertions for Node.JS and the browser. Coverage istanbul - Yet another JS code coverage tool. blanket - A simple code coverage library for javascript. Designed to be easy to install and use, for both browser and nodejs. JSCover - JSCover is a tool that measures code coverage for JavaScript programs. Runner phantomjs - Scriptable Headless WebKit. slimerjs - A PhantomJS-like tool running Gecko. casperjs - Navigation scripting & testing utility for PhantomJS and SlimerJS. zombie - Insanely fast, full-stack, headless browser testing using node.js. totoro - A simple and stable cross-browser testing tool. karma - Spectacular Test Runner for JavaScript. nightwatch - UI automated testing framework based on node.js and selenium webdriver. intern - A next-generation code testing stack for JavaScript. yolpo - A statement-by-statement javascript interpreter in the browser. QA Tools JSHint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code. jscs - JavaScript Code Style checker. jsfmt - For formatting, searching, and rewriting JavaScript. jsinspect - Detect copy-pasted and structurally similar code. buddy.js - Magic number detection for JavaScript. ESLint - A fully pluggable tool for identifying and reporting on patterns in JavaScript. JSLint - High-standards, strict & opinionated code quality tool, aiming to keep only good parts of the language. MVC Frameworks and Libraries angular.js - HTML enhanced for web apps. aurelia - A Javascript client framework for mobile, desktop and web. backbone - Give your JS App some Backbone with Models, Views, Collections, and Events. batman.js - The best JavaScript framework for Rails developers. ember.js - A JavaScript framework for creating ambitious web applications. meteor - An ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework. ractive - Next-generation DOM manipulation. vue - Intuitive, fast & composable MVVM for building interactive interfaces. knockout - Knockout makes it easier to create rich, responsive UIs with JavaScript. spine - Lightweight MVC library for building JavaScript applications. espresso.js - A minimal javascript library for crafting user interfaces. canjs - Can do JS, better, faster, easier. react - A library for building user interfaces. It's declarative, efficient, and extremely flexible. Works with a Virtual DOM. react-native - A framework for building native apps with React. riot - React-like library, but with very small size. thorax - Strengthening your Backbone. chaplin - An architecture for JavaScript applications using the Backbone.js library. marionette - A composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. ripple - A tiny foundation for building reactive views. rivets - Lightweight and powerful data binding + templating solution. derby - MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers. derby-awesome - A collection of awesome derby components way.js - Simple, lightweight, persistent two-way databinding. mithril.js - Mithril is a client-side MVC framework (Light-weight, Robust, Fast). jsblocks - jsblocks is better MV-ish framework. LiquidLava - Transparent MVC framework for building user interfaces. Node-Powered CMS Frameworks KeystoneJS - powerful CMS and web app framework Reaction Commerce - reactive CMS, real-time architecture and design Ghost - simple, powerful publishing platform Apostrophe - CMS with content editing and essential services We.js - framework for real time apps, sites or blogs Hatch.js - CMS platform with social features. TaracotJS - fast and minimalist CMS based on Node.js. Nodizecms - CMS for CoffeeScript lovers Cody - CMS with WSYWYG editor PencilBlue - CMS and blogging platform Templating Engines Templating engines allow you to perform string interpolation. mustache.js - Minimal templating with {{mustaches}} in JavaScript. handlebars.js - An extension to the Mustache templating language. hogan.js - A compiler for the Mustache templating language. doT - The fastest + concise javascript template engine for nodejs and browsers. dustjs - Asynchronous templates for the browser and node.js. eco - Embedded CoffeeScript templates. JavaScript-Templates - < 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. t.js - A tiny javascript templating framework in ~400 bytes gzipped. Jade - Robust, elegant, feature rich template engine for nodejs. EJS - Effective JavaScript templating. xtemplate - eXtensible Template Engine lib for node and the browser marko - A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags and CommonJS modules as compiled output. Articles and Posts The JavaScript that you should know - Article about concepts of JavaScript Functional. Data Visualization Data visualization tools for the web. d3 - A JavaScript visualization library for HTML and SVG. metrics-graphics - A library optimized for concise, principled data graphics and layouts. pykcharts.js - Well designed d3.js charting without the complexity of d3.js. three.js - JavaScript 3D library. Chart.js - Simple HTML5 Charts using the tag. paper.js - The Swiss Army Knife of Vector Graphics Scripting \u00e2\u0080\u0093 Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. peity - Progressive bar, line and pie charts. raphael - JavaScript Vector Library. echarts - Enterprise Charts. vis - Dynamic, browser-based visualization library. two.js - A renderer agnostic two-dimensional drawing api for the web. g.raphael - Charts for Rapha\u00c3\u00abl. sigma.js - A JavaScript library dedicated to graph drawing. arbor - A graph visualization library using web workers and jQuery. cubism - A D3 plugin for visualizing time series. dc.js - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js vega - A visualization grammar. processing.js - Processing.js makes your data visualizations work using web standards and without any plug-ins envisionjs - Dynamic HTML5 visualization. rickshaw - JavaScript toolkit for creating interactive real-time graphs. flot - Attractive JavaScript charts for jQuery. morris.js - Pretty time-series line graphs. nvd3 - Build re-usable charts and chart components for d3.js svg.js - A lightweight library for manipulating and animating SVG. heatmap.js - JavaScript Library for HTML5 canvas based heatmaps. jquery.sparkline - A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser. xCharts - A D3-based library for building custom charts and graphs. trianglify - Low poly style background generator with d3.js d3-cloud - Create word clouds in JavaScript. d4 - A friendly reusable charts DSL for D3. dimple.js - Easy charts for business analytics powered by d3 chartist-js - Simple responsive charts. epoch - A general purpose real-time charting library. c3 - D3-based reusable chart library. BabylonJS - A framework for building 3D games with HTML 5 and WebGL. There're also some great commercial libraries, like amchart, plotly, and highchart. Timeline TimelineJS - A Storytelling Timeline built in JavaScript. timesheet.js - JavaScript library for simple HTML5 & CSS3 time sheets. Editors ace - Ace (Ajax.org Cloud9 Editor). CodeMirror - In-browser code editor. esprima - ECMAScript parsing infrastructure for multipurpose analysis. quill - A cross browser rich text editor with an API. medium-editor - Medium.com WYSIWYG editor clone. pen - enjoy live editing (+markdown). jquery-notebook - A simple, clean and elegant text editor. Inspired by the awesomeness of Medium. bootstrap-wysiwyg - Tiny bootstrap-compatible WYSIWYG rich text editor. ckeditor-releases - The best web text editor for everyone. editor - A markdown editor. still on development. EpicEditor - An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. jsoneditor - A web-based tool to view, edit and format JSON. vim.js - JavaScript port of Vim with a persistent ~\/.vimrc Squire - HTML5 rich text editor. TinyMCE - The JavaScript Rich Text editor. trix - A rich text editor for everyday writing. By Basecamp. Files Libraries for working with files. Papa Parse - A powerful CSV library that supports parsing CSV files\/strings and also exporting to CSV. jBinary - High-level I\/O (loading, parsing, manipulating, serializing, saving) for binary files with declarative syntax for describing file types and data structures. Functional Programming Functional programming libraries to extend JavaScript\u00e2\u0080\u0099s capabilities. underscore - JavaScript's utility _ belt. lodash - A utility library delivering consistency, customization, performance, & extras. Sugar - A Javascript library for working with native objects. lazy.js - Like Underscore, but lazier. ramda - A practical functional library for Javascript programmers. mout - Modular JavaScript Utilities. mesh - Streamable data synchronization utility. Reactive Programming Reactive programming libraries to extend JavaScript\u00e2\u0080\u0099s capabilities. RxJs - The Reactive Extensions for JavaScript. Bacon - FRP (functional reactive programming) library for Javascript. Kefir - FRP library for JavaScript inspired by Bacon.js and RxJS with focus on high performance and low memory consumption. [Highland] (http:\/\/highlandjs.org\/) - Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams. Most.js - high performance FRP library. Data Structure Data structure libraries to build a more sophisticated application. immutable-js - Immutable Data Collections including Sequence, Range, Repeat, Map, OrderedMap, Set and a sparse Vector. mori - A library for using ClojureScript's persistent data structures and supporting API from the comfort of vanilla JavaScript. buckets - A complete, fully tested and documented data structure library written in JavaScript. hashmap - Simple hashmap implementation that supports any kind of keys. Date Date Libraries. moment - Parse, validate, manipulate, and display dates in javascript. moment-timezone - Timezone support for moment.js. jquery-timeago - A jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago"). timezone-js - Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data. date - Date() for humans. ms.js - Tiny millisecond conversion utility. String String Libraries. selecting - A library that allows you to access the text selected by the user underscore.string - String manipulation extensions for Underscore.js javascript library. string.js - Extra JavaScript string methods. he - A robust HTML entity encoder\/decoder written in JavaScript. multiline - Multiline strings in JavaScript. query-string - Parse and stringify URL query strings. URI.js - Javascript URL mutation library. jsurl - Lightweight URL manipulation with JavaScript. sprintf.js - A sprintf implementation. url-pattern - Easier than regex string matching patterns for urls and other strings. Turn strings into data or data into strings Number Numeral-js - A javascript library for formatting and manipulating numbers. odometer - Smoothly transitions numbers with ease. accounting.js - A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies. money.js - A tiny (1kb) javascript currency conversion library, for web & nodeJS. Fraction.js - A rational number library for JavaScript Complex.js - A complex number library for JavaScript Polynomial.js - A polynomials library for JavaScript Storage store.js - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood. localForage - Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. jStorage - jStorage is a simple key\/value database to store data on browser side. cross-storage - Cross domain local storage, with permissions. basket.js - A script and resource loader for caching & loading scripts with localStorage. bag.js - A caching script and resource loader, similar to basket.js, but with additional k\/v interface and localStorage \/ websql \/ indexedDB support. basil.js - The missing Javascript smart persistent layer. jquery-cookie - A simple, lightweight jQuery plugin for reading, writing and deleting cookies. Cookies - JavaScript Client-Side Cookie Manipulation Library. [DB.js] (https:\/\/github.com\/aaronpowell\/db.js\/) - Promise based IndexDB Wrapper library [lawnchair.js] (https:\/\/github.com\/brianleroux\/lawnchair\/) - Simple client-side JSON storage. Color randomColor - A color generator for JavaScript. chroma.js - JavaScript library for all kinds of color manipulations. color - JavaScript color conversion and manipulation library. colors - Smarter defaults for colors on the web. PleaseJS - JavaScript Library for creating random pleasing colors and color schemes. TinyColor - Fast, small color manipulation and conversion for JavaScript. [Vibrant.js] (https:\/\/github.com\/jariz\/vibrant.js\/) - Extract prominent colors from an image. I18n And L10n Localization (l10n) and internationalization (i18n) JavaScript libraries. i18next - internationalisation (i18n) with javascript the easy way. polyglot - tiny i18n helper library. babelfish - i18n with human friendly API and built in plurals support. Class ClassManager - One of the fastest and most convenient class systems in the world klass - A utility for creating expressive classes in JavaScript. augment - The world's smallest and fastest classical JavaScript inheritance pattern. Control Flow async - Async utilities for node and the browser. q - A tool for making and composing asynchronous promises in JavaScript. step - An async control-flow library that makes stepping through logic easy. contra - Asynchronous flow control with a functional taste to it. Bluebird - fully featured promise library with focus on innovative features and performance. when - A solid, fast Promises\/A+ and when() implementation, plus other async goodies. ObjectEventTarget - Provide a prototype that add support to event listeners (with same behavior of EventTarget from DOMElements available on browsers). Routing director - A tiny and isomorphic URL router for JavaScript. page.js - Micro client-side router inspired by the Express router (~1200 bytes). pathjs - Simple, lightweight routing for web browsers. crossroads - JavaScript Routes. davis.js - RESTful degradable JavaScript routing using pushState. Security DOMPurify - A DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. js-xss - Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist. Log log - Console.log with style. Conzole - A debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page. console.log-wrapper - Log to the console in any browser with clarity. loglevel - Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods. minilog \u00e2\u0080\u0093 Lightweight client & server-side logging with Stream-API backends RegExp RegEx101 - Online regex tester and debugger for JavaScript. Also supports Python, PHP and PCRE. RegExr - HTML\/JS based tool for creating, testing, and learning about Regular Expressions. RegExpBuilder - Create regular expressions using chained methods. Media Ion.Sound - Simple sounds on any web page Voice Command annyang - A JavaScript library for adding voice commands to your site, using speech recognition. voix.js - A JavaScript library to add voice commands to your sites, apps or games. API bottleneck - A powerful rate limiter that makes throttling easy. oauth-signature-js - JavaScript OAuth 1.0a signature generator for node and the browser. amygdala - RESTful HTTP client for JavaScript powered web applications. jquery.rest - A jQuery plugin for easy consumption of RESTful APIs. Vision Detection tracking.js - A modern approach for Computer Vision on the web. ocrad.js - OCR in Javascript via Emscripten. Browser Detection bowser - a browser detector Code highlighting Highlight.js - Javascript syntax highlighter. PrismJS - Lightweight, robust, elegant syntax highlighting. Loading Status Libraries for indicate load status. Mprogress.js - Create Google Material Design progress linear bars. NProgress - Slim progress bars for Ajax'y applications. Spin.js - A spinning activity indicator. progress.js - Create and manage progress bar for every objects on the page. progressbar.js - Beautiful and responsive progress bars with animated SVG paths. pace - Automatically add a progress bar to your site. topbar - Tiny & beautiful site-wide progress indicator. nanobar - Very lightweight progress bars. No jQuery. PageLoadingEffects - Modern ways of revealing new content using SVG animations. SpinKit - A collection of loading indicators animated with CSS. Ladda - Buttons with built-in loading indicators. css-loaders - A collection of loading spinners animated with CSS. Besides libraries, there're Collection on Codepen, and generators like Ajaxload, Preloaders and CSSLoad. Validation Parsley.js - Validate your forms, frontend, without writing a single line of javascript. jquery-validation - jQuery Validation Plugin. validator.js - String validation and sanitization. validate.js - Lightweight JavaScript form validation library inspired by CodeIgniter. validatr - Cross Browser HTML5 Form Validation. BootstrapValidator - The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3. is.js - Check types, regexps, presence, time and more. FieldVal - multipurpose validation library. Supports both sync and async validation. Keyboard Wrappers mousetrap - Simple library for handling keyboard shortcuts in Javascript. keymaster - A simple micro-library for defining and dispatching keyboard shortcuts. Keypress - A keyboard input capturing utility in which any key can be a modifier key. KeyboardJS - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts. jquery.hotkeys - jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination. jwerty - Awesome handling of keyboard events. Tours And Guides intro.js - A better way for new feature introduction and step-by-step users guide for your website and project. shepherd - Guide your users through a tour of your app. bootstrap-tour - Quick and easy product tours with Twitter Bootstrap Popovers. tourist - Simple, flexible tours for your app. chardin.js - Simple overlay instructions for your apps. pageguide - An interactive guide for web page elements using jQuery and CSS3. hopscotch - A framework to make it easy for developers to add product tours to their pages. joyride - jQuery feature tour plugin. focusable - Set a spotlight focus on DOM element adding a overlay layer to the rest of the page. Notifications messenger - Growl-style alerts and messages for your app. noty - jQuery notification plugin. pnotify - JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft. toastr - Simple javascript toast notifications. humane-js - A simple, modern, browser notification system. smoke.js - Framework-agnostic styled alert system for javascript. Sliders Swiper - Mobile touch slider and framework with hardware accelerated transitions. slick - The last carousel you'll ever need. slidesJs - Is a ressponsive slideshow plug-in for JQuery(1.7.1+) with features like touch and CSS3 transitions FlexSlider - An awesome, fully responsive jQuery slider plugin. unslider - The simplest jQuery slider there is. colorbox - A light-weight, customizable lightbox plugin for jQuery. fancyBox - A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. sly - JavaScript library for one-directional scrolling with item based navigation support. vegas - A jQuery plugin to add beautiful fullscreen backgrounds to your webpages. It even allows Slideshows. Sequence - CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications. baguetteBox.js - Simple and easy to use lightbox script written in pure JavaScript. reveal.js - A framework for easily creating beautiful presentations using HTML. PhotoSwipe - JavaScript image gallery for mobile and desktop, modular, framework independent. jcSlider - A responsive slider jQuery plugin with CSS animations. basic-jquery-slider - Simple to use, simple to theme, simple to customise. unslider - The simplest jQuery slider there is. jQuery.adaptive-slider - A jQuery plugin for a slider with adaptive colored figcaption and navigation. slidr - add some slide effects. Flickity - Touch, responsive, flickable galleries. Range Sliders Ion.RangeSlider - Powerful and easily customizable range slider with many options and skin support. jQRangeSlider - A javascript slider selector that supports dates. noUiSlider - A lightweight, highly customizable range slider without bloat. rangeslider.js - HTML5 input range slider element polyfill. Form Widgets Input typeahead.js - A fast and fully-featured autocomplete library. tag-it - A jQuery UI plugin to handle multi-tag fields as well as tag suggestions\/autocomplete. At.js - Add Github like mentions autocomplete to your application. Placeholders.js - A JavaScript polyfill for the HTML5 placeholder attribute. fancyInput - Makes typing in input fields fun with CSS3 effects. jQuery-Tags-Input - Magically convert a simple text input into a cool tag list with this jQuery plugin. vanilla-masker - A pure javascript mask input. Ion.CheckRadio - jQuery plugin for styling checkboxes and radio-buttons. With skin support. Calendar pickadate.js - The mobile-friendly, responsive, and lightweight jQuery date & time input picker. bootstrap-datepicker - A datepicker for @twitter bootstrap forked from Stefan Petre's (of eyecon.ro), improvements by @eternicode. Pikaday - A refreshing JavaScript Datepicker \u00e2\u0080\u0094 lightweight, no dependencies, modular CSS. fullcalendar - Full-sized drag & drop event calendar (jQuery plugin). rome - A customizable date (and time) picker. Dependency free, opt-in UI. datedropper - datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields. Select selectize.js - Selectize is the hybrid of a textbox and select box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc. select2 - a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. chosen - A library for making long, unwieldy select boxes more friendly. File Uploader jQuery-File-Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. dropzone - Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars. flow.js - A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable\/restartable file uploads via the HTML5 File API. fine-uploader - Multiple file upload plugin with progress-bar, drag-and-drop, direct-to-S3 uploading. FileAPI - A set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF. plupload - A JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash. Other form - jQuery Form Plugin. Garlic.js - Automatically persist your forms' text and select field values locally, until the form is submitted. Countable - A JavaScript function to add live paragraph-, word- and character-counting to an HTML element. card - Make your credit card form better in one line of code. stretchy - Form element autosizing, the way it should be. list.js - Adds search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. http:\/\/www.listjs.com Tips tipsy - Facebook-style tooltips plugin for jQuery. opentip - An open source javascript tooltip based on the prototype framework. qTip2 - Pretty powerful tooltips. tooltipster - A jQuery tooltip plugin. simptip - A simple CSS tooltip made with Sass. jquery-popup-overlay - jQuery plugin for responsive and accessible modal windows and tooltips. Modals and Popups Magnific-Popup - Light and responsive lightbox script with focus on performance. jquery-popbox - jQuery PopBox UI Element. jquery.avgrund.js - A jQuery plugin with new modal concept for popups. vex - A modern dialog library which is highly configurable and easy to style. bootstrap-modal - Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. css-modal - A modal built out of pure CSS. jquery-popup-overlay - jQuery plugin for responsive and accessible modal windows and tooltips. Scroll scrollMonitor - A simple and fast API to monitor elements as you scroll. headroom - Give your pages some headroom. Hide your header until you need it. onepage-scroll - Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin. iscroll - iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. skrollr - Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. parallax - Parallax Engine that reacts to the orientation of a smart device. stellar.js - Parallax scrolling made easy. plax - jQuery powered parallaxing. jparallax - jQuery plugin for creating interactive parallax effect. fullPage - A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). ScrollMenu - A new interface to replace old boring scrollbar. Menu jQuery-menu-aim - jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's. [jQuery contextMenu] (https:\/\/github.com\/medialize\/jQuery-contextMenu) - contextMenu manager. Slideout - A responsive touch slideout navigation menu for mobile web apps. Slide and swipe - A sliding swipe menu that works with touchSwipe library. Table\/Grid jTable - A jQuery plugin to create AJAX based CRUD tables. DataTables - (jQuery plug-in) It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. floatThead - (jQuery plug-in) lock any table's header while scrolling within the body. Works on any table and requires no custom html or css. Masonry - A cascading grid layout library. Packery - A grid layout library that uses a bin-packing algorithm. Useable for draggable layouts. Isotope - A filterable, sortable, grid layout library. Can implement Masonry, Packery, and other layouts. Frameworks Semantic UI - UI Kit with lots of themes and elements Gesture hammer.js - A javascript library for multi-touch gestures. touchemulator - Emulate touch input on your desktop. [Dragula] (https:\/\/github.com\/bevacqua\/dragula\/) - Drag and drop so simple it hurts Maps Leaflet - JavaScript library for mobile-friendly interactive maps. Cesium - Open Source WebGL virtual globe and map engine. gmaps - The easiest way to use Google Maps. polymaps - A free JavaScript library for making dynamic, interactive maps in modern web browsers. kartograph.js - Open source JavaScript renderer for Kartograph SVG maps. mapbox.js - Mapbox JavaScript API, a Leaflet Plugin. jqvmap - jQuery Vector Map Library. OpenLayers3 - A high-performance, feature-packed library for all your mapping needs. Video\/Audio prettyembed.js - Prettier embeds for your YouTubes - with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support. html5media - Enables and tags in all major browsers. http:\/\/html5media.info\/ Play-em JS - Play'em is a javascript component that manages a music\/video track queue and plays a sequence of songs by embedding several players in a HTML DIV including Youtube, Soundcloud and Vimeo. polyplayer - Rule YouTube, Soundcloud and Vimeo player with one API flowplayer - The HTML5 video player for the web http:\/\/flowplayer.org\/ mediaelement - HTML5 or player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers. http:\/\/mediaelementjs.com\/ SoundJS - A library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers. Animations velocity - Accelerated JavaScript animation. jquery.transit - Super-smooth CSS3 transformations and transitions for jQuery. impess.js - Make Prezi-like presentations with CSS3 transformations\/transitions in an HTML document. bounce.js - Create tasty CSS3 powered animations in no time. GreenSock-JS - High-performance HTML5 animations that work in all major browsers. TransitionEnd - TransitionEnd is an agnostic and cross-browser library to work with transitionend event. Dynamic.js - Javascript library to create physics-based CSS animations. Image Processing lena.js - A Library for image processing with filters and util functions. pica - High quality image resize (with fast Lanczos filter, implemented in pure JS). cropper - A simple jQuery image cropping plugin. ES6 es6features - Overview of ECMAScript 6 features. es6-features - ECMAScript 6: Feature Overview & Comparison ECMAScript 6 compatibility table - Compatibility tables for all ECMAScript 6 features on a variety of environments. Babel (Formerly 6to5) - Turn ES6+ code into vanilla ES5 with no runtime. Traceur compiler - ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more. SDK javascript-sdk-design - Javascript SDK design guide extracted from work and personal experience Misc echo - Lazy-loading images with data-* attributes. picturefill - A responsive image polyfill for , srcset, sizes platform.js - A platform detection library that works on nearly all JavaScript platforms. json3 - A modern JSON implementation compatible with nearly all JavaScript platforms. Logical Or Not - A game about JavaScript specificities. BitSet.js - A JavaScript Bit-Vector implementation Worth Reading braziljs\/js-the-right-way JSbooks Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base. Other Awesome Lists emijrp\/awesome-awesome bayandin\/awesome-awesomeness sindresorhus\/awesome jnv\/list gianarb\/angularjs peterkokot\/awesome-dojo addyosmani\/es6-tools ericdouglas\/ES6-Learning obetomuniz\/awesome-webcomponents willianjusten\/awesome-svg davidsonfellipe\/awesome-wpo instanceofpro\/awesome-backbone enaqx\/awesome-react bolshchikov\/js-must-watch peterkokot\/awesome-jquery Contributing Contributions welcome! Read the contribution guidelines first. License To the extent possible under law, chencheng has waived all copyright and related or neighboring rights to this work.","tags":"","url":"Resources\/Software\/Tools\/index.html"},{"title":"Utils API","text":"jQuery Please find a built-in documentation here Times and Dates The Control Freak SDK provides a general purpose API dealing with times and dates. This API is implemented by Momentjs Strings and Numbers The Control Freak SDK provides a general purpose API dealing with arrays, numbers and strings. This API is implemented by lodash Lodash Array _.chunk _.compact _.difference _.drop _.dropRight _.dropRightWhile _.dropWhile _.fill _.findIndex _.findLastIndex _.first _.flatten _.flattenDeep _.head -> first _.indexOf _.initial _.intersection _.last _.lastIndexOf _.object -> zipObject _.pull _.pullAt _.remove _.rest _.slice _.sortedIndex _.sortedLastIndex _.tail -> rest _.take _.takeRight _.takeRightWhile _.takeWhile _.union _.uniq _.unique -> uniq _.unzip _.without _.xor _.zip _.zipObject Chain _ _.chain _.tap _.thru _.prototype.chain _.prototype.commit _.prototype.plant _.prototype.reverse _.prototype.run -> value _.prototype.toJSON -> value _.prototype.toString _.prototype.value _.prototype.valueOf -> value Collection _.all -> every _.any -> some _.at _.collect -> map _.contains -> includes _.countBy _.detect -> find _.each -> forEach _.eachRight -> forEachRight _.every _.filter _.find _.findLast _.findWhere _.foldl -> reduce _.foldr -> reduceRight _.forEach _.forEachRight _.groupBy _.include -> includes _.includes _.indexBy _.inject -> reduce _.invoke _.map _.partition _.pluck _.reduce _.reduceRight _.reject _.sample _.select -> filter _.shuffle _.size _.some _.sortBy _.sortByAll _.sortByOrder _.where Date _.now Function _.after _.ary _.backflow -> flowRight _.before _.bind _.bindAll _.bindKey _.compose -> flowRight _.curry _.curryRight _.debounce _.defer _.delay _.flow _.flowRight _.memoize _.negate _.once _.partial _.partialRight _.rearg _.restParam _.spread _.throttle _.wrap Lang _.clone _.cloneDeep _.isArguments _.isArray _.isBoolean _.isDate _.isElement _.isEmpty _.isEqual _.isError _.isFinite _.isFunction _.isMatch _.isNaN _.isNative _.isNull _.isNumber _.isObject _.isPlainObject _.isRegExp _.isString _.isTypedArray _.isUndefined _.toArray _.toPlainObject Math _.add _.max _.min _.sum Number _.inRange _.random Object _.assign _.create _.defaults _.extend -> assign _.findKey _.findLastKey _.forIn _.forInRight _.forOwn _.forOwnRight _.functions _.has _.invert _.keys _.keysIn _.mapValues _.merge _.methods -> functions _.omit _.pairs _.pick _.result _.transform _.values _.valuesIn String _.camelCase _.capitalize _.deburr _.endsWith _.escape _.escapeRegExp _.kebabCase _.pad _.padLeft _.padRight _.parseInt _.repeat _.snakeCase _.startCase _.startsWith _.template _.trim _.trimLeft _.trimRight _.trunc _.unescape _.words Utility _.attempt _.callback _.constant _.identity _.iteratee -> callback _.matches _.matchesProperty _.mixin _.noConflict _.noop _.property _.propertyOf _.range _.runInContext _.times _.uniqueId Methods _.templateSettings.imports._ Properties _.VERSION _.support _.support.argsTag _.support.enumErrorProps _.support.enumPrototypes _.support.funcDecomp _.support.funcNames _.support.nodeTag _.support.nonEnumShadows _.support.nonEnumStrings _.support.ownLast _.support.spliceObjects _.support.unindexedChars _.templateSettings _.templateSettings.escape _.templateSettings.evaluate _.templateSettings.imports _.templateSettings.interpolate _.templateSettings.variable \u00e2\u0080\u009cArray\u00e2\u0080\u009d Methods _.chunk(array, [size=1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array of elements split into groups the length of size. If collection can't be split evenly, the final chunk will be the remaining elements. Arguments array (Array): The array to process. [size=1] (number): The length of each chunk. Returns (Array): Returns the new array containing chunks. Example _.chunk(['a', 'b', 'c', 'd'], 2); \/\/ => [['a', 'b'], ['c', 'd']] _.chunk(['a', 'b', 'c', 'd'], 3); \/\/ => [['a', 'b', 'c'], ['d']] _.compact(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array with all falsey values removed. The values false, null, 0, "", undefined, and NaN are falsey. Arguments array (Array): The array to compact. Returns (Array): Returns the new array of filtered values. Example _.compact([0, 1, false, 2, '', 3]); \/\/ => [1, 2, 3] _.difference(array, [values]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array excluding all values of the provided arrays using SameValueZero for equality comparisons. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Arguments array (Array): The array to inspect. [values] (...Array): The arrays of values to exclude. Returns (Array): Returns the new array of filtered values. Example _.difference([1, 2, 3], [4, 2]); \/\/ => [1, 3] _.drop(array, [n=1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with n elements dropped from the beginning. Arguments array (Array): The array to query. [n=1] (number): The number of elements to drop. Returns (Array): Returns the slice of array. Example _.drop([1, 2, 3]); \/\/ => [2, 3] _.drop([1, 2, 3], 2); \/\/ => [3] _.drop([1, 2, 3], 5); \/\/ => [] _.drop([1, 2, 3], 0); \/\/ => [1, 2, 3] _.dropRight(array, [n=1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with n elements dropped from the end. Arguments array (Array): The array to query. [n=1] (number): The number of elements to drop. Returns (Array): Returns the slice of array. Example _.dropRight([1, 2, 3]); \/\/ => [1, 2] _.dropRight([1, 2, 3], 2); \/\/ => [1] _.dropRight([1, 2, 3], 5); \/\/ => [] _.dropRight([1, 2, 3], 0); \/\/ => [1, 2, 3] _.dropRightWhile(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array excluding elements dropped from the end. Elements are dropped until predicate returns falsey. The predicate is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that match the properties of the given object, else false. Arguments array (Array): The array to query. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (Array): Returns the slice of array. Example _.dropRightWhile([1, 2, 3], function(n) { return n > 1; }); \/\/ => [1] var users = [ { 'user': 'barney', 'active': true }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': false } ]; \/\/ using the `_.matches` callback shorthand _.pluck(_.dropRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user'); \/\/ => ['barney', 'fred'] \/\/ using the `_.matchesProperty` callback shorthand _.pluck(_.dropRightWhile(users, 'active', false), 'user'); \/\/ => ['barney'] \/\/ using the `_.property` callback shorthand _.pluck(_.dropRightWhile(users, 'active'), 'user'); \/\/ => ['barney', 'fred', 'pebbles'] _.dropWhile(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array excluding elements dropped from the beginning. Elements are dropped until predicate returns falsey. The predicate is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The array to query. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (Array): Returns the slice of array. Example _.dropWhile([1, 2, 3], function(n) { return n < 3; }); \/\/ => [3] var users = [ { 'user': 'barney', 'active': false }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': true } ]; \/\/ using the `_.matches` callback shorthand _.pluck(_.dropWhile(users, { 'user': 'barney', 'active': false }), 'user'); \/\/ => ['fred', 'pebbles'] \/\/ using the `_.matchesProperty` callback shorthand _.pluck(_.dropWhile(users, 'active', false), 'user'); \/\/ => ['pebbles'] \/\/ using the `_.property` callback shorthand _.pluck(_.dropWhile(users, 'active'), 'user'); \/\/ => ['barney', 'fred', 'pebbles'] _.fill(array, value, [start=0], [end=array.length]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Fills elements of array with value from start up to, but not including, end. Note: This method mutates array. Arguments array (Array): The array to fill. value (*): The value to fill array with. [start=0] (number): The start position. [end=array.length] (number): The end position. Returns (Array): Returns array. Example var array = [1, 2, 3]; _.fill(array, 'a'); console.log(array); \/\/ => ['a', 'a', 'a'] _.fill(Array(3), 2); \/\/ => [2, 2, 2] _.fill([4, 6, 8], '*', 1, 2); \/\/ => [4, '*', 8] _.findIndex(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 This method is like _.find except that it returns the index of the first element predicate returns truthy for instead of the element itself. If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The array to search. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (number): Returns the index of the found element, else -1. Example var users = [ { 'user': 'barney', 'active': false }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': true } ]; _.findIndex(users, function(chr) { return chr.user == 'barney'; }); \/\/ => 0 \/\/ using the `_.matches` callback shorthand _.findIndex(users, { 'user': 'fred', 'active': false }); \/\/ => 1 \/\/ using the `_.matchesProperty` callback shorthand _.findIndex(users, 'active', false); \/\/ => 0 \/\/ using the `_.property` callback shorthand _.findIndex(users, 'active'); \/\/ => 2 _.findLastIndex(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 This method is like _.findIndex except that it iterates over elements of collection from right to left. If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The array to search. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (number): Returns the index of the found element, else -1. Example var users = [ { 'user': 'barney', 'active': true }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': false } ]; _.findLastIndex(users, function(chr) { return chr.user == 'pebbles'; }); \/\/ => 2 \/\/ using the `_.matches` callback shorthand _.findLastIndex(users, { 'user': 'barney', 'active': true }); \/\/ => 0 \/\/ using the `_.matchesProperty` callback shorthand _.findLastIndex(users, 'active', false); \/\/ => 2 \/\/ using the `_.property` callback shorthand _.findLastIndex(users, 'active'); \/\/ => 0 _.first(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Gets the first element of array. Aliases _.head Arguments array (Array): The array to query. Returns (*): Returns the first element of array. Example _.first([1, 2, 3]); \/\/ => 1 _.first([]); \/\/ => undefined _.flatten(array, [isDeep]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Flattens a nested array. If isDeep is true the array is recursively flattened, otherwise it is only flattened a single level. Arguments array (Array): The array to flatten. [isDeep] (boolean): Specify a deep flatten. Returns (Array): Returns the new flattened array. Example _.flatten([1, [2, 3, [4]]]); \/\/ => [1, 2, 3, [4]] \/\/ using `isDeep` _.flatten([1, [2, 3, [4]]], true); \/\/ => [1, 2, 3, 4] _.flattenDeep(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Recursively flattens a nested array. Arguments array (Array): The array to recursively flatten. Returns (Array): Returns the new flattened array. Example _.flattenDeep([1, [2, 3, [4]]]); \/\/ => [1, 2, 3, 4] _.indexOf(array, value, [fromIndex=0]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Gets the index at which the first occurrence of value is found in array using SameValueZero for equality comparisons. If fromIndex is negative, it is used as the offset from the end of array. If array is sorted providing true for fromIndex performs a faster binary search. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Arguments array (Array): The array to search. value (*): The value to search for. [fromIndex=0] (boolean|number): The index to search from or true to perform a binary search on a sorted array. Returns (number): Returns the index of the matched value, else -1. Example _.indexOf([1, 2, 1, 2], 2); \/\/ => 1 \/\/ using `fromIndex` _.indexOf([1, 2, 1, 2], 2, 2); \/\/ => 3 \/\/ performing a binary search _.indexOf([1, 1, 2, 2], 2, true); \/\/ => 2 _.initial(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Gets all but the last element of array. Arguments array (Array): The array to query. Returns (Array): Returns the slice of array. Example _.initial([1, 2, 3]); \/\/ => [1, 2] _.intersection([arrays]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array of unique values in all provided arrays using SameValueZero for equality comparisons. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Arguments [arrays] (...Array): The arrays to inspect. Returns (Array): Returns the new array of shared values. Example _.intersection([1, 2], [4, 2], [2, 1]); \/\/ => [2] _.last(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Gets the last element of array. Arguments array (Array): The array to query. Returns (*): Returns the last element of array. Example _.last([1, 2, 3]); \/\/ => 3 _.lastIndexOf(array, value, [fromIndex=array.length-1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 This method is like _.indexOf except that it iterates over elements of array from right to left. Arguments array (Array): The array to search. value (*): The value to search for. [fromIndex=array.length-1] (boolean|number): The index to search from or true to perform a binary search on a sorted array. Returns (number): Returns the index of the matched value, else -1. Example _.lastIndexOf([1, 2, 1, 2], 2); \/\/ => 3 \/\/ using `fromIndex` _.lastIndexOf([1, 2, 1, 2], 2, 2); \/\/ => 1 \/\/ performing a binary search _.lastIndexOf([1, 1, 2, 2], 2, true); \/\/ => 3 _.pull(array, [values]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Removes all provided values from array using SameValueZero for equality comparisons. Notes: Unlike _.without, this method mutates array. * `SameValueZero` comparisons are like strict equality comparisons, e.g. `===`, except that `NaN` matches `NaN`. See the [ES spec](https:\/\/people.mozilla.org\/~jorendorff\/es6-draft.html#sec-samevaluezero) for more details. Arguments array (Array): The array to modify. [values] (...*): The values to remove. Returns (Array): Returns array. Example var array = [1, 2, 3, 1, 2, 3]; _.pull(array, 2, 3); console.log(array); \/\/ => [1, 1] _.pullAt(array, [indexes]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Removes elements from array corresponding to the given indexes and returns an array of the removed elements. Indexes may be specified as an array of indexes or as individual arguments. Note: Unlike _.at, this method mutates array. Arguments array (Array): The array to modify. [indexes] (...(number|number[]): The indexes of elements to remove, specified as individual indexes or arrays of indexes. Returns (Array): Returns the new array of removed elements. Example var array = [5, 10, 15, 20]; var evens = _.pullAt(array, 1, 3); console.log(array); \/\/ => [5, 15] console.log(evens); \/\/ => [10, 20] _.remove(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Removes all elements from array that predicate returns truthy for and returns an array of the removed elements. The predicate is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Note: Unlike _.filter, this method mutates array. Arguments array (Array): The array to modify. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (Array): Returns the new array of removed elements. Example var array = [1, 2, 3, 4]; var evens = _.remove(array, function(n) { return n % 2 == 0; }); console.log(array); \/\/ => [1, 3] console.log(evens); \/\/ => [2, 4] _.rest(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Gets all but the first element of array. Aliases _.tail Arguments array (Array): The array to query. Returns (Array): Returns the slice of array. Example _.rest([1, 2, 3]); \/\/ => [2, 3] _.slice(array, [start=0], [end=array.length]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array from start up to, but not including, end. Note: This function is used instead of Array#slice to support node lists in IE < 9 and to ensure dense arrays are returned. Arguments array (Array): The array to slice. [start=0] (number): The start position. [end=array.length] (number): The end position. Returns (Array): Returns the slice of array. _.sortedIndex(array, value, [iteratee=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Uses a binary search to determine the lowest index at which value should be inserted into array in order to maintain its sort order. If an iteratee function is provided it is invoked for value and each element of array to compute their sort ranking. The iteratee is bound to thisArg and invoked with one argument; (value). If a property name is provided for iteratee the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for iteratee the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The sorted array to inspect. value (*): The value to evaluate. [iteratee=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of iteratee. Returns (number): Returns the index at which value should be inserted into array. Example _.sortedIndex([30, 50], 40); \/\/ => 1 _.sortedIndex([4, 4, 5, 5], 5); \/\/ => 2 var dict = { 'data': { 'thirty': 30, 'forty': 40, 'fifty': 50 } }; \/\/ using an iteratee function _.sortedIndex(['thirty', 'fifty'], 'forty', function(word) { return this.data[word]; }, dict); \/\/ => 1 \/\/ using the `_.property` callback shorthand _.sortedIndex([{ 'x': 30 }, { 'x': 50 }], { 'x': 40 }, 'x'); \/\/ => 1 _.sortedLastIndex(array, value, [iteratee=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 This method is like _.sortedIndex except that it returns the highest index at which value should be inserted into array in order to maintain its sort order. Arguments array (Array): The sorted array to inspect. value (*): The value to evaluate. [iteratee=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of iteratee. Returns (number): Returns the index at which value should be inserted into array. Example _.sortedLastIndex([4, 4, 5, 5], 5); \/\/ => 4 _.take(array, [n=1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with n elements taken from the beginning. Arguments array (Array): The array to query. [n=1] (number): The number of elements to take. Returns (Array): Returns the slice of array. Example _.take([1, 2, 3]); \/\/ => [1] _.take([1, 2, 3], 2); \/\/ => [1, 2] _.take([1, 2, 3], 5); \/\/ => [1, 2, 3] _.take([1, 2, 3], 0); \/\/ => [] _.takeRight(array, [n=1]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with n elements taken from the end. Arguments array (Array): The array to query. [n=1] (number): The number of elements to take. Returns (Array): Returns the slice of array. Example _.takeRight([1, 2, 3]); \/\/ => [3] _.takeRight([1, 2, 3], 2); \/\/ => [2, 3] _.takeRight([1, 2, 3], 5); \/\/ => [1, 2, 3] _.takeRight([1, 2, 3], 0); \/\/ => [] _.takeRightWhile(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with elements taken from the end. Elements are taken until predicate returns falsey. The predicate is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The array to query. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (Array): Returns the slice of array. Example _.takeRightWhile([1, 2, 3], function(n) { return n > 1; }); \/\/ => [2, 3] var users = [ { 'user': 'barney', 'active': true }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': false } ]; \/\/ using the `_.matches` callback shorthand _.pluck(_.takeRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user'); \/\/ => ['pebbles'] \/\/ using the `_.matchesProperty` callback shorthand _.pluck(_.takeRightWhile(users, 'active', false), 'user'); \/\/ => ['fred', 'pebbles'] \/\/ using the `_.property` callback shorthand _.pluck(_.takeRightWhile(users, 'active'), 'user'); \/\/ => [] _.takeWhile(array, [predicate=_.identity], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a slice of array with elements taken from the beginning. Elements are taken until predicate returns falsey. The predicate is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for predicate the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for predicate the created _.matches style callback returns true for elements that have the properties of the given object, else false. Arguments array (Array): The array to query. [predicate=_.identity] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of predicate. Returns (Array): Returns the slice of array. Example _.takeWhile([1, 2, 3], function(n) { return n < 3; }); \/\/ => [1, 2] var users = [ { 'user': 'barney', 'active': false }, { 'user': 'fred', 'active': false}, { 'user': 'pebbles', 'active': true } ]; \/\/ using the `_.matches` callback shorthand _.pluck(_.takeWhile(users, { 'user': 'barney', 'active': false }), 'user'); \/\/ => ['barney'] \/\/ using the `_.matchesProperty` callback shorthand _.pluck(_.takeWhile(users, 'active', false), 'user'); \/\/ => ['barney', 'fred'] \/\/ using the `_.property` callback shorthand _.pluck(_.takeWhile(users, 'active'), 'user'); \/\/ => [] _.union([arrays]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array of unique values, in order, of the provided arrays using SameValueZero for equality comparisons. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Arguments [arrays] (...Array): The arrays to inspect. Returns (Array): Returns the new array of combined values. Example _.union([1, 2], [4, 2], [2, 1]); \/\/ => [1, 2, 4] _.uniq(array, [isSorted], [iteratee], [thisArg]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates a duplicate-value-free version of an array using SameValueZero for equality comparisons. Providing true for isSorted performs a faster search algorithm for sorted arrays. If an iteratee function is provided it is invoked for each value in the array to generate the criterion by which uniqueness is computed. The iteratee is bound to thisArg and invoked with three arguments: (value, index, array). If a property name is provided for iteratee the created _.property style callback returns the property value of the given element. If a value is also provided for thisArg the created _.matchesProperty style callback returns true for elements that have a matching property value, else false. If an object is provided for iteratee the created _.matches style callback returns true for elements that have the properties of the given object, else false. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Aliases _.unique Arguments array (Array): The array to inspect. [isSorted] (boolean): Specify the array is sorted. [iteratee] (Function|Object|string): The function invoked per iteration. [thisArg] (*): The this binding of iteratee. Returns (Array): Returns the new duplicate-value-free array. Example _.uniq([1, 2, 1]); \/\/ => [1, 2] \/\/ using `isSorted` _.uniq([1, 1, 2], true); \/\/ => [1, 2] \/\/ using an iteratee function _.uniq([1, 2.5, 1.5, 2], function(n) { return this.floor(n); }, Math); \/\/ => [1, 2.5] \/\/ using the `_.property` callback shorthand _.uniq([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'); \/\/ => [{ 'x': 1 }, { 'x': 2 }] _.unzip(array) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 This method is like _.zip except that it accepts an array of grouped elements and creates an array regrouping the elements to their pre-_.zip configuration. Arguments array (Array): The array of grouped elements to process. Returns (Array): Returns the new array of regrouped elements. Example var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]); \/\/ => [['fred', 30, true], ['barney', 40, false]] _.unzip(zipped); \/\/ => [['fred', 'barney'], [30, 40], [true, false]] _.without(array, [values]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array excluding all provided values using SameValueZero for equality comparisons. Note: SameValueZero comparisons are like strict equality comparisons, e.g. ===, except that NaN matches NaN. See the ES spec for more details. Arguments array (Array): The array to filter. [values] (...*): The values to exclude. Returns (Array): Returns the new array of filtered values. Example _.without([1, 2, 1, 3], 1, 2); \/\/ => [3] _.xor([arrays]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array that is the symmetric difference of the provided arrays. See Wikipedia for more details. Arguments [arrays] (...Array): The arrays to inspect. Returns (Array): Returns the new array of values. Example _.xor([1, 2], [4, 2]); \/\/ => [1, 4] _.zip([arrays]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 Creates an array of grouped elements, the first of which contains the first elements of the given arrays, the second of which contains the second elements of the given arrays, and so on. Arguments [arrays] (...Array): The arrays to process. Returns (Array): Returns the new array of grouped elements. Example _.zip(['fred', 'barney'], [30, 40], [true, false]); \/\/ => [['fred', 30, true], ['barney', 40, false]] _.zipObject(props, [values=[]]) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] \u00e2\u0093\u0083 The inverse of _.pairs; this method returns an object composed from arrays of property names and values. Provide either a single two dimensional array, e.g. [[key1, value1], [key2, value2]] or two arrays, one of property names and one of corresponding values. Aliases _.object Arguments props (Array): The property names. [values=[]] (Array): The property values. Returns (Object): Returns the new object. Example _.zipObject([['fred', 30], ['barney', 40]]); \/\/ => { 'fred': 30, 'barney': 40 } _.zipObject(['fred', 'barney'], [30, 40]); \/\/ => { 'fred': 30, 'barney': 40 } \u00e2\u0080\u009cChain\u00e2\u0080\u009d Methods _(value) # \u00e2\u0093\u0088 [\u00e2\u0093\u0089][1] Creates a lodash object which wraps value to enable implicit chaining. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that return a boolean or single value will automati","tags":"","url":"Resources\/Utils_API\/index.html"}]} |