Showing preview only (3,529K chars total). Download the full file or copy to clipboard to get everything.
Repository: Semantic-Org/Semantic-UI-Docs
Branch: master
Commit: b11907194e22
Files: 213
Total size: 3.3 MB
Directory structure:
gitextract_fdrfmkx0/
├── .gitignore
├── .jshintrc
├── README.md
├── docpad.coffee
├── package.json
└── server/
├── documents/
│ ├── 404.html.eco
│ ├── behaviors/
│ │ ├── api.html.eco
│ │ ├── form.html.eco
│ │ ├── state.html.eco
│ │ └── visibility.html.eco
│ ├── cla.html.eco
│ ├── collections/
│ │ ├── breadcrumb.html.eco
│ │ ├── form.html.eco
│ │ ├── grid.html.eco
│ │ ├── menu.html.eco
│ │ ├── message.html.eco
│ │ └── table.html.eco
│ ├── elements/
│ │ ├── button.html.eco
│ │ ├── container.html.eco
│ │ ├── divider.html.eco
│ │ ├── flag.html.eco
│ │ ├── header.html.eco
│ │ ├── icon.html.eco
│ │ ├── image.html.eco
│ │ ├── input.html.eco
│ │ ├── label.html.eco
│ │ ├── list.html.eco
│ │ ├── loader.html.eco
│ │ ├── placeholder.html.eco
│ │ ├── rail.html.eco
│ │ ├── reveal.html.eco
│ │ ├── segment.html.eco
│ │ └── step.html.eco
│ ├── globals/
│ │ ├── reset.html.eco
│ │ └── site.html.eco
│ ├── hotfix.html
│ ├── iframe/
│ │ ├── fixed-menu.html
│ │ └── fixed-vertical-menu.html
│ ├── index.html.eco
│ ├── introduction/
│ │ ├── advanced-usage.html.eco
│ │ ├── build-tools.html.eco
│ │ ├── getting-started.html.eco
│ │ ├── glossary.html.eco
│ │ ├── integrations.html.eco
│ │ └── new.html.eco
│ ├── kitchen-sink.html.eco
│ ├── modules/
│ │ ├── accordion.html.eco
│ │ ├── checkbox.html.eco
│ │ ├── dimmer.html.eco
│ │ ├── dropdown.html.eco
│ │ ├── embed.html.eco
│ │ ├── modal.html.eco
│ │ ├── nag.html.eco
│ │ ├── popup.html.eco
│ │ ├── progress.html.eco
│ │ ├── rating.html.eco
│ │ ├── search.html.eco
│ │ ├── shape.html.eco
│ │ ├── sidebar.html.eco
│ │ ├── sticky.html.eco
│ │ ├── tab.html.eco
│ │ └── transition.html.eco
│ ├── test.html.eco
│ ├── usage/
│ │ ├── layout.html.eco
│ │ └── theming.html.eco
│ └── views/
│ ├── advertisement.html.eco
│ ├── card.html.eco
│ ├── comment.html.eco
│ ├── feed.html.eco
│ ├── item.html.eco
│ └── statistic.html.eco
├── files/
│ ├── javascript/
│ │ ├── accordion.js
│ │ ├── api.js
│ │ ├── button.js
│ │ ├── card.js
│ │ ├── checkbox.js
│ │ ├── container.js
│ │ ├── customize.js
│ │ ├── dimmer.js
│ │ ├── docs.js
│ │ ├── dropdown.js
│ │ ├── embed.js
│ │ ├── form.js
│ │ ├── grid.js
│ │ ├── header.js
│ │ ├── home.js
│ │ ├── icon.js
│ │ ├── input.js
│ │ ├── item.js
│ │ ├── library/
│ │ │ ├── clipboard.js
│ │ │ ├── cookie.js
│ │ │ ├── detect.js
│ │ │ ├── easing.js
│ │ │ ├── history.js
│ │ │ ├── jquery.hotkeys.js
│ │ │ ├── jquery.js
│ │ │ ├── jquery.legacy.js
│ │ │ ├── less.js
│ │ │ ├── serialize-object.js
│ │ │ ├── sinon.js
│ │ │ ├── state.js
│ │ │ ├── tablesort.js
│ │ │ ├── typing.js
│ │ │ └── underscore.js
│ │ ├── loader.js
│ │ ├── menu.js
│ │ ├── message.js
│ │ ├── modal.js
│ │ ├── new.js
│ │ ├── playground.js
│ │ ├── popup.js
│ │ ├── progress.js
│ │ ├── rating.js
│ │ ├── search.js
│ │ ├── shape.js
│ │ ├── sidebar.js
│ │ ├── slider.js
│ │ ├── started.js
│ │ ├── sticky.js
│ │ ├── tab.js
│ │ ├── table.js
│ │ ├── theming.js
│ │ ├── transition.js
│ │ ├── validate-form.js
│ │ └── visibility.js
│ └── stylesheets/
│ ├── customize.css
│ ├── docs.css
│ ├── home.css
│ ├── library/
│ │ ├── basic.icon.css
│ │ ├── docco.css
│ │ ├── sidr.css
│ │ └── snap.css
│ ├── reset.css
│ ├── rtl.css
│ └── shape.css
├── layouts/
│ ├── basic.html.eco
│ ├── blank.html.eco
│ ├── default.html.eco
│ ├── homepage.html.eco
│ └── none.html.eco
├── partials/
│ ├── css.html.eco
│ ├── demo-sidebar.html
│ ├── dimmer-demo.html
│ ├── docs-css.html.eco
│ ├── examples/
│ │ ├── accordion.html
│ │ ├── breadcrumb.html
│ │ ├── button.html
│ │ ├── card.html
│ │ ├── checkbox.html
│ │ ├── content-loader.html
│ │ ├── dimmer.html
│ │ ├── divider.html
│ │ ├── dropdown.html
│ │ ├── feed.html
│ │ ├── flag.html
│ │ ├── form.html
│ │ ├── grid.html
│ │ ├── header.html
│ │ ├── icon.html
│ │ ├── image.html
│ │ ├── input.html
│ │ ├── item.html
│ │ ├── label.html
│ │ ├── list.html
│ │ ├── loader.html
│ │ ├── menu.html
│ │ ├── message.html
│ │ ├── modal.html
│ │ ├── popup.html
│ │ ├── progress.html
│ │ ├── rating.html
│ │ ├── reveal.html
│ │ ├── search.html
│ │ ├── segment.html
│ │ ├── shape.html
│ │ ├── sidebar.html
│ │ ├── single/
│ │ │ ├── flag-menu.html
│ │ │ ├── preset-menu.html
│ │ │ ├── skill-menu.html
│ │ │ └── state-options.html
│ │ ├── statistic.html
│ │ ├── step.html
│ │ ├── tab.html
│ │ ├── table.html
│ │ └── transition.html
│ ├── fixed-menu.html.eco
│ ├── footer.html
│ ├── header.html.eco
│ ├── javascript.html.eco
│ ├── language-modal.html
│ ├── languages.html
│ ├── less.html.eco
│ ├── library-javascript.html.eco
│ ├── meta.html.eco
│ ├── sidebar.html.eco
│ ├── site-ads.html.eco
│ ├── site-menu.html.eco
│ ├── tab-header.html.eco
│ ├── tracking.html.eco
│ ├── transifex.html.eco
│ ├── ui-css.html.eco
│ └── ui-javascript.html.eco
└── raw/
├── .htaccess
├── CNAME
├── api.json
├── crossdomain.xml
├── draft/
│ ├── carousel.js
│ ├── carousel.less
│ ├── extra.transitions.less
│ └── sitemap.less
├── humans.txt
├── robots.txt
└── swf/
└── clipboard.swf
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
out/
package-lock.json
# Numerous always-ignore extensions
*.diff
*.err
*.orig
*.log
*.rej
*.swo
*.swp
*.zip
*.vi
*~
*.sass-cache
*.ruby-version
# OS or Editor folders
.DS_Store
._*
Thumbs.db
.cache
.project
.settings
.tmproj
.docpad.db
*.esproj
nbproject
*.sublime-project
*.sublime-workspace
.brofile
================================================
FILE: .jshintrc
================================================
{
"globals": {
"$" : true,
"afterEach" : true,
"beforeEach" : true,
"console" : true,
"describe" : true,
"expect" : true,
"it" : true,
"jQuery" : true,
"loadFixtures" : true,
"module" : true,
"requestAnimationFrame" : true,
"require" : true,
"semantic" : true
},
"debug" : false,
"devel" : true,
"browser" : true,
"curly" : true,
"immed" : true,
"latedef" : true,
"loopfunc" : true,
"noarg" : true,
"undef" : true,
"sub" : true,
"loopfunc" : true,
"laxbreak" : true,
"evil" : true,
"indent" : false,
"trailing" : false
}
================================================
FILE: README.md
================================================
# Semantic Docs
This folder contains the templates used to generate the static website for [semantic-ui.com](http://www.semantic-ui.com).
This repo can be used to create a fork of the UI documents to serve as styleguide for your project.
### Installing Dependencies
You must install [DocPad](http://github.com/docpad/docpad), the static site generator used to create the HTML for the site, to render the contents of this repository.
SUI docs use a version of **DocPad compatible with Node 10**. It is recommended you install [NVM](https://github.com/nvm-sh/nvm) and a compatible node version in order to create the documentation.
```
nvm install 8
nvm use 8
```
To run docpad after cloning this repo
```
npm install -g docpad@6.79.4
docpad install;
```
Then finally to start the server
```
docpad run
```
### Generating Semantic UI for Docs
Assuming two sibling folders:
1. UI folder ./ui
2. Docs folder ./docs
* Clone both repos to respective folders
* npm install in both directories
* Go through Semantic UI installer steps (auto)
* In `./ui` folder `gulp build-docs` (builds files to ./docs)
* In `./docs` folder `docpad install` then `docpad run`
* Go to http://localhost:9778/ docs should be there
* Optionally run `gulp serve-docs` in ./ui to serve any changes from ./ui/src to ./docs
### Running the Server
Start the docs server (and generate docs):
```
# run from inside docs folder that will now contain the compiled docs
# windows users can then navigate to http://localhost:9778
docpad run
```
Watch for changes from your UI folder, and serve to the docs instance:
```
gulp serve-docs
```
### Publishing to GitHub Pages
You can publish your docs to GitHub Pages from the command line automatically
```
docpad deploy-ghpages --env static
```
## Help Fix Typos and Errors
If you find any typos or mistakes, submitting a fix is easy!
- [Open the `documents/` folder](https://github.com/Semantic-Org/Semantic-UI-Docs/tree/master/server/documents) on GitHub
- Click the “Edit” button on the appropriate page
- Click to submit a pull request
================================================
FILE: docpad.coffee
================================================
# The DocPad Configuration File
# It is simply a CoffeeScript Object which is parsed by CSON
docpadConfig = {
srcPath : './server'
outPath: './out'
# test production env
# env: 'production'
plugins:
ghpages:
deployRemote: 'origin'
deployBranch: 'gh-pages'
# =================================
# Template Data
# These are variables that will be accessible via our templates
# To access one of these within our templates, refer to the FAQ: https://github.com/bevry/docpad/wiki/FAQ
templateData:
# Specify some site properties
site:
# The production url of our website
url: "http://www.semantic-ui.com"
# Here are some old site urls that you would like to redirect from
oldUrls: [],
version: "2.5.0",
branch: "master",
# The default title of our website
title: "Semantic UI"
# The website description (for SEO)
description: """
Semantic empowers designers and developers by creating a shared vocabulary for UI.
"""
# The website keywords (for SEO) separated by commas
keywords: """
html5, ui, library, framework, javascript
"""
# -----------------------------
# Helper Functions
# Get the prepared site/document title
# Often we would like to specify particular formatting to our page's title
# we can apply that formatting here
getDirPath: ->
@document.dirPath
getVersion: ->
@site.version
getBranch: ->
@site.branch
getZip: ->
if @site.version
"https://github.com/Semantic-Org/Semantic-UI/archive/" + @site.version + ".zip"
else
"https://github.com/Semantic-Org/Semantic-UI/archive/master.zip"
getPreparedTitle: ->
# if we have a document title, then we should use that and suffix the site's title onto it
if @document.title
"#{@document.title} | #{@site.title}"
# if our document does not have it's own title, then we should just use the site's title
else
@site.title
getPage: (collection, id) ->
for item, index in collection
selectedIndex = (index + 1) if item.id is id
selectedIndex
pageCount: (collection) ->
for item, index in collection
itemCount = index + 1
itemCount
getPageCollection: (collection, id, delta = 2) ->
for item, index in collection
selectedIndex = index if item.id is id
lastIndex = index
# determine page count before and after
bottomCount = if (selectedIndex - delta >= 0) then delta else (selectedIndex)
topCount = if (selectedIndex + delta <= lastIndex) then delta else (lastIndex - selectedIndex)
bottomDelta = (delta * 2 - topCount)
topDelta = (delta * 2 - bottomCount)
bottomIndex = if (selectedIndex - bottomDelta >= 0) then (selectedIndex - bottomDelta) else 0
topIndex = if (selectedIndex + topDelta <= lastIndex) then (selectedIndex + topDelta) else lastIndex
result = collection[bottomIndex..topIndex]
result
# Get the prepared site/document description
getPreparedDescription: ->
# if we have a document description, then we should use that, otherwise use the site's description
@document.description or @site.description
# Get the prepared site/document keywords
getPreparedKeywords: ->
# Merge the document keywords with the site keywords
@site.keywords.concat(@document.keywords or []).join(', ')
# =================================
# Custom Collections
collections:
uiElements: ->
@getCollection("documents").findAllLive({type: $in: ['UI Element']}, [{title: 1}])
uiCollections: ->
@getCollection("documents").findAllLive({type: $in: ['UI Collection']}, [{title: 1}])
uiViews: ->
@getCollection("documents").findAllLive({type: $in: ['UI View']}, [{title: 1}])
uiModules: ->
@getCollection("documents").findAllLive({type: $in: ['UI Module', 'UI Behavior']}, [{title: 1}])
# =================================
# DocPad Events
# Here we can define handlers for events that DocPad fires
# You can find a full listing of events on the DocPad Wiki
# events:
events:
extendCollections: (opts) ->
@docpad.getCollection('files').on('add', (document) ->
document.setMetaDefaults(standalone:true))
}
# Export our DocPad Configuration
module.exports = docpadConfig
================================================
FILE: package.json
================================================
{
"name": "semantic-ui-docs",
"title": "Semantic UI Docs",
"description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
"homepage": "http://www.semantic-ui.com",
"author": "Jack Lukic <jacklukic@gmail.com>",
"license": "MIT",
"repository": {
"type": "git",
"url": "git://github.com/Semantic-Org/Semantic-UI-Docs.git"
},
"dependencies": {
"docpad": "~6.79.4",
"docpad-plugin-babel": "~2.2.1",
"docpad-plugin-copy": "~2.1.3",
"docpad-plugin-eco": "~2.2.1",
"docpad-plugin-partials": "~2.12.0"
},
"devDependencies": {
"docpad-plugin-ghpages": "~2.6.1"
}
}
================================================
FILE: server/documents/404.html.eco
================================================
---
layout : 'default'
title : 'Page Not Found'
type : '404'
---
<%- @partial('header') %>
<div class="main ui container">
</div>
================================================
FILE: server/documents/behaviors/api.html.eco
================================================
---
layout : 'default'
css : 'api'
standalone : true
element : 'API'
elementType : 'behavior'
title : 'API'
description : 'API allows elements to trigger actions on a server'
type : 'UI Behavior'
---
<script src="/javascript/library/serialize-object.js"></script>
<script src="/javascript/api.js"></script>
<%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>
<div class="main ui container">
<div class="ui active intro tab" data-tab="overview">
<div class="test example">
<h4 class="ui header">Integrates Seamlessly with UI</h4>
<p>API is designed to make the process of integrating data sources to UI components seamless, <a href="#api-state-management">tying API request state</a> to UI states automatically.</p>
<p>For example adding an API behavior to an <a href="/elements/input.html"><code>input</code></a> will occur <code>oninput</code>, while a <a href="/elements/button.html"><code>button</code></a>, will query the server <code>onclick</code>.</p>
<div class="ui icon input">
<i class="search icon"></i>
<input type="text" placeholder="Type here...">
</div>
<div class="ui hidden divider"></div>
<div class="ui primary button">Click Me</div>
<div class="ui disabled button">Disabled</div>
</div>
<div class="no example">
<h4 class="ui header">Preserve Templated URLs</h4>
<p>API helps you decouple URLs from your code. Use named API actions like <code>get followers</code> instead of URLs like <code>http://foo.com/get/1.0/followers.json</code> in your code.</p>
<div class="ignored code" data-type="javascript">
$('.button')
.api({
action: 'get followers'
})
;
</div>
<p>Centrally manage your entire API making sure you aren't caught modifying urls across your codebase. Define your endpoints using an <a href="#api-actions">intuitive templating system</a> that <a href="#passing-data">automatically passes data</a> found in your UI.</p>
<div class="ignored code" data-type="javascript">
$.fn.api.settings.api = {
'get followers' : '/followers/{id}?results={count}',
'create user' : '/create',
'add user' : '/add/{id}',
'search' : '/query/{query}/{/sort}'
};
</div>
</div>
<div class="no example">
<h4 class="ui header">HTTP 200 is Not Success</h4>
<p>Parse your JSON for <code>success</code> conditions before callbacks fire, making sure server errors caught correctly, still trigger error conditions in your front end code.</p>
<div class="ignored code">
// Responses without this status will trigger error conditions
$.fn.api.settings.successTest = function(response) {
return response.status == 'OK';
}
</div>
</div>
<div class="no example">
<h4 class="ui header">Translate APIs on the Fly</h4>
<p>Using a third party API that uses some unruly code? Not a problem! API lets you <a href="/introduction/new.html#translates-any-api">modify an APIs raw JSON response</a> before it is consumed by your code.</p>
</div>
<div class="no example">
<h4 class="ui header">Tools for Third-Party Integrations & Mocking</h4>
<p>New powerful callbacks like <a href="#fulfilling-responses"><code>response</code></a> and <a href="#using-custom-backends"><code>responseAsync</code></a> let you asynchronously mock responses and trigger the same callbacks as your API.</p>
</div>
</div>
<div class="ui intro tab" data-tab="usage">
<div class="fixed column">
<div class="demo content ui sticky">
<h4 class="ui sub header">API Example</h4>
<div class="ui fluid card">
<div class="image">
<img src="/images/avatar2/large/patrick.png">
</div>
<div class="content">
<a class="header">Patrick Russel</a>
<div class="description">Patrick lives in San Francisco, and studies french literature.</div>
</div>
<div class="ui bottom attached follow button" data-id="22">Follow</div>
</div>
</div>
</div>
<div class="examples">
<h2 class="ui dividing header">Creating an API</h2>
<div class="no example">
<h4 class="ui header">API Actions</h4>
<p><b>API</b> works by defining a set of server actions which interface elements can query. Actions are usually represented by short phrases, things like <code>save profile</code>, or <code>get followers</code> which correspond to a templated URL resource on the server.</p>
<p>URL variables specified in actions are substituted at run-time allowing individual components to query different URLs.</p>
<p>URLs listed in your API can include <b>required parameters</b> and <b>optional parameters</b> which may be adjusted for each call.</p>
</div>
<div class="no example">
<h4 class="ui header">Required Parameters</h4>
<div class="ui large bulleted list">
<div class="item">Uses format <code>{variable}</code></div>
<div class="item"><b>Will abort the request</b> if they cannot be found.</div>
</div>
<div class="code" data-type="javascript">
/* Two required variables */
$.fn.api.settings.api = {
'get followers' : '/followers/{id}?results={count}'
};
</div>
</div>
<div class="no example">
<h4 class="ui header">Optional Parameters</h4>
<div class="ui large bulleted list">
<div class="item">Uses format <code>{/variable}</code></div>
<div class="item">Will <b>not</b> abort the request if they cannot be found.</div>
<div class="item"><b>Will be removed</b> from the URL automatically if not available.</div>
<div class="item">Any preceding slash before an optional parameter will be removed from the URL, allowing you to include them in resource paths.</div>
</div>
<div class="code" data-type="javascript">
/* One required, one optional variable */
$.fn.api.settings.api = {
'get followers' : '/followers/{id}/{/sort}'
};
</div>
</div>
<div class="no example">
<h4 class="ui header">Creating your API</h4>
<p>You should define your endpoints <b>once in your application</b>. Usually this is done in a central configuration file included on each page.</p>
<p>These named API endpoints are stored globally in <code>$.fn.api.settings.api</code>.</p>
<p>Keeping your endpoints defined in one place makes sure when you update your application you will only need to update a single location with new URLs.</p>
<div class="code" data-type="javascript">
/* Define API endpoints once globally */
$.fn.api.settings.api = {
'get followers' : '/followers/{id}?results={count}',
'create user' : '/create',
'add user' : '/add/{id}',
'follow user' : '/follow/{id}',
'search' : '/search/?query={value}'
};
</div>
</div>
<div class="no example">
<h4 class="ui header">Using URLs</h4>
<p>Named API actions are not required to use API, you can also manually specify the URL for a request and use the same templating:</p>
<div class="code">
$('.search.button')
.api({
url: 'http://www.google.com?q={value}'
})
;
</div>
</div>
<h2 class="ui dividing header">Querying API Actions</h2>
<div class="no example">
<div class="ui info message">
<p>The following examples work best while viewing <code>console</code> logs in your web console.</p>
</div>
<h4 class="ui header">Attaching API Events</h4>
<p>API events are triggered by attaching named actions to elements on your page. These actions look up named endpoints in your API translating templated values from your element for each call.</p>
<p>Any element can have an API action attached directly to it. By default the action will occur on the most appropriate event for the type of element. For example a button will call your server <code>onclick</code>, an input <code>oninput</code>, or a form <code>onsubmit</code>.</p>
<p>API actions and data can be specified in Javascript on initialization:</p>
<div class="code" data-type="html">
<div class="ui follow button">
Follow
</div>
</div>
<div class="evaluated code">
// translates '/follow/{id}' to 'follow/22'
$('.follow.button')
.api({
action: 'follow user',
urlData: {
id: 22
}
})
;
</div>
<div class="ui horizontal divider">Or</div>
<p>API actions and data can also be specified in metadata:</p>
<div class="code" data-type="html">
<div class="ui follow button" data-action="follow user" data-id="22">
Follow
</div>
</div>
<div class="code">
// also calls '/follow/22'
$('.follow.button')
.api()
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Specifying DOM Events</h4>
<p>If you need to override what action an API event occurs on you can use the <code>on</code> parameter.</p>
<div class="ui message">
API requests for the following demos have been faked using API's <code>response</code> setting to avoid rate throttling from public APIs. No actual data is returned.
</div>
<div class="code" data-demo="true">
$('.follow.button')
.api({
action: 'follow user',
on: 'mouseenter'
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Calling Immediately</h4>
<p>If you require API action to occur immediately use <code>on: 'now'</code>. This will still trigger the same state updates to the invoked element, but will occur immediately.</p>
<p>
<div class="code" data-demo="true">
$('.follow.button')
.api({
action: 'follow user',
on: 'now'
})
;
</div>
<p>Keep in mind passing a new settings object will destroy the previous instance, and all its settings and events. If you want to preserve the previous instance, you can trigger a new request with the <code>query</code> behavior.</p>
<div class="code" data-demo="true">
// set-up API button with events
$('.follow.button')
.api({
action: 'follow user'
})
;
// do an immediate query
$('.follow.button')
.api('query')
;
</div>
</div>
<h2 class="ui dividing header">Setting-up Requests</h2>
<div class="no example">
<h4 class="ui header">Routing Data to URLs</h4>
<p>If your API URLs include templated variables they will be replaced during your request by one of four possible ways, listed in of inheritance.</p>
<p>All parameters used in a URL are encoded using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent" target="_blank"><code>encodeURIComponent</code></a> by default, to prevent from malicious strings from affecting your query. To disable this feature you can set <a href="#settings"><code>encodeParameters: false</code></a>.
</div>
<div class="no routed example">
<h4 class="ui header">1. Automatically Routed URL Variables</h4>
<p>Some special values will be automatically replaced if specified in URL actions.</p>
<table class="ui definition table">
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
<th>Available for</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>current text value of element</td>
<td>All elements</td>
</tr>
<tr>
<td>value</td>
<td>current input value of element</td>
<td>Input elements</td>
</tr>
</tbody>
</table>
<div class="code" data-preview="true">
<div class="ui search icon input">
<i class="search icon"></i>
<input type="text" class="search">
</div>
</div>
<div class="evaluated code" data-type="javascript">
$.fn.api.settings.api.search = '/search/?query={value}';
$('.routed.example .search input')
.api({
action : 'search',
stateContext : '.ui.input'
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">2. URL Variables Specified in Data Attributes</h4>
<p>You can include URL values as HTML5 metadata attributes.</p>
<p>This is often the easiest way to include unique URL data for each triggering element. For example, many follow buttons will trigger the same endpoint, but each will have its own user id.</p>
<div class="ui ignored large warning message">
Only variables specified in your API's URL will be searched for in metadata.
</div>
<div class="code" data-type="html">
<div class="ui button" data-id="11">
Follow Sally
</div>
<div class="ui button" data-id="22">
Follow Jenny
</div>
</div>
<div class="code" data-type="javascript">
// requests different URLs for each button
$('.follow.button')
.api({
action: 'follow user'
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">3. Settings Specified in Javascript</h4>
<p>URL variables and GET/POST data can be specified at run-time in the Javascript object.</p>
<div class="code" data-type="javascript">
$('.follow.button')
.api({
action : 'follow user',
method : 'POST',
// Substituted into URL
urlData: {
id: 22
},
// passed via POST
data: {
name: 'Joe Henderson'
}
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">4. Settings Returned from beforeSend</h4>
<p>All run settings, not just URL data, can be adjusted in a special callback <code>beforeSend</code> which occurs before the API request is sent.</p>
<div class="ui info message">
An additional callback <code>beforeXHR</code> lets you modify the XHR object before sending. This is different than beforeSend which is used <b>to modify settings</b> before send.
</div>
<div class="code" data-type="javascript">
$('.follow.button')
.api({
action: 'follow user',
beforeSend: function(settings) {
settings.urlData = {
id: 22
};
return settings;
}
beforeXHR: function(xhr) {
// adjust XHR with additional headers
xhr.setRequestHeader ('Authorization', 'Basic XXXXXX');
return xhr;
}
})
;
</div>
</div>
<h2 class="ui dividing header">Adjusting Requests</h2>
<div class="no example">
<h4 class="ui header">Modifying XHR</h4>
<p>An additional callback <code>beforeXHR</code> lets you modify the XHR object before sending. This is useful for adjusting properties of the XHR request like modifying headers, before sending a request.</p>
<div class="code" data-type="javascript">
$('.follow.button')
.api({
action: 'follow user',
beforeXHR: function(xhr) {
// adjust XHR with additional headers
xhr.setRequestHeader ('Authorization', 'Basic XXXXXX');
return xhr;
}
})
;
</div>
</div>
<div class="no disabled example">
<h4 class="ui header">Disabling Requests</h4>
<p>As a convenience, API will automatically prevent requests from occurring on elements that are currently disabled.</p>
<div class="ui disabled button">Disabled</div>
<div class="evaluated code">
// this will never occur
$('.disabled.button')
.api({
action: 'follow user'
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Cancelling Requests</h4>
<p>BeforeSend can also be used to check for special conditions for a request to be made. If the <code>beforeSend</code> callback returns false, the request will be cancelled.</p>
<div class="code" data-type="javascript" data-demo="true">
// set somewhere in your code
window.isLoggedIn = false;
$('.follow.button')
.api({
action: 'follow user',
beforeSend: function(settings) {
// cancel request
if(!isLoggedIn) {
$(this).state('flash text', 'Requires Login!');
return false;
}
}
})
;
</div>
</div>
<h2 class="ui dividing header">Passing Data</h2>
<div class="example">
<h4 class="ui header">1. Routed Form Data</h4>
<p>When you use the <code>serializeForm</code> setting or attach API events on a form, API will automatically include the closest form in data sent to the server.</p>
<p>Structured form data is beneficial over <a href="https://api.jquery.com/serialize/">jQuery's serialize</a> for several reasons:</p>
<ul class="ui large list">
<li><a href="https://github.com/macek/jquery-serialize-object" target="_blank">Serialize Object</a> correctly converts structured form names like <code>name="name[first]"</code> into nested object literals.</li>
<li>Structured form data can be modified in Javascript in <code>beforeSend</code>.</li>
<li>Form data will automatically be converted to their Javascript equivalents, for instance, checkboxes will be converted to <code>boolean</code> values.</li>
</ul>
<div class="ui ignored warning message">
Structured form data requires including <a href="https://github.com/macek/jquery-serialize-object" target="_blank">macek's serialize object.</a>
</div>
</div>
<div class="example">
<h4 class="ui header">Structured Data Example</h4>
<p>The following form shows some of the advantages of structured form data mentioned above.</p>
<form class="ui form">
<div class="two fields">
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="name[first]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="name[last]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" name="username" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password" name="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<div class="ui submit button">Submit</div>
</form>
<div class="evaluated code" data-type="javascript">
$('form .submit.button')
.api({
action: 'create user',
serializeForm: true,
data: {
foo: 'baz'
},
beforeSend: function(settings) {
// form data is editable in before send
if(settings.data.username == '') {
settings.data.username = 'New User';
}
// open console to inspect object
console.log(settings.data);
return settings;
}
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">2. Data Routed in Javascript</h4>
<p>Server data can be specified directly when initializing an API requests.</p>
<div class="code" data-type="javascript">
$('.form .submit')
.api({
data: {
session: 22,
name: 'Baz'
}
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">3. Data Added in beforeSend</h4>
<p>POST or GET data can be specified using a special callback <code>beforeSend</code>, which can be used to retrieve data before sending a request.</p>
<div class="code" data-type="javascript">
$('.form .submit')
.api({
action: 'create user',
serializeForm: true,
// arbitrary POST/GET same across all requests
data: {
session: 22
},
// modify data PER element in callback
beforeSend: function(settings) {
// cancel request if no id
if(!$(this).data('id')) {
return false;
}
settings.data.userID = $(this).data('id');
return settings;
}
})
;
</div>
</div>
<h2 class="ui dividing header">Server Responses</h2>
<div class="no example">
<h4 class="ui header">Response Callbacks</h4>
<p>Successful responses from the server will trigger <code>onSuccess</code>, invalid results <code>onFailure</code>.<p>
<p><code>onError</code> will only trigger on <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XHR</a> errors, but not on invalid JSON responses.</p>
<p>You can use the <code>onResponse</code> callback to adjust the JSON response before being parsed against a success test.
<div class="code" data-type="javascript">
$('.follow.button')
.api({
onResponse: function(response) {
// make some adjustments to response
return response;
},
successTest: function(response) {
// test whether a JSON response is valid
return response.success || false;
},
onComplete: function(response) {
// always called after XHR complete
},
onSuccess: function(response) {
// valid response and response.success = true
},
onFailure: function(response) {
// request failed, or valid response but response.success = false
},
onError: function(errorMessage) {
// invalid response
},
onAbort: function(errorMessage) {
// navigated to a new page, CORS issue, or user canceled request
}
})
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Determining JSON Success</h4>
<p>API has special success conditions for JSON responses. Instead of providing success and failure callbacks based on the HTTP response of the request, a request is considered successful only if the server's response tells you the action was successful. The response is passed to a validation test <code>successTest</code> which can be used to check the JSON for a valid response.</p>
<p>For example, you might expect all successful JSON responses to return a top level property signifying the success of the response:<p>
<div class="ui ignored info message">
You can use the <code>onResponse</code> callback to modify a server's response by returning a new translated response value before it is parsed by a success test.
</div>
<div class="code" data-type="json" data-title="Example Server Response">
{
"success": true,
"message": "We've retrieved your data from the server"
"data": {
// payload here
}
}
</div>
<p>You can specify a success test to check for this <code>success</code> value. This most likely will be set globally for all API requests.</p>
<div class="code" data-type="javascript">
$.fn.api.settings.successTest = function(response) {
if(response && response.success) {
return response.success;
}
return false;
};
</div>
</div>
<div class="no response example">
<h4 class="ui header">Modifying Response JSON</h4>
<p>Since version 2.0, API includes an <code>onResponse</code> callback which lets you adjust a server's response before a response is validated, allowing you to transform your response before other callbacks fire. This is useful for situations where an API response cannot be modified, but you need the response to conform with a required JSON structure.</p>
<div class="ui search">
<div class="ui left icon input">
<input class="prompt" type="text" placeholder="Search GitHub">
<i class="github icon"></i>
</div>
</div>
<div class="code" data-type="javascript">
$('.ui.search')
.search({
type : 'category',
minCharacters : 3,
apiSettings : {
url : '//api.github.com/search/repositories?q={query}',
onResponse : function(githubResponse) {
var
response = {
results : {}
}
;
if(!githubResponse || !githubResponse.items) {
return;
}
// translate GitHub API response to work with search
$.each(githubResponse.items, function(index, item) {
var
language = item.language || 'Unknown',
maxResults = 8
;
if(index >= maxResults) {
return false;
}
// create new language category
if(response.results[language] === undefined) {
response.results[language] = {
name : language,
results : []
};
}
// add result to category
response.results[language].results.push({
title : item.name,
description : item.description,
url : item.html_url
});
});
return response;
}
}
})
;
</div>
</div>
<h2 class="ui dividing header">Controlling State</h2>
<div class="no example">
<h4 class="ui header">UI State</h4>
<p>API will automatically add class names for <code>loading</code> and <code>error</code>. This will let you trigger different UI states automatically as an API call progresses.</p>
<p>If you need a different element than the triggering API element to receive state class names, you can specify a different selector using <code>settings.stateContext</code>.</p>
<p>Using <code>stateContext</code> allows you to easily do things like trigger a loading state on a form when a submit button is pressed.</p>
<h5 class="ui header">States Included in API Module</h5>
<table class="ui definition celled table">
<thead>
<tr>
<th>State</th>
<th class="six wide">Description</th>
<th>API event</th>
</tr>
</thead>
<tbody>
<tr>
<td>loading</td>
<td>Indicates a user needs to wait</td>
<td>XHR has initialized</td>
</tr>
<tr>
<td>error</td>
<td>Indicates an error has occurred</td>
<td>XHR Request returns error (does not trigger onAbort caused by page change, or if successTest fails). Stays visible for <code>settings.errorDuration</code></td>
</tr>
<tr>
<td>disabled</td>
<td>prevents API action</td>
<td>none</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Text State</h4>
<p>Initializing an API action with the state module gives you more granular control over UI states, like setting an activated or de-activated state and the ability to adjust text values for each state:</p>
<!-- <p>
For additional examples of the possibilities available with state behaviors check the <a href="#">state module documentation</a>
</p> -->
<div class="code" data-demo="true">
$('.follow.button')
.api({
action: 'follow user'
})
.state({
onActivate: function() {
$(this).state('flash text');
},
text: {
inactive : 'Follow',
active : 'Followed',
deactivate : 'Unfollow',
flash : 'Added follower!'
}
})
;
</div>
<h5 class="ui header">States Included in State Module</h5>
<table class="ui definition celled table">
<thead>
<tr>
<th>State</th>
<th>Description</th>
<th>Occurs on</th>
</tr>
</thead>
<tbody>
<tr>
<td>inactive</td>
<td>Default state</td>
<td></td>
</tr>
<tr>
<td>active</td>
<td>Selected state</td>
<td>Toggled on succesful API request</td>
</tr>
<tr>
<td>activate</td>
<td>Explains activating action</td>
<td>On hover if inactive</td>
</tr>
<tr>
<td>deactivate</td>
<td>Explains deactivating action</td>
<td>On hover if active</td>
</tr>
<tr>
<td>hover</td>
<td>Explains interaction</td>
<td>On hover in all states, overrides activate/deactivate</td>
</tr>
<tr>
<td>disabled</td>
<td>Indicates element cannot be interacted</td>
<td>Triggered programatically. Blocks API requests.</td>
</tr>
<tr>
<td>flash</td>
<td>Text-only state used to display a temporary message</td>
<td>Triggered programatically</td>
</tr>
<tr>
<td>success</td>
<td>Indicates user action was a success</td>
<td>Triggered programatically</td>
</tr>
<tr>
<td>warning</td>
<td>Indicates there was an issue with a user action</td>
<td>Triggered programatically</td>
</tr>
</tbody>
</table>
</div>
<h2 class="ui dividing header">Advanced Use</h2>
<div class="no sync mocked example">
<h4 class="ui header">Fulfilling Responses</h4>
<p>Since version 2.0, API includes two new parameter <code>response</code> and <code>responseAsync</code> which allows you to specify a Javascript object or a function for returning an API response. (These were previously <code>mockResponse</code> and <code>mockResponseAsync</code>.)</p>
<div class="code" data-type="javascript" data-demo="true">
$('.sync.mocked .button')
.api({
response: {
success: true
}
})
.state({
text: {
inactive : 'Off',
active : 'On'
}
})
;
</div>
<div class="ui toggle button">
Off
</div>
</div>
<div class="no async mocked example">
<h4 class="ui header">Using Custom Backends</h4>
<p>Using <code>responseAsync</code> you can specify a function which can execute your API request. This allows for you to use custom backends or wrappers outside of <code>$.ajax</code> for integrating API requests.</p>
<div class="code" data-type="javascript" data-demo="true">
$('.async.mocked .button')
.api({
responseAsync: function(settings, callback) {
var response = {
success: true
};
// do any asynchronous task here
setTimeout(function() {
callback(response);
}, 500);
}
})
.state({
text: {
inactive : 'Off',
active : 'On'
}
})
;
</div>
<div class="ui toggle button">
Off
</div>
</div>
</div>
</div>
<div class="ui tab" data-tab="behaviors">
<h2 class="ui dividing header">Behavior</h2>
<p>All the following behaviors can be called using the syntax:</p>
<div class="code">
$('.your.element')
.api('behavior name', argumentOne, argumentTwo)
;
</div>
<table class="ui definition celled sortable table segment">
<thead>
<th>Behavior</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>query</td>
<td>Execute query using existing API settings</td>
</tr>
<tr>
<td>add url data(url, data)</td>
<td>Adds data to existing templated url and returns full url string</td>
</tr>
<tr>
<td>get request</td>
<td>Gets promise for current API request</td>
</tr>
<tr>
<td>abort</td>
<td>Aborts current API request</td>
</tr>
<tr>
<td>reset</td>
<td>Removes loading and error state from element</td>
</tr>
<tr>
<td>was cancelled</td>
<td>Returns whether last request was cancelled</td>
</tr>
<tr>
<td>was failure</td>
<td>Returns whether last request was failure</td>
</tr>
<tr>
<td>was successful</td>
<td>Returns whether last request was successful</td>
</tr>
<tr>
<td>was complete</td>
<td>Returns whether last request was completed</td>
</tr>
<tr>
<td>is disabled</td>
<td>Returns whether element is disabled</td>
</tr>
<tr>
<td>is mocked</td>
<td>Returns whether element response is mocked</td>
</tr>
<tr>
<td>is loading</td>
<td>Returns whether element is loading</td>
</tr>
<tr>
<td>set loading</td>
<td>Sets loading state to element</td>
</tr>
<tr>
<td>set error</td>
<td>Sets error state to element</td>
</tr>
<tr>
<td>remove loading</td>
<td>Removes loading state to element</td>
</tr>
<tr>
<td>remove error</td>
<td>Removes error state to element</td>
</tr>
<tr>
<td>get event</td>
<td>Gets event that API request will occur on</td>
</tr>
<tr>
<td>get url encoded value(value)</td>
<td>Returns <code>encodeURIComponent</code> value only if value passsed is not already encoded
</tr>
<tr>
<td>read cached response(url)</td>
<td>Reads a locally cached response for a URL</td>
</tr>
<tr>
<td>write cached response(url, response)</td>
<td>Writes a cached response for a URL</td>
</tr>
<tr>
<td>create cache</td>
<td>Creates new cache, removing all locally cached URLs</td>
</tr>
<tr>
<td>destroy</td>
<td>Removes API settings from the page and all events</td>
</tr>
</tbody>
</table>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">
API
</h2>
<h4 class="ui header">
AJAX
</h4>
<div class="ui info message">
You can pass in any standard <a href="http://api.jquery.com/jquery.ajax/">jQuery AJAX setting</a> like <code>timeout</code> or <code>contentType</code> to API's settings and it will be automatically passed to the request's AJAX call.
</div>
<h4 class="ui header">
API
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>on</td>
<td>auto</td>
<td>When API event should occur</td>
</tr>
<tr>
<td>cache</td>
<td>true</td>
<td>Can be set to 'local' to cache <b>successful</b> returned AJAX responses when using a JSON API. This helps avoid server roundtrips when API endpoints will return the same results when accessed repeatedly. Setting to <code>false</code>, will add cache busting parameters to the URL.</td>
</tr>
<tr>
<td>stateContext</td>
<td>this</td>
<td>UI state will be applied to this element, defaults to triggering element.</td>
</tr>
<tr>
<td>encodeParameters</td>
<td>true</td>
<td>Whether to encode parameters with <code>encodeURIComponent</code> before adding into url string</td>
</tr>
<tr>
<td>defaultData</td>
<td>true</td>
<td>Whether to automatically include default data like {value} and {text}</td>
</tr>
<tr>
<td>serializeForm</td>
<td>false</td>
<td>Whether to serialize closest form and include in request</td>
</tr>
<tr>
<td>throttle</td>
<td>
0
</td>
<td>How long to wait when a request is made before triggering request, useful for rate limiting <code>oninput</code></td>
</tr>
<tr>
<td>throttleFirstRequest</td>
<td>
true
</td>
<td>When set to false will not delay the first request made, when no others are queued</td>
</tr>
<tr>
<td>interruptRequests</td>
<td>
false
</td>
<td>Whether an API request can occur while another request is still pending</td>
</tr>
<tr>
<td>loadingDuration</td>
<td>0</td>
<td>Minimum duration to show loading indication</td>
</tr>
<tr>
<td>hideError</td>
<td>auto</td>
<td>The default <code>auto</code> will automatically remove error state after error duration, unless the element is a <code>form</code></td>
</tr>
<tr>
<td>errorDuration</td>
<td>2000</td>
<td>Setting to <code>true</code>, will not remove error. Setting to a duration in milliseconds to show error state after request error.</td>
</tr>
</tbody>
</table>
<h4 class="ui header">
Request Settings
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Default</th>
<th>Description</th>
<th>Possible Values</th>
</thead>
<tbody>
<tr>
<td>action</td>
<td>false</td>
<td>Named API action for query, originally specified in $.fn.settings.api</td>
<td>String or false</td>
</tr>
<tr>
<td>url</td>
<td>false</td>
<td>Templated URL for query, will override specified action</td>
<td>String or false</td>
</tr>
<tr>
<td>urlData</td>
<td>false</td>
<td>Variables to use for replacement</td>
<td></td>
</tr>
<tr>
<td>response</td>
<td>false</td>
<td>Can be set to a Javascript object which will be returned automatically instead of requesting JSON from server </td>
<td>{} or false</td>
</tr>
<tr>
<td>responseAsync(settings, callback)</td>
<td>false</td>
<td>When specified, this function can be used to retrieve content from a server and return it asynchronously <b>instead of</b> a standard AJAX call. The callback function should return the server response.</td>
<td>function or false</td>
</tr>
<tr>
<td>mockResponse</td>
<td>false</td>
<td>Alias of <code>response</code></td>
<td></td>
</tr>
<tr>
<td>mockResponseAsync</td>
<td>false</td>
<td>Alias of <code>responseAsync</code></td>
<td></td>
</tr>
<tr>
<td>method</td>
<td>get</td>
<td>Method for transmitting request to server</td>
<td>Any valid http method</td>
</tr>
<tr>
<td>dataType</td>
<td>JSON</td>
<td>Expected data type of response </td>
<td>xml, json, jsonp, script, html, text</td>
</tr>
<tr>
<td>data</td>
<td>{}</td>
<td>POST/GET Data to Send with Request</td>
<td></td>
</tr>
</tbody>
</table>
<h4 class="ui header">
Callbacks
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>beforeSend(settings)</td>
<td>initialized element</td>
<td>Allows modifying settings before request, or cancelling request</td>
</tr>
<tr>
<td>beforeXHR(xhrObject)</td>
<td></td>
<td>Allows modifying XHR object for request</td>
</tr>
<tr>
<td>onRequest(promise, xhr)</td>
<td>state context</td>
<td>Callback that occurs when request is made. Receives both the API success promise and the XHR request promise.</td>
</tr>
<tr>
<td>onResponse(response)</td>
<td>state context</td>
<td>Allows modifying the server's response before parsed by other callbacks to determine API event success</td>
</tr>
<tr>
<td>successTest(response)</td>
<td></td>
<td>Determines whether completed JSON response should be <a href="#determining-json-success">treated as successful</a>
</td>
</tr>
<tr>
<td>onSuccess(response, element, xhr)</td>
<td>state context</td>
<td>Callback after successful response, JSON response must pass <code>successTest</code></td>
</tr>
<tr>
<td>onComplete(response, element, xhr)</td>
<td>state context</td>
<td>Callback on request complete regardless of conditions</td>
</tr>
<tr>
<td>onFailure(response, element)</td>
<td>state context</td>
<td>Callback on failed response, or JSON response that fails <code>successTest</code></td>
</tr>
<tr>
<td>onError(errorMessage, element, xhr)</td>
<td>state context</td>
<td>Callback on server error from returned status code, or XHR failure.</td>
</tr>
<tr>
<td>onAbort(errorMessage, element, xhr)</td>
<td>state context</td>
<td>Callback on abort caused by user clicking a link or manually cancelling request.</td>
</tr>
</tbody>
</table>
<h2 class="ui dividing header">
Module
</h2>
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
<table class="ui sortable celled definition table">
<thead>
<th></th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>API</td>
<td>Name used in log statements</td>
</tr>
<tr>
<td>namespace</td>
<td>api</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>regExp</td>
<td>
<div class="code" data-type="css">
regExp : {
required: /\{\$*[A-z0-9]+\}/g,
optional: /\{\/\$*[A-z0-9]+\}/g,
}
</div>
</td>
<td>Regular expressions used for template matching</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code" data-type="css">
selector: {
disabled : '.disabled',
form : 'form'
}
</div>
</td>
<td>Selectors used to find parts of a module</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className: {
loading : 'loading',
error : 'error'
}
</div>
</td>
<td>Class names used to determine element state</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata: {
action : 'action',
url : 'url'
}
</div>
</td>
<td>Metadata used to store XHR and response promise</td>
</tr>
<tr>
<td>silent</td>
<td>False</td>
<td>Silences all console output including error messages, regardless of other debug settings.</td>
</tr>
<tr>
<td>debug</td>
<td>false</td>
<td>Debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>true</td>
<td>Show <code>console.table</code> output with performance metrics</td>
</tr>
<tr>
<td>verbose</td>
<td>false</td>
<td>Debug output includes all internal behaviors</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
// errors
error : {
beforeSend : 'The before send function has aborted the request',
error : 'There was an error with your request',
exitConditions : 'API Request Aborted. Exit conditions met',
JSONParse : 'JSON could not be parsed during error handling',
legacyParameters : 'You are using legacy API success callback names',
missingAction : 'API action used but no url was defined',
missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize',
missingURL : 'No URL specified for API event',
noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
parseError : 'There was an error parsing your request',
requiredParameter : 'Missing a required URL parameter: ',
statusMessage : 'Server gave an error: ',
timeout : 'Your request timed out'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
================================================
FILE: server/documents/behaviors/form.html.eco
================================================
---
layout : 'default'
css : 'form'
standalone : true
element : 'validation'
elementType : 'behavior'
title : 'Form Validation'
description : 'A form validation behavior checks data against a set of criteria before passing it along to the server'
type : 'UI Behavior'
---
<script src="/dist/components/form.js"></script>
<script src="/javascript/validate-form.js"></script>
<%- @partial('header', { tabs: { usage: 'Usage', examples: 'Examples', settings: 'Settings'} }) %>
<div class="main ui container">
<div class="ui active tab" data-tab="usage">
<h2 class="ui dividing header">Usage</h2>
<div class="auto example">
<h4 class="ui header">Specifying Validation Rules</h4>
<p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
<div class="ui ignored info message">
A validation object includes a list of form elements, and rules to validate each field against. Fields are matched by either the <code>id</code>, <code>name</code>, or <code>data-validate</code> property (in that order) matching the identifier specified in the settings object. Validation objects must use either shorthand or longhand exclusively.
</div>
<div class="ignore code" data-title="Shorthand Validation">
$('.ui.form')
.form({
fields: {
name : 'empty',
gender : 'empty',
username : 'empty',
password : ['minLength[6]', 'empty'],
skills : ['minCount[2]', 'empty'],
terms : 'checked'
}
})
;
</div>
<div class="ui horizontal divider">or</div>
<div class="ignore code" data-title="Full Validation Settings">
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type : 'empty',
prompt : 'Please select a gender'
}
]
},
username: {
identifier: 'username',
rules: [
{
type : 'empty',
prompt : 'Please enter a username'
}
]
},
password: {
identifier: 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter a password'
},
{
type : 'minLength[6]',
prompt : 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type : 'checked',
prompt : 'You must agree to the terms and conditions'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</div>
</form>
<div class="color example">
<h4 class="ui header">Passing Parameters to Rules <div class="ui horizontal teal label">New in 2.2.3</div></h4>
<p>Typically rules that include a parameter are written <code>minLength[2]</code> with the value being passed in as brackets.</p>
<p>If passing in properties as a string is not ideal, or if you are pulling values from another javascript variable, it might make sense to consider using <code>value</code> to pass in the rule value.</p>
<div class="ignored code">
$('.ui.form').form({
fields: {
color: {
identifier: 'color',
rules: [{
type: 'regExp',
value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i,
}]
}
}
});
</div>
<form class="ui form segment">
<div class="field">
<label>Color</label>
<input placeholder="Enter rgb" name="color" type="text" value="rgb(255, 255, 255)">
</div>
<div class="ui primary submit button">Submit</div>
</form>
</div>
<div class="prompt example">
<h4 class="ui header">Customizing Prompts</h4>
<p>Form validation includes default error prompts for most cases, however these can be quite generic. To specify custom personalized values for a validation prompt use the <code>prompt</code> property with a rule.</p>
<div class="ui ignored info message">Starting in <div class="ui teal label">2.3.1</div> you can specify prompts as a function. This may be useful when returning validation for fields that require dynamic validation messages.</div>
<div class="ui ignored info message">You can set default messages for each validation rule type by modifying <code>$fn.form.settings.prompt</code></div>
<p>Prompt also supports custom templating with the following values replaced</p>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide"><b>{name}</b></td>
<td>The current text of a field's label, or if no label available its placeholder text</td>
</tr>
<tr>
<td class="four wide"><b>{identifier}</b></td>
<td>The identifier used to match the field</td>
</tr>
<tr>
<td class="four wide"><b>{value}</b></td>
<td>The current field value</td>
</tr>
<tr>
<td class="four wide"><b>{ruleValue}</b></td>
<td>The value passed to a rule, for example <code>minLength[100]</code> would set this value to 100</td>
</tr>
</tbody>
</table>
<div class="ignored code">
$('.ui.form')
.form({
fields: {
field1: {
rules: [
{
type : 'empty'
}
]
},
field2: {
rules: [
{
type : 'exactly[dog]',
prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
}
]
},
field3: {
rules: [
{
type : 'exactly[cat]',
prompt : function(value) {
if(value == 'dog') {
return 'I told you to put cat, not dog!';
}
return 'That is not cat';
}
}
]
},
}
})
;
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Field 1</label>
<input type="text" name="field1">
</div>
<div class="field">
<label>Field 2</label>
<input type="text" name="field2">
</div>
<div class="field">
<label>Field 3</label>
<input type="text" name="field3">
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message">
</div>
</form>
</div>
<div class="matching example">
<h4 class="ui header">Matching Fields</h4>
<p>By default the property name used in the validation object will match against the <code>id</code>, <code>name</code>, or <code>data-validate</code> property of each input to find the corresponding field to match validation rules against.</p>
<p>If you need to specify a different identifier you can use the <code>identifier</code> property on each validation rule</p>
<div class="ignored code">
$('.ui.form')
.form({
fields: {
name: {
identifier : 'special-name',
rules: [
{
type : 'empty'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<div class="field">
<label>Special Field</label>
<input type="text" name="special-name">
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message">
</div>
</form>
</div>
<div class="prompt example">
<h4 class="ui header">
Validating Programmatically
<div class="ui teal label">Updated in 2.2.8</div>
</h4>
<p>Form validation provides additional behaviors to programmatically trigger validation for either the form or an individual field, and check validation on the form or individual fields.</p>
<p>Please see the <a href="#behaviors">behaviors section</a> for an explanation on syntax.</p>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide"><b>validate form</b></td>
<td>Validates entire form and displays errors if necessary</td>
</tr>
<tr>
<td class="four wide"><b>is valid</b></td>
<td>Returns whether a form is valid</td>
</tr>
<tr>
<td class="four wide"><b>is valid(fieldName)</b></td>
<td>Returns whether a field in a form is valid (does not update UI)</td>
</tr>
<tr>
<td class="four wide"><b>validate field(fieldName)</b></td>
<td>Validates a particular field and displays errors if necessary</td>
</tr>
</tbody>
</table>
<div class="ignored code">
$('.ui.form')
.form({
fields: {
email: 'empty',
name: 'empty'
}
})
;
if( $('.ui.form').form('is valid', 'email')) {
// email is valid
}
if( $('.ui.form').form('is valid')) {
// form is valid (both email and name)
}
</div>
</div>
<h2 class="ui dividing header">Rules</h2>
<div class="no example">
<h4 class="ui header">
Validation Rules
</h4>
<p>Validation rules are a set of conditions required to validate a field</p>
<div class="ui info message">Validation rules are found in <code>$.fn.form.settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
<div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
<h3 class="ui header"><a href="#empty">Empty</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">empty</td>
<td class="twelve wide">A field is empty</td>
</tr>
<tr>
<td>checked</td>
<td>A checkbox field is checked</td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#content-type">Content Type</h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">email</td>
<td>A field is a valid email address</td>
<td class="six wide"></td>
</tr>
<tr>
<td>url</td>
<td>A field is a url</td>
<td></td>
</tr>
<tr>
<td>integer</td>
<td>A field is an integer value, or matches an integer range</td>
<td><code>integer</code> or <code>integer[1..10]</code></td>
</tr>
<tr>
<td>decimal</td>
<td>A field must be a decimal number</td>
<td></td>
</tr>
<tr>
<td>number</td>
<td>A field is any number decimal or non-decimal</td>
<td></td>
</tr>
<tr>
<td>regExp[expression]</td>
<td>Matches against a regular expression, when using bracketed notation RegExp values must be escaped.</td>
<td>
<code>regExp[/^[a-z0-9_-]{3,16}$/gi]]</code>
<div class="ui horizontal divider">Or</div>
<code>regExp[/^[a-z0-9_-]{3,16}$/]]</code>
</td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#payment">Payment</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">creditCard</td>
<td class="six wide">A field is a valid credit card</td>
<td><code>creditCard</code></td>
</tr>
<tr>
<td>creditCard[types]</td>
<td>A field matches a specified array of card types</td>
<td><code>creditCard[visa,mastercard,unionpay]</code></td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#specified-content">Specified Content</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">contains</td>
<td>A field contains text (case insensitive)</td>
<td class="six wide"><code>contains[foo]</code></td>
</tr>
<tr>
<td>containsExactly</td>
<td>A field contains text (case sensitive)</td>
<td><code>containsExactly[foo]</code></td>
</tr>
<tr>
<td>doesntContain</td>
<td>A field doesn't contain text (case insensitive)</td>
<td><code>doesntContain[foo]</code></td>
</tr>
<tr>
<td>doesntContainExactly</td>
<td>A field doesn't contain text (case sensitive)</td>
<td><code>doesntContainExactly[foo]</code></td>
</tr>
<tr>
<td>is</td>
<td>A field is a value (case insensitive)</td>
<td><code>is[foo]</code></td>
</tr>
<tr>
<td>isExactly</td>
<td>A field is a value (case-sensitive)</td>
<td><code>isExactly[foo]</code></td>
</tr>
<tr>
<td>not</td>
<td>A field is not a value (case insensitive)</td>
<td><code>not[foo]</code></td>
</tr>
<tr>
<td>notExactly</td>
<td>A field is not a value (case sensitive)</td>
<td><code>notExactly[foo]</code></td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#length">Length</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">minLength</td>
<td>A field is less than a min length</td>
<td class="six wide"><code>minLength[5]</code></td>
</tr>
<tr>
<td>exactLength</td>
<td>A field is exactly length</td>
<td><code>exactLength[16]</code></td>
</tr>
<tr>
<td>maxLength</td>
<td>A field is less than a max length</td>
<td><code>maxLength[50]</code></td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#matching-fields">Matching Fields</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">match</td>
<td class="six wide">A field should match the value of another validation field, for example to confirm passwords</td>
<td><code>match[password]</code></td>
</tr>
<tr>
<td>different</td>
<td>A field should be different than another specified field</td>
<td><code>different[choice]</code></td>
</tr>
</tbody>
</table>
<h3 class="ui header"><a href="#selection-count">Selection Count</a></h3>
<table class="ui celled sortable basic table segment">
<tbody>
<tr>
<td class="four wide">minCount</td>
<td>A multiple select field contains at minimum (count) selections</td>
<td class="six wide"><code>minCount[count]</code></td>
</tr>
<tr>
<td>exactCount</td>
<td>A multiple select field contains exactly (count) selections</td>
<td><code>exactCount[count]</code></td>
</tr>
<tr>
<td>maxCount</td>
<td>A multiple select field contains at maximum (count) selections</td>
<td><code>maxCount[count]</code></td>
</tr>
</tbody>
</table>
</div>
<div class="custom rule example">
<h4 class="ui header">Adding Custom Rules</h4>
<p>You can extend form validation to include your own rules. Keep in mind these will need to be executed synchronously.</p>
<div class="ignore code">
// some arbitrary business-logic
window.user = {
name : 'Simon',
adminLevel : 1
};
// custom form validation rule
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
return (window.user.adminLevel >= adminLevel)
};
$('.ui.form')
.form({
fields: {
dog: {
identifier: 'dog',
rules: [
{
type: 'adminLevel[2]',
prompt: 'You must be at least a level-2 admin to add a dog'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="field">
<label>Dog</label>
<input placeholder="Dog" name="dog" type="text">
</div>
<div class="ui primary submit button">
<i class="add icon"></i>
Add Dog
</div>
<div class="ui error message"></div>
</form>
</div>
<div class="inline example">
<h4 class="ui header">Built-in Events</h4>
<p>
Form will automatically attach events to specially labeled form fields
</p>
<ul class="ui list">
<li>Fields will blur on <code>escape</code> key press</li>
<li>Fields will submit form on <code>enter</code></li>
<li>Submit events will be attached to <code>click</code> on any element inside the form with class <code>submit</code></li>
<li>Reset events will be attached to <code>click</code> on any element inside the form with class <code>reset</code></li>
<li>Clear events will be attached to <code>click</code> on any element inside the form with class <code>clear</code></li>
</ul>
<form class="ui form segment">
<div class="field">
<label>Test Field</label>
<input placeholder="Test Field" name="name" type="text">
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui reset button">Reset</div>
<div class="ui clear button">Clear</div>
</form>
</div>
<h2 class="ui dividing header">Manipulating Forms</h2>
<div class="inline example">
<h4 class="ui header">Reset / Clear Fields</h4>
<p>
Calling <code>$('form').form('reset')</code>, or clicking any reset element will return all form values to their <em>default value</em>. This is the value the form fields were set to when the page loaded.
</p>
<p>Calling <code>$('form').form('clear')</code> will remove all values from form fields and reset dropdowns to placeholder text</p>
<div class="ui ignored warning message">
Form <code>reset</code> works by caching default values on page load. For this to work correctly any form that uses reset will need to initialize on page load.
</div>
<div class="ui ignored info message">
Reset and clear will modify all form fields, not just those which have validation rules
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input name="gender" type="hidden">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui reset button">Reset</div>
<div class="ui clear button">Clear</div>
</form>
</div>
<div class="writing no example">
<h4 class="ui header">Writing Values</h4>
<p>
Form includes behaviors for reading from and writing to form fields.
</p>
<div class="code" data-demo="true">
$('.writing.example form')
// set one value
.form('set value', 'name', 'Jack')
// set several values
.form('set values', {
name : 'Jack',
gender : 'male',
colors : ['red', 'grey'],
username : 'jlukic',
password : 'youdliketoknow',
terms : true
})
;
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input name="gender" type="hidden">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline fields">
<label for="colors">Favorite Colors</label>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="red" />
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="blue" />
<label>Blue</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="green" />
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="grey" />
<label>Grey</label>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui clear button">Clear</div>
</form>
</div>
<div class="get no example">
<h4 class="ui header">Getting Values</h4>
<p>
You can also read values from form fields using <code>get value</code> and <code>get values</code>
</p>
<div class="ui ignored info message">
Although <code>get values</code> allows you to use any matching identifier, returned values will always use the corresponding <code>name</code> attribute of the element.
</div>
<div class="code" data-demo="true">
var
$form = $('.get.example form'),
// get one value
colors = $form.form('get value', 'colors'),
// get list of values
fields = $form.form('get values', ['name', 'colors']),
// get all values
allFields = $form.form('get values')
;
console.log(colors);
console.log(fields);
console.log(allFields);
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input name="gender" type="hidden">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline fields">
<label for="colors">Favorite Colors</label>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="red" />
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="blue" />
<label>Blue</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="green" />
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="grey" />
<label>Grey</label>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
</form>
</div>
</div>
<div class="ui tab" data-tab="examples">
<h2 class="ui dividing header">Rule Examples</h2>
<div class="field example">
<h4 class="ui header">Empty</h4>
<p>The following shows examples of validating different types of empty or unchecked content.</p>
<form class="ui form">
<div class="field">
<label>Empty</label>
<input name="empty" type="text">
</div>
<div class="field">
<label>Dropdown</label>
<select class="ui dropdown" name="dropdown">
<option value="">Select</option>
<option value="male">Choice 1</option>
<option value="female">Choice 2</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="checkbox" />
<label>Checkbox</label>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.field.example form')
.form({
on: 'blur',
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'empty',
prompt : 'Please enter a value'
}
]
},
dropdown: {
identifier : 'dropdown',
rules: [
{
type : 'empty',
prompt : 'Please select a dropdown value'
}
]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
}
}
})
;
</div>
</div>
<div class="type example">
<h4 class="ui header">Content Type</h4>
<p>Inputs can match against common content types, or your own custom <a href="http://www.regular-expressions.info/" target="_blank">regular expressions</a>.</p>
<form class="ui form">
<div class="two fields">
<div class="field">
<label>Integer</label>
<input name="integer" type="text" value="101">
</div>
<div class="field">
<label>E-mail</label>
<input name="email" type="text" value="jack">
</div>
</div>
<div class="two fields">
<div class="field">
<label>Decimal</label>
<input name="decimal" type="text" value="1.1.1">
</div>
<div class="field">
<label>Number</label>
<input name="number" type="text" value="+200">
</div>
</div>
<div class="two fields">
<div class="field">
<label>URL</label>
<input name="url" type="text" value="ww.fakeurl.com">
</div>
<div class="field">
<label>RegEx</label>
<input name="regex" type="text" value="joe">
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.type.example form')
.form({
on: 'blur',
fields: {
integer: {
identifier : 'integer',
rules: [
{
type : 'integer[1..100]',
prompt : 'Please enter an integer value'
}
]
},
decimal: {
identifier : 'decimal',
rules: [
{
type : 'decimal',
prompt : 'Please enter a valid decimal'
}
]
},
number: {
identifier : 'number',
rules: [
{
type : 'number',
prompt : 'Please enter a valid number'
}
]
},
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
url: {
identifier : 'url',
rules: [
{
type : 'url',
prompt : 'Please enter a url'
}
]
},
regex: {
identifier : 'regex',
rules: [
{
type : 'regExp[/^[a-z0-9_-]{4,16}$/]',
prompt : 'Please enter a 4-16 letter username'
}
]
}
}
})
;
</div>
</div>
<div class="payment example">
<h4 class="ui header">Payment</h4>
<p>Inputs can validate credit cards and other payment types.</p>
<table class="ui very basic collapsing celled table">
<tbody>
<tr>
<td class="four wide">Card Name</td>
<td class="six wide">Validation Name</td>
<td class="six wide">Test Card Number</td>
</tr>
<tr>
<td>Visa</td>
<td><code>visa</code></td>
<td>4565340519181845</td>
</tr>
<tr>
<td>American Express</td>
<td><code>amex</code></td>
<td>378282246310005</td>
</tr>
<tr>
<td>Mastercard</td>
<td><code>mastercard</code></td>
<td>5200828282828210</td>
</tr>
<tr>
<td>Discover</td>
<td><code>discover</code></td>
<td>6011111111111117</td>
</tr>
<tr>
<td>Unionpay</td>
<td><code>unionpay</code></td>
<td>6240008631401148</td>
</tr>
<tr>
<td>JCB</td>
<td><code>jcb</code></td>
<td>3530111333300000</td>
</tr>
<tr>
<td>Diner's Club</td>
<td><code>dinersClub</code></td>
<td>38520000023237</td>
</tr>
<tr>
<td>Maestro</td>
<td><code>maestro</code></td>
<td>6799990100000000019</td>
</tr>
<tr>
<td>Laser</td>
<td><code>laser</code></td>
<td>630490017740292441</td>
</tr>
<tr>
<td>Visa Electron</td>
<td><code>visaElectron</code></td>
<td>4917300800000000</td>
</tr>
</tbody>
</table>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Credit Card</label>
<input name="card" type="text" value="4444444444444444">
</div>
<div class="field">
<label>Certain Type</label>
<input name="exact-card" type="text" value="4444444444444444">
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.payment.example form')
.form({
on: 'blur',
fields: {
card: {
identifier : 'card',
rules: [
{
type : 'creditCard',
prompt : 'Please enter a valid credit card'
}
]
},
exactCard: {
identifier : 'exact-card',
rules: [
{
type : 'creditCard[visa,amex]',
prompt : 'Please enter a visa or amex card'
}
]
}
}
})
;
</div>
</div>
<div class="match example">
<h4 class="ui header">Matching Fields</h4>
<p>Fields can be required to match, or not match other fields. You may consider using this with <a href="#optional-fields">optional fields</a>.</p>
<form class="ui form">
<div class="two fields">
<div class="field">
<label>Match 1</label>
<input name="match1" type="text" value="same">
</div>
<div class="field">
<label>Match 2</label>
<input name="match2" type="text" value="different">
</div>
</div>
<div class="two fields">
<div class="field">
<label>Different 1</label>
<input name="different1" type="text" value="same">
</div>
<div class="field">
<label>Different 2</label>
<input name="different2" type="text" value="same">
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.match.example form')
.form({
on: 'blur',
fields: {
match: {
identifier : 'match2',
rules: [
{
type : 'match[match1]',
prompt : 'Please put the same value in both fields'
}
]
},
different: {
identifier : 'different2',
rules: [
{
type : 'different[different1]',
prompt : 'Please put different values for each field'
}
]
}
}
})
;
</div>
</div>
<div class="length example">
<h4 class="ui header">Length</h4>
<p>Inputs can match against length of content</p>
<form class="ui form">
<div class="field">
<label>minLength</label>
<textarea name="minLength" cols="5"></textarea>
</div>
<div class="field">
<label>Exact Length</label>
<input name="exactLength" type="text" value="12345">
</div>
<div class="field">
<label>maxLength</label>
<textarea name="maxLength" cols="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus leo, scelerisque quis pretium non, ultricies in dolor. Vivamus pulvinar odio at nisl egestas tempor. Quisque nec diam gravida, convallis massa et, aliquam purus. Nunc eget aliquet leo. Morbi sodales mi placerat volutpat rhoncus. Pellentesque sed leo eu risus rutrum suscipit ut dapibus est. Curabitur lacus diam, viverra mollis purus ut, facilisis consectetur dui. Etiam molestie suscipit ligula, vitae lacinia mi tempor ac. Pellentesque accumsan porttitor nisi. Sed ac metus ac arcu feugiat posuere. Curabitur eget pharetra felis. Donec consectetur felis sed iaculis vulputate. Sed mollis ultrices consequat.</textarea>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.length.example form')
.form({
on: 'blur',
fields: {
minLength: {
identifier : 'minLength',
rules: [
{
type : 'minLength[100]',
prompt : 'Please enter at least 100 characters'
}
]
},
exactLength: {
identifier : 'exactLength',
rules: [
{
type : 'exactLength[6]',
prompt : 'Please enter exactly 6 characters'
}
]
},
maxLength: {
identifier : 'maxLength',
rules: [
{
type : 'maxLength[100]',
prompt : 'Please enter at most 100 characters'
}
]
},
}
})
;
</div>
</div>
<div class="content example">
<h4 class="ui header">Specified Content</h4>
<p>Validation rules can specify content that should or should not appear inside an input</p>
<form class="ui form">
<div class="two fields">
<div class="field">
<label>is</label>
<input name="is" type="text" value="dogs">
</div>
<div class="field">
<label>isExactly</label>
<input name="isExactly" type="text" value="Dog">
</div>
</div>
<div class="two fields">
<div class="field">
<label>not</label>
<input name="not" type="text" value="Dog">
</div>
<div class="field">
<label>notExactly</label>
<input name="notExactly" type="text" value="dog">
</div>
</div>
<div class="two fields">
<div class="field">
<label>contains</label>
<input name="contains" type="text" value="poodle">
</div>
<div class="field">
<label>containsExactly</label>
<input name="containsExactly" type="text" value="Dogbert">
</div>
</div>
<div class="two fields">
<div class="field">
<label>doesntContain</label>
<input name="doesntContain" type="text" value="Dogtown">
</div>
<div class="field">
<label>doesntContainExactly</label>
<input name="doesntContainExactly" type="text" value="dognapper">
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.content.example form')
.form({
on: 'blur',
fields: {
is: {
identifier : 'is',
rules: [
{
type : 'is[dog]',
prompt : 'Please enter exactly "dog"'
}
]
},
isExactly: {
identifier : 'isExactly',
rules: [
{
type : 'isExactly[dog]',
prompt : 'Please enter exactly "dog"'
}
]
},
not: {
identifier : 'not',
rules: [
{
type : 'not[dog]',
prompt : 'Please enter a value, but not "dog"'
}
]
},
notExactly: {
identifier : 'notExactly',
rules: [
{
type : 'notExactly[dog]',
prompt : 'Please enter a value, but not exactly "dog"'
}
]
},
contains: {
identifier : 'contains',
rules: [
{
type : 'contains[dog]',
prompt : 'Please enter a value containing "dog"'
}
]
},
containsExactly: {
identifier : 'containsExactly',
rules: [
{
type : 'containsExactly[dog]',
prompt : 'Please enter a value containing exactly "dog"'
}
]
},
doesntContain: {
identifier : 'doesntContain',
rules: [
{
type : 'doesntContain[dog]',
prompt : 'Please enter a value not containing "dog"'
}
]
},
doesntContainExactly: {
identifier : 'doesntContainExactly',
rules: [
{
type : 'doesntContainExactly[dog]',
prompt : 'Please enter a value not containing exactly "dog"'
}
]
}
}
})
;
</div>
</div>
<div class="multi example">
<h4 class="ui header">Selection Count</h4>
<p>Multiple selects can specify how many options should be allowed.</p>
<form class="ui form">
<div class="three fields">
<div class="field">
<label>Exact Count</label>
<select name="exactCount" multiple class="ui dropdown">
<option value="">Select Values</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="field">
<label>Minimum Count</label>
<select name="minCount" multiple class="ui dropdown">
<option value="">Select Values</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="field">
<label>Maximum Count</label>
<select name="maxCount" multiple class="ui dropdown">
<option value="">Select Values</option>
<option value="1" selected>1</option>
<option value="2" selected>2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.multi.example form')
.form({
on: 'blur',
fields: {
minCount: {
identifier : 'minCount',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least 2 values'
}
]
},
maxCount: {
identifier : 'maxCount',
rules: [
{
type : 'maxCount[2]',
prompt : 'Please select a max of 2 values'
}
]
},
exactCount: {
identifier : 'exactCount',
rules: [
{
type : 'exactCount[2]',
prompt : 'Please select 2 values'
}
]
}
}
})
</div>
</div>
<h2 class="ui dividing header">Form Examples</h2>
<div class="add example">
<h4 class="ui header">
Adding Rules Programmatically <div class="ui teal label">New in 2.2.11</div>
</h4>
<p>You can use the special behaviors <code>add field/rule</code>, <code>remove rule</code> and <code>remove field</code> to dynamically add or remove fields or rules. </p>
<div class="ui ignored info message">
<div class="ui header">Adding Multiple Rules and Complex Rules</div>
You can specify shorthand or full rule objects when adding rules. You can also specifiy fields as an array to modify multiple fields.</code>.
</div>
<div class="code">
// lets only validate username to start
$('.add.example .ui.form')
.form({
username: ['empty', 'minLength[5]']
})
;
</div>
<div class="evaluated code">
// lets toggle some validation based on button
$('.add.example .ui.positive.button')
.on('click', function() {
$('.add.example .ui.form')
// adding longform
.form('add rule', 'gender', {
rules: [
{
type : 'empty',
prompt : 'Entering your gender is necessary'
}
]
})
// adding shorthand
.form('add rule', 'password', ['empty', 'minLength[5]'])
;
})
;
</div>
<div class="evaluated code">
$('.add.example .ui.negative.button')
.on('click', function() {
$('.add.example .ui.form')
// removing multiple at once
.form('remove fields', ['gender', 'password'])
;
})
;
</div>
<div class="ui positive button">Add Additional Validation</div>
<div class="ui negative button">Remove Additional Validation</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Username</label>
<input type="text" name="username">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="two fields">
<div class="field">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui clear button">Clear</div>
<div class="ui error message"></div>
</form>
</div>
<div class="dropdown example">
<h4 class="ui header">Validating Dropdowns</h4>
<p><a href="/modules/dropdown.html">Dropdowns</a> can also be validated like other form fields. Simply match the validation rule to the <code>input</code> or <code>select</code> associated with the dropdown</p>
<div class="ignored code">
$('.ui.dropdown')
.dropdown()
;
$('.ui.form')
.form({
fields: {
gender: 'empty',
name: 'empty'
}
})
;
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Name</label>
<input type="text" name="name">
</div>
<div class="field">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="ui primary submit button">Submit</div>
</form>
</div>
<div class="data example">
<h4 class="ui header">Using Server Name Attributes</h4>
<p>Sometimes an integration requires you to use a specific value for <code>name</code>, or <code>id</code>. In these cases, you can match a form field using the <code>data-validate</code> property.</p>
<div class="ignored code">
$('.ui.form')
.form(
fields: {
name: 'empty'
}
})
;
</div>
<form class="ui form segment">
<div class="field">
<label>Name</label>
<input type="text" name="SERVER_REQUIRED_NAME" data-validate="name">
</div>
<div class="ui primary submit button">Submit</div>
</form>
</div>
<div class="depends example">
<h4 class="ui header">
Dependent Fields
<div class="ui teal horizontal label">New in 2.2</div>
</h4>
<p>You can specify validation fields to only be used when other fields are present. Simply add <code>depends: 'id'</code> with the ID of the field that must be non-blank for this rule to evaluate.</p>
<div class="ignored code">
$('.ui.form')
.form({
fields: {
yearsPracticed: {
identifier : 'yearsPracticed',
depends : 'isDoctor',
rules : [
{
type : 'empty',
prompt : 'Please enter the number of years you have been a doctor'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="isDoctor" />
<label>Are you a doctor?</label>
</div>
</div>
<div class="field">
<label>How long have you been a medical professional</label>
<input type="text" name="yearsPracticed">
</div>
<div class="ui divider"></div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
<div class="optional example">
<h4 class="ui header">Optional Fields</h4>
<p>Adding the parameter <code>optional: true</code> will only add your validation rules when the field is <b>not empty</b>.
<div class="ignored code">
$('.ui.form')
.form({
fields: {
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
ccEmail: {
identifier : 'cc-email',
optional : true,
rules: [
{
type : 'email',
prompt : 'Please enter a valid second e-mail'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<p>Your tickets are all ready to print. Where would you like to send a receipt?</p>
<div class="fields">
<div class="ten wide field">
<label>E-mail</label>
<input type="text" name="email">
</div>
<div class="six wide field">
<label>Additional E-mail</label>
<input type="text" name="cc-email">
</div>
</div>
<div class="ui divider"></div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
<div class="optional example">
<h4 class="ui header">Setting Site Defaults</h4>
<p>You can specify site wide validation settings by modifying <code>$.fn.form.settings.defaults</code> that will apply on any form validation if the field appears in the form</b>.
<div class="code">
$.fn.form.settings.defaults = {
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
// this form doesn't have a cc email but it will not produce an error
ccEmail: {
identifier : 'cc-email',
optional : true,
rules: [
{
type : 'email',
prompt : 'Please enter a valid second e-mail'
}
]
},
};
</div>
<form class="ui form segment">
<p>Your tickets are all ready to print. Where would you like to send a receipt?</p>
<div class="ten wide field">
<label>E-mail</label>
<input type="text" name="email">
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
<div class="example">
<h4 class="ui header">Displaying Error Messages</h4>
<p>Forms that contain a <a href="/collections/message.html">ui message</a> error block will automatically be filled in with form validation information.</p>
<div class="ui ignored info message">The template for error messages can be modified by adjusting settings.template.error</div>
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" name="first-name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" name="last-name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
<div class="inline example">
<h4 class="ui header">Validating on Blur and other Events</h4>
<p>Validation messages can also appear inline. UI Forms automatically format <a href="/elements/label.html">labels</a> with the class name <code>prompt</code>. These validation prompts are also set to appear on input change instead of form submission.</p>
<div class="ui ignored warning message">This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.</div>
<div class="code" data-type="javascript">
$('.ui.form')
.form({
fields : validationRules,
inline : true,
on : 'blur'
})
;
</div>
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" name="first-name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" name="last-name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
</form>
</div>
<div class="dog example">
<h4 class="ui header">Creating Custom Validation</h4>
<p>You can use multiple arbitrary rules to validate a form</p>
<div class="ignore code">
$('.ui.form')
.form({
fields: {
dog: {
identifier: 'dog',
rules: [
{
type: 'empty',
prompt: 'You must have a dog to add'
},
{
type: 'contains[fluffy]',
prompt: 'I only want you to add fluffy dogs!'
},
{
type: 'not[mean]',
prompt: 'Why would you add a mean dog to the list?'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="field">
<label>Dog</label>
<input placeholder="Dog" name="dog" type="text">
</div>
<div class="ui primary submit button">
<i class="add icon"></i>
Add Dog
</div>
<div class="ui error message"></div>
</form>
</div>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">Behaviors</h2>
All the following behaviors can be called using the syntax
<div class="code" data-type="javascript">
$('.foo').form('behavior name', argumentOne, argumentTwo)
</div>
<table class="ui definition celled table">
<tr>
<td>submit</td>
<td>Submits selected form</td>
</tr>
<tr>
<td>is valid</td>
<td>Returns true/false whether a form passes its validation rules</td>
</tr>
<tr>
<td>add rule(field, rules)<div class="ui label">New in 2.2.11</div></td>
<td>Adds rule to existing rules for field, also aliased as <code>add field</code></td>
</tr>
<tr>
<td>add fields(fields) <div class="ui label">New in 2.2.11</div></td>
<td>Adds fields object to existing fields</td>
</tr>
<tr>
<td>remove rule(field, rules)<div class="ui label">New in 2.2.11</div></td>
<td>Removes specific rule from field leaving other rules</td>
</tr>
<tr>
<td>remove field(field)<div class="ui label">New in 2.2.11</div></td>
<td>Remove all validation for a field</td>
</tr>
<tr>
<td>add prompt(identifier, errors)</td>
<td>Adds error prompt to the field with the given identifier</td>
</tr>
<tr>
<td>is valid(fieldName)</td>
<td>Returns true/false whether a field passes its validation rules</td>
</tr>
<tr>
<td>validate form</td>
<td>Validates form, updates UI, and calls onSuccess or onFailure</td>
</tr>
<tr>
<td>validate field(fieldName)</td>
<td>Validates field, updates UI, and calls onSuccess or onFailure</td>
</tr>
<tr>
<td>get field(id)</td>
<td>Returns element with matching name, id, or data-validate metadata to ID</td>
</tr>
<tr>
<td>get value(id)</td>
<td>Returns value of element with id</td>
</tr>
<tr>
<td>get values(ids)</td>
<td>Returns object of element values that match array of ids. If no IDS are passed will return all fields</td>
</tr>
<tr>
<td>set value(id)</td>
<td>Sets value of element with id</td>
</tr>
<tr>
<td>set values(values)</td>
<td>Sets key/value pairs from passed values object to matching ids</td>
</tr>
<tr>
<td>get validation(element)</td>
<td>Returns validation rules for a given jQuery-referenced input field</td>
</tr>
<tr>
<td>has field(identifier)</td>
<td>Returns whether a field exists</td>
</tr>
<tr>
<td>add errors(errors)</td>
<td>Adds errors to form, given an array errors</td>
</tr>
<tr>
<td>add prompt(id, prompt)</td>
<td>Adds a custom user prompt for a given element with id</td>
</tr>
</table>
<h2 class="ui dividing header">Settings</h2>
<div class="no example">
<h4 class="ui header">
Form Settings
</h4>
<p>Form settings modify the form validation behavior</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>keyboardShortcuts</td>
<td>true</td>
<td>Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively</td>
</tr>
<tr>
<td>on</td>
<td>submit</td>
<td>Event used to trigger validation. Can be either <b>submit</b>, <b>blur</b> or <b>change</b>.</td>
</tr>
<tr>
<td>revalidate</td>
<td>true</td>
<td>If set to true will revalidate fields with errors on input change</td>
</tr>
<tr>
<td>delay</td>
<td>true</td>
<td>Delay from last typed letter to validate a field when using <code>on: change</code> or when revalidating a field.</td>
</tr>
<tr>
<td>inline</td>
<td>false</td>
<td>Adds inline error on field validation error</td>
</tr>
<tr>
<td>transition</td>
<td>
scale
</td>
<td>Named transition to use when animating validation errors. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>150</td>
<td>Animation speed for inline prompt</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Form Prompts
</h4>
<p>Settings to modify default form prompts</p>
<table class="ui celled sortable definition table">
<thead>
<th class="collapsing">Setting</th>
<th>Default</th>
</thead>
<tbody>
<tr>
<td>text</td>
<td>
<div class="code">
text: {
unspecifiedRule : 'Please enter a valid value',
unspecifiedField : 'This field'
}
</div>
</td>
</tr>
<tr>
<td>prompt</td>
<td>
<div class="code">
prompt: {
empty : '{name} must have a value',
checked : '{name} must be checked',
email : '{name} must be a valid e-mail',
url : '{name} must be a valid url',
regExp : '{name} is not formatted correctly',
integer : '{name} must be an integer',
decimal : '{name} must be a decimal number',
number : '{name} must be set to a number',
is : '{name} must be \'{ruleValue}\'',
isExactly : '{name} must be exactly \'{ruleValue}\'',
not : '{name} cannot be set to \'{ruleValue}\'',
notExactly : '{name} cannot be set to exactly \'{ruleValue}\'',
contain : '{name} cannot contain \'{ruleValue}\'',
containExactly : '{name} cannot contain exactly \'{ruleValue}\'',
doesntContain : '{name} must contain \'{ruleValue}\'',
doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'',
minLength : '{name} must be at least {ruleValue} characters',
length : '{name} must be at least {ruleValue} characters',
exactLength : '{name} must be exactly {ruleValue} characters',
maxLength : '{name} cannot be longer than {ruleValue} characters',
match : '{name} must match {ruleValue} field',
different : '{name} must have a different value than {ruleValue} field',
creditCard : '{name} must be a valid credit card number',
minCount : '{name} must have at least {ruleValue} choices',
exactCount : '{name} must have exactly {ruleValue} choices',
maxCount : '{name} must have {ruleValue} or less choices'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Callbacks
</h4>
<p>Callbacks specify a function to occur after a specific behavior.</p>
<table class="ui celled sortable definition table">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onValid</td>
<td>field</td>
<td>Callback on each valid field</td>
</tr>
<tr>
<td>onInvalid</td>
<td>field</td>
<td>Callback on each invalid field</td>
</tr>
<tr>
<td>onSuccess(event, fields)</td>
<td>form</td>
<td>Callback if a form is all valid</td>
</tr>
<tr>
<td>onFailure(formErrors, fields)</td>
<td>form</td>
<td>Callback if any form field is invalid</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Templates
</h4>
<p>Templates are used to construct elements</p>
<div class="ui ignored info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return HTML.</div>
<table class="ui celled sortable definition table">
<thead>
<th class="four wide">Template</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>error</td>
<td>Errors (Array)</td>
<td>Constructs the contents of an error message</td>
</tr>
<tr>
<td>prompt</td>
<td>Errors (Array)</td>
<td>Constructs an element to prompt the user to an invalid field</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
DOM Settings
</h4>
<p>DOM settings specify how this module should interface with the DOM</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>form</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code">
selector : {
message : '.error.message',
field : 'input, textarea, select',
group : '.field',
input : 'input',
prompt : '.prompt',
submit : '.submit'
}
</div>
</td>
<td>Selectors used to match functionality to DOM</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata : {
validate: 'validate'
},
</div>
</td>
<td>
HTML5 metadata attributes
</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
active : 'active',
placeholder : 'default',
disabled : 'disabled',
visible : 'visible'
}
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Debug Settings
</h4>
<p>Debug settings controls debug output to the console</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Form</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>False</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
errors : {
method : 'The method you called is not defined.'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
================================================
FILE: server/documents/behaviors/state.html.eco
================================================
---
layout : 'default'
css : 'state'
standalone : true
element : 'State'
elementType : 'draft'
title : 'State'
description : 'State allows elements to trigger actions on a server'
type : 'Draft'
---
<script src="/javascript/library/serialize-object.js"></script>
<script src="/javascript/state.js"></script>
<%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>
<div class="main ui container">
<div class="ui active intro tab" data-tab="overview">
<div class="test example">
<h4 class="ui header">Activate Elements Programmatically</h4>
<p>State is designed to make the process of integrating data sources to UI components seamless, <a href="#state-state-management">tying State request state</a> to UI states automatically.</p>
<p>For example adding an State behavior to an <a href="/elements/input.html"><code>input</code></a> will occur <code>oninput</code>, while a <a href="/elements/button.html"><code>button</code></a>, will query the server <code>onclick</code>.</p>
<div class="ui icon input">
<i class="search icon"></i>
<input type="text" placeholder="Type here...">
</div>
<div class="ui hidden divider"></div>
<div class="ui primary button">Click Me</div>
<div class="ui disabled button">Disabled</div>
</div>
</div>
<div class="ui intro tab" data-tab="usage">
</div>
<div class="ui tab" data-tab="behaviors">
<h2 class="ui dividing header">Behavior</h2>
<p>All the following behaviors can be called using the syntax:</p>
<div class="code">
$('.your.element')
.state('behavior name', argumentOne, argumentTwo)
;
</div>
<table class="ui definition celled sortable table segment">
<thead>
<th>Behavior</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>query</td>
<td>Execute query using existing State settings</td>
</tr>
<tr>
<td>add url data(url, data)</td>
<td>Adds data to existing templated url and returns full url string</td>
</tr>
<tr>
<td>get request</td>
<td>Gets promise for current State request</td>
</tr>
<tr>
<td>abort</td>
<td>Aborts current State request</td>
</tr>
<tr>
<td>reset</td>
<td>Removes loading and error state from element</td>
</tr>
<tr>
<td>was cancelled</td>
<td>Returns whether last request was cancelled</td>
</tr>
<tr>
<td>was failure</td>
<td>Returns whether last request was failure</td>
</tr>
<tr>
<td>was successful</td>
<td>Returns whether last request was successful</td>
</tr>
<tr>
<td>was complete</td>
<td>Returns whether last request was completed</td>
</tr>
<tr>
<td>is disabled</td>
<td>Returns whether element is disabled</td>
</tr>
<tr>
<td>is mocked</td>
<td>Returns whether element response is mocked</td>
</tr>
<tr>
<td>is loading</td>
<td>Returns whether element is loading</td>
</tr>
<tr>
<td>set loading</td>
<td>Sets loading state to element</td>
</tr>
<tr>
<td>set error</td>
<td>Sets error state to element</td>
</tr>
<tr>
<td>remove loading</td>
<td>Removes loading state to element</td>
</tr>
<tr>
<td>remove error</td>
<td>Removes error state to element</td>
</tr>
<tr>
<td>get event</td>
<td>Gets event that State request will occur on</td>
</tr>
<tr>
<td>get url encoded value(value)</td>
<td>Returns <code>encodeURIComponent</code> value only if value passsed is not already encoded
</tr>
<tr>
<td>read cached response(url)</td>
<td>Reads a locally cached response for a URL</td>
</tr>
<tr>
<td>write cached response(url, response)</td>
<td>Writes a cached response for a URL</td>
</tr>
<tr>
<td>create cache</td>
<td>Creates new cache, removing all locally cached URLs</td>
</tr>
<tr>
<td>destroy</td>
<td>Removes State settings from the page and all events</td>
</tr>
</tbody>
</table>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">
State
</h2>
<h4 class="ui header">
Behavior
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>automatic</td>
<td>true</td>
<td>Whether possible states should be determined automatically based on type of UI</td>
</tr>
<tr>
<td>sync</td>
<td>false</td>
<td>When set to <code>true</code> and state is used on multiple elements, state will be synced across all bound elements.</td>
</tr>
<tr>
<td>flashDuration</td>
<td>1000</td>
<td>Default duration to show text when using <code>flash text</code>.</td>
</tr>
<tr>
<td>context</td>
<td>false</td>
<td>When set to a selector, will use a delegated pattern to bind events from this element.</td>
</tr>
</tbody>
</table>
<h4 class="ui header">
Request Settings
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Default</th>
<th>Description</th>
<th>Possible Values</th>
</thead>
<tbody>
<tr>
<td>action</td>
<td>false</td>
<td>Named State action for query, originally specified in $.fn.settings.state</td>
<td>String or false</td>
</tr>
<tr>
<td>url</td>
<td>false</td>
<td>Templated URL for query, will override specified action</td>
<td>String or false</td>
</tr>
<tr>
<td>urlData</td>
<td>false</td>
<td>Variables to use for replacement</td>
<td></td>
</tr>
<tr>
<td>mockResponse</td>
<td>false</td>
<td>Can be set to a javascript object which will be returned automatically instead of requesting JSON from server </td>
<td>{} or false</td>
</tr>
<tr>
<td>mockResponseAsync(settings, callback)</td>
<td>false</td>
<td>When specified, this function can be used to retrieve content from a server and return it asynchronously <b>instead of</b> a standard AJAX call. The callback function should return the server response.</td>
<td>function or false</td>
</tr>
<tr>
<td>method</td>
<td>get</td>
<td>Method for transmitting request to server</td>
<td>post, get</td>
</tr>
<tr>
<td>dataType</td>
<td>JSON</td>
<td>Expected data type of response </td>
<td>xml, json, jsonp, script, html, text</td>
</tr>
<tr>
<td>data</td>
<td>{}</td>
<td>POST/GET Data to Send with Request</td>
<td></td>
</tr>
</tbody>
</table>
<h4 class="ui header">
Callbacks
</h4>
<table class="ui sortable celled definition table">
<thead>
<th class="three wide"></th>
<th class="three wide">Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>beforeSend(settings)</td>
<td>initialized element</td>
<td>Allows modifying settings before request, or cancelling request</td>
</tr>
<tr>
<td>beforeXHR(xhrObject)</td>
<td></td>
<td>Allows modifying XHR object for request</td>
</tr>
<tr>
<td>onRequest(promise, xhr)</td>
<td>state context</td>
<td>Callback that occurs when request is made. Receives both the state success promise and the xhr request promise.</td>
</tr>
<tr>
<td>onResponse(response)</td>
<td>state context</td>
<td>Allows modifying the server's response before parsed by other callbacks to determine State event success</td>
</tr>
<tr>
<td>successTest(response)</td>
<td></td>
<td>Determines whether completed JSON response should be <a href="#determining-json-success">treated as successful</a>
</td>
</tr>
<tr>
<td>onSuccess(response, element, xhr)</td>
<td>state context</td>
<td>Callback after successful response, JSON response must pass <code>successTest</code></td>
</tr>
<tr>
<td>onComplete(response, element, xhr)</td>
<td>state context</td>
<td>Callback on request complete regardless of conditions</td>
</tr>
<tr>
<td>onFailure(response, element)</td>
<td>state context</td>
<td>Callback on failed response, or JSON response that fails <code>successTest</code></td>
</tr>
<tr>
<td>onError(errorMessage, element, xhr)</td>
<td>state context</td>
<td>Callback on server error from returned status code, or XHR failure.</td>
</tr>
<tr>
<td>onAbort(errorMessage, element, xhr)</td>
<td>state context</td>
<td>Callback on abort caused by user clicking a link or manually cancelling request.</td>
</tr>
</tbody>
</table>
<h2 class="ui dividing header">
Module
</h2>
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
<table class="ui sortable celled definition table">
<thead>
<th></th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>State</td>
<td>Name used in log statements</td>
</tr>
<tr>
<td>namespace</td>
<td>state</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>regExp</td>
<td>
<div class="code" data-type="css">
regExp : {
required: /\{\$*[A-z0-9]+\}/g,
optional: /\{\/\$*[A-z0-9]+\}/g,
}
</div>
</td>
<td>Regular expressions used for template matching</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code" data-type="css">
selector: {
disabled : '.disabled',
form : 'form'
}
</div>
</td>
<td>Selectors used to find parts of a module</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className: {
loading : 'loading',
error : 'error'
}
</div>
</td>
<td>Class names used to determine element state</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata: {
action : 'action',
url : 'url'
}
</div>
</td>
<td>Metadata used to store xhr and response promise</td>
</tr>
<tr>
<td>silent</td>
<td>False</td>
<td>Silences all console output including error messages, regardless of other debug settings.</td>
</tr>
<tr>
<td>debug</td>
<td>false</td>
<td>Debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>true</td>
<td>Show <code>console.table</code> output with performance metrics</td>
</tr>
<tr>
<td>verbose</td>
<td>false</td>
<td>Debug output includes all internal behaviors</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
// errors
error : {
beforeSend : 'The before send function has aborted the request',
error : 'There was an error with your request',
exitConditions : 'State Request Aborted. Exit conditions met',
JSONParse : 'JSON could not be parsed during error handling',
legacyParameters : 'You are using legacy State success callback names',
missingAction : 'State action used but no url was defined',
missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize',
missingURL : 'No URL specified for state event',
noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
parseError : 'There was an error parsing your request',
requiredParameter : 'Missing a required URL parameter: ',
statusMessage : 'Server gave an error: ',
timeout : 'Your request timed out'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
================================================
FILE: server/documents/behaviors/visibility.html.eco
================================================
---
layout : 'default'
css : 'visibility minimal'
element : 'visibility'
elementType : 'behavior'
standalone : true
title : 'Visibility'
description : 'Visibility provides a set of callbacks for when a content appears in the viewport'
type : 'UI Behavior'
---
<script src="/javascript/visibility.js"></script>
<%- @partial('header', { tabs: { introduction: 'Introduction', usage: 'Usage', examples: 'Examples', settings: 'Settings' } }) %>
<div class="main ui container">
<div class="ui active tab" data-tab="introduction">
<div class="introduction">
<h2 class="ui dividing header">Introduction</h2>
<p>Visibility provides a set of callbacks that can be attached to any element and trigger when a specific visibility event occurs.</p>
<p>There are a variety of uses for attaching events to visibility. Here are some of the more common ones.</p>
<div class="ui large divided very relaxed list">
<div class="item">
<div class="header">Infinite Scroll</div>
<div class="description">You want to start loading more content into a container when a user is partially finished scrolling through the content</div>
</div>
<div class="item">
<div class="header">Lazy Loading Images</div>
<div class="description">You want to start loading an image just before it is visible to a user</div>
</div>
<div class="item">
<div class="header">Reactive Content</div>
<div class="description">You want an element to change based on how far a user has scrolled</div>
</div>
<div class="item">
<div class="header">Sticky Headers</div>
<div class="description">You want an element to fix itself to the viewport when it is passed, and return to its original static position afterwards</div>
</div>
<div class="item">
<div class="header">Event Tracking</div>
<div class="description">You want to attach analytics events that match a users engagement with content, for example, to log to Google Analytics when a blog post is 30% read.</div>
</div>
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui header">Usage</h2>
<div class="first visibility example">
<h4 class="ui header">How To Use</h4>
<p>Visibility provides a set of callbacks which can be used to attach events to an element's position on screen.</p>
<p>Each scroll change will trigger an animation frame request that will fire callbacks for an element.</p>
<div class="ui ignored info message">The following examples use sticky columns to help display data alongside each example. Please consult the <a href="/modules/sticky.html">sticky documentation</a> for usage examples.</div>
<div class="ui ignored code">
// some example callbacks
$('.demo.segment')
.visibility({
onTopVisible: function(calculations) {
// top is on screen
},
onTopPassed: function(calculations) {
// top of element passed
},
onUpdate: function(calculations) {
// do something whenever calculations adjust
updateTable(calculations);
}
})
;
</div>
<div class="two column equal height ui grid">
<div class="row">
<div class="main column">
<div class="ui first demo segment">
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
</div>
</div>
<div class="column">
<div class="ui sticky">
<table class="ui basic celled sortable two column table">
<thead>
<th>Calculation</th>
<th>Value</th>
</thead>
<tbody>
<tr class="pixelsPassed">
<td>pixelsPassed</td>
<td></td>
</tr>
<tr class="percentagePassed">
<td>percentagePassed</td>
<td></td>
</tr>
<tr class="fits">
<td>fits</td>
<td></td>
</tr>
<tr class="width">
<td>width</td>
<td></td>
</tr>
<tr class="height">
<td>height</td>
<td></td>
</tr>
<tr class="onScreen">
<td>onScreen</td>
<td></td>
</tr>
<tr class="offScreen">
<td>offScreen</td>
<td></td>
</tr>
<tr class="passing">
<td>passing</td>
<td></td>
</tr>
<tr class="topVisible">
<td>topVisible</td>
<td></td>
</tr>
<tr class="bottomVisible">
<td>bottomVisible</td>
<td></td>
</tr>
<tr class="topPassed">
<td>topPassed</td>
<td></td>
</tr>
<tr class="bottomPassed">
<td>bottomPassed</td>
<td></td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="second visibility example">
<h4 class="ui header">Changing Callback Frequency</h4>
<p>Visibility's default settings will only have each callback occur <b>the first time</b> which the conditions are met. On subsequent occurences the event will not fire.</p>
<p>Setting <code>continuous: true</code> will make the callback fire <b>anytime the callback conditions are met</b>. So for example if you set a "top visible" callback, this callback will fire with each change in scroll when the top is visible on the page.</p>
<p>Setting <code>once: false</code> will make the callback fire each time a callback <b>becomes true</b>. So, using the same "top visible" example, the callback will fire each time the top of an element is passed. Even if you scroll back up and pass the element again</p>
<div class="two column equal height ui grid">
<div class="row">
<div class="main column">
<div class="ui demo segment">
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
</div>
</div>
<div class="column">
<div class="ui sticky segments">
<div class="ui segment">
<div class="ui right floated compact clear button">
Clear
</div>
<div class="ui toggle checkbox">
<input type="checkbox" checked name="once" />
<label>Once</label>
</div>
<div class="ui divider"></div>
<div class="ui toggle checkbox">
<input type="checkbox" name="continuous" />
<label>Continuous</label>
</div>
</div>
<div class="ui segment">
Event Log
</div>
<div class="ui segment">
<pre class="console"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Callbacks</h4>
<p>Callbacks are separated into two categories. Standard events will occur the first animation frame where the conditions evaluated to true.</p>
<div class="no example">
<h4 class="ui header">Standard Events</h4>
<table class="ui celled definition table">
<thead>
<tr>
<th class="three wide">Event</th>
<th class="six wide">Occurs</th>
<th>Pseudocode</th>
</tr>
</thead>
<tbody>
<tr>
<td>
onOnScreen
</td>
<td>
Any part of element is in current scroll viewport
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top && screen.bottom <= element.bottom</div>
</td>
</tr>
<tr>
<td>
onOffScreen
</td>
<td>
No part of element is in current scroll viewport
</td>
<td>
<div class="code" data-type="javascript">screen.bottom <= element.top || screen.top >= element.bottom</div>
</td>
</tr>
<tr>
<td>
onTopVisible
</td>
<td>
Element's top edge has passed bottom of screen
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top</div>
</td>
</tr>
<tr>
<td>
onTopPassed
</td>
<td>
Element's top edge has passed top of the screen
</td>
<td>
<div class="code" data-type="javascript">screen.top >= element.top</div>
</td>
</tr>
<tr>
<td>
onBottomVisible
</td>
<td>
Element's bottom edge has passed bottom of screen
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top</div>
</td>
</tr>
<tr>
<td>
onPassing
</td>
<td>
Any part of an element is visible on screen
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top && screen.top < element.bottom</div>
</td>
</tr>
<tr>
<td>
onBottomPassed
</td>
<td>
Element's bottom edge has passed top of screen
</td>
<td>
<div class="code" data-type="javascript">screen.top >= element.bottom</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Grouped Events</h4>
<p><code>onPassed</code> allows you to specify a collection of callbacks that occur after different percentages or pixels of an element are passed</p>
<table class="ui celled definition table">
<thead>
<tr>
<th class="three wide">Event</th>
<th class="six wide">Occurs</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
onPassed {}
</td>
<td>
A distance from the top of an element's content has been passed, either as a percentage or in pixels
</td>
<td>
<div class="code" data-type="javascript">
onPassed: {
40: function() {
// do something when having passed 40 pixels.
},
'80%': function() {
// do something at 80%
}
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Reverse Events</h4>
<p>Reverse events will occur under the same conditions but as a user scrolls back up the page.</p>
<table class="ui celled definition table">
<thead>
<tr>
<th class="three wide">Event</th>
<th class="six wide">Occurs</th>
<th>Pseudocode</th>
</tr>
</thead>
<tbody>
<tr>
<td>
onTopVisibleReverse
</td>
<td>
Element's top edge has not passed bottom of screen
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top</div>
</td>
</tr>
<tr>
<td>
onTopPassedReverse
</td>
<td>
Element's top edge has not passed top of the screen
</td>
<td>
<div class="code" data-type="javascript">screen.top >= element.top</div>
</td>
</tr>
<tr>
<td>
onBottomVisibleReverse
</td>
<td>
Element's bottom edge has not passed bottom of screen
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top</div>
</td>
</tr>
<tr>
<td>
onPassingReverse
</td>
<td>
Element's top has not passed top of screen but bottom has
</td>
<td>
<div class="code" data-type="javascript">screen.bottom >= element.top && screen.top < element.bottom</div>
</td>
</tr>
<tr>
<td>
onBottomPassedReverse
</td>
<td>
Element's bottom edge has not passed top of screen
</td>
<td>
<div class="code" data-type="javascript">screen.top >= element.bottom</div>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="ui header">Behaviors</h2>
<div class="no example">
<p>Visibility includes several useful behaviors for interacting with the component</p>
<table class="ui celled definition table">
<thead>
<tr>
<th class="three wide">Behavior</th>
<th class="six wide">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>
disable callbacks
</td>
<td>
Disable callbacks temporarily. This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change.
</td>
</tr>
<tr>
<td>
enable callbacks
</td>
<td>
Re-enable callbacks
</td>
</tr>
<tr>
<td>
is on screen
</td>
<td>
Returns whether element is on screen
</td>
</tr>
<tr>
<td>
is off screen
</td>
<td>
Returns whether element is off screen
</td>
</tr>
<tr>
<td>
get pixels passed
</td>
<td>
Returns number of pixels passed in current element from top of element
</td>
</tr>
<tr>
<td>
get element calculations
</td>
<td>
Returns element calculations as object
</td>
</tr>
<tr>
<td>
get screen calculations
</td>
<td>
Returns screen calculations as object
</td>
</tr>
<tr>
<td>
get screen size
</td>
<td>
Returns screen size as object
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ui tab" data-tab="examples">
<h2 class="ui dividing header">Examples</h2>
<div class="visibility infinite example">
<h4 class="ui header">Infinite Scroll</h4>
<p>As an alternative to pagination you can use <code>onBottomVisible</code> to load content automatically when the bottom of a container is reached.</p>
<div class="evaluated code" data-type="javascript">
$('.infinite.example .demo.segment')
.visibility({
once: false,
// update size when new content loads
observeChanges: true,
// load content on bottom edge visible
onBottomVisible: function() {
// loads a max of 5 times
window.loadFakeContent();
}
})
;
</div>
<div class="ui demo segment">
<h3 class="ui dividing center aligned header">Infinite Scroll Example</h3>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<div class="ui large centered inline text loader">
Adding more content...
</div>
</div>
</div>
<div class="visibility shown example">
<h4 class="ui header">Lazy Loading Images</h4>
<p>Visibility includes several shortcuts for setting up common visibility events. Using the setting <code>type: 'image'</code> will automatically attach events to an images <code>topVisible</code> to load the contents of <code>data-src</code> as <code>src</code>.</p>
<p>You can specify a placeholder image as the current <code>src</code> to make sure content doesn't jump when an image loads, or you can specify no placeholder and have the image appear.</p>
<p>By default images will appear without animation, however you can also specify a named <a href="/modules/transition.html">transition</a>, and a duration that should be used for animating the image into view</p>
<div class="evaluated code" data-type="javascript">
$('.demo.items .image img')
.visibility({
type : 'image',
transition : 'fade in',
duration : 1000
})
;
</div>
<div class="ui divided demo items">
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<h2 class="ui header">Elliot Fu</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/helen.jpg">
</div>
<div class="content">
<h2 class="ui header">Helen Troy</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<h2 class="ui header">Jenny Hess</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/veronika.jpg">
</div>
<div class="content">
<h2 class="ui header">Veronika Ossi</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<h2 class="ui header">Stevie</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/steve.jpg">
</div>
<div class="content">
<h2 class="ui header">Steve Jobes</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/ade.jpg">
</div>
<div class="content">
<h2 class="ui header">Ade</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/chris.jpg">
</div>
<div class="content">
<h2 class="ui header">Chris</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/joe.jpg">
</div>
<div class="content">
<h2 class="ui header">Joe Henderson</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/laura.jpg">
</div>
<div class="content">
<h2 class="ui header">Laura</h2>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui primary button">Add Friend</div>
<div class="ui right floated button">View <i class="right chevron icon"></i></div>
</div>
</div>
</div>
</div>
<div class="changing visibility example">
<h4 class="ui header">Gradual Changes</h4>
<p>Each callback receives all calculated values as its first parameter, allowing you to adjust an element using </p>
<div class="evaluated code" data-type="javascript">
$('.changing.example .demo.segment')
.visibility({
once : false,
continuous : true,
onPassing : function(calculations) {
var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')';
$(this)
.css('background-color', newColor)
;
}
})
;
</div>
<div class="ui demo segment" style="height: 1000px;"></div>
</div>
<div class="visibility overlay example">
<h4 class="ui header">Fixing Content To Viewport</h4>
<p>Visibility provides a lightweight method for sticking content to a page's viewport. Using <code>type: fixed</code> will add the class <code>fixed</code> after an element is passed in the viewport. Using this class name you can assign special layout conditions to an item once it is passed.</p>
<p>Using the special visibility type <code>fixed</code> will automatically create a placeholder element, which will be shown or hidden after an element is passed, to ensure that the page's position does not change when the element is "fixed" and removed from normal layout flow.</p>
<p>In this example, when an element is passed we fix it to the viewport, add a background color and box shadow so that it can float above other content. We also show an adjacent placeholder element which makes sure that content stays offset the same as if the menu was still in content flow</p>
<div class="ui ignored warning message">
You may need to adjust your fixed content's <code>z-index</code> to ensure it appears above other page content.
</div>
<div class="evaluated code" data-type="javascript">
$('.overlay.example .overlay')
.visibility({
type : 'fixed',
offset : 15 // give some space from top of screen
})
;
</div>
<div class="code" data-type="css">
.visibility.example .overlay {
background-color: #FFFFFF;
padding: 0em;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
transition: all 0.5s ease;
background: transparent;
}
/* change style */
.visibility.example .fixed.overlay {
position: fixed;
padding: 1em;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}
</div>
<div class="overlay">
<div class="ui secondary menu">
<a class="item">
<i class="sidebar icon"></i> Menu
</a>
<a class="item">Option 1</a>
<a class="item">Option 2</a>
<a class="item">Option 3</a>
</div>
</div>
<div class="ui clearing divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/centered-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/short-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/media-paragraph.png" class="ui wireframe image">
<div class="ui divider"></div>
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
</div>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui header">Settings</h2>
<div class="no example">
<h4 class="ui header">
Functionality
<div class="sub header">Settings to configure visibility behavior</div>
</h4>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>once</td>
<td>true</td>
<td>When set to false a callback will occur each time an element <b>passes the threshold</b> for a condition.</td>
</tr>
<tr>
<td>continuous</td>
<td>false</td>
<td>When set to true a callback will occur anytime an element <b>passes a condition</b> not just immediately after the threshold is met.</td>
</tr>
<tr>
<td>type</td>
<td>false</td>
<td>Set to <code>image</code> to load images when on screen. Set to <code>fixed</code> to add class name <code>fixed</code> when passed.</td>
</tr>
<tr>
<td>initialCheck</td>
<td>true</td>
<td>Whether visibility conditions should be checked immediately on init</td>
</tr>
<tr>
<td>context</td>
<td>window</td>
<td>The scroll context visibility should use.</td>
</tr>
<tr>
<td>refreshOnLoad</td>
<td>true</td>
<td>Whether visibility conditions should be checked on window <code>load</code>. This ensures that after images load content positions will be updated correctly.</td>
</tr>
<tr>
<td>refreshOnResize</td>
<td>true</td>
<td>Whether visibility conditions should be checked on window <code>resize</code>. Useful when content resizes causes continuous changes in position</td>
</tr>
<tr>
<td>checkOnRefresh</td>
<td>true</td>
<td>Whether visibility conditions should be checked on calls to <code>refresh</code>. These calls can be triggered from either <code>resize</code>, <code>load</code> or manually calling <code>$('.foo').visibility('refresh')</code></td>
</tr>
<tr>
<td>zIndex</td>
<td>1</td>
<td>Specify a z-index when using <code>type: 'fixed'</code>. <div class="ui teal horizontal label">New in 2.2</div></td>
</tr>
<tr>
<td>offset</td>
<td>0</td>
<td>Value that context <code>scrollTop</code> should be adjusted in pixels. Useful for making content appear below content fixed to the page.</td>
</tr>
<tr>
<td>includeMargin</td>
<td>false</td>
<td>Whether element calculations should include its margin</td>
</tr>
<tr>
<td>throttle</td>
<td>false</td>
<td>When set to an integer, scroll position will be debounced using this ms value. <code>false</code> will debounce with <code>requestAnimationFrame</code>.</td>
</tr>
<tr>
<td>observeChanges</td>
<td>true</td>
<td>Whether to automatically refresh content when changes are made to the element's DOM subtree </td>
</tr>
<tr>
<td>transition</td>
<td>false</td>
<td>When using <code>type: image</code> allows you to specify transition when showing a loaded image</td>
</tr>
<tr>
<td>duration</td>
<td>1000</td>
<td>When using <code>type: image</code> allows you to specify transition duration</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Visibility Callbacks</h4>
<p>Callbacks that occur on named visibility events</p>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th class="four wide"></th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onTopVisible</td>
<td>$element</td>
<td>Element's top edge has passed bottom of screen</td>
</tr>
<tr>
<td>onTopPassed</td>
<td>$element</td>
<td>Element's top edge has passed top of the screen</td>
</tr>
<tr>
<td>onBottomVisible</td>
<td>$element</td>
<td>Element's bottom edge has passed bottom of screen</td>
</tr>
<tr>
<td>onPassing</td>
<td>$element</td>
<td>Any part of an element is visible on screen</td>
</td>
</tr>
<tr>
<td>onBottomPassed</td>
<td>$element</td>
<td>Element's bottom edge has passed top of screen</td>
</tr>
<tr>
<td>onTopVisibleReverse</td>
<td>$element</td>
<td>Element's top edge has not passed bottom of screen</td>
</tr>
<tr>
<td>onTopPassedReverse</td>
<td>$element</td>
<td>Element's top edge has not passed top of the screen</td>
</tr>
<tr>
<td>onBottomVisibleReverse</td>
<td>$element</td>
<td>Element's bottom edge has not passed bottom of screen</td>
</tr>
<tr>
<td>onPassingReverse</td>
<td>$element</td>
<td>Element's top has not passed top of screen but bottom has</td>
</td>
</tr>
<tr>
<td>onBottomPassedReverse</td>
<td>$element</td>
<td>Element's bottom edge has not passed top of screen</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Image Callbacks
<div class="ui teal horizontal label">New in 2.2</div>
</h4>
<p>Callbacks that occur only when using <a href="#lazy-loading-images"><code>type: 'fixed'</code></a></p>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th class="four wide"></th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onLoad</td>
<td>img</td>
<td>Occurs after an image has completed loading</td>
</tr>
<tr>
<td>onAllLoaded</td>
<td>last loaded img</td>
<td>Occurs after all <code>img</code> initialized at the same time have loaded.</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Fixed Callbacks
<div class="ui teal horizontal label">New in 2.2</div>
</h4>
<p>Callbacks that occur only when using <a href="#fixing-content-to-viewport"><code>type: 'fixed'</code></a></p>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th class="four wide"></th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onFixed</td>
<td>$element</td>
<td>Occurs after element has been assigned position fixed</td>
</tr>
<tr>
<td>onUnfixed</td>
<td>$element</td>
<td>Occurs after element has been removed from fixed position</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Utility Callbacks</h4>
<p>Callbacks that occur on named visibility events</p>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th class="four wide"></th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onUpdate(calculations)</td>
<td>$element</td>
<td>Occurs each time an elements calculations are updated</td>
</tr>
<tr>
<td>onRefresh</td>
<td>$element</td>
<td>Occurs whenever element's visibility is refreshed</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h4>
<table class="ui celled sortable definition table segment">
<thead>
<th class="three wide">Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>visibility</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
fixed : 'fixed',
}
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Debug Settings
<div class="sub header">Debug settings controls debug output to the console</div>
</h4>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Visibility</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>silent</td>
<td>False</td>
<td>Silences all console output including error messages, regardless of other debug settings.</td>
</tr>
<tr>
<td>debug</td>
<td>False</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
error : {
method : 'The method you called is not defined.',
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
================================================
FILE: server/documents/cla.html.eco
================================================
---
layout : 'default'
css : 'cla'
title : "Contributor License Agreement"
description : 'Contribute to Semantic UI responsibly'
type : 'Legal'
---
<%- @partial('header', { tabs: { individual: 'Individual', entity: 'Entity' } }) %>
<div class="main ui container">
<div class="ui info icon message">
<i class="help circle icon"></i>
<div class="content">
<div class="header">What's in a Contributor License Agreement (CLA)?</div>
This CLA makes sure that you are entitled to contribute to Semantic UI (you are not bound by a policy that prohibits you) and that you understand parts of your code may be used in derivative works. Additionally this agreement helps to legally protect Semantic UI should you later decide that you no longer want to contribute your code.
</div>
</div>
<div class="ui tab active" data-tab="individual">
<h1>Semantic UI Individual Contributor License Agreement</h1>
<p>Thank you for your interest in contributing to Semantic UI ("We" or "Us").</p>
<p>This contributor agreement ("Agreement") documents the rights granted by contributors to Us. To make this document effective, please sign it and send it to Us by email or electronic submission, following the instructions at [URL]. This is a legally binding document, so please read it carefully before agreeing to it. The Agreement may cover more than one software project managed by Us.</p>
<h2 class="ui header">1. Definitions</h2>
<p>"You" means the individual who Submits a Contribution to Us.</p>
<p>"Contribution" means any work of authorship that is Submitted by You to Us in which You own or assert ownership of the Copyright. If You do not own the Copyright in the entire work of authorship, please follow the instructions in .</p>
<p>"Copyright" means all rights protecting works of authorship owned or controlled by You, including copyright, moral and neighboring rights, as appropriate, for the full term of their existence including any extensions by You.</p>
<p>"Material" means the work of authorship which is made available by Us to third parties. When this Agreement covers more than one software project, the Material means the work of authorship to which the Contribution was Submitted. After You Submit the Contribution, it may be included in the Material.</p>
<p>"Submit" means any form of electronic, verbal, or written communication sent to Us or our representatives, including but not limited to electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, Us for the purpose of discussing and improving the Material, but excluding communication that is conspicuously marked or otherwise designated in writing by You as "Not a Contribution."</p>
<p>"Submission Date" means the date on which You Submit a Contribution to Us.</p>
<p>"Effective Date" means the date You execute this Agreement or the date You first Submit a Contribution to Us, whichever is earlier.</p>
<p>"Media" means any portion of a Contribution which is not software.</p>
<h2 class="ui header">2. Grant of Rights</h2>
<h3>2.1 Copyright License</h3>
<p>(a) You retain ownership of the Copyright in Your Contribution and have the same rights to use or license the Contribution which You would have had without entering into the Agreement.</p>
<p>(b) To the maximum extent permitted by the relevant law, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable license under the Copyright covering the Contribution, with the right to sublicense such rights through multiple tiers of sublicensees, to reproduce, modify, display, perform and distribute the Contribution as part of the Material; provided that this license is conditioned upon compliance with Section 2.3.</p>
<h3>2.2 Patent License</h3>
<p>For patent claims including, without limitation, method, process, and apparatus claims which You own, control or have the right to grant, now or in the future, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable patent license, with the right to sublicense these rights to multiple tiers of sublicensees, to make, have made, use, sell, offer for sale, import and otherwise transfer the Contribution and the Contribution in combination with the Material (and portions of such combination). This license is granted only to the extent that the exercise of the licensed rights infringes such patent claims; and provided that this license is conditioned upon compliance with Section 2.3.</p>
<h3>2.3 Outbound License</h3>
<p><!--(Option One)-->As a condition on the grant of rights in Sections 2.1 and 2.2, We agree to license the Contribution only under the terms of the license or licenses which We are using on the Submission Date for the Material (including any rights to adopt any future version of a license if permitted).</p>
<p>In addition, We may use the following licenses for Media in the Contribution: Creative Commons Attribution 3.0 (including any right to adopt any future version of a license if permitted).</p>
<p><span class="heading">2.4 Moral Rights.</span> If moral rights apply to the Contribution, to the maximum extent permitted by law, You waive and agree not to assert such moral rights against Us or our successors in interest, or any of our licensees, either direct or indirect.</p>
<p><span class="heading">2.5 Our Rights.</span> You acknowledge that We are not obligated to use Your Contribution as part of the Material and may decide to include any Contribution We consider appropriate.</p>
<p><span class="heading">2.6 Reservation of Rights.</span> Any rights not expressly licensed under this section are expressly reserved by You.</p>
<h2 class="ui header">3. Agreement</h2>
<p>You confirm that:</p>
<p>(a) You have the legal authority to enter into this Agreement.</p>
<p>(b) You own the Copyright and patent claims covering the Contribution which are required to grant the rights under Section 2.</p>
<p>(c) The grant of rights under Section 2 does not violate any grant of rights which You have made to third parties, including Your employer. If You are an employee, You have had Your employer approve this Agreement or sign the Entity version of this document. If You are less than eighteen years old, please have Your parents or guardian sign the Agreement.</p>
<p>(d) You have followed the instructions in , if You do not own the Copyright in the entire work of authorship Submitted.</p>
<h2 class="ui header">4. Disclaimer</h2>
<p>EXCEPT FOR THE EXPRESS WARRANTIES IN SECTION 3, THE CONTRIBUTION IS PROVIDED "AS IS". MORE PARTICULARLY, ALL EXPRESS OR IMPLIED WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT ARE EXPRESSLY DISCLAIMED BY YOU TO US. TO THE EXTENT THAT ANY SUCH WARRANTIES CANNOT BE DISCLAIMED, SUCH WARRANTY IS LIMITED IN DURATION TO THE MINIMUM PERIOD PERMITTED BY LAW.</p>
<h2 class="ui header">5. Consequential Damage Waiver</h2>
<p>TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT WILL YOU BE LIABLE FOR ANY LOSS OF PROFITS, LOSS OF ANTICIPATED SAVINGS, LOSS OF DATA, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL AND EXEMPLARY DAMAGES ARISING OUT OF THIS AGREEMENT REGARDLESS OF THE LEGAL OR EQUITABLE THEORY (CONTRACT, TORT OR OTHERWISE) UPON WHICH THE CLAIM IS BASED.</p>
<h2 class="ui header">6. Miscellaneous</h2>
<p>6.1 This Agreement will be governed by and construed in accordance with the laws of United States of America excluding its conflicts of law provisions. Under certain circumstances, the governing law in this section might be superseded by the United Nations Convention on Contracts for the International
gitextract_fdrfmkx0/
├── .gitignore
├── .jshintrc
├── README.md
├── docpad.coffee
├── package.json
└── server/
├── documents/
│ ├── 404.html.eco
│ ├── behaviors/
│ │ ├── api.html.eco
│ │ ├── form.html.eco
│ │ ├── state.html.eco
│ │ └── visibility.html.eco
│ ├── cla.html.eco
│ ├── collections/
│ │ ├── breadcrumb.html.eco
│ │ ├── form.html.eco
│ │ ├── grid.html.eco
│ │ ├── menu.html.eco
│ │ ├── message.html.eco
│ │ └── table.html.eco
│ ├── elements/
│ │ ├── button.html.eco
│ │ ├── container.html.eco
│ │ ├── divider.html.eco
│ │ ├── flag.html.eco
│ │ ├── header.html.eco
│ │ ├── icon.html.eco
│ │ ├── image.html.eco
│ │ ├── input.html.eco
│ │ ├── label.html.eco
│ │ ├── list.html.eco
│ │ ├── loader.html.eco
│ │ ├── placeholder.html.eco
│ │ ├── rail.html.eco
│ │ ├── reveal.html.eco
│ │ ├── segment.html.eco
│ │ └── step.html.eco
│ ├── globals/
│ │ ├── reset.html.eco
│ │ └── site.html.eco
│ ├── hotfix.html
│ ├── iframe/
│ │ ├── fixed-menu.html
│ │ └── fixed-vertical-menu.html
│ ├── index.html.eco
│ ├── introduction/
│ │ ├── advanced-usage.html.eco
│ │ ├── build-tools.html.eco
│ │ ├── getting-started.html.eco
│ │ ├── glossary.html.eco
│ │ ├── integrations.html.eco
│ │ └── new.html.eco
│ ├── kitchen-sink.html.eco
│ ├── modules/
│ │ ├── accordion.html.eco
│ │ ├── checkbox.html.eco
│ │ ├── dimmer.html.eco
│ │ ├── dropdown.html.eco
│ │ ├── embed.html.eco
│ │ ├── modal.html.eco
│ │ ├── nag.html.eco
│ │ ├── popup.html.eco
│ │ ├── progress.html.eco
│ │ ├── rating.html.eco
│ │ ├── search.html.eco
│ │ ├── shape.html.eco
│ │ ├── sidebar.html.eco
│ │ ├── sticky.html.eco
│ │ ├── tab.html.eco
│ │ └── transition.html.eco
│ ├── test.html.eco
│ ├── usage/
│ │ ├── layout.html.eco
│ │ └── theming.html.eco
│ └── views/
│ ├── advertisement.html.eco
│ ├── card.html.eco
│ ├── comment.html.eco
│ ├── feed.html.eco
│ ├── item.html.eco
│ └── statistic.html.eco
├── files/
│ ├── javascript/
│ │ ├── accordion.js
│ │ ├── api.js
│ │ ├── button.js
│ │ ├── card.js
│ │ ├── checkbox.js
│ │ ├── container.js
│ │ ├── customize.js
│ │ ├── dimmer.js
│ │ ├── docs.js
│ │ ├── dropdown.js
│ │ ├── embed.js
│ │ ├── form.js
│ │ ├── grid.js
│ │ ├── header.js
│ │ ├── home.js
│ │ ├── icon.js
│ │ ├── input.js
│ │ ├── item.js
│ │ ├── library/
│ │ │ ├── clipboard.js
│ │ │ ├── cookie.js
│ │ │ ├── detect.js
│ │ │ ├── easing.js
│ │ │ ├── history.js
│ │ │ ├── jquery.hotkeys.js
│ │ │ ├── jquery.js
│ │ │ ├── jquery.legacy.js
│ │ │ ├── less.js
│ │ │ ├── serialize-object.js
│ │ │ ├── sinon.js
│ │ │ ├── state.js
│ │ │ ├── tablesort.js
│ │ │ ├── typing.js
│ │ │ └── underscore.js
│ │ ├── loader.js
│ │ ├── menu.js
│ │ ├── message.js
│ │ ├── modal.js
│ │ ├── new.js
│ │ ├── playground.js
│ │ ├── popup.js
│ │ ├── progress.js
│ │ ├── rating.js
│ │ ├── search.js
│ │ ├── shape.js
│ │ ├── sidebar.js
│ │ ├── slider.js
│ │ ├── started.js
│ │ ├── sticky.js
│ │ ├── tab.js
│ │ ├── table.js
│ │ ├── theming.js
│ │ ├── transition.js
│ │ ├── validate-form.js
│ │ └── visibility.js
│ └── stylesheets/
│ ├── customize.css
│ ├── docs.css
│ ├── home.css
│ ├── library/
│ │ ├── basic.icon.css
│ │ ├── docco.css
│ │ ├── sidr.css
│ │ └── snap.css
│ ├── reset.css
│ ├── rtl.css
│ └── shape.css
├── layouts/
│ ├── basic.html.eco
│ ├── blank.html.eco
│ ├── default.html.eco
│ ├── homepage.html.eco
│ └── none.html.eco
├── partials/
│ ├── css.html.eco
│ ├── demo-sidebar.html
│ ├── dimmer-demo.html
│ ├── docs-css.html.eco
│ ├── examples/
│ │ ├── accordion.html
│ │ ├── breadcrumb.html
│ │ ├── button.html
│ │ ├── card.html
│ │ ├── checkbox.html
│ │ ├── content-loader.html
│ │ ├── dimmer.html
│ │ ├── divider.html
│ │ ├── dropdown.html
│ │ ├── feed.html
│ │ ├── flag.html
│ │ ├── form.html
│ │ ├── grid.html
│ │ ├── header.html
│ │ ├── icon.html
│ │ ├── image.html
│ │ ├── input.html
│ │ ├── item.html
│ │ ├── label.html
│ │ ├── list.html
│ │ ├── loader.html
│ │ ├── menu.html
│ │ ├── message.html
│ │ ├── modal.html
│ │ ├── popup.html
│ │ ├── progress.html
│ │ ├── rating.html
│ │ ├── reveal.html
│ │ ├── search.html
│ │ ├── segment.html
│ │ ├── shape.html
│ │ ├── sidebar.html
│ │ ├── single/
│ │ │ ├── flag-menu.html
│ │ │ ├── preset-menu.html
│ │ │ ├── skill-menu.html
│ │ │ └── state-options.html
│ │ ├── statistic.html
│ │ ├── step.html
│ │ ├── tab.html
│ │ ├── table.html
│ │ └── transition.html
│ ├── fixed-menu.html.eco
│ ├── footer.html
│ ├── header.html.eco
│ ├── javascript.html.eco
│ ├── language-modal.html
│ ├── languages.html
│ ├── less.html.eco
│ ├── library-javascript.html.eco
│ ├── meta.html.eco
│ ├── sidebar.html.eco
│ ├── site-ads.html.eco
│ ├── site-menu.html.eco
│ ├── tab-header.html.eco
│ ├── tracking.html.eco
│ ├── transifex.html.eco
│ ├── ui-css.html.eco
│ └── ui-javascript.html.eco
└── raw/
├── .htaccess
├── CNAME
├── api.json
├── crossdomain.xml
├── draft/
│ ├── carousel.js
│ ├── carousel.less
│ ├── extra.transitions.less
│ └── sitemap.less
├── humans.txt
├── robots.txt
└── swf/
└── clipboard.swf
SYMBOL INDEX (321 symbols across 10 files)
FILE: server/files/javascript/docs.js
function escapeHTML (line 1105) | function escapeHTML(string) {
FILE: server/files/javascript/library/clipboard.js
function s (line 7) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
function match (line 52) | function match(el, selector) {
function delegate (line 72) | function delegate(element, selector, type, callback) {
function listener (line 93) | function listener(element, selector, type, callback) {
function listen (line 173) | function listen(target, type, callback) {
function listenNode (line 209) | function listenNode(node, type, callback) {
function listenNodeList (line 228) | function listenNodeList(nodeList, type, callback) {
function listenSelector (line 251) | function listenSelector(selector, type, callback) {
function select (line 258) | function select(element) {
function E (line 283) | function E () {
function listener (line 302) | function listener () {
function defineProperties (line 355) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _interopRequireDefault (line 357) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _classCallCheck (line 359) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function ClipboardAction (line 375) | function ClipboardAction(options) {
function _interopRequireDefault (line 589) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _classCallCheck (line 591) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function _inherits (line 593) | function _inherits(subClass, superClass) { if (typeof superClass !== 'fu...
function Clipboard (line 620) | function Clipboard(trigger, options) {
function getAttributeValue (line 728) | function getAttributeValue(suffix, element) {
FILE: server/files/javascript/library/cookie.js
function encode (line 23) | function encode(s) {
function decode (line 27) | function decode(s) {
function stringifyCookieValue (line 31) | function stringifyCookieValue(value) {
function parseCookieValue (line 35) | function parseCookieValue(s) {
function read (line 50) | function read(s, converter) {
FILE: server/files/javascript/library/jquery.hotkeys.js
function keyHandler (line 36) | function keyHandler( handleObj ) {
function keyHandler (line 148) | function keyHandler( handleObj ) {
FILE: server/files/javascript/library/jquery.js
function DOMEval (line 76) | function DOMEval( code, doc ) {
function isArrayLike (line 528) | function isArrayLike( obj ) {
function Sizzle (line 760) | function Sizzle( selector, context, results, seed ) {
function createCache (line 899) | function createCache() {
function markFunction (line 917) | function markFunction( fn ) {
function assert (line 926) | function assert( fn ) {
function addHandle (line 948) | function addHandle( attrs, handler ) {
function siblingCheck (line 963) | function siblingCheck( a, b ) {
function createInputPseudo (line 989) | function createInputPseudo( type ) {
function createButtonPseudo (line 1000) | function createButtonPseudo( type ) {
function createDisabledPseudo (line 1011) | function createDisabledPseudo( disabled ) {
function createPositionalPseudo (line 1067) | function createPositionalPseudo( fn ) {
function testContext (line 1090) | function testContext( context ) {
function setFilters (line 2172) | function setFilters() {}
function toSelector (line 2243) | function toSelector( tokens ) {
function addCombinator (line 2253) | function addCombinator( matcher, combinator, base ) {
function elementMatcher (line 2317) | function elementMatcher( matchers ) {
function multipleContexts (line 2331) | function multipleContexts( selector, contexts, results ) {
function condense (line 2340) | function condense( unmatched, map, filter, context, xml ) {
function setMatcher (line 2361) | function setMatcher( preFilter, selector, matcher, postFilter, postFinde...
function matcherFromTokens (line 2454) | function matcherFromTokens( tokens ) {
function matcherFromGroupMatchers (line 2512) | function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
function winnow (line 2853) | function winnow( elements, qualifier, not ) {
function sibling (line 3156) | function sibling( cur, dir ) {
function createOptions (line 3232) | function createOptions( options ) {
function Identity (line 3457) | function Identity( v ) {
function Thrower (line 3460) | function Thrower( ex ) {
function adoptValue (line 3464) | function adoptValue( value, resolve, reject ) {
function resolve (line 3556) | function resolve( depth, deferred, handler, special ) {
function completed (line 3922) | function completed() {
function Data (line 4024) | function Data() {
function getData (line 4193) | function getData( data ) {
function dataAttr (line 4218) | function dataAttr( elem, key, data ) {
function adjustCSS (line 4531) | function adjustCSS( elem, prop, valueParts, tween ) {
function getDefaultDisplay (line 4596) | function getDefaultDisplay( elem ) {
function showHide (line 4619) | function showHide( elements, show ) {
function getAll (line 4720) | function getAll( context, tag ) {
function setGlobalEval (line 4745) | function setGlobalEval( elems, refElements ) {
function buildFragment (line 4761) | function buildFragment( elems, context, scripts, selection, ignored ) {
function returnTrue (line 4884) | function returnTrue() {
function returnFalse (line 4888) | function returnFalse() {
function safeActiveElement (line 4894) | function safeActiveElement() {
function on (line 4900) | function on( elem, types, selector, data, fn, one ) {
function manipulationTarget (line 5628) | function manipulationTarget( elem, content ) {
function disableScript (line 5639) | function disableScript( elem ) {
function restoreScript (line 5643) | function restoreScript( elem ) {
function cloneCopyEvent (line 5655) | function cloneCopyEvent( src, dest ) {
function fixInput (line 5690) | function fixInput( src, dest ) {
function domManip (line 5703) | function domManip( collection, args, callback, ignored ) {
function remove (line 5793) | function remove( elem, selector, keepData ) {
function computeStyleTests (line 6086) | function computeStyleTests() {
function curCSS (line 6160) | function curCSS( elem, name, computed ) {
function addGetHookIf (line 6207) | function addGetHookIf( conditionFn, hookFn ) {
function vendorPropName (line 6243) | function vendorPropName( name ) {
function setPositiveNumber (line 6262) | function setPositiveNumber( elem, value, subtract ) {
function augmentWidthOrHeight (line 6274) | function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight (line 6320) | function getWidthOrHeight( elem, name, extra ) {
function Tween (line 6628) | function Tween( elem, options, prop, end, easing ) {
function raf (line 6751) | function raf() {
function createFxNow (line 6759) | function createFxNow() {
function genFx (line 6767) | function genFx( type, includeWidth ) {
function createTween (line 6787) | function createTween( value, prop, animation ) {
function defaultPrefilter (line 6801) | function defaultPrefilter( elem, props, opts ) {
function propFilter (line 6972) | function propFilter( props, specialEasing ) {
function Animation (line 7009) | function Animation( elem, properties, options ) {
function stripAndCollapse (line 7723) | function stripAndCollapse( value ) {
function getClass (line 7729) | function getClass( elem ) {
function buildParams (line 8353) | function buildParams( prefix, obj, traditional, add ) {
function addToPrefiltersOrTransports (line 8503) | function addToPrefiltersOrTransports( structure ) {
function inspectPrefiltersOrTransports (line 8537) | function inspectPrefiltersOrTransports( structure, options, originalOpti...
function ajaxExtend (line 8566) | function ajaxExtend( target, src ) {
function ajaxHandleResponses (line 8586) | function ajaxHandleResponses( s, jqXHR, responses ) {
function ajaxConvert (line 8644) | function ajaxConvert( s, response, jqXHR, isSuccess ) {
function done (line 9157) | function done( status, nativeStatusText, responses, headers ) {
function getWindow (line 9882) | function getWindow( elem ) {
FILE: server/files/javascript/library/jquery.legacy.js
function isArraylike (line 571) | function isArraylike( obj ) {
function Sizzle (line 783) | function Sizzle( selector, context, results, seed ) {
function createCache (line 897) | function createCache() {
function markFunction (line 915) | function markFunction( fn ) {
function assert (line 924) | function assert( fn ) {
function addHandle (line 946) | function addHandle( attrs, handler ) {
function siblingCheck (line 961) | function siblingCheck( a, b ) {
function createInputPseudo (line 988) | function createInputPseudo( type ) {
function createButtonPseudo (line 999) | function createButtonPseudo( type ) {
function createPositionalPseudo (line 1010) | function createPositionalPseudo( fn ) {
function testContext (line 1033) | function testContext( context ) {
function setFilters (line 2042) | function setFilters() {}
function toSelector (line 2113) | function toSelector( tokens ) {
function addCombinator (line 2123) | function addCombinator( matcher, combinator, base ) {
function elementMatcher (line 2176) | function elementMatcher( matchers ) {
function multipleContexts (line 2190) | function multipleContexts( selector, contexts, results ) {
function condense (line 2199) | function condense( unmatched, map, filter, context, xml ) {
function setMatcher (line 2220) | function setMatcher( preFilter, selector, matcher, postFilter, postFinde...
function matcherFromTokens (line 2313) | function matcherFromTokens( tokens ) {
function matcherFromGroupMatchers (line 2371) | function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
function winnow (line 2667) | function winnow( elements, qualifier, not ) {
function sibling (line 2997) | function sibling( cur, dir ) {
function createOptions (line 3080) | function createOptions( options ) {
function detach (line 3480) | function detach() {
function completed (line 3494) | function completed() {
function dataAttr (line 3657) | function dataAttr( elem, key, data ) {
function isEmptyDataObject (line 3689) | function isEmptyDataObject( obj ) {
function internalData (line 3705) | function internalData( elem, name, data, pvt /* Internal Use Only */ ) {
function internalRemoveData (line 3794) | function internalRemoveData( elem, name, pvt ) {
function returnTrue (line 4279) | function returnTrue() {
function returnFalse (line 4283) | function returnFalse() {
function safeActiveElement (line 4287) | function safeActiveElement() {
function createSafeFragment (line 5296) | function createSafeFragment( document ) {
function getAll (line 5348) | function getAll( context, tag ) {
function fixDefaultChecked (line 5371) | function fixDefaultChecked( elem ) {
function manipulationTarget (line 5379) | function manipulationTarget( elem, content ) {
function disableScript (line 5389) | function disableScript( elem ) {
function restoreScript (line 5393) | function restoreScript( elem ) {
function setGlobalEval (line 5404) | function setGlobalEval( elems, refElements ) {
function cloneCopyEvent (line 5412) | function cloneCopyEvent( src, dest ) {
function fixCloneNodeIssues (line 5440) | function fixCloneNodeIssues( src, dest ) {
function actualDisplay (line 6031) | function actualDisplay( name, doc ) {
function defaultDisplay (line 6053) | function defaultDisplay( nodeName ) {
function addGetHookIf (line 6252) | function addGetHookIf( conditionFn, hookFn ) {
function computeStyleTests (line 6346) | function computeStyleTests() {
function vendorPropName (line 6466) | function vendorPropName( style, name ) {
function showHide (line 6488) | function showHide( elements, show ) {
function setPositiveNumber (line 6539) | function setPositiveNumber( elem, value, subtract ) {
function augmentWidthOrHeight (line 6547) | function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight (line 6586) | function getWidthOrHeight( elem, name, extra ) {
function Tween (line 6925) | function Tween( elem, options, prop, end, easing ) {
function createFxNow (line 7094) | function createFxNow() {
function genFx (line 7102) | function genFx( type, includeWidth ) {
function createTween (line 7122) | function createTween( value, prop, animation ) {
function defaultPrefilter (line 7136) | function defaultPrefilter( elem, props, opts ) {
function propFilter (line 7278) | function propFilter( props, specialEasing ) {
function Animation (line 7315) | function Animation( elem, properties, options ) {
function addToPrefiltersOrTransports (line 8629) | function addToPrefiltersOrTransports( structure ) {
function inspectPrefiltersOrTransports (line 8661) | function inspectPrefiltersOrTransports( structure, options, originalOpti...
function ajaxExtend (line 8688) | function ajaxExtend( target, src ) {
function ajaxHandleResponses (line 8708) | function ajaxHandleResponses( s, jqXHR, responses ) {
function ajaxConvert (line 8763) | function ajaxConvert( s, response, jqXHR, isSuccess ) {
function done (line 9223) | function done( status, nativeStatusText, responses, headers ) {
function buildParams (line 9468) | function buildParams( prefix, obj, traditional, add ) {
function createStandardXHR (line 9741) | function createStandardXHR() {
function createActiveXHR (line 9747) | function createActiveXHR() {
function getWindow (line 10052) | function getWindow( elem ) {
FILE: server/files/javascript/library/less.js
function s (line 13) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
function errorHTML (line 197) | function errorHTML(e, rootHref) {
function error (line 298) | function error(e, rootHref) {
function removeErrorHTML (line 308) | function removeErrorHTML(path) {
function removeErrorConsole (line 315) | function removeErrorConsole(path) {
function removeError (line 319) | function removeError(path) {
function errorConsole (line 329) | function errorConsole(e, rootHref) {
function getXMLHttpRequest (line 374) | function getXMLHttpRequest() {
function handleResponse (line 415) | function handleResponse(xhr, callback, errback) {
function postProcessCSS (line 514) | function postProcessCSS(styles) { // deprecated, use a plugin for postpr...
function clone (line 521) | function clone(obj) {
function bind (line 532) | function bind(func, thisArg) {
function loadStyles (line 540) | function loadStyles(modifyVars) {
function loadStyleSheet (line 571) | function loadStyleSheet(sheet, callback, reload, remaining, modifyVars) {
function loadStyleSheets (line 636) | function loadStyleSheets(callback, reload, modifyVars) {
function initRunningMode (line 642) | function initRunningMode() {
function colorBlend (line 1299) | function colorBlend(mode, color1, color2) {
function clamp (line 1376) | function clamp(val) {
function hsla (line 1379) | function hsla(color) {
function number (line 1382) | function number(n) {
function scaled (line 1394) | function scaled(n, size) {
function hue (line 1414) | function hue(h) {
function makeRegistry (line 1854) | function makeRegistry( base ) {
function _math (line 1922) | function _math(fn, unit, n) {
function throwArgumentDescriptor (line 2084) | function throwArgumentDescriptor() {
function emitChunk (line 2629) | function emitChunk(force) {
function expect (line 3040) | function expect(arg, msg, index) {
function expectChar (line 3051) | function expectChar(arg, msg) {
function error (line 3058) | function error(msg, type) {
function getDebugInfo (line 3070) | function getDebugInfo(index) {
function match (line 4710) | function match(re) {
function clamp (line 5456) | function clamp(v, max) {
function toHex (line 5460) | function toHex(v) {
function calcDefGroup (line 6715) | function calcDefGroup(mixin, mixinPath) {
function iterativeReplace (line 7249) | function iterativeReplace(value, regexp, replacementFnc) {
function evalName (line 7288) | function evalName(context, name) {
function isRulesetLikeNode (line 7712) | function isRulesetLikeNode(rule) {
function createParenthesis (line 7866) | function createParenthesis(elementsToPak, originalElement) {
function createSelector (line 7880) | function createSelector(containedElement, originalElement) {
function replaceParentSelector (line 7890) | function replaceParentSelector(paths, context, inSelector) {
function addReplacementIntoPath (line 8009) | function addReplacementIntoPath(beginningPath, addPath, replacedElement,...
function addAllReplacementsIntoPath (line 8054) | function addAllReplacementsIntoPath( beginningPath, addPaths, replacedEl...
function mergeElementsOnToSelectors (line 8063) | function mergeElementsOnToSelectors(elements, selectors) {
function ImportSequencer (line 8986) | function ImportSequencer(onSequencerEmpty) {
function hasVisibleChild (line 9364) | function hasVisibleChild(directiveNode) {
function toExpression (line 9557) | function toExpression(values) {
function toValue (line 9563) | function toValue(values) {
function _noop (line 9599) | function _noop(node) {
function indexNodeTypes (line 9603) | function indexNodeTypes(parent, ticker) {
function drainQueue (line 9754) | function drainQueue() {
function noop (line 9786) | function noop() {}
function Promise (line 9813) | function Promise(fn) {
function Handler (line 9882) | function Handler(onFulfilled, onRejected, resolve, reject){
function doResolve (line 9895) | function doResolve(fn, onFulfilled, onRejected) {
function ValuePromise (line 9926) | function ValuePromise(value) {
function res (line 9981) | function res(i, val) {
function flush (line 10037) | function flush() {
function asap (line 10124) | function asap(task) {
FILE: server/files/javascript/library/serialize-object.js
function FormSerializer (line 38) | function FormSerializer(helper, $form) {
FILE: server/files/javascript/library/sinon.js
function define (line 38) | function define(mod, deps, fn) { if (mod == "samsam") { samsam = deps();...
function isNaN (line 48) | function isNaN(value) {
function getClass (line 56) | function getClass(value) {
function isArguments (line 70) | function isArguments(object) {
function isElement (line 94) | function isElement(object) {
function keys (line 111) | function keys(object) {
function isDate (line 128) | function isDate(value) {
function isNegZero (line 139) | function isNegZero(value) {
function identical (line 154) | function identical(obj1, obj2) {
function deepEqualCyclic (line 176) | function deepEqualCyclic(obj1, obj2) {
function arrayContains (line 344) | function arrayContains(array, subset) {
function functionName (line 446) | function functionName(func) {
function constructorName (line 454) | function constructorName(f, object) {
function isCircular (line 471) | function isCircular(object, objects) {
function ascii (line 480) | function ascii(f, object, processed, indent) {
function Formatio (line 592) | function Formatio(options) {
function isDOMNode (line 631) | function isDOMNode(obj) {
function isElement (line 650) | function isElement(obj) {
function isFunction (line 654) | function isFunction(obj) {
function isReallyNaN (line 658) | function isReallyNaN(val) {
function mirrorProperties (line 662) | function mirrorProperties(target, source) {
function isRestorable (line 670) | function isRestorable (obj) {
function makePublicAPI (line 955) | function makePublicAPI(require, exports, module) {
function assertType (line 1022) | function assertType(value, type, name) {
function isMatcher (line 1036) | function isMatcher(object) {
function matchObject (line 1040) | function matchObject(expectation, actual) {
function createPropertyMatcher (line 1196) | function createPropertyMatcher(propertyTest, messagePrefix) {
function throwYieldError (line 1271) | function throwYieldError(proxy, text, args) {
function createSpyCall (line 1423) | function createSpyCall(spy, thisValue, args, returnValue, exception, id) {
function spy (line 1478) | function spy(object, property) {
function matchingFake (line 1491) | function matchingFake(fakes, args, strict) {
function incrementCallCount (line 1503) | function incrementCallCount() {
function createCallProperties (line 1512) | function createCallProperties() {
function createProxy (line 1520) | function createProxy(func) {
function delegateToCalls (line 1739) | function delegateToCalls(method, matchAny, actual, notCalled) {
function throwsException (line 1908) | function throwsException(error, message) {
function getCallback (line 1921) | function getCallback(behavior, args) {
function getCallbackError (line 1944) | function getCallbackError(behavior, func, args) {
function callCallback (line 1967) | function callCallback(behavior, args) {
function stub (line 2227) | function stub(object, property, func) {
function getDefaultBehavior (line 2257) | function getDefaultBehavior(stub) {
function getParentBehaviour (line 2261) | function getParentBehaviour(stub) {
function getCurrentBehavior (line 2265) | function getCurrentBehavior(stub) {
function mock (line 2395) | function mock(object) {
function each (line 2406) | function each(collection, callback) {
function callCountInWords (line 2533) | function callCountInWords(callCount) {
function expectedCallCountInWords (line 2541) | function expectedCallCountInWords(expectation) {
function receivedMinCalls (line 2562) | function receivedMinCalls(expectation) {
function receivedMaxCalls (line 2567) | function receivedMaxCalls(expectation) {
function verifyMatcher (line 2575) | function verifyMatcher(possibleMatcher, arg){
function getFakes (line 2841) | function getFakes(fakeCollection) {
function each (line 2849) | function each(fakeCollection, method) {
function compact (line 2859) | function compact(fakeCollection) {
function addTimer (line 3001) | function addTimer(args, recurring) {
function parseTime (line 3040) | function parseTime(str) {
function createObject (line 3066) | function createObject(object) {
function ClockDate (line 3230) | function ClockDate(year, month, date, hour, minute, second, ms) {
function mirrorDateProperties (line 3257) | function mirrorDateProperties(target, source) {
function restore (line 3303) | function restore() {
function stubGlobal (line 3322) | function stubGlobal(method, clock) {
function FakeXMLHttpRequest (line 3526) | function FakeXMLHttpRequest() {
function UploadProgress (line 3564) | function UploadProgress() {
function verifyState (line 3595) | function verifyState(xhr) {
function each (line 3607) | function each(collection, callback) {
function some (line 3613) | function some(collection, callback) {
function verifyRequestOpened (line 3685) | function verifyRequestOpened(xhr) {
function verifyRequestSent (line 3691) | function verifyRequestSent(xhr) {
function verifyHeadersReceived (line 3697) | function verifyHeadersReceived(xhr) {
function verifyResponseBodyType (line 3703) | function verifyResponseBodyType(body) {
function F (line 4068) | function F() {}
function create (line 4070) | function create(proto) {
function responseArray (line 4075) | function responseArray(handler) {
function matchOne (line 4093) | function matchOne(response, reqMethod, reqUrl) {
function match (line 4102) | function match(response, request) {
function Server (line 4279) | function Server() {}
function exposeValue (line 4366) | function exposeValue(sandbox, config, key, value) {
function prepareSandboxFromConfig (line 4379) | function prepareSandboxFromConfig(config) {
function test (line 4512) | function test(callback) {
function createTest (line 4595) | function createTest(property, setUp, tearDown) {
function testCase (line 4621) | function testCase(tests, prefix) {
function verifyIsStub (line 4696) | function verifyIsStub() {
function failAssertion (line 4716) | function failAssertion(object, msg) {
function mirrorPropAsAssertion (line 4722) | function mirrorPropAsAssertion(name, method, message) {
function exposedName (line 4749) | function exposedName(prefix, prop) {
function FakeXDomainRequest (line 4889) | function FakeXDomainRequest() {
function verifyState (line 4901) | function verifyState(xdr) {
function verifyRequestSent (line 4911) | function verifyRequestSent(xdr) {
function verifyResponseBodyType (line 4920) | function verifyResponseBodyType(body) {
FILE: server/files/javascript/library/underscore.js
function createReduce (line 178) | function createReduce(dir) {
function createPredicateIndexFinder (line 614) | function createPredicateIndexFinder(dir) {
function createIndexFinder (line 644) | function createIndexFinder(dir, predicateFind, sortedIndex) {
function collectNonEnumProps (line 909) | function collectNonEnumProps(obj, keys) {
Condensed preview — 213 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,731K chars).
[
{
"path": ".gitignore",
"chars": 319,
"preview": "node_modules\nout/\npackage-lock.json\n\n# Numerous always-ignore extensions\n*.diff\n*.err\n*.orig\n*.log\n*.rej\n*.swo\n\n*.swp\n*."
},
{
"path": ".jshintrc",
"chars": 813,
"preview": "{\n\n \"globals\": {\n \"$\" : true,\n \"afterEach\" : true,\n \"beforeEach\" :"
},
{
"path": "README.md",
"chars": 2076,
"preview": "# Semantic Docs\n\nThis folder contains the templates used to generate the static website for [semantic-ui.com](http://www"
},
{
"path": "docpad.coffee",
"chars": 4213,
"preview": "# The DocPad Configuration File\n# It is simply a CoffeeScript Object which is parsed by CSON\ndocpadConfig = {\n\n\tsrcPath "
},
{
"path": "package.json",
"chars": 649,
"preview": "{\n \"name\": \"semantic-ui-docs\",\n \"title\": \"Semantic UI Docs\",\n \"description\": \"Semantic empowers designers and develop"
},
{
"path": "server/documents/404.html.eco",
"chars": 149,
"preview": "---\nlayout : 'default'\ntitle : 'Page Not Found'\ntype : '404'\n---\n<%- @partial('header') %>\n\n<div class"
},
{
"path": "server/documents/behaviors/api.html.eco",
"chars": 50052,
"preview": "---\nlayout : 'default'\ncss : 'api'\nstandalone : true\n\nelement : 'API'\nelementType : 'behavior'\n\ntitle "
},
{
"path": "server/documents/behaviors/form.html.eco",
"chars": 75726,
"preview": "---\nlayout : 'default'\ncss : 'form'\nstandalone : true\n\nelement : 'validation'\nelementType : 'behavior'"
},
{
"path": "server/documents/behaviors/state.html.eco",
"chars": 14031,
"preview": "---\nlayout : 'default'\ncss : 'state'\nstandalone : true\n\nelement : 'State'\nelementType : 'draft'\n\ntitle"
},
{
"path": "server/documents/behaviors/visibility.html.eco",
"chars": 42584,
"preview": "---\nlayout : 'default'\ncss : 'visibility minimal'\nelement : 'visibility'\nelementType : 'behavior'\nstand"
},
{
"path": "server/documents/cla.html.eco",
"chars": 18652,
"preview": "---\nlayout : 'default'\ncss : 'cla'\ntitle : \"Contributor License Agreement\"\ndescription : 'Contribute "
},
{
"path": "server/documents/collections/breadcrumb.html.eco",
"chars": 5449,
"preview": "---\nlayout : 'default'\ncss : 'breadcrumb'\nstandalone : true\n\nelement : 'breadcrumb'\nelementType : 'col"
},
{
"path": "server/documents/collections/form.html.eco",
"chars": 57046,
"preview": "---\nlayout : 'default'\ncss : 'form'\nstandalone : true\n\nelement : 'form'\nelementType : 'collection'\n\nti"
},
{
"path": "server/documents/collections/grid.html.eco",
"chars": 57912,
"preview": "---\nlayout : 'default'\ncss : 'Grid'\nstandalone : true\n\nelement : 'grid'\nelementType : 'collection'\n\nti"
},
{
"path": "server/documents/collections/menu.html.eco",
"chars": 43513,
"preview": "---\nlayout : 'default'\ncss : 'menu'\nstandalone : true\n\nelement : 'menu'\nelementType : 'collection'\n\nti"
},
{
"path": "server/documents/collections/message.html.eco",
"chars": 8888,
"preview": "---\nlayout : 'default'\ncss : 'message'\nstandalone : true\n\nelement : 'message'\nelementType : 'collectio"
},
{
"path": "server/documents/collections/table.html.eco",
"chars": 50516,
"preview": "---\nlayout : 'default'\ncss : 'table'\nstandalone : true\n\nelement : 'table'\nelementType : 'collection'\n\n"
},
{
"path": "server/documents/elements/button.html.eco",
"chars": 21947,
"preview": "---\nlayout : 'default'\ncss : 'button-page'\nelement : 'button'\nelementType : 'element'\nstandalone : tru"
},
{
"path": "server/documents/elements/container.html.eco",
"chars": 19480,
"preview": "---\nlayout : 'default'\ncss : 'basic minimal'\nelement : 'container'\nelementType : 'element'\nstandalone "
},
{
"path": "server/documents/elements/divider.html.eco",
"chars": 8087,
"preview": "---\nlayout : 'default'\ncss : 'divider'\nstandalone : true\n\nelement : 'divider'\nelementType : 'element'\n"
},
{
"path": "server/documents/elements/flag.html.eco",
"chars": 38892,
"preview": "---\nlayout : 'default'\ncss : 'flag-page'\nelement : 'flag'\nelementType : 'element'\nstandalone : true\n\nt"
},
{
"path": "server/documents/elements/header.html.eco",
"chars": 11544,
"preview": "---\nlayout : 'default'\ncss : 'header'\nstandalone : true\n\nelement : 'header'\nelementType : 'element'\n\nt"
},
{
"path": "server/documents/elements/icon.html.eco",
"chars": 209978,
"preview": "---\nlayout : 'default'\ncss : 'icon'\nstandalone : true\n\nelement : 'icon'\nelementType : 'element'\n\ntitle"
},
{
"path": "server/documents/elements/image.html.eco",
"chars": 10549,
"preview": "---\nlayout : 'default'\ncss : 'image'\nstandalone : true\n\nelement : 'image'\nelementType : 'element'\n\ntit"
},
{
"path": "server/documents/elements/input.html.eco",
"chars": 10324,
"preview": "---\nlayout : 'default'\ncss : 'input'\nstandalone : true\n\nelement : 'input'\nelementType : 'element'\n\ntit"
},
{
"path": "server/documents/elements/label.html.eco",
"chars": 16922,
"preview": "---\nlayout : 'default'\ncss : 'label'\nstandalone : true\n\nelement : 'label'\nelementType : 'element'\n\ntit"
},
{
"path": "server/documents/elements/list.html.eco",
"chars": 32075,
"preview": "---\nlayout : 'default'\ncss : 'list'\nstandalone : true\n\nelement : 'list'\nelementType : 'element'\n\ntitle"
},
{
"path": "server/documents/elements/loader.html.eco",
"chars": 7621,
"preview": "---\nlayout : 'default'\ncss : 'loader'\nstandalone : true\n\nelement : 'loader'\nelementType : 'element'\n\nt"
},
{
"path": "server/documents/elements/placeholder.html.eco",
"chars": 8343,
"preview": "---\nlayout : 'default'\ncss : 'loader'\nstandalone : true\n\nelement : 'placeholder'\nelementType : 'elemen"
},
{
"path": "server/documents/elements/rail.html.eco",
"chars": 7624,
"preview": "---\nlayout : 'default'\ncss : 'basic minimal'\nelement : 'rail'\nelementType : 'element'\nstandalone : tru"
},
{
"path": "server/documents/elements/reveal.html.eco",
"chars": 5773,
"preview": "---\nlayout : 'default'\ncss : 'reveal'\nstandalone : true\n\nelement : 'reveal'\nelementType : 'element'\n\nt"
},
{
"path": "server/documents/elements/segment.html.eco",
"chars": 18518,
"preview": "---\nlayout : 'default'\ncss : 'segment'\nstandalone : true\n\nelement : 'segment'\nelementType : 'element'\n"
},
{
"path": "server/documents/elements/step.html.eco",
"chars": 16880,
"preview": "---\nlayout : 'default'\ncss : 'steps'\nstandalone : true\n\nelement : 'step'\nelementType : 'element'\n\ntitl"
},
{
"path": "server/documents/globals/reset.html.eco",
"chars": 19606,
"preview": "---\nlayout : 'default'\ncss : 'reset-page'\nelement : 'reset'\nelementType : 'global'\n\ntitle : 'Rese"
},
{
"path": "server/documents/globals/site.html.eco",
"chars": 12064,
"preview": "---\nlayout : 'default'\ncss : 'site'\nelement : 'site'\nelementType : 'global'\nstandalone : true\n\ntitle "
},
{
"path": "server/documents/hotfix.html",
"chars": 649,
"preview": "---\nlayout : 'blank'\ncss : 'hotfix'\nstandalone : true\n\ntitle : 'Test Page'\ntype : 'Library'\n---\n\n<"
},
{
"path": "server/documents/iframe/fixed-menu.html",
"chars": 638,
"preview": "---\nlayout : 'blank'\nstandalone : true\n---\n<div class=\"ui top fixed menu\">\n <div class=\"item\">\n <img src=\"/image"
},
{
"path": "server/documents/iframe/fixed-vertical-menu.html",
"chars": 700,
"preview": "---\nlayout : 'blank'\nstandalone : true\n---\n<div class=\"ui left fixed vertical menu\">\n <div class=\"item\">\n <img c"
},
{
"path": "server/documents/index.html.eco",
"chars": 50874,
"preview": "---\nlayout : 'homepage'\ncss : 'index'\nstandalone : false\n---\n<div class=\"following bar\">\n <div class=\"ui con"
},
{
"path": "server/documents/introduction/advanced-usage.html.eco",
"chars": 10069,
"preview": "---\nlayout : 'default'\ncss : 'started'\nstandalone : true\norder : 4\n\ntitle : 'Recipes'\ndescript"
},
{
"path": "server/documents/introduction/build-tools.html.eco",
"chars": 10487,
"preview": "---\nlayout : 'default'\ncss : 'started'\nstandalone : true\norder : 3\n\ntitle : 'Build Tools'\ndesc"
},
{
"path": "server/documents/introduction/getting-started.html.eco",
"chars": 7322,
"preview": "---\nlayout : 'default'\ncss : 'started'\nstandalone : true\norder : 1\n\ntitle : 'Getting Started'\n"
},
{
"path": "server/documents/introduction/glossary.html.eco",
"chars": 8248,
"preview": "---\nlayout : 'default'\ncss : 'started'\nstandalone : true\norder : 5\n\ntitle : 'Glossary'\ndescrip"
},
{
"path": "server/documents/introduction/integrations.html.eco",
"chars": 6101,
"preview": "---\nlayout : 'default'\ncss : 'started'\nstandalone : true\norder : 2\n\ntitle : 'Integrations'\ndes"
},
{
"path": "server/documents/introduction/new.html.eco",
"chars": 100196,
"preview": "---\nlayout : 'default'\ncss : 'new'\nstandalone : true\norder : 1\n\ntitle : 'New in 2.4'\ndescripti"
},
{
"path": "server/documents/kitchen-sink.html.eco",
"chars": 6909,
"preview": "---\nlayout : 'default'\ncss : 'custom'\nstandalone : true\n\ntitle : 'All UI'\ntype : 'UI Examples"
},
{
"path": "server/documents/modules/accordion.html.eco",
"chars": 23068,
"preview": "---\nlayout : 'default'\ncss : 'accordion'\nelement : 'accordion'\nelementType : 'module'\nstandalone : tru"
},
{
"path": "server/documents/modules/checkbox.html.eco",
"chars": 29956,
"preview": "---\nlayout : 'default'\ncss : 'checkbox'\nelement : 'checkbox'\nelementType : 'module'\nstandalone : true\n"
},
{
"path": "server/documents/modules/dimmer.html.eco",
"chars": 20858,
"preview": "---\nlayout : 'default'\ncss : 'dim'\nstandalone : true\n\nelement : 'dimmer'\nelementType : 'module'\n\ntitle"
},
{
"path": "server/documents/modules/dropdown.html.eco",
"chars": 106987,
"preview": "---\nlayout : 'default'\ncss : 'dropdown'\nstandalone : true\n\ntitle : 'Dropdown'\ndescription : 'A dropd"
},
{
"path": "server/documents/modules/embed.html.eco",
"chars": 17343,
"preview": "---\nlayout : 'default'\ncss : ''\nstandalone : true\n\nelement : 'Embed'\nelementType : 'module'\n\ntitle "
},
{
"path": "server/documents/modules/modal.html.eco",
"chars": 32819,
"preview": "---\nlayout : 'default'\ncss : 'modal-page'\nstandalone : true\n\nelement : 'modal'\nelementType : 'module'\n"
},
{
"path": "server/documents/modules/nag.html.eco",
"chars": 2637,
"preview": "---\nlayout : 'default'\ncss : ''\nelement : 'nag'\nelementType : 'module'\nstandalone : true\n\ntitle "
},
{
"path": "server/documents/modules/popup.html.eco",
"chars": 38683,
"preview": "---\nlayout : 'default'\ncss : 'popup'\nstandalone : true\n\nelement : 'popup'\nelementType : 'module'\n\ntitl"
},
{
"path": "server/documents/modules/progress.html.eco",
"chars": 32672,
"preview": "---\nlayout : 'default'\ncss : 'progress'\nstandalone : true\n\nelement : 'progress'\nelementType : 'module'"
},
{
"path": "server/documents/modules/rating.html.eco",
"chars": 10787,
"preview": "---\nlayout : 'default'\ncss : 'rating'\nstandalone : true\n\nelement : 'rating'\nelementType : 'module'\n\nti"
},
{
"path": "server/documents/modules/search.html.eco",
"chars": 32073,
"preview": "---\nlayout : 'default'\ncss : ''\nelement : 'search'\nelementType : 'module'\nstandalone : true\n\ntitle "
},
{
"path": "server/documents/modules/shape.html.eco",
"chars": 19481,
"preview": "---\nlayout : 'default'\ncss : 'shape'\nstandalone : true\n\nelement : 'shape'\nelementType : 'module'\n\ntitl"
},
{
"path": "server/documents/modules/sidebar.html.eco",
"chars": 27849,
"preview": "---\nlayout : 'default'\ncss : 'minimal'\nstandalone : true\n\nelement : 'sidebar'\nelementType : 'element'\n"
},
{
"path": "server/documents/modules/sticky.html.eco",
"chars": 29325,
"preview": "---\nlayout : 'default'\ncss : 'basic minimal'\nelement : 'sticky'\nelementType : 'module'\nstandalone : tr"
},
{
"path": "server/documents/modules/tab.html.eco",
"chars": 35660,
"preview": "---\nlayout : 'default'\ncss : ''\nelement : 'tab'\nelementType : 'module'\nstandalone : true\n\ntitle "
},
{
"path": "server/documents/modules/transition.html.eco",
"chars": 27275,
"preview": "---\nlayout : 'default'\ncss : 'transition'\nelement : 'transition'\nelementType : 'module'\nstandalone : t"
},
{
"path": "server/documents/test.html.eco",
"chars": 19566,
"preview": "---\nlayout : 'blank'\ncss : 'hotfix'\nstandalone : true\n\ntitle : 'Layout Page'\ndescription: 'This page can"
},
{
"path": "server/documents/usage/layout.html.eco",
"chars": 3695,
"preview": "---\nlayout : 'default'\ncss : 'layouts'\nstandalone : true\norder : 3\n\ntitle : 'Layouts'\ndescript"
},
{
"path": "server/documents/usage/theming.html.eco",
"chars": 18919,
"preview": "---\nlayout : 'default'\ncss : 'theming'\nstandalone : true\norder : 2\n\ntitle : 'Theming'\ndescript"
},
{
"path": "server/documents/views/advertisement.html.eco",
"chars": 7150,
"preview": "---\nlayout : 'default'\ncss : 'ad'\n\nelement : 'advertisement'\nelementType : 'view'\n\ntitle : 'Adver"
},
{
"path": "server/documents/views/card.html.eco",
"chars": 28363,
"preview": "---\nlayout : 'default'\ncss : 'card'\nstandalone : true\n\nelement : 'card'\nelementType : 'view'\n\ntitle "
},
{
"path": "server/documents/views/comment.html.eco",
"chars": 20959,
"preview": "---\nlayout : 'default'\ncss : 'comment'\nelement : 'comment'\nelementType : 'view'\nstandalone : true\n\ntit"
},
{
"path": "server/documents/views/feed.html.eco",
"chars": 9813,
"preview": "---\nlayout : 'default'\ncss : 'feed'\nstandalone : true\n\ntitle : 'Feed'\ndescription : 'A feed presents"
},
{
"path": "server/documents/views/item.html.eco",
"chars": 20392,
"preview": "---\nlayout : 'default'\ncss : 'item'\nstandalone : true\n\nelement : 'item'\nelementType : 'view'\n\ntitle "
},
{
"path": "server/documents/views/statistic.html.eco",
"chars": 13537,
"preview": "---\nlayout : 'default'\ncss : 'stat'\nstandalone : true\n\nelement : 'statistic'\nelementType : 'view'\n\ntit"
},
{
"path": "server/files/javascript/accordion.js",
"chars": 472,
"preview": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n // selector cache\n var\n $accordi"
},
{
"path": "server/files/javascript/api.js",
"chars": 2582,
"preview": "\n$.fn.api.settings.debug = true;\n\n/* Define API endpoints once globally */\n$.extend($.fn.api.settings.api, {\n 'get foll"
},
{
"path": "server/files/javascript/button.js",
"chars": 924,
"preview": "semantic.button = {};\n\n// ready event\nsemantic.button.ready = function() {\n\n // selector cache\n var\n $buttons "
},
{
"path": "server/files/javascript/card.js",
"chars": 308,
"preview": "semantic.card = {};\n\n// ready event\nsemantic.card.ready = function() {\n\n // selector cache\n var\n $icon = $('.card ."
},
{
"path": "server/files/javascript/checkbox.js",
"chars": 570,
"preview": "semantic.checkbox = {};\n\n// ready event\nsemantic.checkbox.ready = function() {\n\n // selector cache\n var\n $indetermi"
},
{
"path": "server/files/javascript/container.js",
"chars": 472,
"preview": "semantic.container = {};\n\n// ready event\nsemantic.container.ready = function() {\n\n var\n $helpIcon = $('.main.contain"
},
{
"path": "server/files/javascript/customize.js",
"chars": 717,
"preview": "semantic.customize = {};\n\n// ready event\nsemantic.customize.ready = function() {\n\n var\n $accordion = $('.main.contai"
},
{
"path": "server/files/javascript/dimmer.js",
"chars": 1104,
"preview": "semantic.dimmer = {};\n\n// ready event\nsemantic.dimmer.ready = function() {\n\n // selector cache\n var\n $pageDimmer = "
},
{
"path": "server/files/javascript/docs.js",
"chars": 43709,
"preview": "\n// namespace\nwindow.semantic = {\n handler: {}\n};\n\n// Allow for console.log to not break IE\nif (typeof window.console ="
},
{
"path": "server/files/javascript/dropdown.js",
"chars": 1743,
"preview": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n // selector cache\n var\n $examples "
},
{
"path": "server/files/javascript/embed.js",
"chars": 421,
"preview": "semantic.embed = {};\n\n// ready event\nsemantic.embed.ready = function() {\n\n // selector cache\n var\n // alias\n $my"
},
{
"path": "server/files/javascript/form.js",
"chars": 422,
"preview": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n // selector cache\n var\n $c"
},
{
"path": "server/files/javascript/grid.js",
"chars": 359,
"preview": "semantic.grid = {};\n\n// ready event\nsemantic.grid.ready = function() {\n\n $('.animation.checkbox')\n .checkbox({\n "
},
{
"path": "server/files/javascript/header.js",
"chars": 982,
"preview": "semantic.header = {};\n\n// ready event\nsemantic.header.ready = function() {\n\n // selector cache\n var\n $increaseFont "
},
{
"path": "server/files/javascript/home.js",
"chars": 8605,
"preview": "semantic.home = {};\n\n// ready event\nsemantic.home.ready = function() {\n\n var\n $themeDropdown = $('.theme.dropdown'),"
},
{
"path": "server/files/javascript/icon.js",
"chars": 2347,
"preview": "semantic.icon = {};\n\n// ready event\nsemantic.icon.ready = function() {\n\n // selector cache\n var\n $iconSearch = $('i"
},
{
"path": "server/files/javascript/input.js",
"chars": 194,
"preview": "semantic.input = {};\n\n// ready event\nsemantic.input.ready = function() {\n\n $('.main.container .ui.dropdown').dropdown()"
},
{
"path": "server/files/javascript/item.js",
"chars": 226,
"preview": "semantic.item = {};\n\n// ready event\nsemantic.item.ready = function() {\n\n // selector cache\n $('.item .favorite.icon, ."
},
{
"path": "server/files/javascript/library/clipboard.js",
"chars": 20809,
"preview": "/*!\n * clipboard.js v1.5.2\n * https://zenorocha.github.io/clipboard.js\n *\n * Licensed MIT © Zeno Rocha\n */\n(function(f){"
},
{
"path": "server/files/javascript/library/cookie.js",
"chars": 3335,
"preview": "/*!\n * jQuery Cookie Plugin v1.4.1\n * https://github.com/carhartl/jquery-cookie\n *\n * Copyright 2006, 2014 Klaus Hartl\n "
},
{
"path": "server/files/javascript/library/detect.js",
"chars": 7483,
"preview": "/*\n * DetectAdBlock 3.2.1\n * Copyright (c) 2015 Valentin Allaire <valentin.allaire@sitexw.fr>\n * Released under the MIT "
},
{
"path": "server/files/javascript/library/easing.js",
"chars": 3780,
"preview": "/*\n * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/\n *\n * Open source under the BSD License.\n *\n * Copyr"
},
{
"path": "server/files/javascript/library/history.js",
"chars": 25780,
"preview": "/*! jQuery Address v${version} | (c) 2009, 2013 Rostislav Hristov | jquery.org/license */\n(function ($) {\n\n $.address"
},
{
"path": "server/files/javascript/library/jquery.hotkeys.js",
"chars": 8016,
"preview": "/*\n * jQuery Hotkeys Plugin\n * Copyright 2010, John Resig\n * Dual licensed under the MIT or GPL Version 2 licenses.\n *\n "
},
{
"path": "server/files/javascript/library/jquery.js",
"chars": 267194,
"preview": "/*!\n * jQuery JavaScript Library v3.1.1\n * https://jquery.com/\n *\n * Includes Sizzle.js\n * https://sizzlejs.com/\n *\n * C"
},
{
"path": "server/files/javascript/library/jquery.legacy.js",
"chars": 284184,
"preview": "/*!\n * jQuery JavaScript Library v1.11.2\n * http://jquery.com/\n *\n * Includes Sizzle.js\n * http://sizzlejs.com/\n *\n * Co"
},
{
"path": "server/files/javascript/library/less.js",
"chars": 356293,
"preview": "/*!\n * Less - Leaner CSS v2.5.1\n * http://lesscss.org\n *\n * Copyright (c) 2009-2015, Alexis Sellier <self@cloudhead.net>"
},
{
"path": "server/files/javascript/library/serialize-object.js",
"chars": 3390,
"preview": "/**\n * jQuery serializeObject\n * @copyright 2014, macek <paulmacek@gmail.com>\n * @link https://github.com/macek/jquery-s"
},
{
"path": "server/files/javascript/library/sinon.js",
"chars": 158475,
"preview": "/**\n * Sinon.JS 1.10.3, 2014/07/11\n *\n * @author Christian Johansen (christian@cjohansen.no)\n * @author Contributors: ht"
},
{
"path": "server/files/javascript/library/state.js",
"chars": 20791,
"preview": "/*!\n * # Semantic UI 2.2.14 - State\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT licen"
},
{
"path": "server/files/javascript/library/tablesort.js",
"chars": 3693,
"preview": "/*\n\tA simple, lightweight jQuery plugin for creating sortable tables.\n\thttps://github.com/kylefox/jquery-tablesort\n\tVers"
},
{
"path": "server/files/javascript/library/typing.js",
"chars": 13349,
"preview": "// The MIT License (MIT)\n\n// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com\n\n// Permission is hereby grant"
},
{
"path": "server/files/javascript/library/underscore.js",
"chars": 52915,
"preview": "// Underscore.js 1.8.3\n// http://underscorejs.org\n// (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Invest"
},
{
"path": "server/files/javascript/loader.js",
"chars": 2837,
"preview": "semantic.loader = {};\n\n// ready event\nsemantic.loader.ready = function() {\n\n // selector cache\n var\n $examples "
},
{
"path": "server/files/javascript/menu.js",
"chars": 1468,
"preview": "semantic.menu = {};\n\n// ready event\nsemantic.menu.ready = function() {\n\n // selector cache\n var\n $dropdownItem = $("
},
{
"path": "server/files/javascript/message.js",
"chars": 259,
"preview": "semantic.message = {};\n\n// ready event\nsemantic.message.ready = function() {\n\n\n $('.message .close').on('click', functi"
},
{
"path": "server/files/javascript/modal.js",
"chars": 524,
"preview": "semantic.modal = {};\n\n// ready event\nsemantic.modal.ready = function() {\n\n // selector cache\n var\n // alias\n han"
},
{
"path": "server/files/javascript/new.js",
"chars": 8463,
"preview": "semantic.new = {};\n\n// ready event\nsemantic.new.ready = function() {\n\n // selector cache\n var handler = {\n\n activat"
},
{
"path": "server/files/javascript/playground.js",
"chars": 8664,
"preview": "semantic.playground = {};\n\nwindow.ui = {};\n\n$.api.settings.api = {\n 'getSpecification': 'spec/{$type}.json'\n};\n\n$.fn.dr"
},
{
"path": "server/files/javascript/popup.js",
"chars": 919,
"preview": "semantic.popup = {};\n\n// ready event\nsemantic.popup.ready = function() {\n\n // selector cache\n var\n $popup = $('.mai"
},
{
"path": "server/files/javascript/progress.js",
"chars": 1507,
"preview": "semantic.progress = {};\n\n// ready event\nsemantic.progress.ready = function() {\n\n var\n $progress = $('.defini"
},
{
"path": "server/files/javascript/rating.js",
"chars": 348,
"preview": "semantic.rating = {};\n\n// ready event\nsemantic.rating.ready = function() {\n $('.ui.rating')\n .each(function() {\n "
},
{
"path": "server/files/javascript/search.js",
"chars": 10364,
"preview": "semantic.search = {};\n\n// ready event\nsemantic.search.ready = function() {\n\n // selector cache\n var\n $local "
},
{
"path": "server/files/javascript/shape.js",
"chars": 1590,
"preview": "semantic.shape = {};\n\n// ready event\nsemantic.shape.ready = function() {\n\n // selector cache\n var\n $demo "
},
{
"path": "server/files/javascript/sidebar.js",
"chars": 2028,
"preview": "semantic.sidebar = {};\n\n// ready event\nsemantic.sidebar.ready = function() {\n\n // selector cache\n var\n // alias\n "
},
{
"path": "server/files/javascript/slider.js",
"chars": 335,
"preview": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n // selector cache\n var\n $slider "
},
{
"path": "server/files/javascript/started.js",
"chars": 356,
"preview": "semantic.started = {};\n\n// ready event\nsemantic.started.ready = function() {\n\n // selector cache\n var handler = {\n\n }"
},
{
"path": "server/files/javascript/sticky.js",
"chars": 1441,
"preview": "semantic.sticky = {};\n\n// ready event\nsemantic.sticky.ready = function() {\n\n // selector cache\n var\n // alias\n h"
},
{
"path": "server/files/javascript/tab.js",
"chars": 2260,
"preview": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n\n $.fn.api.settings.mockResponse = func"
},
{
"path": "server/files/javascript/table.js",
"chars": 416,
"preview": "semantic.table = {};\n\n// ready event\nsemantic.table.ready = function() {\n\n // selector cache\n var\n // alias\n han"
},
{
"path": "server/files/javascript/theming.js",
"chars": 907,
"preview": "semantic.theming = {};\n\n// ready event\nsemantic.theming.ready = function() {\n\n var\n $defaultTheme = $('.variable.gri"
},
{
"path": "server/files/javascript/transition.js",
"chars": 354,
"preview": "semantic.transition = {};\n\n// ready event\nsemantic.transition.ready = function() {\n\n // selector cache\n var\n $tab ="
},
{
"path": "server/files/javascript/validate-form.js",
"chars": 7330,
"preview": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n // selector cache\n var\n $d"
},
{
"path": "server/files/javascript/visibility.js",
"chars": 5660,
"preview": "semantic.visiblity = {};\n\n// ready event\nsemantic.visiblity.ready = function() {\n\n // selector cache\n var\n $pageTab"
},
{
"path": "server/files/stylesheets/customize.css",
"chars": 1341,
"preview": "/*******************************\n Customizer\n*******************************/\n\n#example.custom .accordion .titl"
},
{
"path": "server/files/stylesheets/docs.css",
"chars": 53237,
"preview": "\n/*******************************\n Global\n*******************************/\n\n/* Regular */\n@font-face {\n fon"
},
{
"path": "server/files/stylesheets/home.css",
"chars": 15952,
"preview": "/*******************************\n Homepage\n*******************************/\n\n#example.index .pusher > .page {"
},
{
"path": "server/files/stylesheets/library/basic.icon.css",
"chars": 14986,
"preview": "/*\n * # Semantic - Icon\n * http://github.com/jlukic/semantic-ui/\n *\n *\n * Copyright 2013 Contributors\n * Released under "
},
{
"path": "server/files/stylesheets/library/docco.css",
"chars": 9157,
"preview": "/*--------------------- Typography ----------------------------*/\n\n@font-face {\n font-family: 'Neutraface';\n src:\n "
},
{
"path": "server/files/stylesheets/library/sidr.css",
"chars": 3508,
"preview": ".sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflo"
},
{
"path": "server/files/stylesheets/library/snap.css",
"chars": 1866,
"preview": "html, body {\n font-family: sans-serif;\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n"
},
{
"path": "server/files/stylesheets/reset.css",
"chars": 7545,
"preview": "/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ======================================================="
},
{
"path": "server/files/stylesheets/rtl.css",
"chars": 167,
"preview": "/*******************************\n Right-To-Left\n (Arabic / Persian)\n*******************************/\n\n\nhtml[la"
},
{
"path": "server/files/stylesheets/shape.css",
"chars": 1879,
"preview": "\n/*******************************\n Shapes Example\n*******************************/\n\n\n#example.shape .ui.header {\n"
},
{
"path": "server/layouts/basic.html.eco",
"chars": 8200,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n\n <!-- Standard Meta -->\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" "
},
{
"path": "server/layouts/blank.html.eco",
"chars": 252,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <%- @partial('meta') %>\n <%- @partial('library-javascript') %>\n <%- @partial('ui-javas"
},
{
"path": "server/layouts/default.html.eco",
"chars": 849,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <%- @partial('meta') %>\n <%- @partial('javascript') %>\n <%- @partial('css') %>\n <%- @"
},
{
"path": "server/layouts/homepage.html.eco",
"chars": 1787,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <%- @partial('meta') %>\n <%- @partial('css') %>\n\n <link rel=\"stylesheet\" type=\"text/cs"
},
{
"path": "server/layouts/none.html.eco",
"chars": 18,
"preview": "\n <%- @content %>"
},
{
"path": "server/partials/css.html.eco",
"chars": 55,
"preview": "<%- @partial('ui-css') %>\n<%- @partial('docs-css') %>\n\n"
},
{
"path": "server/partials/demo-sidebar.html",
"chars": 2119,
"preview": "<div class=\"ui simple sidebar inverted vertical menu\">\n <a class=\"item\">\n 1\n </a>\n <a class=\"item\">\n 2\n </a>\n "
},
{
"path": "server/partials/dimmer-demo.html",
"chars": 277,
"preview": "<div class=\"ui demo page dimmer\">\n <div class=\"content\">\n <div class=\"center\">\n <h2 class=\"ui inverted icon hea"
},
{
"path": "server/partials/docs-css.html.eco",
"chars": 346,
"preview": "<% if 'development' in @getEnvironments(): %>\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"/stylesheets/docs.css\">\n<lin"
},
{
"path": "server/partials/examples/accordion.html",
"chars": 3602,
"preview": "<div class=\"ui vertical accordion menu\">\n <div class=\"item\">\n <a class=\"active title\">\n <i class=\"dropdown icon"
},
{
"path": "server/partials/examples/breadcrumb.html",
"chars": 505,
"preview": "<div class=\"ui large breadcrumb\">\n <a class=\"section\">Home</a>\n <div class=\"divider\"> / </div>\n <a class=\"section\">St"
},
{
"path": "server/partials/examples/button.html",
"chars": 3391,
"preview": "<div class=\"button demo\">\n <div class=\"ui button\">\n View\n </div>\n <div class=\"ui primary button\">\n <i class=\"sh"
},
{
"path": "server/partials/examples/card.html",
"chars": 2916,
"preview": "<div class=\"ui card\">\n <div class=\"image\">\n <div class=\"ui dimmer\">\n <div class=\"content\">\n <div class=\""
},
{
"path": "server/partials/examples/checkbox.html",
"chars": 1265,
"preview": "<div class=\"ui checkbox\">\n <input type=\"checkbox\" name=\"fun\">\n <label>Checkbox</label>\n</div>\n\n<div class=\"ui hidden d"
},
{
"path": "server/partials/examples/content-loader.html",
"chars": 1398,
"preview": "\n <div class=\"ui primary ignored button\">Simulate Loading</div>\n <div class=\"ui ignored divider\"></div>\n <div c"
},
{
"path": "server/partials/examples/dimmer.html",
"chars": 3613,
"preview": "<div class=\"dimmer demo\">\n <div class=\"ui segment\">\n <h3 class=\"ui header\">\n Dimmable Section\n </h3>\n <di"
},
{
"path": "server/partials/examples/divider.html",
"chars": 699,
"preview": "<div class=\"ui center aligned segment\">\n <div class=\"ui button\">A</div>\n <div class=\"ui horizontal divider\">and</div>\n"
},
{
"path": "server/partials/examples/dropdown.html",
"chars": 24589,
"preview": "<div class=\"ui floating dropdown labeled search icon button\">\n <i class=\"world icon\"></i>\n <span class=\"text\">Select L"
},
{
"path": "server/partials/examples/feed.html",
"chars": 3178,
"preview": "<div class=\"ui two column stackable grid\">\n <div class=\"column\">\n <div class=\"ui feed\">\n <div class=\"event\">\n "
},
{
"path": "server/partials/examples/flag.html",
"chars": 7446,
"preview": "<i class=\"andorra flag\"></i>\n<i class=\"uae flag\"></i>\n<i class=\"afghanistan flag\"></i>\n<i class=\"antigua flag\"></i>\n<i c"
},
{
"path": "server/partials/examples/form.html",
"chars": 4936,
"preview": "<div class=\"ui form segment\">\n <div class=\"two fields\">\n <div class=\"field\">\n <label>Selection Dropdown</label>"
},
{
"path": "server/partials/examples/grid.html",
"chars": 14092,
"preview": "\n<div class=\"shaded grid examples\">\n\n<div class=\"ui grid\">\n <div class=\"sixteen column row\">\n <div class=\"column\"></"
},
{
"path": "server/partials/examples/header.html",
"chars": 1375,
"preview": "<div class=\"ui two column grid\">\n\n <div class=\"column\">\n <h1 class=\"ui header\">H1</h1>\n <h2 class=\"ui header\">H2<"
},
{
"path": "server/partials/examples/icon.html",
"chars": 19289,
"preview": "<div class=\"demo icons\">\n <i class=\"search icon\"></i>\n <i class=\"mail outline icon\"></i>\n <i class=\"external icon\"></"
},
{
"path": "server/partials/examples/image.html",
"chars": 526,
"preview": "<img class=\"ui avatar image\" src=\"/images/wireframe/square-image.png\"> User Avatar\n<div class=\"ui ignored hidden divider"
},
{
"path": "server/partials/examples/input.html",
"chars": 936,
"preview": "<div class=\"ui action left icon input\">\n <i class=\"search icon\"></i>\n <input type=\"text\" placeholder=\"Search...\">\n <d"
},
{
"path": "server/partials/examples/item.html",
"chars": 2901,
"preview": "<div class=\"ui relaxed divided items\">\n <div class=\"item\">\n <div class=\"ui small image\">\n <img src=\"/images/wir"
},
{
"path": "server/partials/examples/label.html",
"chars": 2235,
"preview": "<div class=\"ui image label\">\n <img src=\"/images/avatar/small/justen.jpg\">\n email@address.com\n <i class=\"delete icon\">"
},
{
"path": "server/partials/examples/list.html",
"chars": 7178,
"preview": "<div class=\"ui two column relaxed stackable grid\">\n <div class=\"column\">\n <div class=\"ui list\">\n <div class=\"it"
},
{
"path": "server/partials/examples/loader.html",
"chars": 4328,
"preview": "<div class=\"ui four column stackable doubling grid\">\n <div class=\"column\">\n <div class=\"ui segment\">\n <div clas"
},
{
"path": "server/partials/examples/menu.html",
"chars": 1754,
"preview": "<div class=\"ui three item menu\">\n <a class=\"active item\">\n A\n </a>\n <a class=\"item\">\n B\n </a>\n <a class=\"item"
},
{
"path": "server/partials/examples/message.html",
"chars": 1271,
"preview": "<div class=\"ui message\">\n <i class=\"close icon\"></i>\n Closable message\n</div>\n<div class=\"ui warning icon message\">\n "
},
{
"path": "server/partials/examples/modal.html",
"chars": 2757,
"preview": "<div class=\"ui standard demo button\">Standard Modal</div>\n<div class=\"ui minimal demo button\">Basic Modal</div>\n<div cla"
},
{
"path": "server/partials/examples/popup.html",
"chars": 4365,
"preview": "<div class=\"popup demos\">\n <img src=\"/images/avatar/small/elliot.jpg\" data-title=\"Elliot Fu\" data-content=\"Elliot has b"
},
{
"path": "server/partials/examples/progress.html",
"chars": 1855,
"preview": "<div class=\"ui basic demo progress\">\n <div class=\"bar\">\n <div class=\"progress\"></div>\n </div>\n <div class=\"label\">"
},
{
"path": "server/partials/examples/rating.html",
"chars": 3878,
"preview": "<div class=\"rating demos\">\n <div class=\"ui relaxed divided items\">\n <div class=\"item\">\n <div class=\"content\">\n "
},
{
"path": "server/partials/examples/reveal.html",
"chars": 2965,
"preview": "\n<div class=\"ui slide down instant reveal\">\n <div class=\"visible content\">\n <img src=\"/images/wireframe/white-image."
},
{
"path": "server/partials/examples/search.html",
"chars": 8502,
"preview": "<div class=\"search demo\">\n\n <div class=\"ui remote search\">\n <div class=\"ui icon input\">\n <input class=\"prompt\" "
},
{
"path": "server/partials/examples/segment.html",
"chars": 372,
"preview": "<div class=\"ui piled segment\"></div>\n<div class=\"ui stacked segment\"></div>\n<div class=\"ui raised segment\"></div>\n<div c"
},
{
"path": "server/partials/examples/shape.html",
"chars": 5873,
"preview": "<div class=\"shape demos\">\n\n <div class=\"ui two column center aligned stackable doubling grid\">\n <div class=\"column\">"
},
{
"path": "server/partials/examples/sidebar.html",
"chars": 4870,
"preview": "<div class=\"sidebar direction demo\">\n\n <div class=\"ui toggle dim checkbox\">\n <input type=\"checkbox\" name=\"dim\" />\n "
},
{
"path": "server/partials/examples/single/flag-menu.html",
"chars": 19588,
"preview": "<div class=\"menu\">\n <div class=\"item\" data-value=\"af\"><i class=\"af flag\"></i>Afghanistan</div>\n <div class"
},
{
"path": "server/partials/examples/single/preset-menu.html",
"chars": 957,
"preview": "<div class=\"item\" data-value=\"angular\">Angular</div>\n<div class=\"item\" data-value=\"css\">CSS</div>\n<div class=\"item\" data"
},
{
"path": "server/partials/examples/single/skill-menu.html",
"chars": 774,
"preview": "<option value=\"\">Skills</option>\n<option value=\"angular\">Angular</option>\n<option value=\"css\">CSS</option>\n<option value"
},
{
"path": "server/partials/examples/single/state-options.html",
"chars": 2360,
"preview": "<option value=\"\">State</option>\n <option value=\"AL\">Alabama</option>\n <option value=\"AK\">Alaska</option>\n "
},
{
"path": "server/partials/examples/statistic.html",
"chars": 1178,
"preview": "<div class=\"ui statistic\">\n <div class=\"label\">\n Top Label\n </div>\n <div class=\"value\">\n 4:05\n </div>\n</div>\n\n"
},
{
"path": "server/partials/examples/step.html",
"chars": 1570,
"preview": "<div class=\"ui steps\">\n <a class=\"step\">\n <div class=\"content\">\n <div class=\"title\">Step</div>\n <div class"
},
{
"path": "server/partials/examples/tab.html",
"chars": 1923,
"preview": "<div class=\"tab demo\">\n <div class=\"ui secondary menu\">\n <a class=\"item\" data-tab=\"first\">First</a>\n <a class=\"it"
},
{
"path": "server/partials/examples/table.html",
"chars": 4520,
"preview": "<table class=\"ui celled striped table\">\n <thead>\n <th colspan=\"3\">\n Files\n </th>\n <tbody>\n <tr>\n <t"
},
{
"path": "server/partials/examples/transition.html",
"chars": 1571,
"preview": "<div class=\"transition demo\">\n\n <div class=\"ui small images\">\n <img class=\"ui image\" src=\"/images/leaves/14.png\">\n "
},
{
"path": "server/partials/fixed-menu.html.eco",
"chars": 1412,
"preview": "<% currentCollection = @getCollection(\"documents\").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>\n<% pa"
},
{
"path": "server/partials/footer.html",
"chars": 2051,
"preview": "<div class=\"ui vertical footer segment\">\n <div class=\"ui center aligned container\">\n <div class=\"ui stackable grid\""
},
{
"path": "server/partials/header.html.eco",
"chars": 10344,
"preview": "\n<% @tabs = { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'modul"
},
{
"path": "server/partials/javascript.html.eco",
"chars": 115,
"preview": "<%- @partial('library-javascript') %>\n<%- @partial('ui-javascript') %>\n<script src=\"/javascript/docs.js\"></script>\n"
},
{
"path": "server/partials/language-modal.html",
"chars": 1802,
"preview": "<div class=\"ui basic language modal\">\n <i class=\"close icon\"></i>\n <div class=\"header\">The <span class=\"name\"></span> "
},
{
"path": "server/partials/languages.html",
"chars": 3532,
"preview": "<div class=\"scrolling menu\">\n <div class=\"item\" data-percent=\"100\" data-value=\"en\" data-english=\"English\">\n <span cl"
},
{
"path": "server/partials/less.html.eco",
"chars": 338,
"preview": "<script>\nwindow.less = {\n async : true,\n environment : 'production',\n fileAsync : false,\n onReady : "
},
{
"path": "server/partials/library-javascript.html.eco",
"chars": 1255,
"preview": "<% if 'development' in @getEnvironments(): %>\n <script src=\"/javascript/library/jquery.js\"></script>\n <script src=\"/ja"
},
{
"path": "server/partials/meta.html.eco",
"chars": 523,
"preview": "<!-- Standard Meta -->\n<meta charset=\"utf-8\" />\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n<meta n"
},
{
"path": "server/partials/sidebar.html.eco",
"chars": 228,
"preview": "<div class=\"ui vertical inverted sidebar menu\" id=\"toc\">\n <%- @partial('site-menu') %>\n</div>\n\n<div class=\"ui black big"
},
{
"path": "server/partials/site-ads.html.eco",
"chars": 163,
"preview": "<% if ('development' in @getEnvironments()): %>\n<% else: %>\n <script src=\"//m.servedby-buysellads.com/monetization.js\" "
},
{
"path": "server/partials/site-menu.html.eco",
"chars": 4674,
"preview": "<% introduction = @getCollection(\"documents\").findAll({type: $in: ['Introduction']},[{order: 1}]).toJSON() %>\n<% us"
},
{
"path": "server/partials/tab-header.html.eco",
"chars": 1036,
"preview": "<div class=\"tab segment\">\n <div class=\"container\">\n <div class=\"introduction\">\n <h1 class=\"ui dividing header\">"
},
{
"path": "server/partials/tracking.html.eco",
"chars": 477,
"preview": "<% if ('development' in @getEnvironments()): %>\n<% else: %>\n<script>\n (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject"
},
{
"path": "server/partials/transifex.html.eco",
"chars": 594,
"preview": "<% if ('development' in @getEnvironments()) or (@document.title? and @document.title is 'Page Not Found'): %>\n<% else: %"
}
]
// ... and 13 more files (download for full content)
About this extraction
This page contains the full source code of the Semantic-Org/Semantic-UI-Docs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 213 files (3.3 MB), approximately 882.5k tokens, and a symbol index with 321 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.