[ADD] doc: new documentation, with training tutorials, and new scaffolding

This commit is contained in:
Raphael Collet 2014-08-22 17:51:20 +02:00
parent 97256fa1fb
commit 2ad092b5e5
402 changed files with 26492 additions and 24542 deletions

View File

@ -167,7 +167,7 @@ instance.web.ListView = instance.web.View.extend( /** @lends instance.web.ListVi
* @returns {String} CSS style declaration
*/
style_for: function (record) {
var style= '';
var len, style= '';
var context = _.extend({}, record.attributes, {
uid: this.session.uid,

View File

@ -1447,12 +1447,12 @@ instance.web.View = instance.web.Widget.extend({
if (action_data.special === 'cancel') {
return handler({"type":"ir.actions.act_window_close"});
} else if (action_data.type=="object") {
var args = [[record_id]], additional_args = [];
var args = [[record_id]];
if (action_data.args) {
try {
// Warning: quotes and double quotes problem due to json and xml clash
// Maybe we should force escaping in xml or do a better parse of the args array
additional_args = JSON.parse(action_data.args.replace(/'/g, '"'));
var additional_args = JSON.parse(action_data.args.replace(/'/g, '"'));
args = args.concat(additional_args);
} catch(e) {
console.error("Could not JSON.parse arguments", action_data.args);

View File

@ -52,24 +52,21 @@ instance.web_graph.GraphView = instance.web.View.extend({
if (_.has(field.attrs, 'interval')) {
field_name = field.attrs.name + ':' + field.attrs.interval;
}
if (_.has(field.attrs, 'type')) {
switch (field.attrs.type) {
case 'row':
self.widget_config.row_groupby.push(field_name);
break;
case 'col':
self.widget_config.col_groupby.push(field_name);
break;
case 'measure':
self.widget_config.measures.push(field_name);
break;
}
} else { // old style, kept for backward compatibility
//noinspection FallThroughInSwitchStatementJS
switch (field.attrs.type) {
case 'measure':
self.widget_config.measures.push(field_name);
break;
case 'col':
self.widget_config.col_groupby.push(field_name);
break;
default:
if ('operator' in field.attrs) {
self.widget_config.measures.push(field_name);
} else {
self.widget_config.row_groupby.push(field_name);
break;
}
case 'row':
self.widget_config.row_groupby.push(field_name);
}
});
if (self.widget_config.measures.length === 0) {

View File

@ -1,211 +0,0 @@
========================================
Getting started with OpenERP development
========================================
.. toctree::
:maxdepth: 1
Installation from sources
==========================
.. _getting_started_installation_source-link:
Source code is hosted on Launchpad_. In order to get the sources, you
will need Bazaar_ to pull the source from Launchpad. Bazaar is a
version control system that helps you track project history over time
and collaborate efficiently. You may have to create an account on
Launchpad to be able to collaborate on OpenERP development. Please
refer to the Launchpad and Bazaar documentation to install and setup
your development environment.
The running example of this section is based on an Ubuntu
environment. You may have to adapt the steps according to your
system. Once your working environment is ready, prepare a working
directory that will contain the sources. For a ``source`` base
directory, type::
mkdir source;cd source
OpenERP provides a setup script that automatizes the tasks of creating
a shared repository and getting the source code. Get the setup script
of OpenERP by typing::
bzr cat -d lp:~openerp-dev/openerp-tools/trunk setup.sh | sh
This will create the following two files in your ``source`` directory::
-rw-rw-r-- 1 openerp openerp 5465 2012-04-17 11:05 Makefile
-rw-rw-r-- 1 openerp openerp 2902 2012-04-17 11:05 Makefile_helper.py
If you want some help about the available options, please type::
make help
Next step is to initialize the shared repository and download the
sources. Get the current trunk version of OpenERP by typing::
make init-trunk
This will create the following structure inside your ``source``
directory, and fetch the latest source code from ``trunk``::
drwxrwxr-x 3 openerp openerp 4096 2012-04-17 11:10 addons
drwxrwxr-x 3 openerp openerp 4096 2012-04-17 11:10 misc
drwxrwxr-x 3 openerp openerp 4096 2012-04-17 11:10 server
drwxrwxr-x 3 openerp openerp 4096 2012-04-17 11:10 web
Some dependencies are necessary to use OpenERP. Depending on your
environment, you might have to install the following packages::
sudo apt-get install graphviz ghostscript postgresql-client \
python-dateutil python-feedparser python-gdata \
python-ldap python-libxslt1 python-lxml python-mako \
python-openid python-psycopg2 python-pybabel python-pychart \
python-pydot python-pyparsing python-reportlab python-simplejson \
python-tz python-vatnumber python-vobject python-webdav \
python-werkzeug python-xlwt python-yaml python-imaging \
python-matplotlib
Next step is to initialize the database. This will create a new openerp role::
make db-setup
Finally, launch the OpenERP server::
make server
Testing your installation can be done on http://localhost:8069/. You
should see the OpenERP main login page.
.. _Launchpad: https://launchpad.net/
.. _Bazaar: http://bazaar.canonical.com/en/
Command line options
====================
.. program:: openerp-server
Using the command ::
./openerp-server --help
General Options
+++++++++++++++
::
--version show program version number and exit
-h, --help show this help message and exit
-c CONFIG, --config=CONFIG specify alternate config file
-s, --save save configuration to ~/.terp_serverrc
-v, --verbose enable debugging
--pidfile=PIDFILE file where the server pid will be stored
--logfile=LOGFILE file where the server log will be stored
-n INTERFACE, --interface=INTERFACE specify the TCP IP address
-p PORT, --port=PORT specify the TCP port
--no-xmlrpc disable xmlrpc
-i INIT, --init=INIT init a module (use "all" for all modules)
--without-demo=WITHOUT_DEMO load demo data for a module (use "all" for all modules)
-u UPDATE, --update=UPDATE update a module (use "all" for all modules)
--stop-after-init stop the server after it initializes
--debug enable debug mode
-S, --secure launch server over https instead of http
--smtp=SMTP_SERVER specify the SMTP server for sending mail
Database related options
++++++++++++++++++++++++
::
-d DB_NAME, --database=DB_NAME
specify the database name
-r DB_USER, --db_user=DB_USER
specify the database user name
-w DB_PASSWORD, --db_password=DB_PASSWORD
specify the database password
--pg_path=PG_PATH specify the pg executable path
--db_host=DB_HOST specify the database host
--db_port=DB_PORT specify the database port
Internationalization options
++++++++++++++++++++++++++++
Use these options to translate OpenERP to another language.See i18n
section of the user manual. Option '-l' is mandatory.::
-l LANGUAGE, --language=LANGUAGE
specify the language of the translation file. Use it
with --i18n-export and --i18n-import
--i18n-export=TRANSLATE_OUT
export all sentences to be translated to a CSV file
and exit
--i18n-import=TRANSLATE_IN
import a CSV file with translations and exit
--modules=TRANSLATE_MODULES
specify modules to export. Use in combination with
--i18n-export
Options from previous versions
++++++++++++++++++++++++++++++
Some options were removed in OpenERP version 6. For example,
``price_accuracy`` is now configured through the
:ref:`decimal_accuracy` screen.
Configuration
==============
.. _getting_started_configuration-link:
Two configuration files are available:
* one for the client: ``~/.openerprc``
* one for the server: ``~/.openerp_serverrc``
If they are not found, the server and the client will start with a
default configuration. Those files follow the convention used by
python's ConfigParser module. Please note that lines beginning with
"#" or ";" are comments. The client configuration file is
automatically generated upon the first start. The sezrver
configuration file can automatically be created using the command ::
./openerp-server -s or ./openerp-server --save
You can specify alternate configuration files with ::
-c CONFIG, --config=CONFIG specify alternate config file
Configure addons locations
++++++++++++++++++++++++++
By default, the only directory of addons known by the server is
server/bin/addons. It is possible to add new addons by
- copying them in server/bin/addons, or creating a symbolic link to
each of them in this directory, or
- specifying another directory containing addons to the server. The
later can be accomplished either by running the server with the
``--addons-path=`` option, or by configuring this option in the
openerp_serverrc file, automatically generated under Linux in your
home directory by the server when executed with the ``--save``
option. You can provide several addons to the ``addons_path`` =
option, separating them using commas.
Start-up script
===============
.. versionadded:: 6.1
To run the OpenERP server, the conventional approach is to use the
`openerp-server` script. It loads the :ref:`openerp library`, sets a
few configuration variables corresponding to command-line arguments,
and starts to listen to incoming connections from clients.
Depending on your deployment needs, you can write such a start-up script very
easily. We also recommend you take a look at an alternative tool called
`openerp-command` that can, among other things, launch the server.
Yet another alternative is to use a WSGI-compatible HTTP server and let it call
into one of the WSGI entry points of the server.

View File

@ -1,252 +0,0 @@
============
Architecture
============
OpenERP as a multitenant three-tiers architecture
=================================================
This section presents the OpenERP architecture along with technology details
of the application. The tiers composing OpenERP are presented. Communication
means and protocols between the application components are also presented.
Some details about used development languages and technology stack are then summarized.
OpenERP is a `multitenant <http://en.wikipedia.org/wiki/Multitenancy>`_, `three-tiers architecture
<http://en.wikipedia.org/wiki/Multitier_architecture#Three-tier_architecture>`_:
database tier for data storage, application tier for processing and functionalities
and presentation tier providing user interface. Those are separate layers
inside OpenERP. The application tier itself is written as a core; multiple
additional modules can be installed in order to create a particular instance
of OpenERP adapted to specific needs and requirements. Moreover, OpenERP
follows the Model-View-Controller (MVC) architectural pattern.
A typical deployment of OpenERP is shown on `Figure 1`_. This deployment is
called Web embedded deployment. As shown, an OpenERP system consists of
three main components:
- a PostgreSQL database server which contains all OpenERP databases.
Databases contain all application data, and also most of the OpenERP
system configuration elements. Note that this server can possibly be
deployed using clustered databases.
- the OpenERP Server, which contains all the enterprise logic and ensures
that OpenERP runs optimally. One layer of the server is dedicated to
communicate and interface with the PostgreSQL database, the ORM engine.
Another layer allows communications between the server and a web browser,
the Web layer. Having more than one server is possible, for example in
conjunction with a load balancing mechanism.
- the client running in the a web browser as javascript application.
The database server and the OpenERP server can be installed on the same
computer, or distributed onto separate computer servers, for example for
performance considerations.
.. _`Figure 1`:
.. figure:: _static/02_openerp_architecture.png
:width: 50%
:alt: OpenERP 6.1 architecture for embedded web deployment
:align: center
OpenERP 6.1 architecture for embedded web deployment
The next subsections give details about the different tiers of the OpenERP
architecture.
PostgreSQL database
+++++++++++++++++++
The data tier of OpenERP is provided by a PostgreSQL relational database.
While direct SQL queries can be executed from OpenERP modules, most accesses
to the relational database are done through the server Object Relational
Mapping layer.
Databases contain all application data, and also most of the OpenERP system
configuration elements. Note that this server can possibly be deployed using
clustered databases.
OpenERP server
++++++++++++++
OpenERP provides an application server on which specific business applications
can be built. It is also a complete development framework, offering a range
of features to write those applications. Among those features, the OpenERP
ORM provides functionalities and an interface on top of the PostgreSQL server.
The OpenERP server also features a specific layer designed to communicate
with the web browser-based client. This layer connects users using standard
browsers to the server.
From a developer perspective, the server acts both as a library which brings
the above benefits while hiding the low-level details, and as a simple way
to install, configure and run the written applications. The server also contains
other services, such as extensible data models and view, workflow engine or
reports engine. However, those are OpenERP services not specifically related
to security, and are therefore not discussed in details in this document.
**Server - ORM**
The Object Relational Mapping ORM layer is one of the salient features of
the OpenERP Server. It provides additional and essential functionalities
on top of PostgreSQL server. Data models are described in Python and OpenERP
creates the underlying database tables using this ORM. All the benefits of
RDBMS such as unique constraints, relational integrity or efficient querying
are used and completed by Python flexibility. For instance, arbitrary constraints
written in Python can be added to any model. Different modular extensibility
mechanisms are also afforded by OpenERP.
It is important to understand the ORM responsibility before attempting to
by-pass it and to access directly the underlying database via raw SQL queries.
When using the ORM, OpenERP can make sure the data remains free of any corruption.
For instance, a module can react to data creation in a particular table.
This behavior can occur only if queries go through the ORM.
The services granted by the ORM are among other :
- consistency validation by powerful validity checks,
- providing an interface on objects (methods, references, ...) allowing
to design and implement efficient modules,
- row-level security per user and group; more details about users and user
groups are given in the section Users and User Roles,
- complex actions on a group of resources,
- inheritance service allowing fine modeling of new resources
**Server - Web**
The web layer offers an interface to communicate with standard browsers.
In the 6.1 version of OpenERP, the web-client has been rewritten and integrated
into the OpenERP server tier. This web layer is a WSGI-compatible application
based on werkzeug. It handles regular http queries to server static file or
dynamic content and JSON-RPC queries for the RPC made from the browser.
**Modules**
By itself, the OpenERP server is a core. For any enterprise, the value of
OpenERP lies in its different modules. The role of the modules is to implement
any business requirement. The server is the only necessary component to
add modules. Any official OpenERP release includes a lot of modules, and
hundreds of modules are available thanks to the community. Examples of
such modules are Account, CRM, HR, Marketing, MRP, Sale, etc.
Clients
+++++++
As the application logic is mainly contained server-side, the client is
conceptually simple. It issues a request to the server, gets data back
and display the result (e.g. a list of customers) in different ways
(as forms, lists, calendars, ...). Upon user actions, it sends queries
to modify data to the server.
The default client of OpenERP is an JavaScript application running in the
browser that communicates with the server using JSON-RPC.
MVC architecture in OpenERP
===========================
According to `Wikipedia <http://en.wikipedia.org/wiki/Model-view-controller>`_,
"a Model-view-controller (MVC) is an architectural pattern used in software
engineering". In complex computer applications presenting lots of data to
the user, one often wishes to separate data (model) and user interface (view)
concerns. Changes to the user interface does therefore not impact data
management, and data can be reorganized without changing the user interface.
The model-view-controller solves this problem by decoupling data access
and business logic from data presentation and user interaction, by
introducing an intermediate component: the controller.
.. _`Figure 3`:
.. figure:: _static/02_mvc_diagram.png
:width: 35%
:alt: Model-View-Controller diagram
:align: center
Model-View-Controller diagram
For example in the diagram above, the solid lines for the arrows starting
from the controller and going to both the view and the model mean that the
controller has a complete access to both the view and the model. The dashed
line for the arrow going from the view to the controller means that the view
has a limited access to the controller. The reasons of this design are :
- From **View** to **Model** : the model sends notification to the view
when its data has been modified in order the view to redraw its content.
The model doesn't need to know the inner workings of the view to perform
this operation. However, the view needs to access the internal parts of the model.
- From **View** to **Controller** : the reason why the view has limited
access to the controller is because the dependencies from the view to
the controller need to be minimal: the controller can be replaced at
any moment.
OpenERP follows the MVC semantic with
- model : The PostgreSQL tables.
- view : views are defined in XML files in OpenERP.
- controller : The objects of OpenERP.
Network communications and WSGI
===============================
OpenERP is an HTTP web server and may also be deployed as an WSGI-compliant
application.
Clients may communicate with OpenERP using sessionless XML-RPC, the recommended
way to interoperate with OpenERP. Web-based clients communicates using the
session aware JSON-RPC.
Everything in OpenERP, and objects methods in particular, are exposed via
the network and a security layer. Access to the data model is in fact a service
and it is possible to expose new services. For instance, a WebDAV service and
a FTP service are available.
Services can make use of the `WSGI
<http://en.wikipedia.org/wiki/Web_Server_Gateway_Interface>`_ stack. WSGI is a
standard solution in the Python ecosystem to write HTTP servers, applications,
and middleware which can be used in a mix-and-match fashion. By using WSGI, it
is possible to run OpenERP in any WSGI compliant server. It is also possible to
use OpenERP to host a WSGI application.
A striking example of this possibility is the OpenERP Web layer that is
the server-side counter part to the web clients. It provides the requested
data to the browser and manages web sessions. It is a WSGI-compliant application.
As such, it can be run as a stand-alone HTTP server or embedded inside OpenERP.
The HTTP namespaces /openerp/ /object/ /common/ are reserved for the XML-RPC
layer, every module restrict it's HTTP namespace to /<name_of_the_module>/
Process model
=============
In the past, the OpenERP server was using threads to handle HTTP requests
concurrently or to process cron jobs. Using threads is still the default
behavior when running the ``openerp-server`` script but not the recommended
one: it is in fact recommended to use the ``--workers`` option.
By using the ``--workers`` option, the OpenERP server will spawn a fixed number
of processes instead of spawning a new thread for each incoming request.
This has a number of advantages:
- Processes do not suffer from CPython's Global Interpreter Lock.
- Processes can be gracefully recycled while requests are still handled by the
server.
- Resources such as CPU time and memory made available to a process can be
monitored on a per-process basis.
When using the ``--workers`` options, two types of processes may be spawned:
web process, and cron process.
.. versionadded:: 7.1
.. _longpolling-worker:
When using the ``--workers`` options, three types of processes may be spawned:
web process, and cron process, just as previsouly, but also an evented (using
gevent) web process is started. It is used for long-polling as needed by the
upcoming Instant Messaging feature. As for now, that process is listening on a
different port than the main web processes. A reverse proxy (e.g. Nginx) to
listen on a unique port, mapping all requests to the normal port, but mapping
the ``/longpolling`` route to the evented process is necessary (the web
interface cannot issue requests to different ports).
(It is possible to make the threaded server evented by passing the ``--gevent``
flag.)
The goal is to drop support for the threaded model, and also make all web
processes evented; there would be no more distinction between "normal" and
"longpolling" processes. For this to happen, further testing is needed.

View File

@ -1,16 +0,0 @@
.. _module-dev:
=======
Modules
=======
.. toctree::
:maxdepth: 2
03_module_dev_01
03_module_dev_02
03_module_dev_03
03_module_dev_04
03_module_dev_05
03_module_dev_06
report-declaration

View File

@ -1,429 +0,0 @@
.. _module-dev-structure:
Module structure
================
A module can contain the following elements:
- **Business object** : declared as Python classes extending the class
osv.Model, the persistence of these resource is completly managed by
OpenERP's ORM.
- **Data** : XML/CSV files with meta-data (views and workflows declaration),
configuration data (modules parametrization) and demo data (optional but
recommended for testing),
- **Reports** : RML (XML format). HTML/MAKO or OpenOffice report templates, to
be merged with any kind of business data, and generate HTML, ODT or PDF
reports.
.. figure:: _static/03_module_gen_view.png
:width: 75%
:alt: Module composition
:align: center
Module composition
Each module is contained in its own directory within either the server/bin/addons
directory or another directory of addons, configured in server installation.
To create a new module for example the 'OpenAcademy' module, the following
steps are required:
- create a ``openacademy`` subdirectory in the source/addons directory
- create the module import file ``__init__.py``
- create the module manifield file ``__openerp__.py``
- create **Python** files containing **objects**
- create **.xml files** holding module data such as views, menu entries
or demo data
- optionally create **reports** or **workflows**
Python import file __init__.py
++++++++++++++++++++++++++++++
The ``__init__.py`` file is the Python import file, because an OpenERP module
is also a regular Python module. The file should import all the other python
file or submodules.
For example, if a module contains a single python file named ``openacademy.py``,
the file should look like:
import openacademy
Manifest file __openerp__.py
+++++++++++++++++++++++++++++++
In the created module directory, you must add a **__openerp__.py** file.
This file, which must be a Python dict literal, is responsible to
1. determine the *XML files that will be parsed* during the initialization
of the server, and also to
2. determine the *dependencies* of the created module.
3. declare additional meta data
This file must contain a Python dictionary with the following values:
::
name The name of the module in English.
version The version of the module.
summary Short description or keywords
description The module description (text).
category The categrory of the module
author The author of the module.
website URL of the website of the module.
license The license of the module (default: AGPL-3).
depends List of modules on which this module depends beside base.
data List of .xml files to load when the module is installed or updated.
demo List of additional .xml files to load when the module is
installed or updated and demo flag is active.
installable True or False. Determines whether the module is installable
or not.
auto_install True or False (default: False). If set to ``True``, the
module is a link module. It will be installed as soon
as all its dependencies are installed.
For the ``openacademy`` module, here is an example of ``__openerp__.py``
declaration file:
.. code-block:: python
{
'name' : "OpenAcademy",
'version' : "1.0",
'author' : "OpenERP SA",
'category' : "Tools",
'depends' : ['mail'],
'data' : [
'openacademy_view.xml',
'openacademy_data.xml',
'report/module_report.xml',
'wizard/module_wizard.xml',
],
'demo' : [
'openacademy_demo.xml'
],
'installable': True,
}
Objects
+++++++
All OpenERP resources are objects: invoices, partners. Metadata are also object
too: menus, actions, reports... Object names are hierarchical, as in the
following examples:
* account.transfer : a money transfer
* account.invoice : an invoice
* account.invoice.line : an invoice line
Generally, the first word is the name of the module: account, stock, sale.
Those object are declared in python be subclassing osv.Model
The ORM of OpenERP is constructed over PostgreSQL. It is thus possible to
query the object used by OpenERP using the object interface (ORM) or by
directly using SQL statements.
But it is dangerous to write or read directly in the PostgreSQL database, as
you will shortcut important steps like constraints checking or workflow
modification.
.. .. figure:: images/pom_3_0_3.png
.. :scale: 50
.. :align: center
.. *The Physical Objects Model of [OpenERP version 3.0.3]*
XML Files
+++++++++
XML files located in the module directory are used to initialize or update the
the database when the module is installed or updated. They are used for many
purposes, among which we can cite :
* initialization and demonstration data declaration,
* views declaration,
* reports declaration,
* workflows declaration.
General structure of OpenERP XML files is more detailed in the
:ref:`xml-serialization` section. Look here if you are interested in learning
more about *initialization* and *demonstration data declaration* XML files. The
following section are only related to XML specific to *actions, menu entries,
reports, wizards* and *workflows* declaration.
Data can be inserted or updated into the PostgreSQL tables corresponding to the
OpenERP objects using XML files. The general structure of an OpenERP XML file
is as follows:
.. code-block:: xml
<?xml version="1.0"?>
<openerp>
<data>
<record model="model.name_1" id="id_name_1">
<field name="field1"> "field1 content" </field>
<field name="field2"> "field2 content" </field>
(...)
</record>
<record model="model.name_2" id="id_name_2">
(...)
</record>
(...)
</data>
</openerp>
``<record>``
////////////
Defines a new record in a specified OpenERP model.
``@model`` (required)
Name of the model in which this record will be created/inserted.
``@id`` (optional)
:term:`external ID` for the record, also allows referring to this record in
the rest of this file or in other files (through ``field/@ref`` or the
:py:func:`ref() <openerp.tools.convert._ref>` function)
A record tag generally contains multiple ``field`` tags specifying the values
set on the record's fields when creating it. Fields left out will be set to
their default value unless required.
``<field>``
///////////
In its most basic use, the ``field`` tag will set its body (as a string) as
the value of the corresponding ``record``'s ``@name`` field.
Extra attributes can either preprocess the body or replace its use entirely:
``@name`` (mandatory)
Name of the field in the containing ``record``'s model
``@type`` (optional)
One of ``char``, ``int``, ``float``, ``list``, ``tuple``, ``xml`` or
``html``, ``file`` or ``base64``. Converts the ``field``'s body to the
specified type (or validates the body's content)
* ``xml`` will join multiple XML nodes under a single ``<data>`` root
* in ``xml`` and ``html``, external ids can be referenced using
``%(id_name)s``
* ``list`` and ``tuple``'s element are specified using ``<value>``
sub-nodes with the same attributes as ``field``.
* ``file`` expects a module-local path and will save the path prefixed with
the current module's name, separated by a ``,`` (comma). For use with
:py:func:`~openerp.modules.module.get_module_resource`.
* ``base64`` expects binary data, encodes it to base64 and sets it. Mostly
useful with ``@file``
``@file``
Can be used with types ``char`` and ``base64``, sources the field's content
from the specified file instead of the field's text body.
``@model``
Model used for ``@search``'s search, or registry object put in context for
``@eval``. Required if ``@search`` but optional if ``@eval``.
``@eval`` (optional)
A Python expression evaluated to obtain the value to set on the record
``@ref`` (optional)
Links to an other record through its :term:`external id`. The module prefix
may be ommitted to link to a record defined in the same module.
``@search`` (optional)
Search domain (evaluated Python expression) into ``@model`` to get the
records to set on the field.
Sets all the matches found for m2m fields, the first id for other field
types.
**Example**
.. code-block:: xml
<record model="ir.actions.report.xml" id="l0">
<field name="model">account.invoice</field>
<field name="name">Invoices List</field>
<field name="report_name">account.invoice.list</field>
<field name="report_xsl">account/report/invoice.xsl</field>
<field name="report_xml">account/report/invoice.xml</field>
</record>
Let's review an example taken from the OpenERP source (base_demo.xml in the base module):
.. code-block:: xml
<record model="res.company" id="main_company">
<field name="name">Tiny sprl</field>
<field name="partner_id" ref="main_partner"/>
<field name="currency_id" ref="EUR"/>
</record>
.. code-block:: xml
<record model="res.users" id="user_admin">
<field name="login">admin</field>
<field name="password">admin</field>
<field name="name">Administrator</field>
<field name="signature">Administrator</field>
<field name="action_id" ref="action_menu_admin"/>
<field name="menu_id" ref="action_menu_admin"/>
<field name="address_id" ref="main_address"/>
<field name="groups_id" eval="[(6,0,[group_admin])]"/>
<field name="company_id" ref="main_company"/>
</record>
This last record defines the admin user :
* The fields login, password, etc are straightforward.
* The ref attribute allows to fill relations between the records :
.. code-block:: xml
<field name="company_id" ref="main_company"/>
The field **company_id** is a many-to-one relation from the user object to the company object, and **main_company** is the id of to associate.
* The **eval** attribute allows to put some python code in the xml: here the groups_id field is a many2many. For such a field, "[(6,0,[group_admin])]" means : Remove all the groups associated with the current user and use the list [group_admin] as the new associated groups (and group_admin is the id of another record).
* The **search** attribute allows to find the record to associate when you do not know its xml id. You can thus specify a search criteria to find the wanted record. The criteria is a list of tuples of the same form than for the predefined search method. If there are several results, an arbitrary one will be chosen (the first one):
.. code-block:: xml
<field name="partner_id" search="[]" model="res.partner"/>
This is a classical example of the use of **search** in demo data: here we do not really care about which partner we want to use for the test, so we give an empty list. Notice the **model** attribute is currently mandatory.
Function tag
////////////
A function tag can contain other function tags.
model : mandatory
The model to be used
name : mandatory
the function given name
eval
should evaluate to the list of parameters of the method to be called, excluding cr and uid
**Example**
.. code-block:: xml
<function model="ir.ui.menu" name="search" eval="[[('name','=','Operations')]]"/>
Views
+++++
Views are a way to represent the objects on the client side. They indicate to the client how to lay out the data coming from the objects on the screen.
There are two types of views:
* form views
* tree views
Lists are simply a particular case of tree views.
A same object may have several views: the first defined view of a kind (*tree, form*, ...) will be used as the default view for this kind. That way you can have a default tree view (that will act as the view of a one2many) and a specialized view with more or less information that will appear when one double-clicks on a menu item. For example, the products have several views according to the product variants.
Views are described in XML.
If no view has been defined for an object, the object is able to generate a view to represent itself. This can limit the developer's work but results in less ergonomic views.
Usage example
/////////////
When you open an invoice, here is the chain of operations followed by the client:
* An action asks to open the invoice (it gives the object's data (account.invoice), the view, the domain (e.g. only unpaid invoices) ).
* The client asks (with XML-RPC) to the server what views are defined for the invoice object and what are the data it must show.
* The client displays the form according to the view
.. .. figure:: images/arch_view_use.png
.. :scale: 50
.. :align: center
To develop new objects
//////////////////////
The design of new objects is restricted to the minimum: create the objects and optionally create the views to represent them. The PostgreSQL tables do not have to be written by hand because the objects are able to automatically create them (or adapt them in case they already exist).
Reports
"""""""
OpenERP uses a flexible and powerful reporting system. Reports are generated either in PDF or in HTML. Reports are designed on the principle of separation between the data layer and the presentation layer.
Reports are described more in details in the `Reporting <http://openobject.com/wiki/index.php/Developers:Developper%27s_Book/Reports>`_ chapter.
Workflow
""""""""
The objects and the views allow you to define new forms very simply, lists/trees and interactions between them. But that is not enough, you must define the dynamics of these objects.
A few examples:
* a confirmed sale order must generate an invoice, according to certain conditions
* a paid invoice must, only under certain conditions, start the shipping order
The workflows describe these interactions with graphs. One or several workflows may be associated to the objects. Workflows are not mandatory; some objects don't have workflows.
Below is an example workflow used for sale orders. It must generate invoices and shipments according to certain conditions.
.. .. figure:: images/arch_workflow_sale.png
.. :scale: 85
.. :align: center
In this graph, the nodes represent the actions to be done:
* create an invoice,
* cancel the sale order,
* generate the shipping order, ...
The arrows are the conditions;
* waiting for the order validation,
* invoice paid,
* click on the cancel button, ...
The squared nodes represent other Workflows;
* the invoice
* the shipping
i18n
----
.. versionchanged:: 5.0
Each module has its own ``i18n`` folder. In addition, OpenERP can now deal with
``.po`` [#f_po]_ files as import/export format. The translation files of the
installed languages are automatically loaded when installing or updating a
module.
Translations are managed by the `Launchpad Web interface
<https://translations.launchpad.net/openobject>`_. Here, you'll find the list
of translatable projects.
Please read the `FAQ <https://answers.launchpad.net/rosetta/+faqs>`_ before asking questions.
.. [#f_po] http://www.gnu.org/software/autoconf/manual/gettext/PO-Files.html#PO-Files

View File

@ -1,961 +0,0 @@
.. _module-dev-api:
Objects, Fields and Methods
===========================
OpenERP Objects
---------------
.. This chapter is dedicated to detailed objects definition:
all fields
all objects
inheritancies
All the ERP's pieces of data are accessible through "objects". As an example, there is a res.partner object to access the data concerning the partners, an account.invoice object for the data concerning the invoices, etc...
Please note that there is an object for every type of resource, and not an
object per resource. We have thus a res.partner object to manage all the
partners and not a *res.partner* object per partner. If we talk in "object
oriented" terms, we could also say that there is an object per level.
The direct consequences is that all the methods of objects have a common parameter: the "ids" parameter. This specifies on which resources (for example, on which partner) the method must be applied. Precisely, this parameter contains a list of resource ids on which the method must be applied.
For example, if we have two partners with the identifiers 1 and 5, and we want to call the res_partner method "send_email", we will write something like::
res_partner.send_email(... , [1, 5], ...)
We will see the exact syntax of object method calls further in this document.
In the following section, we will see how to define a new object. Then, we will check out the different methods of doing this.
For developers:
* OpenERP "objects" are usually called classes in object oriented programming.
* A OpenERP "resource" is usually called an object in OO programming, instance of a class.
It's a bit confusing when you try to program inside OpenERP, because the language used is Python, and Python is a fully object oriented language, and has objects and instances ...
Luckily, an OpenERP "resource" can be converted magically into a nice Python object using the "browse" class method (OpenERP object method).
The ORM - Object-relational mapping - Models
--------------------------------------------
The ORM, short for Object-Relational Mapping, is a central part of OpenERP.
In OpenERP, the data model is described and manipulated through Python classes
and objects. It is the ORM job to bridge the gap -- as transparently as
possible for the developer -- between Python and the underlying relational
database (PostgreSQL), which will provide the persistence we need for our
objects.
OpenERP Object Attributes
-------------------------
Objects Introduction
++++++++++++++++++++
To define a new object, you must define a new Python class then instantiate it. This class must inherit from the osv class in the osv module.
Object definition
+++++++++++++++++
The first line of the object definition will always be of the form::
class name_of_the_object(osv.osv):
_name = 'name.of.the.object'
_columns = { ... }
...
name_of_the_object()
An object is defined by declaring some fields with predefined names in the
class. Two of them are required (_name and _columns), the rest are optional.
The predefined fields are:
Predefined fields
+++++++++++++++++
`_auto`
Determines whether a corresponding PostgreSQL table must be generated
automatically from the object. Setting _auto to False can be useful in case
of OpenERP objects generated from PostgreSQL views. See the "Reporting From
PostgreSQL Views" section for more details.
`_columns (required)`
The object fields. See the :ref:`fields <fields-link>` section for further details.
`_constraints`
The constraints on the object. See the constraints section for details.
`_sql_constraints`
The SQL Constraint on the object. See the SQL constraints section for further details.
`_defaults`
The default values for some of the object's fields. See the default value section for details.
`_inherit`
The name of the osv object which the current object inherits from. See the :ref:`object inheritance section<inherit-link>`
(first form) for further details.
`_inherits`
The list of osv objects the object inherits from. This list must be given in
a python dictionary of the form: {'name_of_the_parent_object':
'name_of_the_field', ...}. See the :ref:`object inheritance section<inherits-link>`
(second form) for further details. Default value: {}.
`_log_access`
Determines whether or not the write access to the resource must be logged.
If true, four fields will be created in the SQL table: create_uid,
create_date, write_uid, write_date. Those fields represent respectively the
id of the user who created the record, the creation date of record, the id
of the user who last modified the record, and the date of that last
modification. This data may be obtained by using the perm_read method.
`_name (required)`
Name of the object. Default value: None.
`_order`
Name of the fields used to sort the results of the search and read methods.
Default value: 'id'.
Examples::
_order = "name"
_order = "date_order desc"
`_rec_name`
Name of the field in which the name of every resource is stored. Default
value: 'name'. Note: by default, the name_get method simply returns the
content of this field.
`_sequence`
Name of the SQL sequence that manages the ids for this object. Default value: None.
`_sql`
SQL code executed upon creation of the object (only if _auto is True). It means this code gets executed after the table is created.
`_table`
Name of the SQL table. Default value: the value of the _name field above
with the dots ( . ) replaced by underscores ( _ ).
.. _inherit-link:
Object Inheritance - _inherit
-----------------------------
Introduction
++++++++++++
Objects may be inherited in some custom or specific modules. It is better to
inherit an object to add/modify some fields.
It is done with::
_inherit='object.name'
Extension of an object
++++++++++++++++++++++
There are two possible ways to do this kind of inheritance. Both ways result in
a new class of data, which holds parent fields and behaviour as well as
additional fields and behaviour, but they differ in heavy programatical
consequences.
While Example 1 creates a new subclass "custom_material" that may be "seen" or
"used" by any view or tree which handles "network.material", this will not be
the case for Example 2.
This is due to the table (other.material) the new subclass is operating on,
which will never be recognized by previous "network.material" views or trees.
Example 1::
class custom_material(osv.osv):
_name = 'network.material'
_inherit = 'network.material'
_columns = {
'manuf_warranty': fields.boolean('Manufacturer warranty?'),
}
_defaults = {
'manuf_warranty': lambda *a: False,
}
custom_material()
.. tip:: Notice
_name == _inherit
In this example, the 'custom_material' will add a new field 'manuf_warranty' to
the object 'network.material'. New instances of this class will be visible by
views or trees operating on the superclasses table 'network.material'.
This inheritancy is usually called "class inheritance" in Object oriented
design. The child inherits data (fields) and behavior (functions) of his
parent.
Example 2::
class other_material(osv.osv):
_name = 'other.material'
_inherit = 'network.material'
_columns = {
'manuf_warranty': fields.boolean('Manufacturer warranty?'),
}
_defaults = {
'manuf_warranty': lambda *a: False,
}
other_material()
.. tip:: Notice
_name != _inherit
In this example, the 'other_material' will hold all fields specified by
'network.material' and it will additionally hold a new field 'manuf_warranty'.
All those fields will be part of the table 'other.material'. New instances of
this class will therefore never been seen by views or trees operating on the
superclasses table 'network.material'.
This type of inheritancy is known as "inheritance by prototyping" (e.g.
Javascript), because the newly created subclass "copies" all fields from the
specified superclass (prototype). The child inherits data (fields) and behavior
(functions) of his parent.
.. _inherits-link:
Inheritance by Delegation - _inherits
-------------------------------------
**Syntax :**::
class tiny_object(osv.osv)
_name = 'tiny.object'
_table = 'tiny_object'
_inherits = {
'tiny.object_a': 'object_a_id',
'tiny.object_b': 'object_b_id',
... ,
'tiny.object_n': 'object_n_id'
}
(...)
The object 'tiny.object' inherits from all the columns and all the methods from
the n objects 'tiny.object_a', ..., 'tiny.object_n'.
To inherit from multiple tables, the technique consists in adding one column to
the table tiny_object per inherited object. This column will store a foreign
key (an id from another table). The values *'object_a_id' 'object_b_id' ...
'object_n_id'* are of type string and determine the title of the columns in
which the foreign keys from 'tiny.object_a', ..., 'tiny.object_n' are stored.
This inheritance mechanism is usually called " *instance inheritance* " or "
*value inheritance* ". A resource (instance) has the VALUES of its parents.
.. _fields-link:
Fields Introduction
-------------------
Objects may contain different types of fields. Those types can be divided into
three categories: simple types, relation types and functional fields. The
simple types are integers, floats, booleans, strings, etc ... ; the relation
types are used to represent relations between objects (one2one, one2many,
many2one). Functional fields are special fields because they are not stored in
the database but calculated in real time given other fields of the view.
Here's the header of the initialization method of the class any field defined
in OpenERP inherits (as you can see in server/bin/osv/fields.py)::
def __init__(self, string='unknown', required=False, readonly=False,
domain=None, context="", states=None, priority=0, change_default=False, size=None,
ondelete="set null", translate=False, select=False, **args) :
There are a common set of optional parameters that are available to most field
types:
:change_default:
Whether or not the user can define default values on other fields depending
on the value of this field. Those default values need to be defined in
the ir.values table.
:help:
A description of how the field should be used: longer and more descriptive
than `string`. It will appear in a tooltip when the mouse hovers over the
field.
:ondelete:
How to handle deletions in a related record. Allowable values are:
'restrict', 'no action', 'cascade', 'set null', and 'set default'.
:priority: Not used?
:readonly: `True` if the user cannot edit this field, otherwise `False`.
:required:
`True` if this field must have a value before the object can be saved,
otherwise `False`.
:size: The size of the field in the database: number characters or digits.
:states:
Lets you override other parameters for specific states of this object.
Accepts a dictionary with the state names as keys and a list of name/value
tuples as the values. For example: `states={'posted':[('readonly',True)]}`
:string:
The field name as it should appear in a label or column header. Strings
containing non-ASCII characters must use python unicode objects.
For example: `'tested': fields.boolean(u'Testé')`
:translate:
`True` if the *content* of this field should be translated, otherwise
`False`.
There are also some optional parameters that are specific to some field types:
:context:
Define a variable's value visible in the view's context or an on-change
function. Used when searching child table of `one2many` relationship?
:domain:
Domain restriction on a relational field.
Default value: [].
Example: domain=[('field','=',value)])
:invisible: Hide the field's value in forms. For example, a password.
:on_change:
Default value for the `on_change` attribute in the view. This will launch
a function on the server when the field changes in the client. For example,
`on_change="onchange_shop_id(shop_id)"`.
:relation:
Used when a field is an id reference to another table. This is the name of
the table to look in. Most commonly used with related and function field
types.
:select:
Default value for the `select` attribute in the view. 1 means basic search,
and 2 means advanced search.
Type of Fields
--------------
Basic Types
+++++++++++
:boolean:
A boolean (true, false).
Syntax::
fields.boolean('Field Name' [, Optional Parameters]),
:integer:
An integer.
Syntax::
fields.integer('Field Name' [, Optional Parameters]),
:float:
A floating point number.
Syntax::
fields.float('Field Name' [, Optional Parameters]),
.. note::
The optional parameter digits defines the precision and scale of the
number. The scale being the number of digits after the decimal point
whereas the precision is the total number of significant digits in the
number (before and after the decimal point). If the parameter digits is
not present, the number will be a double precision floating point number.
Warning: these floating-point numbers are inexact (not any value can be
converted to its binary representation) and this can lead to rounding
errors. You should always use the digits parameter for monetary amounts.
Example::
'rate': fields.float(
'Relative Change rate',
digits=(12,6) [,
Optional Parameters]),
:char:
A string of limited length. The required size parameter determines its size.
Syntax::
fields.char(
'Field Name',
size=n [,
Optional Parameters]), # where ''n'' is an integer.
Example::
'city' : fields.char('City Name', size=30, required=True),
:text:
A text field with no limit in length.
Syntax::
fields.text('Field Name' [, Optional Parameters]),
:date:
A date.
Syntax::
fields.date('Field Name' [, Optional Parameters]),
:datetime:
Allows to store a date and the time of day in the same field.
Syntax::
fields.datetime('Field Name' [, Optional Parameters]),
:binary:
A binary chain
:selection:
A field which allows the user to make a selection between various predefined values.
Syntax::
fields.selection((('n','Unconfirmed'), ('c','Confirmed')),
'Field Name' [, Optional Parameters]),
.. note::
Format of the selection parameter: tuple of tuples of strings of the form::
(('key_or_value', 'string_to_display'), ... )
.. note::
You can specify a function that will return the tuple. Example ::
def _get_selection(self, cursor, user_id, context=None):
return (
('choice1', 'This is the choice 1'),
('choice2', 'This is the choice 2'))
_columns = {
'sel' : fields.selection(
_get_selection,
'What do you want ?')
}
*Example*
Using relation fields **many2one** with **selection**. In fields definitions add::
...,
'my_field': fields.many2one(
'mymodule.relation.model',
'Title',
selection=_sel_func),
...,
And then define the _sel_func like this (but before the fields definitions)::
def _sel_func(self, cr, uid, context=None):
obj = self.pool.get('mymodule.relation.model')
ids = obj.search(cr, uid, [])
res = obj.read(cr, uid, ids, ['name', 'id'], context)
res = [(r['id'], r['name']) for r in res]
return res
Relational Types
++++++++++++++++
:one2one:
A one2one field expresses a one:to:one relation between two objects. It is
deprecated. Use many2one instead.
Syntax::
fields.one2one('other.object.name', 'Field Name')
:many2one:
Associates this object to a parent object via this Field. For example
Department an Employee belongs to would Many to one. i.e Many employees will
belong to a Department
Syntax::
fields.many2one(
'other.object.name',
'Field Name',
optional parameters)
Optional parameters:
- ondelete: What should happen when the resource this field points to is deleted.
+ Predefined value: "cascade", "set null", "restrict", "no action", "set default"
+ Default value: "set null"
- required: True
- readonly: True
- select: True - (creates an index on the Foreign Key field)
*Example* ::
'commercial': fields.many2one(
'res.users',
'Commercial',
ondelete='cascade'),
:one2many:
TODO
Syntax::
fields.one2many(
'other.object.name',
'Field relation id',
'Fieldname',
optional parameter)
Optional parameters:
- invisible: True/False
- states: ?
- readonly: True/False
*Example* ::
'address': fields.one2many(
'res.partner.address',
'partner_id',
'Contacts'),
:many2many:
TODO
Syntax::
fields.many2many('other.object.name',
'relation object',
'actual.object.id',
'other.object.id',
'Field Name')
Where:
- other.object.name is the other object which belongs to the relation
- relation object is the table that makes the link
- actual.object.id and other.object.id are the fields' names used in the relation table
Example::
'category_ids':
fields.many2many(
'res.partner.category',
'res_partner_category_rel',
'partner_id',
'category_id',
'Categories'),
To make it bidirectional (= create a field in the other object)::
class other_object_name2(osv.osv):
_inherit = 'other.object.name'
_columns = {
'other_fields': fields.many2many(
'actual.object.name',
'relation object',
'actual.object.id',
'other.object.id',
'Other Field Name'),
}
other_object_name2()
Example::
class res_partner_category2(osv.osv):
_inherit = 'res.partner.category'
_columns = {
'partner_ids': fields.many2many(
'res.partner',
'res_partner_category_rel',
'category_id',
'partner_id',
'Partners'),
}
res_partner_category2()
:related:
Sometimes you need to refer to the relation of a relation. For example,
supposing you have objects: City -> State -> Country, and you need to refer to
the Country from a City, you can define a field as below in the City object::
'country_id': fields.related(
'state_id',
'country_id',
type="many2one",
relation="res.country",
string="Country",
store=False)
Where:
- The first set of parameters are the chain of reference fields to
follow, with the desired field at the end.
- :guilabel:`type` is the type of that desired field.
- Use :guilabel:`relation` if the desired field is still some kind of
reference. :guilabel:`relation` is the table to look up that
reference in.
.. _fields-functional:
Functional Fields
+++++++++++++++++
A functional field is a field whose value is calculated by a function (rather
than being stored in the database).
**Parameters:** ::
fnct, arg=None, fnct_inv=None, fnct_inv_arg=None, type="float",
fnct_search=None, obj=None, method=False, store=False, multi=False
where
* :guilabel:`fnct` is the function or method that will compute the field
value. It must have been declared before declaring the functional field.
* :guilabel:`fnct_inv` is the function or method that will allow writing
values in that field.
* :guilabel:`type` is the field type name returned by the function. It can
be any field type name except function.
* :guilabel:`fnct_search` allows you to define the searching behaviour on
that field.
* :guilabel:`method` whether the field is computed by a method (of an
object) or a global function
* :guilabel:`store` If you want to store field in database or not. Default
is False.
* :guilabel:`multi` is a group name. All fields with the same `multi`
parameter will be calculated in a single function call.
fnct parameter
""""""""""""""
If *method* is True, the signature of the method must be::
def fnct(self, cr, uid, ids, field_name, arg, context):
otherwise (if it is a global function), its signature must be::
def fnct(cr, table, ids, field_name, arg, context):
Either way, it must return a dictionary of values of the form
**{id'_1_': value'_1_', id'_2_': value'_2_',...}.**
The values of the returned dictionary must be of the type specified by the type
argument in the field declaration.
If *multi* is set, then *field_name* is replaced by *field_names*: a list
of the field names that should be calculated. Each value in the returned
dictionary is also a dictionary from field name to value. For example, if the
fields `'name'`, and `'age'` are both based on the `vital_statistics` function,
then the return value of `vital_statistics` might look like this when `ids` is
`[1, 2, 5]`::
{
1: {'name': 'Bob', 'age': 23},
2: {'name': 'Sally', 'age', 19},
5: {'name': 'Ed', 'age': 62}
}
fnct_inv parameter
""""""""""""""""""
If *method* is true, the signature of the method must be::
def fnct(self, cr, uid, ids, field_name, field_value, arg, context):
otherwise (if it is a global function), it should be::
def fnct(cr, table, ids, field_name, field_value, arg, context):
fnct_search parameter
"""""""""""""""""""""
If method is true, the signature of the method must be::
def fnct(self, cr, uid, obj, name, args, context):
otherwise (if it is a global function), it should be::
def fnct(cr, uid, obj, name, args, context):
The return value is a list containing 3-part tuples which are used in search function::
return [('id','in',[1,3,5])]
*obj* is the same as *self*, and *name* receives the field name. *args* is a list
of 3-part tuples containing search criteria for this field, although the search
function may be called separately for each tuple.
Example
"""""""
Suppose we create a contract object which is :
.. code-block:: python
class hr_contract(osv.osv):
_name = 'hr.contract'
_description = 'Contract'
_columns = {
'name' : fields.char('Contract Name', size=30, required=True),
'employee_id' : fields.many2one('hr.employee', 'Employee', required=True),
'function' : fields.many2one('res.partner.function', 'Function'),
}
hr_contract()
If we want to add a field that retrieves the function of an employee by looking its current contract, we use a functional field. The object hr_employee is inherited this way:
.. code-block:: python
class hr_employee(osv.osv):
_name = "hr.employee"
_description = "Employee"
_inherit = "hr.employee"
_columns = {
'contract_ids' : fields.one2many('hr.contract', 'employee_id', 'Contracts'),
'function' : fields.function(
_get_cur_function_id,
type='many2one',
obj="res.partner.function",
method=True,
string='Contract Function'),
}
hr_employee()
.. note:: three points
* :guilabel:`type` ='many2one' is because the function field must create
a many2one field; function is declared as a many2one in hr_contract also.
* :guilabel:`obj` ="res.partner.function" is used to specify that the
object to use for the many2one field is res.partner.function.
* We called our method :guilabel:`_get_cur_function_id` because its role
is to return a dictionary whose keys are ids of employees, and whose
corresponding values are ids of the function of those employees. The
code of this method is:
.. code-block:: python
def _get_cur_function_id(self, cr, uid, ids, field_name, arg, context):
for i in ids:
#get the id of the current function of the employee of identifier "i"
sql_req= """
SELECT f.id AS func_id
FROM hr_contract c
LEFT JOIN res_partner_function f ON (f.id = c.function)
WHERE
(c.employee_id = %d)
""" % (i,)
cr.execute(sql_req)
sql_res = cr.dictfetchone()
if sql_res: #The employee has one associated contract
res[i] = sql_res['func_id']
else:
#res[i] must be set to False and not to None because of XML:RPC
# "cannot marshal None unless allow_none is enabled"
res[i] = False
return res
The id of the function is retrieved using a SQL query. Note that if the query
returns no result, the value of sql_res['func_id'] will be None. We force the
False value in this case value because XML:RPC (communication between the server
and the client) doesn't allow to transmit this value.
store Parameter
"""""""""""""""
It will calculate the field and store the result in the table. The field will be
recalculated when certain fields are changed on other objects. It uses the
following syntax:
.. code-block:: python
store = {
'object_name': (
function_name,
['field_name1', 'field_name2'],
priority)
}
It will call function function_name when any changes are written to fields in the
list ['field1','field2'] on object 'object_name'. The function should have the
following signature::
def function_name(self, cr, uid, ids, context=None):
Where `ids` will be the ids of records in the other object's table that have
changed values in the watched fields. The function should return a list of ids
of records in its own table that should have the field recalculated. That list
will be sent as a parameter for the main function of the field.
Here's an example from the membership module:
.. code-block:: python
'membership_state':
fields.function(
_membership_state,
method=True,
string='Current membership state',
type='selection',
selection=STATE,
store={
'account.invoice': (_get_invoice_partner, ['state'], 10),
'membership.membership_line': (_get_partner_id,['state'], 10),
'res.partner': (
lambda self, cr, uid, ids, c={}: ids,
['free_member'],
10)
}),
Property Fields
+++++++++++++++
.. describe:: Declaring a property
A property is a special field: fields.property.
.. code-block:: python
class res_partner(osv.osv):
_name = "res.partner"
_inherit = "res.partner"
_columns = {
'property_product_pricelist':
fields.property(
'product.pricelist',
type='many2one',
relation='product.pricelist',
string="Sale Pricelist",
method=True,
group_name="Pricelists Properties"),
}
Then you have to create the default value in a .XML file for this property:
.. code-block:: xml
<record model="ir.property" id="property_product_pricelist">
<field name="name">property_product_pricelist</field>
<field name="fields_id" search="[('model','=','res.partner'),
('name','=','property_product_pricelist')]"/>
<field name="value" eval="'product.pricelist,'+str(list0)"/>
</record>
..
.. tip::
if the default value points to a resource from another module, you can use the ref function like this:
<field name="value" eval="'product.pricelist,'+str(ref('module.data_id'))"/>
**Putting properties in forms**
To add properties in forms, just put the <properties/> tag in your form. This will automatically add all properties fields that are related to this object. The system will add properties depending on your rights. (some people will be able to change a specific property, others won't).
Properties are displayed by section, depending on the group_name attribute. (It is rendered in the client like a separator tag).
**How does this work ?**
The fields.property class inherits from fields.function and overrides the read and write method. The type of this field is many2one, so in the form a property is represented like a many2one function.
But the value of a property is stored in the ir.property class/table as a complete record. The stored value is a field of type reference (not many2one) because each property may point to a different object. If you edit properties values (from the administration menu), these are represented like a field of type reference.
When you read a property, the program gives you the property attached to the instance of object you are reading. If this object has no value, the system will give you the default property.
The definition of a property is stored in the ir.model.fields class like any other fields. In the definition of the property, you can add groups that are allowed to change to property.
**Using properties or normal fields**
When you want to add a new feature, you will have to choose to implement it as a property or as normal field. Use a normal field when you inherit from an object and want to extend this object. Use a property when the new feature is not related to the object but to an external concept.
Here are a few tips to help you choose between a normal field or a property:
Normal fields extend the object, adding more features or data.
A property is a concept that is attached to an object and have special features:
* Different value for the same property depending on the company
* Rights management per field
* It's a link between resources (many2one)
**Example 1: Account Receivable**
The default "Account Receivable" for a specific partner is implemented as a property because:
* This is a concept related to the account chart and not to the partner, so it is an account property that is visible on a partner form. Rights have to be managed on this fields for accountants, these are not the same rights that are applied to partner objects. So you have specific rights just for this field of the partner form: only accountants may change the account receivable of a partner.
* This is a multi-company field: the same partner may have different account receivable values depending on the company the user belongs to. In a multi-company system, there is one account chart per company. The account receivable of a partner depends on the company it placed the sale order.
* The default account receivable is the same for all partners and is configured from the general property menu (in administration).
.. note::
One interesting thing is that properties avoid "spaghetti" code. The account module depends on the partner (base) module. But you can install the partner (base) module without the accounting module. If you add a field that points to an account in the partner object, both objects will depend on each other. It's much more difficult to maintain and code (for instance, try to remove a table when both tables are pointing to each others.)
**Example 2: Product Times**
The product expiry module implements all delays related to products: removal date, product usetime, ... This module is very useful for food industries.
This module inherits from the product.product object and adds new fields to it:
.. code-block:: python
class product_product(osv.osv):
_inherit = 'product.product'
_name = 'product.product'
_columns = {
'life_time': fields.integer('Product lifetime'),
'use_time': fields.integer('Product usetime'),
'removal_time': fields.integer('Product removal time'),
'alert_time': fields.integer('Product alert time'),
}
product_product()
..
This module adds simple fields to the product.product object. We did not use properties because:
* We extend a product, the life_time field is a concept related to a product, not to another object.
* We do not need a right management per field, the different delays are managed by the same people that manage all products.
ORM methods
-----------
Keeping the context in ORM methods
++++++++++++++++++++++++++++++++++
In OpenObject, the context holds very important data such as the language in
which a document must be written, whether function field needs updating or not,
etc.
When calling an ORM method, you will probably already have a context - for
example the framework will provide you with one as a parameter of almost
every method.
If you do have a context, it is very important that you always pass it through
to every single method you call.
This rule also applies to writing ORM methods. You should expect to receive a
context as parameter, and always pass it through to every other method you call..

File diff suppressed because it is too large Load Diff

View File

@ -1,331 +0,0 @@
.. _module-dev-actions:
=================
Menus and Actions
=================
Menus
=====
Menus are records in the ``ir.ui.menu`` table. In order to create a new
menu entry, you can directly create a record using the ``record`` tag.
.. code-block:: xml
<record id="menu_xml_id" model="ir.ui.menu">
<field name="name">My Menu</field>
<field name="action" ref="action_xml_id"/>
<field name="sequence" eval="<integer>"/>
<field name="parent_id" ref="parent_menu_xml_id"/>
</record>
There is a shortcut by using the ``menuitem`` tag that **you should use
preferentially**. It offers a flexible way to easily define the menu entry
along with icons and other fields.
.. code-block:: xml
<menuitem id="menu_xml_id"
name="My Menu"
action="action_xml_id"
icon="NAME_FROM_LIST"
groups="groupname"
sequence="<integer>"
parent="parent_menu_xml_id"
/>
Where
- ``id`` specifies the **xml identifier** of the menu item in the menu
items table. This identifier must be unique. Mandatory field.
- ``name`` defines the menu name that will be displayed in the client.
Mandatory field.
- ``action`` specifies the identifier of the attached action defined
in the action table (``ir.actions.act_window``). This field is not
mandatory : you can define menu elements without associating actions
to them. This is useful when defining custom icons for menu elements
that will act as folders. This is how custom icons for "Projects" or
"Human Resources" in OpenERP are defined).
- ``groups`` specifies which group of user can see the menu item.
(example : groups="admin"). See section " Management of Access Rights"
for more information. Multiple groups should be separated by a ','
(example: groups="admin,user")
- ``sequence`` is an integer that is used to sort the menu item in the
menu. The higher the sequence number, the downer the menu item. This
argument is not mandatory: if sequence is not specified, the menu item
gets a default sequence number of 10. Menu items with the same sequence
numbers are sorted by order of creation (``_order = "*sequence,id*"``).
The main current limitation of using ``menuitem`` is that the menu action must be an
``act_window`` action. This kind of actions is the most used action in OpenERP.
However for some menus you will use other actions. For example, the Feeds
page that comes with the mail module is a client action. For this kind of
menu entry, you can combine both declaration, as defined in the mail module :
.. code-block:: xml
<!-- toplevel menu -->
<menuitem id="mail_feeds_main" name="Feeds" sequence="0"
web_icon="static/src/img/feeds.png"
web_icon_hover="static/src/img/feeds-hover.png" />
<record id="mail_feeds_main" model="ir.ui.menu">
<field name="action" ref="action_mail_all_feeds"/>
</record>
Actions
=======
The actions define the behavior of the system in response to the actions
of the users ; login of a new user, double-click on an invoice, click on the action button, ...
There are different types of simple actions:
* **Window**: Opening of a new window
* **Report**: The printing of a report
o Custom Report: The personalized reports
o RML Report: The XSL:RML reports
* **Execute**: The execution of a method on the server side
* **Group**: Gather some actions in one group
The actions are used for the following events:
* User connection,
* The user clicks on a menu,
* The user clicks on the icon 'print' or 'action'.
Opening of the menu
+++++++++++++++++++
When the user open the option of the menu "Operations > Partners > Partners Contact", the next steps are done to give the user information on the action to undertake.
1. Search the action in the IR.
2. Execution of the action
1. If the action is the type Opening the Window; it indicates to the user that a new window must be opened for a selected object and it gives you the view (form or list) and the filed to use (only the pro-forma invoice).
2. The user asks the object and receives information necessary to trace a form; the fields description and the XML view.
User connection
+++++++++++++++
When a new user is connected to the server, the client must search the action to use for the first screen of this user. Generally, this action is: open the menu in the 'Operations' section.
The steps are:
1. Reading of a user file to obtain ACTION_ID
2. Reading of the action and execution of this one
The fields
++++++++++
**Action Name**
The action name
**Action Type**
Always 'ir.actions.act_window'
**View Ref**
The view used for showing the object
**Model**
The model of the object to post
**Type of View**
The type of view (Tree/Form)
**Domain Value**
The domain that decreases the visible data with this view
The view
--------
The view describes how the edition form or the data tree/list appear on screen. The views can be of 'Form' or 'Tree' type, according to whether they represent a form for the edition or a list/tree for global data viewing.
A form can be called by an action opening in 'Tree' mode. The form view is generally opened from the list mode (like if the user pushes on 'switch view').
.. _domain:
.. _domains:
The domain
----------
This parameter allows you to regulate which resources are visible in a selected view.(restriction)
For example, in the invoice case, you can define an action that opens a view that shows only invoices not paid.
The domains are written in python; list of tuples. The tuples have three elements;
* the field on which the test must be done
* the operator used for the test (<, >, =, like)
* the tested value
For example, if you want to obtain only 'Draft' invoice, use the following domain; [('state','=','draft')]
In the case of a simple view, the domain define the resources which are the roots of the tree. The other resources, even if they are not from a part of the domain will be posted if the user develop the branches of the tree.
Window Action
-------------
Actions are explained in more detail in section "Administration Modules - Actions". Here's the template of an action XML record :
::
<record model="ir.actions.act_window" id="action_id_1">
<field name="name">action.name</field>
<field name="view_id" ref="view_id_1"/>
<field name="domain">["list of 3-tuples (max 250 characters)"]</field>
<field name="context">{"context dictionary (max 250 characters)"}</field>
<field name="res_model">Open.object</field>
<field name="view_type">form|tree</field>
<field name="view_mode">form,tree|tree,form|form|tree</field>
<field name="usage">menu</field>
<field name="target">new</field>
</record>
**Where**
* **id** is the identifier of the action in the table "ir.actions.act_window". It must be unique.
* **name** is the name of the action (mandatory).
* **view_id** is the name of the view to display when the action is activated. If this field is not defined, the view of a kind (list or form) associated to the object res_model with the highest priority field is used (if two views have the same priority, the first defined view of a kind is used).
* **domain** is a list of constraints used to refine the results of a selection, and hence to get less records displayed in the view. Constraints of the list are linked together with an AND clause : a record of the table will be displayed in the view only if all the constraints are satisfied.
* **context** is the context dictionary which will be visible in the view that will be opened when the action is activated. Context dictionaries are declared with the same syntax as Python dictionaries in the XML file. For more information about context dictionaries, see section " The context Dictionary".
* **res_model** is the name of the object on which the action operates.
* **view_type** is set to form when the action must open a new form view, and is set to tree when the action must open a new tree view.
* **view_mode** is only considered if view_type is form, and ignored otherwise. The four possibilities are :
- **form,tree** : the view is first displayed as a form, the list view can be displayed by clicking the "alternate view button" ;
- **tree,form** : the view is first displayed as a list, the form view can be displayed by clicking the "alternate view button" ;
- **form** : the view is displayed as a form and there is no way to switch to list view ;
- **tree** : the view is displayed as a list and there is no way to switch to form view.
(version 5 introduced **graph** and **calendar** views)
* **usage** is used [+ ***TODO*** +]
* **target** the view will open in new window like wizard.
* **context** will be passed to the action itself and added to its global context
.. code-block:: xml
<record model="ir.actions.act_window" id="a">
<field name="name">account.account.tree1</field>
<field name="res_model">account.account</field>
<field name="view_type">tree</field>
<field name="view_mode">form,tree</field>
<field name="view_id" ref="v"/>
<field name="domain">[('code','=','0')]</field>
<field name="context">{'project_id': active_id}</field>
</record>
They indicate at the user that he has to open a new window in a new 'tab'.
Administration > Custom > Low Level > Base > Action > Window Actions
.. .. figure:: images/module_base_action_window.png
.. :scale: 85
.. :align: center
Examples of actions
+++++++++++++++++++
This action is declared in server/bin/addons/project/project_view.xml.
::
<record model="ir.actions.act_window" id="open_view_my_project">
<field name="name">project.project</field>
<field name="res_model">project.project</field>
<field name="view_type">tree</field>
<field name="domain">[('parent_id','=',False), ('manager', '=', uid)]</field>
<field name="view_id" ref="view_my_project" />
</record>
This action is declared in server/bin/addons/stock/stock_view.xml.
::
<record model="ir.actions.act_window" id="action_picking_form">
<field name="name">stock.picking</field>
<field name="res_model">stock.picking</field>
<field name="type">ir.actions.act_window</field>
<field name="view_type">form</field>
<field name="view_id" ref="view_picking_form"/>
<field name="context">{'contact_display': 'partner'}</field>
</record>
Url Action
-----------
Report Action
-------------
Report declaration
++++++++++++++++++
Reports in OpenERP are explained in chapter "Reports Reporting". Here's an example of a XML file that declares a RML report :
::
<?xml version="1.0"?>
<openerp>
<data>
<report id="sale_category_print"
string="Sales Orders By Categories"
model="sale.order"
name="sale_category.print"
rml="sale_category/report/sale_category_report.rml"
menu="True"
auto="False"/>
</data>
</openerp>
A report is declared using a **report tag** inside a "data" block. The different arguments of a report tag are :
* **id** : an identifier which must be unique.
* **string** : the text of the menu that calls the report (if any, see below).
* **model** : the OpenERP object on which the report will be rendered.
* **rml** : the .RML report model. Important Note : Path is relative to addons/ directory.
* **menu** : whether the report will be able to be called directly via the client or not. Setting menu to False is useful in case of reports called by wizards.
* **auto** : determines if the .RML file must be parsed using the default parser or not. Using a custom parser allows you to define additional functions to your report.
Action creation
---------------
Linking events to action
++++++++++++++++++++++++
The available type of events are:
* **client_print_multi** (print from a list or form)
* **client_action_multi** (action from a list or form)
* **tree_but_open** (double click on the item of a tree, like the menu)
* **tree_but_action** (action on the items of a tree)
To map an events to an action:
.. code-block:: xml
<record model="ir.values" id="ir_open_journal_period">
<field name="key2">tree_but_open</field>
<field name="model">account.journal.period</field>
<field name="name">Open Journal</field>
<field name="value" eval="'ir.actions.wizard,%d'%action_move_journal_line_form_select"/>
<field name="object" eval="True"/>
</record>
If you double click on a journal/period (object: account.journal.period), this will open the selected wizard. (id="action_move_journal_line_form_select").
You can use a res_id field to allow this action only if the user click on a specific object.
.. code-block:: xml
<record model="ir.values" id="ir_open_journal_period">
<field name="key2">tree_but_open</field>
<field name="model">account.journal.period</field>
<field name="name">Open Journal</field>
<field name="value" eval="'ir.actions.wizard,%d'%action_move_journal_line_form_select"/>
<field name="res_id" eval="3"/>
<field name="object" eval="True"/>
</record>
The action will be triggered if the user clicks on the account.journal.period n°3.
When you declare wizard, report or menus, the ir.values creation is automatically made with these tags:
* <menuitem... />
* <report... />
So you usually do not need to add the mapping by yourself.

View File

@ -1,93 +0,0 @@
.. _module-dev-example:
==========================
Example of module creation
==========================
Getting the skeleton directory
++++++++++++++++++++++++++++++
Create a ``travel`` directory, that will contain our addon. Create **__init__.py** file and **__openerp__.py** files.
Edit the **__openerp__.py** module manifest file:
.. code-block:: python
{
"name" : "Travel agency module",
"version" : "1.1",
"author" : "Tiny",
"category" : "Generic Modules/Others",
"website" : "http://www.openerp.com",
"description": "A module to manage hotel bookings and a few other useful features.",
"depends" : ["base"],
"init_xml" : [],
"update_xml" : ["travel_view.xml"],
"active": True,
"installable": True
}
Changing the main module file
+++++++++++++++++++++++++++++
Now you need to update the travel.py script to suit the needs of your module.
We suggest you follow the Flash tutorial for this or download the travel agency
module from the 20 minutes tutorial page. ::
The documentation below is overlapping the two next step in this wiki tutorial,
so just consider them as a help and head towards the next two pages first...
The travel.py file should initially look like this:
.. code-block:: python
from osv import osv, fields
class travel_hostel(osv.osv):
_name = 'travel.hostel'
_inherit = 'res.partner'
_columns = {
'rooms_id': fields.one2many('travel.room', 'hostel_id', 'Rooms'),
'quality': fields.char('Quality', size=16),
}
_defaults = {
}
travel_hostel()
Ideally, you would copy that bunch of code several times to create all the
entities you need (travel_airport, travel_room, travel_flight). This is what
will hold the database structure of your objects, but you don't really need to
worry too much about the database side. Just filling this file will create the
system structure for you when you install the module.
Customizing the view
++++++++++++++++++++
You can now move on to editing the views. To do this, edit the custom_view.xml file. It should first look like this:
.. code-block:: xml
<openerp>
<data>
<record model="res.groups" id="group_compta_user">
<field name="name">grcompta</field>
</record>
<record model="res.groups" id="group_compta_admin">
<field name="name">grcomptaadmin</field>
</record>
<menuitem name="Administration" groups="admin,grcomptaadmin"
icon="terp-stock" id="menu_admin_compta"/>
</data>
</openerp>
This is, as you can see, an example taken from an accounting system (French
people call accounting "comptabilité", which explains the compta bit).
Defining a view is defining the interfaces the user will get when accessing
your module. Just defining a bunch of fields here should already get you
started on a complete interface. However, due to the complexity of doing it
right, we recommend, once again, that download the travel agency module example
from this link http://apps.openerp.com/
Next you should be able to create different views using other files to separate
them from your basic/admin view.

View File

@ -1,71 +0,0 @@
.. _module-dev-versioning:
.. _module_versioning:
=================
Module versioning
=================
OpenERP has been developed with modularity in mind: OpenERP should be flexible
enough so it can be adopted by any enterprise, of any size and in any market.
By using modules one can adapt OpenERP in many different ways: from completely
different business to smaller, company-specific changes.
As modules (and the core framework itself) evolve, it is necessary to identify
modules by their version so a sensible set of modules can be chosen for a
particular deployment.
There are two trends re-inforcing each others. Firstly OpenERP s.a. will work
on a smaller number of official modules and let the community handles more and
more development. Secondly all those modules will receive greater exposure on
`OpenERP Apps`_ where each module will be owned by a single author.
The solution advocated by OpenERP is straightforward and aims to avoid the
`dependency hell`_. In particular we don't want to deal with versioned
dependencies (i.e. a module depends on a specific version of another module).
For each stable release (e.g. OpenERP 6.1, or OpenERP 7.0) or, said in other
words, for each major version, there is only one (major) version of each
module. The minor version is bumped for bug fixes but is otherwise not
important here.
Making variations on some business needs must be done by creating new modules,
possibly depending on previously written modules. If depending on a module
proves too difficult, you can write a new module (not a new _version_). But
generally Python is flexible enough that depending on the existing module
should work.
For the next major version, refactoring modules can be done and similar
functionalities can be brought together in a better module.
.. _`OpenERP Apps`: http://apps.openerp.com/
.. _`dependency hell`: http://en.wikipedia.org/wiki/Dependency_hell
Example
=======
Whenever a new module is developed or must evolve, the above versioning policy
should be respected.
A particular concern one can face when deploying OpenERP to multiple customers
is now detailed as an example to provide a few guidelines. The hypotethical
situation is as follow. A partner needs to create a new module, called ``M``, for a
customer. Shortly after (but still within a typical OpenERP release cycle, so
there is no chance to bump the version number except for bug fixes), ``M`` must be
adapted for another customer.
The correct way to handle it is to leave ``M`` as it is and create a new module,
say called ``X``, that depends on ``M`` for the second customer. Both modules have the
same version (i.e. 6.1 or 7.0, targeting the corresponding OpenERP version).
If leaving ``M`` as it is is not possible (which should be very rare as Python
is incredibly flexible), the ``X`` module for the new customer can depend on a
new module ``N``, derived from ``M``. At this point, ``N`` is a new,
differently named module. It is not a ``M`` module with a increased version
number. Your goal should be to make ``N`` as close as possible to ``M``, so
that at the next version of OpenERP, the first customer can switch to ``N``
instead of ``M`` (or include the changes in a new version of ``M``). At that
point you are in the ideal situation: you have a module ``N`` for one customer,
and a module ``X`` depending on N to account for the differences between those
two customers.

View File

@ -1,193 +0,0 @@
.. _security:
==================================
Security in OpenERP: users, groups
==================================
Users and user roles are critical points concerning internal security in
OpenERP. OpenERP provides several security mechanisms concerning user roles,
all implemented in the OpenERP Server. They are implemented in the lowest
server level, which is the ORM engine. OpenERP distinguishes three different
concepts:
- user: a person identified by its login and password. Note that all employees
of a company are not necessarily OpenERP users; an user is somebody who
accesses the application.
- group: a group of users that has some access rights. A group gives its
access rights to the users that belong to the group. Ex: Sales Manager,
Accountant, etc.
- security rule: a rule that defines the access rights a given group grants
to its users. Security rules are attached to a given resource, for example
the Invoice model.
Security rules are attached to groups. Users are assigned to several groups.
This gives users the rights that are attached to their groups. Therefore
controlling user roles is done by managing user groups and adding or modifying
security rules attached to those groups.
Users
======
Users represent physical persons using OpenERP. They are identified with
a login and a password,they use OpenERP, they can edit their own preferences, ...
By default, a user has no access right. The more we assign groups to the user,
the more he or she gets rights to perform some actions. A user may belong
to several groups.
User groups
===========
The groups determine the access rights to the different resources. A user
may belong to several groups. If he belongs to several groups, we always
use the group with the highest rights for a selected resource. A group
can inherit all the rights from another group
Figure 3 shows how group membership is displayed in the web client. The user
belongs to Sales / Manager, Accounting / Manager, Administration / Access Rights,
Administration / Configuration and Human Resources / Employee groups. Those
groups define the user access rights.
Figure 3: Example of group membership for a given user
Rights
======
Security rules are attached to groups. You can assign several security
rules at the group level, each rule being of one of the following types :
- access rights are global rights on an object,
- record rules are records access filters,
- fields access right,
- workflow transition rules are operations rights.
You can also define rules that are global, i.e. they are applied to all
users, indiscriminately of the groups they belong to. For example, the
multi-company rules are global; a user can only see invoices of the companies
he or she belongs to.
Concerning configuration, it is difficult to have default generic configurations
that suit all applications. Therefore, like SAP, OpenERP is by default
pre-configured with best-practices.
Access rights
=============
Access rights are rules that define the access a user can have on a particular
object . Those global rights are defined per document type or model. Rights
follow the CRUD model: create, read (search), update (write), delete. For
example, you can define rules on invoice creation. By default, adding a
right to an object gives the right to all records of that specific object.
Figure 4 shows some of the access rights of the Accounting / Accountant group.
The user has some read access rights on some objects.
Figure 4: Access rights for some objects.
Record rules
++++++++++++
When accessing an object, records are filtered based on record rules. Record
rules or access filters are therefore filters that limits records of an
object a group can access. A record rule is a condition that each record
must satisfy to be created, read, updated (written) or deleted. Records
that do not meet the constraints are filtered.
For example, you can create a rule to limit a group in such a way that
users of that group will see business opportunities in which he or she is
flagged as the salesman. The rule can be salesman = connected_user. With
that rule, only records respecting the rule will be displayed.
Field access rights
+++++++++++++++++++
.. versionadded:: 7.0
OpenERP now supports real access control at the field level, not just on the view side.
Previously it was already possible to set a ``groups`` attribute on a ``<field>`` element
(or in fact most view elements), but with cosmetics effects only: the element was made
invisible on the client side, while still perfectly available for read/write access at
the RPC level.
As of OpenERP 7.0 the existing behavior is preserved on the view level, but a new ``groups``
attribute is available on all model fields, introducing a model-level access control on
each field. The syntax is the same as for the view-level attribute::
_columns = {
'secret_key': fields.char('Secret Key', groups="base.group_erp_manager,base.group_system")
}
There is a major difference with the view-level ``groups`` attribute: restricting
the access at the model level really means that the field will be completely unavailable
for users who do not belong to the authorized groups:
* Restricted fields will be **completely removed** from all related views, not just
hidden. This is important to keep in mind because it means the field value will not be
available at all on the client side, and thus unavailable e.g. for ``on_change`` calls.
* Restricted fields will not be returned as part of a call to
:meth:`~openerp.osv.orm.fields_get` or :meth:`~openerp.osv.orm.fields_view_get`
This is in order to avoid them appearing in the list of fields available for
advanced search filters, for example. This does not prevent getting the list of
a model's fields by querying ``ir.model.fields`` directly, which is fine.
* Any attempt to read or write directly the value of the restricted fields will result
in an ``AccessError`` exception.
* As a consequence of the previous item, restricted fields will not be available for
use within search filters (domains) or anything that would require read or write access.
* It is quite possible to set ``groups`` attributes for the same field both at the model
and view level, even with different values. Both will carry their effect, with the
model-level restriction taking precedence and removing the field completely in case of
restriction.
.. note:: The tests related to this feature are in ``openerp/tests/test_acl.py``.
Workflow transition rules
+++++++++++++++++++++++++
Workflow transition rules are rules that restrict some operations to certain
groups. Those rules handle rights to go from one step to another one in the
workflow. For example, you can limit the right to validate an invoice, i.e.
going from a draft action to a validated action.
Menu accesses
=============
In OpenERP, granting access to menus can be done using user groups. A menu
that is not granted to any group is accessible to every user. It is possible
in the administration panel to define the groups that can access a given menu.
However, one should note that using groups to hide or give access to menus
is more within the filed of ergonomics or usability than within the field
of security. It is a best practice putting rules on documents instead of
putting groups on menu. For example, hiding invoices can be done by modifying
the record rule on the invoice object, and it is more efficient and safer
than hiding menus related to invoices.
Views customization
===================
Customizing views based on groups is possible in OpenERP. You can put rules
to display some fields based on group rules. However, as with menu accesses
customization, this option should not be considered for security concerns.
This way of customizing views belongs more to usability.
Administration
==============
When installing your particular instance of OpenERP, a specific first user
is installed by default. This first user is the Super User or administrator.
The administrator is by default added access rights to every existing groups,
as well as to every groups created during a new module installation. He also
has access to a specific administration interface accessible via the administration
menu, allowing the administration of OpenERP.
The administrator has rights to manage groups; he can add, create, modify
or remove groups. He may also modify links between users and groups, such
as adding or removing users. He also manages access rights. With those
privileges, the administrator can therefore precisely define security
accesses of every users of OpenERP.
There are user groups that are between normal groups and the super user.
Those groups are Administration / Configuration and Administration / Access Rights.
It gives to the users of those groups the necessary rights to configure access rights.

View File

@ -1,117 +0,0 @@
.. _test-framework:
Test framework
==============
In addition to the YAML-based tests, OpenERP uses the unittest2_ testing
framework to test both the core ``openerp`` package and its addons. For the
core and each addons, tests are divided between three (overlapping) sets:
1. A test suite that comprises all the tests that can be run right after the
addons is installed (or, for the core, right after a database is created).
That suite is called ``fast_suite`` and must contain only tests that can be run
frequently. Actually most of the tests should be considered fast enough to be
included in that ``fast_suite`` list and only tests that take a long time to run
(e.g. more than a minute) should not be listed. Those long tests should come up
pretty rarely.
2. A test suite called ``checks`` provides sanity checks. These tests are
invariants that must be full-filled at any time. They are expected to always
pass: obviously they must pass right after the module is installed (i.e. just
like the ``fast_suite`` tests), but they must also pass after any other module is
installed, after a migration, or even after the database was put in production
for a few months.
3. The third suite is made of all the tests: those provided by the two above
suites, but also tests that are not explicitely listed in ``fast_suite`` or
``checks``. They are not explicitely listed anywhere and are discovered
automatically.
As the sanity checks provide stronger guarantees about the code and database
structure, new tests must be added to the ``checks`` suite whenever it is
possible. Said with other words: one should try to avoid writing tests that
assume a freshly installed/unaltered module or database.
It is possible to have tests that are not listed in ``fast_suite`` or
``checks``. This is useful if a test takes a lot of time. By default, when
using the testing infrastructure, tests should run fast enough so that people
can use them frequently. One can also use that possiblity for tests that
require some complex setup before they can be successfuly run.
As a rule of thumb when writing a new test, try to add it to the ``checks``
suite. If it really needs that the module it belongs to is freshly installed,
add it to ``fast_suite``. Finally, if it can not be run in an acceptable time
frame, don't add it to any explicit list.
Writing tests
-------------
The tests must be developed under ``<addons-name>.tests`` (or ``openerp.tests``
for the core). For instance, with respect to the tests, a module ``foo``
should be organized as follow::
foo/
__init__.py # does not import .tests
tests/
__init__.py # import some of the tests sub-modules, and
# list them in fast_suite or checks
test_bar.py # contains unittest2 classes
test_baz.py # idem
... and so on ...
The two explicit lists of tests are thus the variables ``foo.tests.fast_suite``
and ``foo.tests.checks``. As an example, you can take a look at the
``openerp.tests`` module (which follows exactly the same conventions even if it
is not an addons).
Note that the ``fast_suite`` and ``checks`` variables are really lists of
module objects. They could be directly unittest2 suite objects if necessary in
the future.
Running the tests
-----------------
To run the tests (see :ref:`above <test-framework>` to learn how tests are
organized), the simplest way is to use the ``oe`` command (provided by the
``openerp-command`` project).
::
> oe run-tests # will run all the fast_suite tests
> oe run-tests -m openerp # will run all the fast_suite tests defined in `openerp.tests`
> oe run-tests -m sale # will run all the fast_suite tests defined in `openerp.addons.sale.tests`
> oe run-tests -m foo.test_bar # will run the tests defined in `openerp.addons.foo.tests.test_bar`
In addition to the above possibilities, when invoked with a non-existing module
(or module.sub-module) name, oe will reply with a list of available test
sub-modules.
Depending on the unittest2_ class that is used to write the tests (see
:mod:`openerp.tests.common` for some helper classes that you can re-use), a
database may be created before the test is run, and the module providing the
test will be installed on that database.
Because creating a database, installing modules, and then dropping it is
expensive, it is possible to interleave the run of the ``fast_suite`` tests
with the initialization of a new database: the dabase is created, and after
each requested module is installed, its fast_suite tests are run. The database
is thus created and dropped (and the modules installed) only once.
.. _unittest2: http://pypi.python.org/pypi/unittest2
TestCase subclasses
-------------------
.. automodule:: openerp.tests.common
:members:
.. note::
The `setUp` and `tearDown` methods are not part of the tests. Uncaught
exceptions in those methods are errors, not test failures. In particular,
a failing `setUp` will not be followed by a `tearDown` causing any
allocated resource in the `setUp` to not be released by the `tearDown`.
In the :py:class:`openerp.tests.common.TransactionCase` and
:py:class:`openerp.tests.common.SingleTransactionCase`, this means the
test suite can hang because of unclosed cursors.

View File

@ -1,98 +0,0 @@
.. _qweb:
====
QWeb
====
``t-field``
===========
The server version of qweb includes a directive dedicated specifically to
formatting and rendering field values from
:class:`~openerp.osv.orm.browse_record` objects.
The directive is implemented through
:meth:`~base.ir.ir_qweb.QWeb.render_tag_field` on the ``ir.qweb`` openerp
object, and generally delegates to converters for rendering. These converters
are obtained through :meth:`~base.ir.ir_qweb.QWeb.get_converter_for`.
By default, the key for obtaining a converter is the type of the field's
column, but this can be overridden by providing a ``widget`` as field option.
Field options are specified through ``t-field-options``, which must be a JSON
object (map). Custom widgets may define their own (possibly mandatory) options.
Global options
--------------
A global option ``html-escape`` is provided. It defaults to ``True``, and for
many (not all) fields it determines whether the field's output will be
html-escaped before being output.
Date and datetime converters
----------------------------
The default rendering for ``date`` and ``datetime`` fields. They render the
field's value according to the current user's ``lang.date_format`` and
``lang.time_format``. The ``datetime`` converter will also localize the value
to the user's timezone (as defined by the ``tz`` context key, or the timezone
in the user's profile if there is no ``tz`` key in the context).
A custom format can be provided to use a non-default rendering. The custom
format uses the ``format`` options key, and uses the
`ldml date format patterns`_ [#ldml]_.
For instance if one wanted a date field to be rendered as
"(month) (day of month)" rather than whatever the default is, one could use:
.. code-block:: xml
<span t-field="object.datefield" t-field-options='{"format": "MMMM d"}'/>
Monetary converter (widget: ``monetary``)
-----------------------------------------
Used to format and render monetary value, requires a ``display_currency``
options value which is a path from the rendering context to a ``res.currency``
object. This object is used to set the right currency symbol, and set it at the
right position relative to the formatted value.
The field itself should be a float field.
Relative Datetime (widget: ``relative``)
----------------------------------------
Used on a ``datetime`` field, formats it relatively to the current time
(``datetime.now()``), e.g. if the field's value is 3 hours before now and the
user's lang is english, it will render to *3 hours ago*.
.. note:: this field uses babel's ``format_timedelta`` more or less directly
and will only display the biggest unit and round up at 85% e.g.
1 hour 15 minutes will be rendered as *1 hour*, and 55 minutes will
also be rendered as *1 hour*.
.. warning:: this converter *requires* babel 1.0 or more recent.
Duration (widget: ``duration``)
-------------------------------
Renders a duration defined as a ``float`` to a human-readable localized string,
e.g. ``1.5`` as hours in an english locale will be rendered to
*1 hour 30 minutes*.
Requires a ``unit`` option which may be one of ``second``, ``minute``,
``hour``, ``day``, ``week``, ``month`` or ``year``. This specifies the unit in
which the value should be interpreted before formatting.
The duration must be a positive number, and no rounding is applied.
.. [#ldml] in part because `babel`_ is used for rendering, as ``strftime``
would require altering the process's locale on the fly in order to
get correctly localized date and time output. Babel uses the CLDR
as its core and thus uses LDML date format patterns.
.. _babel: http://babel.pocoo.org
.. _ldml date format patterns:
http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns

View File

@ -1,14 +0,0 @@
=============
Miscellanous
=============
.. toctree::
:maxdepth: 2
06_misc_on_change_tips.rst
06_misc_list_font_style.rst
06_misc_need_action_specs.rst
06_misc_user_img_specs.rst
06_misc_import.rst
06_misc_auto_join.rst
06_ir_qweb.rst

View File

@ -1,75 +0,0 @@
.. _performing_joins_in_select:
Perfoming joins in select
=========================
.. versionadded:: 7.0
Starting with OpenERP 7.0, an ``auto_join`` attribute is added on *many2one* and
*one2many* fields. The purpose is to allow the automatic generation of joins in
select queries. This attribute is set to False by default, therefore not changing
the default behavior. Please note that we consider this feature as still experimental
and should be used only if you understand its limitations and targets.
Without ``_auto_join``, the behavior of expression.parse() is the same as before.
Leafs holding a path beginning with many2one or one2many fields perform a search
on the relational table. The result is then used to replace the leaf content.
For example, if you have on res.partner a domain like ``[('bank_ids.name',
'like', 'foo')]`` with bank_ids linking to res.partner.bank, 3 queries will be
performed :
- 1 on res_partner_bank, with domain ``[('name', '=', 'foo')]``, that returns a
list of res.partner.bank ids (bids)
- 1 on res_partner, with a domain ``['bank_ids', 'in', bids)]``, that returns a
list of res.partner ids (pids)
- 1 on res_partner, with a domain ``[('id', 'in', pids)]``
When the ``auto_join`` attribute is True on a relational field, the destination
table will be joined to produce only one query.
- the relational table is accessed using an alias: ``'"res_partner_bank"
as res_partner__bank_ids``. The alias is generated using the relational field
name. This allows to have multiple joins with different join conditions on the
same table, depending on the domain.
- there is a join condition between the destination table and the main table:
``res_partner__bank_ids."partner_id"=res_partner."id"``
- the condition is then written on the relational table:
``res_partner__bank_ids."name" = 'foo'``
This manipulation is performed in expression.parse(). It checks leafs that
contain a path, i.e. any domain containing a '.'. It then checks whether the
first item of the path is a *many2one* or *one2many* field with the ``auto_join``
attribute set. If set, it adds a join query and recursively analyzes the
remaining of the leaf, using the same behavior. If the remaining path also holds
a path with auto_join fields, it will add all tables and add every necessary
join conditions.
Chaining joins allows to reduce the number of queries performed, and to avoid
having too long equivalent leaf replacement in domains. Indeed, the internal
queries produced by this behavior can be very costly, because they were generally
select queries without limit that could lead to huge ('id', 'in', [...])
leafs to analyze and execute.
Some limitations exist on this feature that limits its current use as of version
7.0. **This feature is therefore considered as experimental, and used
to speedup some precise bottlenecks in OpenERP**.
List of known issues and limitations:
- using ``auto_join`` bypasses the business logic; no name search is performed,
only direct matches between ids using join conditions
- ir.rules are not taken into account when analyzing and adding the join
conditions
List of already-supported corner cases :
- one2many fields having a domain attribute. Static domains as well as dynamic
domain are supported
- auto_join leading to functional searchable fields
Typical use in OpenERP 7.0:
- in mail module: notification_ids field on mail_message, allowing to speedup
the display of the various mailboxes
- in mail module: message_ids field on mail_thread, allowing to speedup the
display of needaction counters and documents having unread messages

View File

@ -1,263 +0,0 @@
.. _bulk-import:
Bulk Import
===========
OpenERP has included a bulk import facility for CSV-ish files for a
long time. With 7.0, both the interface and internal implementation
have been redone, resulting in
:meth:`~openerp.osv.orm.BaseModel.load`.
.. note::
the previous bulk-loading method,
:meth:`~openerp.osv.orm.BaseModel.import_data`, remains for
backwards compatibility but was re-implemented on top of
:meth:`~openerp.osv.orm.BaseModel.load`, while its interface is
unchanged its precise behavior has likely been altered for some
cases (it shouldn't throw exceptions anymore in many cases where
it previously did)
This document attempts to explain the behavior and limitations of
:meth:`~openerp.osv.orm.BaseModel.load`.
Data
----
The input ``data`` is a regular row-major matrix of strings (in Python
datatype terms, a ``list`` of rows, each row being a ``list`` of
``str``, all rows must be of equal length). Each row must be the same
length as the ``fields`` list preceding it in the argslist.
Each field of ``fields`` maps to a (potentially relational and nested)
field of the model under import, and the corresponding column of the
``data`` matrix provides a value for the field for each record.
Generally speaking each row of the input yields a record of output,
and each cell of a row yields a value for the corresponding field of
the row's record. There is currently one exception for this rule:
One to Many fields
++++++++++++++++++
Because O2M fields contain multiple records "embedded" in the main
one, and these sub-records are fully dependent on the main record (are
no other references to the sub-records in the system), they have to be
spliced into the matrix somehow. This is done by adding lines composed
*only* of o2m record fields below the main record:
.. literalinclude:: 06_misc_import_o2m.txt
the sections in double-lines represent the span of two o2m
fields. During parsing, they are extracted into their own ``data``
matrix for the o2m field they correspond to.
Import process
--------------
Here are the phases of import. Note that the concept of "phases" is
fuzzy as it's currently more of a pipeline, each record moves through
the entire pipeline before the next one is processed.
Extraction
++++++++++
The first phase of the import is the extraction of the current row
(and potentially a section of rows following it if it has One to Many
fields) into a record dictionary. The keys are the ``fields``
originally passed to :meth:`~openerp.osv.orm.BaseModel.load`, and the
values are either the string value at the corresponding cell (for
non-relational fields) or a list of sub-records (for all relational
fields).
This phase also generates the ``rows`` indexes for any
:ref:`import-message` produced thereafter.
Conversion
++++++++++
This second phase takes the record dicts, extracts the :term:`database
ID` and :term:`external ID` if present and attempts to convert each
field to a type matching what OpenERP expects to write.
* Empty fields (empty strings) are replaced with the ``False`` value
* Non-empty fields are converted through
:class:`~openerp.addons.base.ir.ir_fields.ir_fields_converter`
.. note:: if a field is specified in the import, its default will *never* be
used. If some records need to have a value and others need to use
the model's default, either specify that default explicitly or do
the import in two phases.
Char, text and binary fields
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Are returned as-is, without any alteration.
Boolean fields
~~~~~~~~~~~~~~
The string value is compared (in a case-insensitive manner) to ``0``,
``false`` and ``no`` as well of any translation thereof loaded in the
database. If the value matches one of these, the field is set to
``False``.
Otherwise the field is compared to ``1``, ``true`` and ``yes`` (and
any translation of these in the database). The field is always set to
``True``, but if the value does not match one of these a warning will
also be output.
Integers and float fields
~~~~~~~~~~~~~~~~~~~~~~~~~
The field is parsed with Python's built-in conversion routines
(``int`` and ``float`` respectively), if the conversion fails an error
is generated.
Selection fields
~~~~~~~~~~~~~~~~
The field is compared to 1. the values of the selection (first part of
each selection tuple) and 2. all translations of the selection label
found in the database.
If one of these is matched, the corresponding value is set on the
field.
Otherwise an error is generated.
The same process applies to both list-type and function-type selection
fields.
Many to One field
~~~~~~~~~~~~~~~~~
If the specified field is the relational field itself (``m2o``), the
value is used in a ``name_search``. The first record returned by
``name_search`` is used as the field's value.
If ``name_search`` finds no value, an error is generated. If
``name_search`` finds multiple value, a warning is generated to warn
the user of ``name_search`` collisions.
If the specified field is a :term:`external ID` (``m2o/id``), the
corresponding record it looked up in the database and used as the
field's value. If no record is found matching the provided external
ID, an error is generated.
If the specified field is a :term:`database ID` (``m2o/.id``), the
process is the same as for external ids (on database identifiers
instead of external ones).
Many to Many field
~~~~~~~~~~~~~~~~~~
The field's value is interpreted as a comma-separated list of names,
external ids or database ids. For each one, the process previously
used for the many to one field is applied.
One to Many field
~~~~~~~~~~~~~~~~~
For each o2m record extracted, if the record has a ``name``,
:term:`external ID` or :term:`database ID` the :term:`database ID` is
looked up and checked through the same process as for m2o fields.
If a :term:`database ID` was found, a LINK_TO command is emmitted,
followed by an UPDATE with the non-db values for the relational field.
Otherwise a CREATE command is emmitted.
Date fields
~~~~~~~~~~~
The value's format is checked against
:data:`~openerp.tools.misc.DEFAULT_SERVER_DATE_FORMAT`, an error is
generated if it does not match the specified format.
Datetime fields
~~~~~~~~~~~~~~~
The value's format is checked against
:data:`~openerp.tools.misc.DEFAULT_SERVER_DATETIME_FORMAT`, an error
is generated if it does not match.
The value is then interpreted as a datetime in the user's
timezone. The timezone is specified thus:
* If the import ``context`` contains a ``tz`` key with a valid
timezone name, this is the timezone of the datetime.
* Otherwise if the user performing the import has a ``tz`` attribute
set to a valid timezone name, this is the timezone of the datetime.
* Otherwise interpret the datetime as being in the ``UTC`` timezone.
Create/Write
++++++++++++
If the conversion was successful, the converted record is then saved
to the database via ``(ir.model.data)._update``.
Error handling
++++++++++++++
The import process will only catch 2 types of exceptions to convert
them to error messages: ``ValueError`` during the conversion process,
and sub-exceptions of ``psycopg2.Error`` during the create/write
process.
The import process uses savepoint to:
* protect the overall transaction from the failure of each ``_update``
call, if an ``_update`` call fails the savepoint is rolled back and
the import process keeps going in order to obtain as many error
messages as possible during each run.
* protect the import as a whole, a savepoint is created before
starting and if any error is generated that savepoint is rolled
back. The rest of the transaction (anything not within the import
process) will be left untouched.
.. _import-message:
.. _import-messages:
Messages
--------
A message is a dictionary with 5 mandatory keys and one optional key:
``type``
the type of message, either ``warning`` or ``error``. Any
``error`` message indicates the import failed and was rolled back.
``message``
the message's actual text, which should be translated and can be
shown to the user directly
``rows``
a dict with 2 keys ``from`` and ``to``, indicates the range of
rows in ``data`` which generated the message
``record``
a single integer, for warnings the index of the record which
generated the message (can be obtained from a non-false ``ids``
result)
``field``
the name of the (logical) OpenERP field for which the error or
warning was generated
``moreinfo`` (optional)
A string, a list or a dict, leading to more information about the
warning.
* If ``moreinfo`` is a string, it is a supplementary warnings
message which should be hidden by default
* If ``moreinfo`` is a list, it provides a number of possible or
alternative values for the string
* If ``moreinfo`` is a dict, it is an OpenERP action descriptor
which can be executed to get more information about the issues
with the field. If present, the ``help`` key serves as a label
for the action (e.g. the text of the link).

View File

@ -1,13 +0,0 @@
+-------+-------+===========+===========+-------+-------+
|value01|value02‖o2m/value01|o2m/value02‖value03|value04|
+-------+-------+-----------+-----------+-------+-------+
| | ‖o2m/value11|o2m/value12‖ | |
+-------+-------+-----------+-----------+-------+-------+
| | ‖o2m/value21|o2m/value22‖ | |
+-------+-------+===========+===========+-------+-------+
|value11|value12‖o2m/value01|o2m/value02‖value13|value14|
+-------+-------+-----------+-----------+-------+-------+
| | ‖o2m/value11|o2m/value12‖ | |
+-------+-------+===========+===========+-------+-------+
|value21|value22| | |value23|value24|
+-------+-------+-----------+-----------+-------+-------+

View File

@ -1,28 +0,0 @@
Font style in list views
========================
.. versionadded:: 7.0
This revision adds font styles in list views. Before this revision it was
possible to define some colors in list view. This revision allows to define
the a font style, based on an evaluated Python expression. The definition syntax is
the same than the colors feature. Supported styles are bold, italic and
underline.
Rng modification
+++++++++++++++++
This revision adds the ``fonts`` optional attribute in ``view.rng``.
Addon implementation example
++++++++++++++++++++++++++++
In your ``foo`` module, you want to specify that when any record is in ``pending``
state then it should be displayed in bold in the list view. Edit your foo_view.xml
file that define the views, and add the fonts attribute to the tree tag.
.. code-block:: xml
<tree string="Foo List View" fonts="bold:state=='pending'">
[...]
</tree>

View File

@ -1,91 +0,0 @@
Need action mechanism
=====================
.. versionadded:: 7.0
ir.needaction_mixin class
+++++++++++++++++++++++++
.. versionadded:: openobject-server.4124
This revision adds a mixin class for objects using the need action feature.
Need action feature can be used by objects willing to be able to signal that an action is required on a particular record. If in the business logic an action must be performed by somebody, for instance validation by a manager, this mechanism allows to set a list of users asked to perform an action.
This class wraps a class (ir.ir_needaction_users_rel) that behaves like a many2many field. However, no field is added to the model inheriting from ir.needaction_mixin. The mixin class manages the low-level considerations of updating relationships. Every change made on the record calls a method that updates the relationships.
Objects using the need_action feature should override the ``get_needaction_user_ids`` method. This methods returns a dictionary whose keys are record ids, and values a list of user ids, like in a many2many relationship. Therefore by defining only one method, you can specify if an action is required by defining the users that have to do it, in every possible situation.
This class also offers several global services,:
- ``needaction_get_record_ids``: for the current model and uid, get all record ids that ask this user to perform an action. This mechanism is used for instance to display the number of pending actions in menus, such as Leads (12)
- ``needaction_get_action_count``: as ``needaction_get_record_ids`` but returns only the number of action, not the ids (performs a search with count=True)
- ``needaction_get_user_record_references``: for a given uid, get all the records that ask this user to perform an action. Records are given as references, a list of tuples (model_name, record_id).
.. versionadded:: openobject-server.4137
This revision of the needaction_mixin mechanism slighty modifies the class behavior. The ``ir_needaction_mixin`` class now adds a function field on models inheriting from the class. This field allows to state whether a given record has a needaction for the current user. This is usefull if you want to customize views according to the needaction feature. For example, you may want to set records in bold in a list view if the current user has an action to perform on the record. This makes the class not a pure abstract class, but allows to easily use the action information. The field definition is::
def get_needaction_pending(self, cr, uid, ids, name, arg, context=None):
res = {}
needaction_user_ids = self.get_needaction_user_ids(cr, uid, ids, context=context)
for id in ids:
res[id] = uid in needaction_user_ids[id]
return res
_columns = {
'needaction_pending': fields.function(get_needaction_pending, type='boolean',
string='Need action pending',
help='If True, this field states that users have to perform an action. \
This field comes from the needaction mechanism. Please refer \
to the ir.needaction_mixin class.'),
}
ir.needaction_users_rel class
+++++++++++++++++++++++++++++
.. versionadded:: openobject-server.4124
This class essentially wraps a database table that behaves like a many2many.
It holds data related to the needaction mechanism inside OpenERP. A row
in this model is characterized by:
- ``res_model``: model of the record requiring an action
- ``res_id``: ID of the record requiring an action
- ``user_id``: foreign key to the res.users table, to the user that
has to perform the action
This model can be seen as a many2many, linking (res_model, res_id) to
users (those whose attention is required on the record)
Menu modification
+++++++++++++++++
.. versionchanged:: openobject-server.4137
This revision adds three functional fields to ``ir.ui.menu`` model :
- ``uses_needaction``: boolean field. If the menu entry action is an act_window action, and if this action is related to a model that uses the need_action mechanism, this field is set to true. Otherwise, it is false.
- ``needaction_uid_ctr``: integer field. If the target model uses the need action mechanism, this field gives the number of actions the current user has to perform.
- **REMOVED** ``needaction_record_ids``: many2many field. If the target model uses the need action mechanism, this field holds the ids of the record requesting the user to perform an action. **This field has been removed on version XXXX**.
Those fields are functional, because they depend on the user and must therefore be computed at every refresh, each time menus are displayed. The use of the need action mechanism is done by taking into account the action domain in order to display accurate results. When computing the value of the functional fields, the ids of records asking the user to perform an action is concatenated to the action domain. A counting search is then performed on the model, giving back the number of action the users has to perform, limited to the domain of the action.
Addon implementation example
++++++++++++++++++++++++++++
In your ``foo`` module, you want to specify that when it is in state ``confirmed``, it has to be validated by a manager, given by the field ``manager_id``. After making ``foo`` inheriting from ``ir.needaction_mixin``, you override the ``get_needaction_user_ids`` method:
::
[...]
_inherit = [`ir.needaction_mixin]
[...]
def get_needaction_user_ids(self, cr, uid, ids, context=None):
result = dict.fromkeys(ids)
for foo_obj in self.browse(cr, uid, ids, context=context):
# set the list void by default
result[foo_obj.id] = []
# if foo_obj is confirmed: manager is required to perform an action
if foo_obj.state == 'confirmed':
result[foo_obj.id] = [foo_obj.manager_id]
return result

View File

@ -1,51 +0,0 @@
.. _on_change_tips:
On Change Methods
=================
Definition of on change methods in a view looks like this:
::
<field name="name" on_change="name_change(name, address, city)"/>
And here is the corresponding method in the model:
::
def name_change(self, cr, uid, ids, name, address, city, context=None):
...
return {
'value': {
'address': ...
'city': ...
}
}
On change methods can be confusing when people use them, here are a list of clarifications to avoid any misconception:
- On change methods can be executed during the creation of a row, long before it is effectively saved into the database.
- Fields are *not* validated before going through a on change methods. As an example, a field marqued as required can be False.
- On change methods can read data in the database but should *never* attempt to write anything, this is always a strong conception
problem.
- The format of the values passed to an on change method is exactly the same than the one passed to the write() method. So
the on change method must be able to handle any format used for all the fields it process. The following list describe some fields
that can have an unusual format.
- *float*: Due to the way JSON represents numbers and the way the JSON library of Python handles it, a float field will not always
be represented as a python float type. When the number can be represented as an integer it will appear as a python integer type.
This can be a problem when using some mathematical operations (example: price / 2), so it is a good practice to always cast any number
to float when you want to handle floats in on change methods.
- *one2many and many2many*: There are plenty of misconception about x2many fields in on change methods. The reality is, in fact, quite
complex. x2many are defined by a list of operations, each operation was given a number (0 -> create, 1 -> write, ect...) and has
its own semantic. To be able to use one2many and many2many in on change methods, you are strongly encourage to use the
resolve_2many_commands() method. Here is a sample usage:
::
values = self.resolve_2many_commands(cr, uid, 'my_o2m', my_o2m_values, ['price', 'tax'], context)
This code will convert the complex list of operations that makes the o2m value into a simple list of dictionaries containing the fields
'price' and 'tax', which is way simpler to handle in most on change methods. Please note that you can also return a list of
dictionaries as the new value of a one2many, it will replace the actual rows contained in that one2many (but it will also remove the
previous ones).

View File

@ -1,26 +0,0 @@
User avatar
===========
.. versionadded:: 7.0
This revision adds an avatar for users. This replaces the use of
gravatar to emulate avatars, used in views like the tasks kanban
view. Two fields have been added to the res.users model:
* ``avatar_big``, a binary field holding the image. It is base-64
encoded, and PIL-supported. Images stored are resized to 540x450 px,
to limitate the binary field size.
* ``avatar``, a function binary field holding an automatically resized
version of the avatar_big field. It is also base-64 encoded, and
PIL-supported. Dimensions of the resized avatar are 180x150. This
field is used as an inteface to get and set the user avatar.
When changing the avatar through the avatar function field, the new
image is automatically resized to 540x450, and stored in the
avatar_big field. This triggers the function field, that will compute
a 180x150 resized version of the image.
An avatar field has been added to the users form view, as well as in
Preferences. When creating a new user, a default avatar is chosen
among 6 possible default images.

0
doc/_static/.placeholder vendored Normal file
View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

26
doc/_static/odoo.css vendored Normal file
View File

@ -0,0 +1,26 @@
@import "style.css";
p.rubric {
font-family: Lato, Arial, sans-serif;
font-weight: 500;
line-height: 1.1;
color: inherit;
margin-top: 10px;
margin-bottom: 8px;
}
.section p.rubric {
font-size: 30px;
}
.section .section p.rubric {
font-size: 24px;
}
.section .section .section p.rubric {
font-size: 18px;
}
.section .section .section .section p.rubric {
font-size: 14px;
}
.section .section .section .section .section p.rubric {
font-size: 12px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@ -1,19 +0,0 @@
Short description of the issue
***Impacted versions:***
-
***Steps to reproduce:***
1.
2.
3.
***Current behavior:***
-
***Expected behavior:***
-

View File

@ -1,16 +0,0 @@
<p class="logo"><a href="http://doc.openerp.com/">
<img class="logo" src="{{ pathto('_static/openerp.png', 1) }}" alt="Logo"/>
</a></p>
<h3>Other Docs</h3>
<ul>
<li><a href="https://doc.odoo.com/trunk">Odoo Developers Documentation</a></li>
<li><a href="https://doc.odoo.com/trunk/training">Odoo Web Developers Documentation</a></li>
<li><a href="https://doc.odoo.com/book">Odoo Users Documentation</a></li>
</ul>
<h3>Useful Links</h3>
<ul>
<li><a href="https://www.odoo.com/">The Odoo website</a></li>
<li><a href="http://python.org/">The Python programming language</a></li>
</ul>

View File

@ -1,3 +0,0 @@
<p class="logo"><a href="{{ pathto(master_doc) }}">
<img class="logo" src="{{ pathto('_static/openerp.png', 1) }}" alt="Logo"/>
</a></p>

View File

@ -1,3 +0,0 @@
*.pyc
*.pyo
.DS_Store

28
doc/_themes/odoodoc/README.rst vendored Normal file
View File

@ -0,0 +1,28 @@
:orphan:
Using the Odoo theme
====================
* copy the theme to one of your theme paths
* in your ``conf.py``,
- add the package as the ``html_theme`` in your ``conf.py``::
html_theme = 'odoodoc'
- add the theme path to ``sys.path`` in your ``conf.py``::
sys.path.insert(0, os.path.abspath('./_themes'))
- add the theme as an extension::
extensions = ['odoodoc']
Custom styling
--------------
If you need to add custom/own styles, add a CSS to your static files, set it
as ``html_style`` in your ``conf.py`` and add the following as its first
line::
@import url(odoodoc.css)

25
doc/_themes/odoodoc/__init__.py vendored Normal file
View File

@ -0,0 +1,25 @@
# -*- coding: utf-8 -*-
from . import html_domain
# add Odoo style to pygments
from . import odoo_pygments
from . import sphinx_monkeypatch
sphinx_monkeypatch.patch()
def setup(app):
html_domain.setup(app)
app.add_directive('exercise', Exercise)
app.add_node(exercise, html=(
lambda self, node: self.visit_admonition(node, 'exercise'),
lambda self, node: self.depart_admonition(node)
))
from docutils import nodes
from docutils.parsers.rst.directives import admonitions
class exercise(nodes.Admonition, nodes.Element): pass
class Exercise(admonitions.BaseAdmonition):
node_class = exercise
from sphinx.locale import admonitionlabels, l_
admonitionlabels['exercise'] = l_('Exercise')

116
doc/_themes/odoodoc/html_domain.py vendored Normal file
View File

@ -0,0 +1,116 @@
# -*- coding: utf-8 -*-
from docutils import nodes, utils
from docutils.parsers.rst import Directive, directives, docutils
from docutils.parsers.rst.directives.body import LineBlock
from sphinx.domains import Domain
def setup(app):
app.add_domain(HtmlDomain)
app.add_node(div, html=(
lambda self, node: self.body.append(self.starttag(node, 'div')),
lambda self, node: self.body.append('</div>\n')))
app.add_node(address, html=(
lambda self, node: self.body.append(self.starttag(node, 'address')),
lambda self, node: self.body.append('</address>\n')
))
app.add_node(cite, html=(visit_cite, depart_cite))
for name, node in [('mark', mark), ('ins', insert), ('del', delete),
('s', strikethrough), ('u', underline), ('small', small),
('kbd', kbd), ('var', var), ('samp', samp)]:
addnode(app, node, name)
class div(nodes.General, nodes.Element): pass
class Div(Directive):
optional_arguments = 1
final_argument_whitespace = 1
has_content = True
def run(self):
self.assert_has_content()
text = '\n'.join(self.content)
try:
if self.arguments:
classes = directives.class_option(self.arguments[0])
else:
classes = []
except ValueError:
raise self.error(
'Invalid class attribute value for "%s" directive: "%s".'
% (self.name, self.arguments[0]))
node = div(text)
node['classes'].extend(classes)
self.add_name(node)
self.state.nested_parse(self.content, self.content_offset, node)
return [node]
class address(nodes.General, nodes.Element): pass
class Address(LineBlock):
def run(self):
[node] = super(Address, self).run()
ad = address(node.rawsource, *node.children)
return [ad]
class mark(nodes.Inline, nodes.TextElement): pass
class insert(nodes.Inline, nodes.TextElement): pass
class delete(nodes.Inline, nodes.TextElement): pass
class strikethrough(nodes.Inline, nodes.TextElement): pass
class underline(nodes.Inline, nodes.TextElement): pass
class small(nodes.Inline, nodes.TextElement): pass
class kbd(nodes.Inline, nodes.FixedTextElement): pass
class var(nodes.Inline, nodes.FixedTextElement): pass
class samp(nodes.Inline, nodes.FixedTextElement): pass
def makerole(node):
return lambda name, rawtext, text, lineno, inliner, options=None, content=None:\
([node(rawtext.strip(), text.strip())], [])
def addnode(app, node, nodename):
app.add_node(node, html=(
lambda self, n: self.body.append(self.starttag(n, nodename)),
lambda self, n: self.body.append('</%s>' % nodename)
))
def initialism(*args, **kwargs):
nodes, _ = sphinx.roles.abbr_role(*args, **kwargs)
[abbr] = nodes
abbr.attributes.setdefault('classes', []).append('initialism')
return [abbr], []
def cite_role(typ, rawtext, text, lineno, inliner, options=None, content=None):
text = utils.unescape(text)
m = sphinx.roles._abbr_re.search(text)
if m is None:
return [cite(text, text, **(options or {}))], []
content = text[:m.start()].strip()
source = m.group(1)
return [cite(content, content, source=source)], []
class cite(nodes.Inline, nodes.TextElement): pass
def visit_cite(self, node):
attrs = {}
if node.hasattr('source'):
attrs['title'] = node['source']
self.body.append(self.starttag(node, 'cite', '', **attrs))
def depart_cite(self, node):
self.body.append('</abbr>')
class HtmlDomain(Domain):
name = 'h'
label = 'HTML'
directives = {
'div': Div,
'address': Address,
}
roles = {
'mark': makerole(mark),
'ins': makerole(insert),
'del': makerole(delete),
's': makerole(strikethrough),
'u': makerole(underline),
'small': makerole(small),
'initialism': initialism,
'cite': cite_role,
'kbd': makerole(kbd),
'var': makerole(var),
'samp': makerole(samp),
}

93
doc/_themes/odoodoc/layout.html vendored Normal file
View File

@ -0,0 +1,93 @@
{% extends "basic/layout.html" %}
{% set script_files = script_files + [
'_static/bootstrap/js/scrollspy.js',
'_static/bootstrap/js/affix.js',
'_static/bootstrap/js/tooltip.js',
'_static/bootstrap/js/collapse.js',
'_static/bootstrap/js/dropdown.js',
'_static/ZeroClipboard.min.js',
'_static/app.js'
] %}
{%- block doctype -%}
<!doctype html>
{%- endblock -%}
{%- block content -%}
<div class="document-super">
{{ super() }}
</div>
{%- endblock -%}
{# sidebar to the left, except sidebar1 is *outside* div.document where
sidebar2 is inside, so inject sidebar into document block #}
{%- block document -%}
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
{# bootstrapify nav #}
{{ toc|replace("<ul>", '<ul class="nav">') }}
</div>
</div>
{{ super() }}
{%- endblock -%}
{%- block sidebar1 -%}{%- endblock -%}
{%- block sidebar2 -%}{%- endblock -%}
{%- block relbar1 -%}
<header class="navbar navbar-default navbar-static-top docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-main">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://odoo.com" class="o_logo navbar-brand">
<span class="o_logo_main">odoo</span><span class="o_logo_app">doc</span>
</a>
</div>
<nav class="collapse navbar-collapse navbar-main" role="navigation">
{{ toctree(titles_only=True, maxdepth=2, includehidden=True, collapse=False) }}
</nav>
</div>
</header>
{%- endblock -%}
{%- block relbar2 -%}{%- endblock -%}
{%- block footer %}
<div class="footer">
<div class="container">
<ul class="docs-footer-links muted">
{%- if show_copyright %}
<li>
{%- if hasdoc('copyright') %}
{% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
{%- else %}
{% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}
{%- endif %}
</li>
{%- endif %}
{%- if show_copyright and (last_updated or show_sphinx) -%}
<li>·</li>
{%- endif -%}
{%- if last_updated %}
<li>{% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}</li>
{%- endif %}
{%- if last_updated and show_sphinx -%}
<li>·</li>
{%- endif -%}
{%- if show_sphinx %}
<li>{% trans sphinx_version=sphinx_version|e %}Created using <a href="http://sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}</li>
{%- endif %}
</ul>
<p>
odoo docs theme based on <a href="http://getbootstrap.com">Bootstrap
3.2 documentation</a> adapted to
<a href="http://sphinx-doc.org/">Sphinx</a> output with branding and
color changes.
</p>
</div>
</div>
{%- endblock %}

70
doc/_themes/odoodoc/odoo_pygments.py vendored Normal file
View File

@ -0,0 +1,70 @@
# -*- coding: utf-8 -*-
import imp
import sys
from pygments.style import Style
from pygments.token import *
# extracted from getbootstrap.com
class OdooStyle(Style):
background_color = '#ffffcc'
highlight_color = '#fcf8e3'
styles = {
Whitespace: '#BBB',
Error: 'bg:#FAA #A00',
Keyword: '#069',
Keyword.Type: '#078',
Name.Attribute: '#4F9FCF',
Name.Builtin: '#366',
Name.Class: '#0A8',
Name.Constant: '#360',
Name.Decorator: '#99F',
Name.Entity: '#999',
Name.Exception: '#C00',
Name.Function: '#C0F',
Name.Label: '#99F',
Name.Namespace: '#0CF',
Name.Tag: '#2F6F9F',
Name.Variable: '#033',
String: '#d44950',
String.Backtick: '#C30',
String.Char: '#C30',
String.Doc: 'italic #C30',
String.Double: '#C30',
String.Escape: '#C30',
String.Heredoc: '#C30',
String.Interol: '#C30',
String.Other: '#C30',
String.Regex: '#3AA',
String.Single: '#C30',
String.Symbol: '#FC3',
Number: '#F60',
Operator: '#555',
Operator.Word: '#000',
Comment: '#999',
Comment.Preproc: '#099',
Generic.Deleted: 'bg:#FCC border:#c00',
Generic.Emph: 'italic',
Generic.Error: '#F00',
Generic.Heading: '#030',
Generic.Inserted: 'bg:#CFC border:#0C0',
Generic.Output: '#AAA',
Generic.Prompt: '#009',
Generic.Strong: '',
Generic.Subheading: '#030',
Generic.Traceback: '#9C6',
}
modname = 'pygments.styles.odoo'
m = imp.new_module(modname)
m.OdooStyle = OdooStyle
sys.modules[modname] = m

View File

@ -0,0 +1,85 @@
# -*- coding: utf-8 -*-
import sphinx.roles
import sphinx.environment
from sphinx.builders.html import StandaloneHTMLBuilder
from sphinx.writers.html import HTMLTranslator
from docutils.writers.html4css1 import HTMLTranslator as DocutilsTranslator
def patch():
# navify toctree (oh god)
@monkey(sphinx.environment.BuildEnvironment)
def resolve_toctree(old_resolve, self, *args, **kwargs):
""" If main_navbar, bootstrapify TOC to yield a navbar
"""
main_navbar = kwargs.pop('main_navbar', False)
toc = old_resolve(self, *args, **kwargs)
if toc is None:
return None
if main_navbar:
navbarify(toc[0])
return toc
@monkey(StandaloneHTMLBuilder)
def _get_local_toctree(old_local, self, *args, **kwargs):
""" _get_local_toctree generates a documentation toctree for the local
document (?), called from handle_page
"""
return old_local(self, *args, main_navbar=True, **kwargs)
# monkeypatch visit_table to remove border and add .table
HTMLTranslator.visit_table = visit_table
# disable colspec crap
HTMLTranslator.write_colspecs = lambda self: None
# copy data- attributes straight from source to dest
HTMLTranslator.starttag = starttag_data
def navbarify(node):
# add classes to toplevel
node['classes'].extend(['nav', 'navbar-nav', 'navbar-right'])
for list_item in node.children:
# bullet_list
# list_item
# compact_paragraph
# reference
# bullet_list
# list_item
# compact_paragraph
# reference
list_item['classes'].append('dropdown')
# list_item.compact_paragraph.reference
link = list_item.children[0].children[0]
link['classes'].append('dropdown-toggle')
link.attributes['data-toggle'] = 'dropdown'
# list_item.bullet_list
list_item.children[1]['classes'].append('dropdown-menu')
def visit_table(self, node):
"""
* remove border
* add table class
"""
self._table_row_index = 0
self.context.append(self.compact_p)
self.compact_p = True
classes = ' '.join({'table', self.settings.table_style}).strip()
self.body.append(self.starttag(node, 'table', CLASS=classes))
def starttag_data(self, node, tagname, suffix='\n', empty=False, **attributes):
attributes.update(
(k, v) for k, v in node.attributes.iteritems()
if k.startswith('data-')
)
# oh dear
return DocutilsTranslator.starttag(
self, node, tagname, suffix=suffix, empty=empty, **attributes)
class monkey(object):
def __init__(self, obj):
self.obj = obj
def __call__(self, fn):
name = fn.__name__
old = getattr(self.obj, name)
setattr(self.obj, name, lambda self_, *args, **kwargs: \
fn(old, self_, *args, **kwargs))

File diff suppressed because one or more lines are too long

Binary file not shown.

79
doc/_themes/odoodoc/static/app.js vendored Normal file
View File

@ -0,0 +1,79 @@
$(function () {
var $body = $(document.body);
$body.scrollspy({ target: '.sphinxsidebarwrapper' });
$(window).on('load', function () {
$body.scrollspy('refresh');
});
// Sidenav affixing
setTimeout(function () {
var $sideBar = $('.sphinxsidebarwrapper');
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top;
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10);
var navOuterHeight = $('.docs-nav').height();
return (this.top = offsetTop - navOuterHeight - sideBarMargin);
},
bottom: function () {
return (this.bottom = $('div.footer').outerHeight(true));
}
}
});
}, 100);
// Config ZeroClipboard
ZeroClipboard.config({
moviePath: '_static/ZeroClipboard.swf',
hoverClass: 'btn-clipboard-hover'
});
// Insert copy to clipboard button before .highlight or .example
$('.highlight-html, .highlight-scss').each(function () {
var highlight = $(this);
var previous = highlight.prev();
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
if (previous.hasClass('example')) {
previous.before(btnHtml.replace(/btn-clipboard/, 'btn-clipboard with-example'));
} else {
highlight.before(btnHtml);
}
});
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');
// Handlers for ZeroClipboard
zeroClipboard.on('load', function () {
htmlBridge
.data('placement', 'top')
.attr('title', 'Copy to clipboard')
.tooltip();
});
// Copy to clipboard
zeroClipboard.on('dataRequested', function (client) {
var highlight = $(this).parent().nextAll('.highlight').first();
client.setText(highlight.text());
});
// Notify copy success and reset tooltip title
zeroClipboard.on('complete', function () {
htmlBridge
.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('fixTitle');
});
// Notify copy failure
zeroClipboard.on('noflash wrongflash', function () {
htmlBridge.attr('title', 'Flash required')
.tooltip('fixTitle')
.tooltip('show');
});
});

View File

@ -0,0 +1,142 @@
/* ========================================================================
* Bootstrap: affix.js v3.2.0
* http://getbootstrap.com/javascript/#affix
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// AFFIX CLASS DEFINITION
// ======================
var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options)
this.$target = $(this.options.target)
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
this.$element = $(element)
this.affixed =
this.unpin =
this.pinnedOffset = null
this.checkPosition()
}
Affix.VERSION = '3.2.0'
Affix.RESET = 'affix affix-top affix-bottom'
Affix.DEFAULTS = {
offset: 0,
target: window
}
Affix.prototype.getPinnedOffset = function () {
if (this.pinnedOffset) return this.pinnedOffset
this.$element.removeClass(Affix.RESET).addClass('affix')
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
return (this.pinnedOffset = position.top - scrollTop)
}
Affix.prototype.checkPositionWithEventLoop = function () {
setTimeout($.proxy(this.checkPosition, this), 1)
}
Affix.prototype.checkPosition = function () {
if (!this.$element.is(':visible')) return
var scrollHeight = $(document).height()
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var offset = this.options.offset
var offsetTop = offset.top
var offsetBottom = offset.bottom
if (typeof offset != 'object') offsetBottom = offsetTop = offset
if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element)
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element)
var affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? false :
offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
offsetTop != null && (scrollTop <= offsetTop) ? 'top' : false
if (this.affixed === affix) return
if (this.unpin != null) this.$element.css('top', '')
var affixType = 'affix' + (affix ? '-' + affix : '')
var e = $.Event(affixType + '.bs.affix')
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
this.affixed = affix
this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
this.$element
.removeClass(Affix.RESET)
.addClass(affixType)
.trigger($.Event(affixType.replace('affix', 'affixed')))
if (affix == 'bottom') {
this.$element.offset({
top: scrollHeight - this.$element.height() - offsetBottom
})
}
}
// AFFIX PLUGIN DEFINITION
// =======================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.affix')
var options = typeof option == 'object' && option
if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.affix
$.fn.affix = Plugin
$.fn.affix.Constructor = Affix
// AFFIX NO CONFLICT
// =================
$.fn.affix.noConflict = function () {
$.fn.affix = old
return this
}
// AFFIX DATA-API
// ==============
$(window).on('load', function () {
$('[data-spy="affix"]').each(function () {
var $spy = $(this)
var data = $spy.data()
data.offset = data.offset || {}
if (data.offsetBottom) data.offset.bottom = data.offsetBottom
if (data.offsetTop) data.offset.top = data.offsetTop
Plugin.call($spy, data)
})
})
}(jQuery);

View File

@ -0,0 +1,92 @@
/* ========================================================================
* Bootstrap: alert.js v3.2.0
* http://getbootstrap.com/javascript/#alerts
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// ALERT CLASS DEFINITION
// ======================
var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
$(el).on('click', dismiss, this.close)
}
Alert.VERSION = '3.2.0'
Alert.prototype.close = function (e) {
var $this = $(this)
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = $(selector)
if (e) e.preventDefault()
if (!$parent.length) {
$parent = $this.hasClass('alert') ? $this : $this.parent()
}
$parent.trigger(e = $.Event('close.bs.alert'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
}
$.support.transition && $parent.hasClass('fade') ?
$parent
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(150) :
removeElement()
}
// ALERT PLUGIN DEFINITION
// =======================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert')
if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.alert
$.fn.alert = Plugin
$.fn.alert.Constructor = Alert
// ALERT NO CONFLICT
// =================
$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}
// ALERT DATA-API
// ==============
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
}(jQuery);

View File

@ -0,0 +1,110 @@
/* ========================================================================
* Bootstrap: button.js v3.2.0
* http://getbootstrap.com/javascript/#buttons
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// BUTTON PUBLIC CLASS DEFINITION
// ==============================
var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
this.isLoading = false
}
Button.VERSION = '3.2.0'
Button.DEFAULTS = {
loadingText: 'loading...'
}
Button.prototype.setState = function (state) {
var d = 'disabled'
var $el = this.$element
var val = $el.is('input') ? 'val' : 'html'
var data = $el.data()
state = state + 'Text'
if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)
} else if (this.isLoading) {
this.isLoading = false
$el.removeClass(d).removeAttr(d)
}
}, this), 0)
}
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
else $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
}
if (changed) this.$element.toggleClass('active')
}
// BUTTON PLUGIN DEFINITION
// ========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.button')
var options = typeof option == 'object' && option
if (!data) $this.data('bs.button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button
// BUTTON NO CONFLICT
// ==================
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
// BUTTON DATA-API
// ===============
$(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle')
e.preventDefault()
})
}(jQuery);

View File

@ -0,0 +1,223 @@
/* ========================================================================
* Bootstrap: carousel.js v3.2.0
* http://getbootstrap.com/javascript/#carousel
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
this.options.pause == 'hover' && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.2.0'
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true
}
Carousel.prototype.keydown = function (e) {
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item')
return this.$items.index(item || this.$active)
}
Carousel.prototype.to = function (pos) {
var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
this.interval = clearInterval(this.interval)
return this
}
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active')
var $next = next || $active[type]()
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
$nextIndicator && $nextIndicator.addClass('active')
}
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
$active
.one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
})
.emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
} else {
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling && this.cycle()
return this
}
// CAROUSEL PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
})
}
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel
// CAROUSEL NO CONFLICT
// ====================
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
// CAROUSEL DATA-API
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false
Plugin.call($target, options)
if (slideIndex) {
$target.data('bs.carousel').to(slideIndex)
}
e.preventDefault()
})
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);

View File

@ -0,0 +1,170 @@
/* ========================================================================
* Bootstrap: collapse.js v3.2.0
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.2.0'
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
if (hasData && hasData.transitioning) return
Plugin.call(actives, 'hide')
hasData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse')
.removeClass('in')
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.trigger('hidden.bs.collapse')
.removeClass('collapsing')
.addClass('collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && option == 'show') option = !option
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
}
Plugin.call($target, option)
})
}(jQuery);

View File

@ -0,0 +1,151 @@
/* ========================================================================
* Bootstrap: dropdown.js v3.2.0
* http://getbootstrap.com/javascript/#dropdowns
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// DROPDOWN CLASS DEFINITION
// =========================
var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}
Dropdown.VERSION = '3.2.0'
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this.trigger('focus')
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
}
return false
}
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27)/.test(e.keyCode)) return
var $this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}
var desc = ' li:not(.divider):visible a'
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
if (!$items.length) return
var index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items.eq(index).trigger('focus')
}
function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
var $parent = getParent($(this))
var relatedTarget = { relatedTarget: this }
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
})
}
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = selector && $(selector)
return $parent && $parent.length ? $parent : $this.parent()
}
// DROPDOWN PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.dropdown')
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown
// DROPDOWN NO CONFLICT
// ====================
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);

View File

@ -0,0 +1,280 @@
/* ========================================================================
* Bootstrap: modal.js v3.2.0
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// MODAL CLASS DEFINITION
// ======================
var Modal = function (element, options) {
this.options = options
this.$body = $(document.body)
this.$element = $(element)
this.$backdrop =
this.isShown = null
this.scrollbarWidth = 0
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
}
Modal.VERSION = '3.2.0'
Modal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}
Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
this.checkScrollbar()
this.$body.addClass('modal-open')
this.setScrollbar()
this.escape()
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element
.show()
.scrollTop(0)
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(300) :
that.$element.trigger('focus').trigger(e)
})
}
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
e = $.Event('hide.bs.modal')
this.$element.trigger(e)
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
this.$body.removeClass('modal-open')
this.resetScrollbar()
this.escape()
$(document).off('focusin.bs.modal')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.bs.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(300) :
this.hideModal()
}
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this))
} else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal')
}
}
Modal.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
that.$element.trigger('hidden.bs.modal')
})
}
Modal.prototype.removeBackdrop = function () {
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(this.$body)
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
if (!callback) return
doAnimate ?
this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(150) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
var callbackRemove = function () {
that.removeBackdrop()
callback && callback()
}
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(150) :
callbackRemove()
} else if (callback) {
callback()
}
}
Modal.prototype.checkScrollbar = function () {
if (document.body.clientWidth >= window.innerWidth) return
this.scrollbarWidth = this.scrollbarWidth || this.measureScrollbar()
}
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
}
Modal.prototype.measureScrollbar = function () { // thx walsh
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
this.$body[0].removeChild(scrollDiv)
return scrollbarWidth
}
// MODAL PLUGIN DEFINITION
// =======================
function Plugin(option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
var old = $.fn.modal
$.fn.modal = Plugin
$.fn.modal.Constructor = Modal
// MODAL NO CONFLICT
// =================
$.fn.modal.noConflict = function () {
$.fn.modal = old
return this
}
// MODAL DATA-API
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})
}(jQuery);

View File

@ -0,0 +1,113 @@
/* ========================================================================
* Bootstrap: popover.js v3.2.0
* http://getbootstrap.com/javascript/#popovers
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// POPOVER PUBLIC CLASS DEFINITION
// ===============================
var Popover = function (element, options) {
this.init('popover', element, options)
}
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
Popover.VERSION = '3.2.0'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})
// NOTE: POPOVER EXTENDS tooltip.js
// ================================
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
Popover.prototype.constructor = Popover
Popover.prototype.getDefaults = function () {
return Popover.DEFAULTS
}
Popover.prototype.setContent = function () {
var $tip = this.tip()
var title = this.getTitle()
var content = this.getContent()
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content').empty()[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content)
$tip.removeClass('fade top bottom left right in')
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
}
Popover.prototype.hasContent = function () {
return this.getTitle() || this.getContent()
}
Popover.prototype.getContent = function () {
var $e = this.$element
var o = this.options
return $e.attr('data-content')
|| (typeof o.content == 'function' ?
o.content.call($e[0]) :
o.content)
}
Popover.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
}
Popover.prototype.tip = function () {
if (!this.$tip) this.$tip = $(this.options.template)
return this.$tip
}
// POPOVER PLUGIN DEFINITION
// =========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
if (!data && option == 'destroy') return
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.popover
$.fn.popover = Plugin
$.fn.popover.Constructor = Popover
// POPOVER NO CONFLICT
// ===================
$.fn.popover.noConflict = function () {
$.fn.popover = old
return this
}
}(jQuery);

View File

@ -0,0 +1,170 @@
/* ========================================================================
* Bootstrap: scrollspy.js v3.2.0
* http://getbootstrap.com/javascript/#scrollspy
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// SCROLLSPY CLASS DEFINITION
// ==========================
function ScrollSpy(element, options) {
var process = $.proxy(this.process, this)
this.$body = $('body')
this.$scrollElement = $(element).is('body') ? $(window) : $(element)
this.options = $.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target || '') + ' .nav li > a'
this.offsets = []
this.targets = []
this.activeTarget = null
this.scrollHeight = 0
this.$scrollElement.on('scroll.bs.scrollspy', process)
this.refresh()
this.process()
}
ScrollSpy.VERSION = '3.2.0'
ScrollSpy.DEFAULTS = {
offset: 10
}
ScrollSpy.prototype.getScrollHeight = function () {
return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
}
ScrollSpy.prototype.refresh = function () {
var offsetMethod = 'offset'
var offsetBase = 0
if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.$scrollElement.scrollTop()
}
this.offsets = []
this.targets = []
this.scrollHeight = this.getScrollHeight()
var self = this
this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
var href = $el.data('target') || $el.attr('href')
var $href = /^#./.test(href) && $(href)
return ($href
&& $href.length
&& $href.is(':visible')
&& [[$href[offsetMethod]().top + offsetBase, href]]) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
}
ScrollSpy.prototype.process = function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
var scrollHeight = this.getScrollHeight()
var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()
var offsets = this.offsets
var targets = this.targets
var activeTarget = this.activeTarget
var i
if (this.scrollHeight != scrollHeight) {
this.refresh()
}
if (scrollTop >= maxScroll) {
return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
}
if (activeTarget && scrollTop <= offsets[0]) {
return activeTarget != (i = targets[0]) && this.activate(i)
}
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate(targets[i])
}
}
ScrollSpy.prototype.activate = function (target) {
this.activeTarget = target
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
var selector = this.selector +
'[data-target="' + target + '"],' +
this.selector + '[href="' + target + '"]'
var active = $(selector)
.parents('li')
.addClass('active')
if (active.parent('.dropdown-menu').length) {
active = active
.closest('li.dropdown')
.addClass('active')
}
active.trigger('activate.bs.scrollspy')
}
// SCROLLSPY PLUGIN DEFINITION
// ===========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.scrollspy')
var options = typeof option == 'object' && option
if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.scrollspy
$.fn.scrollspy = Plugin
$.fn.scrollspy.Constructor = ScrollSpy
// SCROLLSPY NO CONFLICT
// =====================
$.fn.scrollspy.noConflict = function () {
$.fn.scrollspy = old
return this
}
// SCROLLSPY DATA-API
// ==================
$(window).on('load.bs.scrollspy.data-api', function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
Plugin.call($spy, $spy.data())
})
})
}(jQuery);

View File

@ -0,0 +1,128 @@
/* ========================================================================
* Bootstrap: tab.js v3.2.0
* http://getbootstrap.com/javascript/#tabs
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// TAB CLASS DEFINITION
// ====================
var Tab = function (element) {
this.element = $(element)
}
Tab.VERSION = '3.2.0'
Tab.prototype.show = function () {
var $this = this.element
var $ul = $this.closest('ul:not(.dropdown-menu)')
var selector = $this.data('target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
if ($this.parent('li').hasClass('active')) return
var previous = $ul.find('.active:last a')[0]
var e = $.Event('show.bs.tab', {
relatedTarget: previous
})
$this.trigger(e)
if (e.isDefaultPrevented()) return
var $target = $(selector)
this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: previous
})
})
}
Tab.prototype.activate = function (element, container, callback) {
var $active = container.find('> .active')
var transition = callback
&& $.support.transition
&& $active.hasClass('fade')
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if (element.parent('.dropdown-menu')) {
element.closest('li.dropdown').addClass('active')
}
callback && callback()
}
transition ?
$active
.one('bsTransitionEnd', next)
.emulateTransitionEnd(150) :
next()
$active.removeClass('in')
}
// TAB PLUGIN DEFINITION
// =====================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tab')
if (!data) $this.data('bs.tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.tab
$.fn.tab = Plugin
$.fn.tab.Constructor = Tab
// TAB NO CONFLICT
// ===============
$.fn.tab.noConflict = function () {
$.fn.tab = old
return this
}
// TAB DATA-API
// ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
})
}(jQuery);

View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Plugin Test Suite</title>
<!-- jQuery -->
<script src="vendor/jquery.min.js"></script>
<!-- QUnit -->
<link rel="stylesheet" href="vendor/qunit.css" media="screen">
<script src="vendor/qunit.js"></script>
<script>
// See https://github.com/axemclion/grunt-saucelabs#test-result-details-with-qunit
var log = []
QUnit.done = function (test_results) {
var tests = log.map(function (details) {
return {
name: details.name,
result: details.result,
expected: details.expected,
actual: details.actual,
source: details.source
}
})
test_results.tests = tests
// Delaying results a bit because in real-world scenario you won't get them immediately
setTimeout(function () {
window.global_test_results = test_results
}, 2000)
}
QUnit.testStart(function (testDetails) {
QUnit.log = function (details) {
if (!details.result) {
details.name = testDetails.name
log.push(details)
}
}
})
</script>
<!-- Plugin sources -->
<script>$.support.transition = false</script>
<script src="../alert.js"></script>
<script src="../button.js"></script>
<script src="../carousel.js"></script>
<script src="../collapse.js"></script>
<script src="../dropdown.js"></script>
<script src="../modal.js"></script>
<script src="../scrollspy.js"></script>
<script src="../tab.js"></script>
<script src="../tooltip.js"></script>
<script src="../popover.js"></script>
<script src="../affix.js"></script>
<!-- Unit tests -->
<script src="unit/alert.js"></script>
<script src="unit/button.js"></script>
<script src="unit/carousel.js"></script>
<script src="unit/collapse.js"></script>
<script src="unit/dropdown.js"></script>
<script src="unit/modal.js"></script>
<script src="unit/scrollspy.js"></script>
<script src="unit/tab.js"></script>
<script src="unit/tooltip.js"></script>
<script src="unit/popover.js"></script>
<script src="unit/affix.js"></script>
</head>
<body>
<div>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,62 @@
$(function () {
'use strict';
module('affix plugin')
test('should be defined on jquery object', function () {
ok($(document.body).affix, 'affix method is defined')
})
module('affix', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapAffix = $.fn.affix.noConflict()
},
teardown: function () {
$.fn.affix = $.fn.bootstrapAffix
delete $.fn.bootstrapAffix
}
})
test('should provide no conflict', function () {
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapAffix()[0] == document.body, 'document.body returned')
})
test('should exit early if element is not visible', function () {
var $affix = $('<div style="display: none"></div>').bootstrapAffix()
$affix.data('bs.affix').checkPosition()
ok(!$affix.hasClass('affix'), 'affix class was not added')
})
test('should trigger affixed event after affix', function () {
stop()
var template = $('<div id="affixTarget"><ul><li>Please affix</li><li>And unaffix</li></ul></div><div id="affixAfter" style="height: 20000px; display:block;"></div>')
template.appendTo('body')
$('#affixTarget').bootstrapAffix({
offset: $('#affixTarget ul').position()
})
$('#affixTarget')
.on('affix.bs.affix', function () {
ok(true, 'affix event triggered')
}).on('affixed.bs.affix', function () {
ok(true, 'affixed event triggered')
$('#affixTarget').remove()
$('#affixAfter').remove()
start()
})
setTimeout(function () {
window.scrollTo(0, document.body.scrollHeight)
setTimeout(function () {
window.scroll(0, 0)
}, 0)
}, 0)
})
})

View File

@ -0,0 +1,72 @@
$(function () {
'use strict';
module('alert plugin')
test('should be defined on jquery object', function () {
ok($(document.body).alert, 'alert method is defined')
})
module('alert', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapAlert = $.fn.alert.noConflict()
},
teardown: function () {
$.fn.alert = $.fn.bootstrapAlert
delete $.fn.bootstrapAlert
}
})
test('should provide no conflict', function () {
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapAlert()[0] == document.body, 'document.body returned')
})
test('should fade element out on clicking .close', function () {
var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>'
var alert = $(alertHTML).bootstrapAlert()
alert.find('.close').click()
ok(!alert.hasClass('in'), 'remove .in class on .close click')
})
test('should remove element when clicking .close', function () {
$.support.transition = false
var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>'
var alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom')
alert.find('.close').click()
ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
})
test('should not fire closed when close is prevented', function () {
$.support.transition = false
stop()
$('<div class="alert"/>')
.on('close.bs.alert', function (e) {
e.preventDefault()
ok(true)
start()
})
.on('closed.bs.alert', function () {
ok(false)
})
.bootstrapAlert('close')
})
})

View File

@ -0,0 +1,151 @@
$(function () {
'use strict';
module('button plugin')
test('should be defined on jquery object', function () {
ok($(document.body).button, 'button method is defined')
})
module('button', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapButton = $.fn.button.noConflict()
},
teardown: function () {
$.fn.button = $.fn.bootstrapButton
delete $.fn.bootstrapButton
}
})
test('should provide no conflict', function () {
ok(!$.fn.button, 'button was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapButton()[0] == document.body, 'document.body returned')
})
test('should return set state to loading', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
start()
}, 0)
})
test('should return reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
btn.bootstrapButton('reset')
equal(btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
start()
}, 0)
}, 0)
})
test('should work with an empty string as reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat"></button>')
equal(btn.html(), '', 'btn text equals ""')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
btn.bootstrapButton('reset')
equal(btn.html(), '', 'btn text equals ""')
setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
start()
}, 0)
}, 0)
})
test('should toggle active', function () {
var btn = $('<button class="btn">mdo</button>')
ok(!btn.hasClass('active'), 'btn does not have active class')
btn.bootstrapButton('toggle')
ok(btn.hasClass('active'), 'btn has class active')
})
test('should toggle active when btn children are clicked', function () {
var btn = $('<button class="btn" data-toggle="button">mdo</button>')
var inner = $('<i></i>')
btn
.append(inner)
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
})
test('should toggle active when btn children are clicked within btn-group', function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
var btn = $('<button class="btn">fat</button>')
var inner = $('<i></i>')
btngroup
.append(btn.append(inner))
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
})
test('should check for closest matching toggle', function () {
var group = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' +
'<input type="radio" name="options" id="option1" checked="true"> Option 1' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option2"> Option 2' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option3"> Option 3' +
'</label>' +
'</div>'
group = $(group)
var btn1 = $(group.children()[0])
var btn2 = $(group.children()[1])
group.appendTo($('#qunit-fixture'))
ok(btn1.hasClass('active'), 'btn1 has active class')
ok(btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!btn2.hasClass('active'), 'btn2 does not have active class')
ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
btn2.find('input').click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
btn2.find('input').click() /* clicking an already checked radio should not un-check it */
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
})
})

View File

@ -0,0 +1,174 @@
$(function () {
'use strict';
module('carousel plugin')
test('should be defined on jQuery object', function () {
ok($(document.body).carousel, 'carousel method is defined')
})
module('carousel', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapCarousel = $.fn.carousel.noConflict()
},
teardown: function () {
$.fn.carousel = $.fn.bootstrapCarousel
delete $.fn.bootstrapCarousel
}
})
test('should provide no conflict', function () {
ok(!$.fn.carousel, 'carousel was set back to undefined (orig value)')
})
test('should return element', function () {
ok($(document.body).bootstrapCarousel()[0] == document.body, 'document.body returned')
})
test('should not fire slide when slide is prevented', function () {
$.support.transition = false
stop()
$('<div class="carousel"/>')
.on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(true)
start()
})
.on('slid.bs.carousel', function () {
ok(false)
})
.bootstrapCarousel('next')
})
test('should reset when slide is prevented', function () {
var template = '<div id="carousel-example-generic" class="carousel slide"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>'
var $carousel = $(template)
$.support.transition = false
stop()
$carousel.one('slide.bs.carousel', function (e) {
e.preventDefault()
setTimeout(function () {
ok($carousel.find('.item:eq(0)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'))
$carousel.bootstrapCarousel('next')
}, 1)
})
$carousel.one('slid.bs.carousel', function () {
setTimeout(function () {
ok($carousel.find('.item:eq(1)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'))
start()
}, 1)
})
$carousel.bootstrapCarousel('next')
})
test('should fire slide event with direction', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template).on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left')
start()
}).bootstrapCarousel('next')
})
test('should fire slid event with direction', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template).on('slid.bs.carousel', function (e) {
e.preventDefault()
ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left')
start()
}).bootstrapCarousel('next')
})
test('should fire slide event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template)
.on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(e.relatedTarget)
ok($(e.relatedTarget).hasClass('item'))
start()
})
.bootstrapCarousel('next')
})
test('should fire slid event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template)
.on('slid.bs.carousel', function (e) {
e.preventDefault()
ok(e.relatedTarget)
ok($(e.relatedTarget).hasClass('item'))
start()
})
.bootstrapCarousel('next')
})
test('should set interval from data attribute', 4, function () {
var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>')
template.attr('data-interval', 1814)
template.appendTo('body')
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814)
$('#myCarousel').remove()
template.appendTo('body').attr('data-modal', 'foobar')
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set')
$('#myCarousel').remove()
template.appendTo('body')
$('[data-slide]').first().click()
$('#myCarousel').attr('data-interval', 1860)
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on initialization')
$('#myCarousel').remove()
template.attr('data-interval', false)
template.appendTo('body')
$('#myCarousel').bootstrapCarousel(1)
ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options')
$('#myCarousel').remove()
})
test('should skip over non-items', function () {
$.support.transition = false
var $template = $(
'<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">'
+ '<div class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<script type="text/x-metamorph" id="thingy"></script>'
+ '<div class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div class="item">'
+ '</div>'
+ '</div>'
+ '</div>'
)
$template.bootstrapCarousel()
equal($template.find('.item')[0], $template.find('.active')[0], 'the first carousel item should be active')
$template.bootstrapCarousel(1)
equal($template.find('.item')[1], $template.find('.active')[0], 'the second carousel item should be active')
})
})

View File

@ -0,0 +1,174 @@
$(function () {
'use strict';
module('collapse plugin')
test('should be defined on jquery object', function () {
ok($(document.body).collapse, 'collapse method is defined')
})
module('collapse', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapCollapse = $.fn.collapse.noConflict()
},
teardown: function () {
$.fn.collapse = $.fn.bootstrapCollapse
delete $.fn.bootstrapCollapse
}
})
test('should provide no conflict', function () {
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapCollapse()[0] == document.body, 'document.body returned')
})
test('should show a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('show')
ok(el.hasClass('in'), 'has class in')
ok(!/height/.test(el.attr('style')), 'has height reset')
})
test('should hide a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('hide')
ok(!el.hasClass('in'), 'does not have class in')
ok(/height/.test(el.attr('style')), 'has height set')
})
test('should not fire shown when show is prevented', function () {
$.support.transition = false
stop()
$('<div class="collapse"/>')
.on('show.bs.collapse', function (e) {
e.preventDefault()
ok(true)
start()
})
.on('shown.bs.collapse', function () {
ok(false)
})
.bootstrapCollapse('show')
})
test('should reset style to auto after finishing opening collapse', function () {
$.support.transition = false
stop()
$('<div class="collapse" style="height: 0px"/>')
.on('show.bs.collapse', function () {
ok(this.style.height == '0px')
})
.on('shown.bs.collapse', function () {
ok(this.style.height === '')
start()
})
.bootstrapCollapse('show')
})
test('should add active class to target when collapse shown', function () {
$.support.transition = false
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
$('<div id="test1"></div>')
.appendTo($('#qunit-fixture'))
.on('show.bs.collapse', function () {
ok(!target.hasClass('collapsed'))
start()
})
target.click()
})
test('should remove active class to target when collapse hidden', function () {
$.support.transition = false
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
$('<div id="test1" class="in"></div>')
.appendTo($('#qunit-fixture'))
.on('hide.bs.collapse', function () {
ok(target.hasClass('collapsed'))
start()
})
target.click()
})
test('should remove active class from inactive accordion targets', function () {
$.support.transition = false
stop()
var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo($('#qunit-fixture'))
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"></div>')
.appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
start()
})
target3.click()
})
test('should allow dots in data-parent', function () {
$.support.transition = false
stop()
var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo($('#qunit-fixture'))
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"></div>')
.appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
start()
})
target3.click()
})
})

View File

@ -0,0 +1,228 @@
$(function () {
'use strict';
module('dropdowns plugin')
test('should be defined on jquery object', function () {
ok($(document.body).dropdown, 'dropdown method is defined')
})
module('dropdowns', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapDropdown = $.fn.dropdown.noConflict()
},
teardown: function () {
$.fn.dropdown = $.fn.bootstrapDropdown
delete $.fn.bootstrapDropdown
}
})
test('should provide no conflict', function () {
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
})
test('should return element', function () {
var el = $('<div />')
ok(el.bootstrapDropdown()[0] === el[0], 'same element returned')
})
test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test('should add class open to menu if clicked', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test('should test if element has a # before assuming it\'s a selector', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test('should remove open class if body clicked', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
.click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
$('body').click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed')
dropdown.remove()
})
test('should remove open class if body clicked, with multiple drop downs', function () {
var dropdownHTML = '<ul class="nav">' +
' <li><a href="#menu1">Menu 1</a></li>' +
' <li class="dropdown" id="testmenu">' +
' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>' +
' <ul class="dropdown-menu" role="menu">' +
' <li><a href="#sub1">Submenu 1</a></li>' +
' </ul>' +
' </li>' +
'</ul>' +
'<div class="btn-group">' +
' <button class="btn">Actions</button>' +
' <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>' +
' <ul class="dropdown-menu">' +
' <li><a href="#">Action 1</a></li>' +
' </ul>' +
'</div>'
var dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var first = dropdowns.first()
var last = dropdowns.last()
ok(dropdowns.length == 2, 'Should be two dropdowns')
first.click()
ok(first.parents('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($('#qunit-fixture .open').length === 0, 'open class removed')
last.click()
ok(last.parent('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($('#qunit-fixture .open').length === 0, 'open class removed')
$('#qunit-fixture').html('')
})
test('should fire show and hide event', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
stop()
dropdown
.parent('.dropdown')
.on('show.bs.dropdown', function () {
ok(true, 'show was called')
})
.on('hide.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
dropdown.click()
$(document.body).click()
})
test('should fire shown and hiden event', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
stop()
dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
ok(true, 'show was called')
})
.on('hidden.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
dropdown.click()
$(document.body).click()
})
})

View File

@ -0,0 +1,256 @@
$(function () {
'use strict';
module('modal plugin')
test('should be defined on jquery object', function () {
var div = $('<div id="modal-test"></div>')
ok(div.modal, 'modal method is defined')
})
module('modal', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapModal = $.fn.modal.noConflict()
},
teardown: function () {
$.fn.modal = $.fn.bootstrapModal
delete $.fn.bootstrapModal
}
})
test('should provide no conflict', function () {
ok(!$.fn.modal, 'modal was set back to undefined (orig value)')
})
test('should return element', function () {
var div = $('<div id="modal-test"></div>')
ok(div.bootstrapModal() == div, 'document.body returned')
$('#modal-test').remove()
})
test('should expose defaults var for settings', function () {
ok($.fn.bootstrapModal.Constructor.DEFAULTS, 'default object exposed')
})
test('should insert into dom when show method is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove()
start()
})
.bootstrapModal('show')
})
test('should fire show event', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function () {
ok(true, 'show was called')
})
.on('shown.bs.modal', function () {
$(this).remove()
start()
})
.bootstrapModal('show')
})
test('should not fire shown when default prevented', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function (e) {
e.preventDefault()
ok(true, 'show was called')
start()
})
.on('shown.bs.modal', function () {
ok(false, 'shown was called')
})
.bootstrapModal('show')
})
test('should hide modal when hide is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
$(this).bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start()
})
.bootstrapModal('show')
})
test('should toggle when toggle is called', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>')
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.bootstrapModal('toggle')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
})
test('should remove from dom when click [data-dismiss="modal"]', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>')
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
})
test('should allow modal close with "backdrop:false"', function () {
stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
div.bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
})
test('should close modal when clicking outside of modal-content', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div
.on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
})
test('should trigger hide event once when clicking outside of modal-content', function () {
stop()
$.support.transition = false
var triggered
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div
.on('shown.bs.modal', function () {
triggered = 0
$('#modal-test').click()
})
.on('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
start()
})
.bootstrapModal('show')
})
test('should close reopened modal with [data-dismiss="modal"] click', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
.on('shown.bs.modal', function () {
$('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden')
})
.one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () {
start()
}).bootstrapModal('show')
})
.bootstrapModal('show')
div.remove()
})
test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run
equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused')
div.remove()
toggleBtn.remove()
start()
}, 0)
})
.on('shown.bs.modal', function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
})
test('should not restore focus to toggling element if the associated show event gets prevented', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var otherBtn = $('<button id="other-btn">Golden boy</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
.one('show.bs.modal', function (e) {
e.preventDefault()
otherBtn.focus()
window.setTimeout(function () { // give the focus event from the previous line a chance to run
div.bootstrapModal('show')
}, 0)
})
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run (except it shouldn't run in this case)
equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element')
div.remove()
toggleBtn.remove()
otherBtn.remove()
start()
}, 0)
})
.on('shown.bs.modal', function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
})
})

View File

@ -0,0 +1,68 @@
/*
* grunt-contrib-qunit
* http://gruntjs.com/
*
* Copyright (c) 2013 "Cowboy" Ben Alman, contributors
* Licensed under the MIT license.
*/
(function () {
'use strict';
// Don't re-order tests.
QUnit.config.reorder = false
// Run tests serially, not in parallel.
QUnit.config.autorun = false
// Send messages to the parent PhantomJS process via alert! Good times!!
function sendMessage() {
var args = [].slice.call(arguments)
alert(JSON.stringify(args))
}
// These methods connect QUnit to PhantomJS.
QUnit.log = function (obj) {
// What is this I dont even
if (obj.message === '[object Object], undefined:undefined') { return }
// Parse some stuff before sending it.
var actual = QUnit.jsDump.parse(obj.actual)
var expected = QUnit.jsDump.parse(obj.expected)
// Send it.
sendMessage('qunit.log', obj.result, actual, expected, obj.message, obj.source)
}
QUnit.testStart = function (obj) {
sendMessage('qunit.testStart', obj.name)
}
QUnit.testDone = function (obj) {
sendMessage('qunit.testDone', obj.name, obj.failed, obj.passed, obj.total)
}
QUnit.moduleStart = function (obj) {
sendMessage('qunit.moduleStart', obj.name)
}
QUnit.begin = function () {
sendMessage('qunit.begin')
console.log('Starting test suite')
console.log('================================================\n')
}
QUnit.moduleDone = function (opts) {
if (opts.failed === 0) {
console.log('\r\u2714 All tests passed in "' + opts.name + '" module')
} else {
console.log('\u2716 ' + opts.failed + ' tests failed in "' + opts.name + '" module')
}
sendMessage('qunit.moduleDone', opts.name, opts.failed, opts.passed, opts.total)
}
QUnit.done = function (opts) {
console.log('\n================================================')
console.log('Tests completed in ' + opts.runtime + ' milliseconds')
console.log(opts.passed + ' tests of ' + opts.total + ' passed, ' + opts.failed + ' failed.')
sendMessage('qunit.done', opts.failed, opts.passed, opts.total, opts.runtime)
}
}())

View File

@ -0,0 +1,184 @@
$(function () {
'use strict';
module('popover plugin')
test('should be defined on jquery object', function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
})
module('popover', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapPopover = $.fn.popover.noConflict()
},
teardown: function () {
$.fn.popover = $.fn.bootstrapPopover
delete $.fn.bootstrapPopover
}
})
test('should provide no conflict', function () {
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
})
test('should return element', function () {
var div = $('<div></div>')
ok(div.bootstrapPopover() == div, 'document.body returned')
})
test('should render popover element', function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover removed')
})
test('should store popover instance in popover data object', function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.bootstrapPopover()
ok(!!popover.data('bs.popover'), 'popover instance exists')
})
test('should store popover trigger in popover instance data object', function () {
$.support.transition = false
var popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover()
popover.bootstrapPopover('show')
ok(!!$('.popover').data('bs.popover'), 'popover trigger stored in instance data')
$('#qunit-fixture').empty()
})
test('should get title and content from options', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: function () {
return '@fat'
},
content: function () {
return 'loves writing tests (╯°□°)╯︵ ┻━┻'
}
})
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should not duplicate HTML object', function () {
$.support.transition = false
var $div = $('<div>').html('loves writing tests (╯°□°)╯︵ ┻━┻')
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
content: function () {
return $div
}
})
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should get title and content from attributes', function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover()
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should get title and content from attributes #2', function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: 'ignored title option',
content: 'ignored content option'
})
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should respect custom classes', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: 'Test',
content: 'Test',
template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
})
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
ok($('.popover').hasClass('foobar'), 'custom class is present')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should destroy popover', function () {
var popover = $('<div/>').bootstrapPopover({
trigger: 'hover'
}).on('click.foo', function () {})
ok(popover.data('bs.popover'), 'popover has data')
ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
popover.bootstrapPopover('show')
popover.bootstrapPopover('destroy')
ok(!popover.hasClass('in'), 'popover is hidden')
ok(!popover.data('popover'), 'popover does not have data')
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover still has click.foo')
ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events')
})
})

View File

@ -0,0 +1,117 @@
$(function () {
'use strict';
module('scrollspy plugin')
test('should be defined on jquery object', function () {
ok($(document.body).scrollspy, 'scrollspy method is defined')
})
module('scrollspy', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapScrollspy = $.fn.scrollspy.noConflict()
},
teardown: function () {
$.fn.scrollspy = $.fn.bootstrapScrollspy
delete $.fn.bootstrapScrollspy
}
})
test('should provide no conflict', function () {
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapScrollspy()[0] == document.body, 'document.body returned')
})
test('should switch active class on scroll', function () {
var sectionHTML = '<div id="masthead"></div>'
$(sectionHTML).append('#qunit-fixture')
var topbarHTML = '<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container">' +
'<h3><a href="#">Bootstrap</a></h3>' +
'<li><a href="#masthead">Overview</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>'
var $topbar = $(topbarHTML).bootstrapScrollspy()
$(sectionHTML).append('#qunit-fixture')
ok($topbar.find('.active', true))
})
asyncTest('should only switch active class on current target', function () {
expect(1);
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container" id="ss-target">' +
'<ul class="nav">' +
'<li><a href="#masthead">Overview</a></li>' +
'<li><a href="#detail">Detail</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>' +
'<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
'<div style="height: 200px;">' +
'<h4 id="masthead">Overview</h4>' +
'<p style="height: 200px">' +
'Ad leggings keytar, brunch id art party dolor labore.' +
'</p>' +
'</div>' +
'<div style="height: 200px;">' +
'<h4 id="detail">Detail</h4>' +
'<p style="height: 200px">' +
'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
'</p>' +
'</div>' +
'</div>' +
'</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section
.show()
.find('#scrollspy-example')
.bootstrapScrollspy({ target: '#ss-target' })
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok($section.hasClass('active'), 'Active class still on root node')
start()
})
$scrollSpy.scrollTop(350);
})
asyncTest('middle navigation option correctly selected when large offset is used', function () {
expect(3);
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="nav navbar-nav">' +
'<li class="active"><a id="one-link" href="#one">One</a></li>' +
'<li><a id="two-link" href="#two">Two</a></li>' +
'<li><a id="three-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>' +
'<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="one" style="height: 500px;"></div>' +
'<div id="two" style="height: 300px;"></div>' +
'<div id="three" style="height: 10px;"></div>' +
'</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section
.show()
.filter('#content')
$scrollSpy.bootstrapScrollspy({ target: '#navigation', offset: $scrollSpy.position().top })
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok(!$section.find('#one-link').parent().hasClass('active'), 'Active class removed from first section')
ok($section.find('#two-link').parent().hasClass('active'), 'Active class on middle section')
ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section')
start()
})
$scrollSpy.scrollTop(550);
})
})

View File

@ -0,0 +1,96 @@
$(function () {
'use strict';
module('tabs plugin')
test('should be defined on jquery object', function () {
ok($(document.body).tab, 'tabs method is defined')
})
module('tabs', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapTab = $.fn.tab.noConflict()
},
teardown: function () {
$.fn.tab = $.fn.bootstrapTab
delete $.fn.bootstrapTab
}
})
test('should provide no conflict', function () {
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapTab()[0] == document.body, 'document.body returned')
})
test('should activate element by tab id', function () {
var tabsHTML = '<ul class="tabs">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$(tabsHTML).find('li:last a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
$(tabsHTML).find('li:first a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'home')
})
test('should activate element by tab id', function () {
var pillsHTML = '<ul class="pills">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$(pillsHTML).find('li:last a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
$(pillsHTML).find('li:first a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'home')
})
test('should not fire closed when close is prevented', function () {
$.support.transition = false
stop()
$('<div class="tab"/>')
.on('show.bs.tab', function (e) {
e.preventDefault()
ok(true)
start()
})
.on('shown.bs.tab', function () {
ok(false)
})
.bootstrapTab('show')
})
test('show and shown events should reference correct relatedTarget', function () {
var dropHTML = '<ul class="drop">' +
'<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#1-1" data-toggle="tab">1-1</a></li>' +
'<li><a href="#1-2" data-toggle="tab">1-2</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
$(dropHTML).find('ul>li:first a').bootstrapTab('show').end()
.find('ul>li:last a')
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
})
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
})
.bootstrapTab('show')
})
})

View File

@ -0,0 +1,595 @@
$(function () {
'use strict';
module('tooltip plugin')
test('should be defined on jquery object', function () {
var div = $('<div></div>')
ok(div.tooltip, 'popover method is defined')
})
module('tooltip', {
setup: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapTooltip = $.fn.tooltip.noConflict()
},
teardown: function () {
$.fn.tooltip = $.fn.bootstrapTooltip
delete $.fn.bootstrapTooltip
}
})
test('should provide no conflict', function () {
ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
})
test('should return element', function () {
var div = $('<div></div>')
ok(div.bootstrapTooltip() == div, 'document.body returned')
})
test('should expose default settings', function () {
ok(!!$.fn.bootstrapTooltip.Constructor.DEFAULTS, 'defaults is defined')
})
test('should empty title attribute', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').bootstrapTooltip()
ok(tooltip.attr('title') === '', 'title attribute was emptied')
})
test('should add data attribute for referencing original title', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').bootstrapTooltip()
equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
})
test('should add set set aria describedby to the element called on show', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').bootstrapTooltip()
.appendTo('#qunit-fixture')
.bootstrapTooltip('show')
ok(tooltip.attr('aria-describedby'), 'has the right attributes')
var id = $('.tooltip').attr('id')
ok($('#' + id).length == 1, 'has a unique id')
ok($('.tooltip').attr('aria-describedby') === tooltip.attr('id'), 'they match!')
ok(tooltip.attr('aria-describedby') !== undefined, 'has the right attributes')
})
test('should remove the aria-describedby attributes on hide', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').bootstrapTooltip()
.appendTo('#qunit-fixture')
.bootstrapTooltip('show')
ok(tooltip.attr('aria-describedby'), 'has the right attributes')
tooltip.bootstrapTooltip('hide')
ok(!tooltip.attr('aria-describedby'), 'removed the attributes on hide')
})
test('should assign a unique id tooltip element', function () {
$('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip('show')
var id = $('.tooltip').attr('id')
ok($('#' + id).length == 1 && id.indexOf('tooltip') === 0, 'generated prefixed and unique tooltip id')
})
test('should place tooltips relative to placement option', function () {
$.support.transition = false
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ placement: 'bottom' })
.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
tooltip.bootstrapTooltip('hide')
})
test('should allow html entities', function () {
$.support.transition = false
var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true })
.bootstrapTooltip('show')
ok($('.tooltip b').length, 'b tag was inserted')
tooltip.bootstrapTooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
})
test('should respect custom classes', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
.bootstrapTooltip('show')
ok($('.tooltip').hasClass('some-class'), 'custom class is present')
tooltip.bootstrapTooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
})
test('should fire show event', function () {
stop()
$('<div title="tooltip title"></div>')
.on('show.bs.tooltip', function () {
ok(true, 'show was called')
start()
})
.bootstrapTooltip('show')
})
test('should fire shown event', function () {
stop()
var tooltip = $('<div title="tooltip title"></div>').appendTo('#qunit-fixture')
tooltip
.on('shown.bs.tooltip', function () {
ok(true, 'shown was called')
tooltip.remove()
start()
})
.bootstrapTooltip('show')
})
test('should not fire shown event when default prevented', function () {
stop()
$('<div title="tooltip title"></div>')
.on('show.bs.tooltip', function (e) {
e.preventDefault()
ok(true, 'show was called')
start()
})
.on('shown.bs.tooltip', function () {
ok(false, 'shown was called')
})
.bootstrapTooltip('show')
})
test('should fire hide event', function () {
stop()
var tooltip = $('<div title="tooltip title"></div>').appendTo('#qunit-fixture')
tooltip
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
})
.on('hide.bs.tooltip', function () {
ok(true, 'hide was called')
tooltip.remove()
start()
})
.bootstrapTooltip('show')
})
test('should fire hidden event', function () {
stop()
var tooltip = $('<div title="tooltip title"></div>').appendTo('#qunit-fixture')
tooltip
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
})
.on('hidden.bs.tooltip', function () {
ok(true, 'hidden was called')
tooltip.remove()
start()
})
.bootstrapTooltip('show')
})
test('should not fire hidden event when default prevented', function () {
stop()
var tooltip = $('<div title="tooltip title"></div>').appendTo('#qunit-fixture')
tooltip
.on('shown.bs.tooltip', function () {
$(this).bootstrapTooltip('hide')
})
.on('hide.bs.tooltip', function (e) {
e.preventDefault()
ok(true, 'hide was called')
tooltip.remove()
start()
})
.on('hidden.bs.tooltip', function () {
ok(false, 'hidden was called')
})
.bootstrapTooltip('show')
})
test('should not show tooltip if leave event occurs before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 200 })
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start()
}, 200)
}, 100)
})
test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 200, hide: 0 }})
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start()
}, 200)
}, 100)
})
test('should wait 200 ms before hiding the tooltip', 3, function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 200 }})
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
setTimeout(function () {
ok(!$('.tooltip').is('.in'), 'tooltip removed')
start()
}, 150)
}, 100)
}, 1)
})
test('should not hide tooltip if leave event occurs, then tooltip is show immediately again', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 200 }})
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
tooltip.trigger('mouseenter')
setTimeout(function () {
ok($('.tooltip').is('.in'), 'tooltip removed')
start()
}, 150)
}, 100)
}, 1)
})
test('should not show tooltip if leave event occurs before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 100 })
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start()
}, 100)
}, 50)
})
test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
}, 100)
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip has faded in')
start()
}, 200)
})
test('should destroy tooltip', function () {
var tooltip = $('<div/>').bootstrapTooltip().on('click.foo', function () {})
ok(tooltip.data('bs.tooltip'), 'tooltip has data')
ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
tooltip.bootstrapTooltip('show')
tooltip.bootstrapTooltip('destroy')
ok(!tooltip.hasClass('in'), 'tooltip is hidden')
ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo')
ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
})
test('should show tooltip with delegate selector on click', function () {
var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
div.appendTo('#qunit-fixture').bootstrapTooltip({
selector: 'a[rel="tooltip"]', trigger: 'click'
})
div.find('a').trigger('click')
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
})
test('should show tooltip when toggle is called', function () {
$('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip('toggle')
ok($('.tooltip').is('.fade.in'), 'tooltip should be toggled in')
})
test('should hide shown tooltip when toggle is called on tooltip', function () {
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip('toggle')
$('.tooltip', '#qunit-fixture').bootstrapTooltip('toggle')
ok($('.tooltip').not('.fade.in'), 'tooltip should be toggled out')
tooltip.bootstrapTooltip('hide')
$('#qunit-fixture').empty()
})
test('should place tooltips inside the body', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ container: 'body' })
.bootstrapTooltip('show')
ok($('body > .tooltip').length, 'inside the body')
ok(!$('#qunit-fixture > .tooltip').length, 'not found in parent')
tooltip.bootstrapTooltip('hide')
})
test('should place tooltip inside window', function () {
var container = $('<div />').appendTo('body')
.css({ position: 'absolute', width: 200, height: 200, bottom: 0, left: 0 })
$('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>')
.css({ position: 'absolute', top: 0, left: 0 })
.appendTo(container)
.bootstrapTooltip({ placement: 'top', animate: false })
.bootstrapTooltip('show')
stop()
setTimeout(function () {
ok($('.tooltip').offset().left >= 0)
start()
container.remove()
}, 100)
})
test('should place tooltip on top of element', function () {
var container = $('<div />').appendTo('body')
.css({ position: 'absolute', bottom: 0, left: 0, textAlign: 'right', width: 300, height: 300 })
var p = $('<p style="margin-top:200px" />').appendTo(container)
var tooltiped = $('<a href="#" title="very very very very very very very long tooltip">Hover me</a>')
.css({ marginTop: 200 })
.appendTo(p)
.bootstrapTooltip({ placement: 'top', animate: false })
.bootstrapTooltip('show')
stop()
setTimeout(function () {
var tooltip = container.find('.tooltip')
start()
ok(Math.round(tooltip.offset().top + tooltip.outerHeight()) <= Math.round(tooltiped.offset().top))
container.remove()
}, 100)
})
test('should add position class before positioning so that position-specific styles are taken into account', function () {
$('head').append('<style id="test"> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
var container = $('<div />').appendTo('body')
var target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'right', viewport: null })
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
// this is some dumb hack shit because sub pixels in firefox
var top = Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2))
var top2 = Math.round(tooltip.offset().top)
var topDiff = top - top2
ok(topDiff <= 1 && topDiff >= -1)
target.bootstrapTooltip('hide')
$('head #test').remove()
})
test('tooltip title test #1', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({})
.bootstrapTooltip('show')
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
tooltip.bootstrapTooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
})
test('tooltip title test #2', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
title: 'This is a tooltip with some content'
})
.bootstrapTooltip('show')
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
tooltip.bootstrapTooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
})
test('tooltip title test #3', function () {
var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
title: 'This is a tooltip with some content'
})
.bootstrapTooltip('show')
equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
tooltip.bootstrapTooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
})
test('tooltips should be placed dynamically, with the dynamic placement option', function () {
$.support.transition = false
var ttContainer = $('<div id="dynamic-tt-test"/>').css({
height: 400,
overflow: 'hidden',
position: 'absolute',
top: 0,
left: 0,
width: 600
})
.appendTo('body')
var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.bootstrapTooltip({ placement: 'auto' })
.bootstrapTooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
topTooltip.bootstrapTooltip('hide')
var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.bootstrapTooltip({ placement: 'right auto' })
.bootstrapTooltip('show')
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
rightTooltip.bootstrapTooltip('hide')
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.bootstrapTooltip({ placement: 'auto left' })
.bootstrapTooltip('show')
ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
leftTooltip.bootstrapTooltip('hide')
ttContainer.remove()
})
test('should adjust the tip\'s top when up against the top of the viewport', function () {
$('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
var container = $('<div />').appendTo('body')
var target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'right', viewport: { selector: 'body', padding: 12 }})
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
ok(Math.round(tooltip.offset().top) === 12)
target.bootstrapTooltip('hide')
$('head #test').remove()
})
test('should adjust the tip\'s top when up against the bottom of the viewport', function () {
$('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
var container = $('<div />').appendTo('body')
var target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; bottom: 0px; left: 0px;"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'right', viewport: { selector: 'body', padding: 12 }})
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
ok(Math.round(tooltip.offset().top) === Math.round($(window).height() - 12 - tooltip[0].offsetHeight))
target.bootstrapTooltip('hide')
$('head #test').remove()
})
test('should adjust the tip\'s left when up against the left of the viewport', function () {
$('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
var container = $('<div />').appendTo('body')
var target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'bottom', viewport: { selector: 'body', padding: 12 }})
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
ok(Math.round(tooltip.offset().left) === 12)
target.bootstrapTooltip('hide')
$('head #test').remove()
})
test('should adjust the tip\'s left when up against the right of the viewport', function () {
$('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
var container = $('<div />').appendTo('body')
var target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; right: 0px;"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'bottom', viewport: { selector: 'body', padding: 12 }})
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
ok(Math.round(tooltip.offset().left) === Math.round($(window).width() - 12 - tooltip[0].offsetWidth))
target.bootstrapTooltip('hide')
$('head #test').remove()
})
test('should adjust the tip when up against the right of an arbitrary viewport', function () {
$('head').append('<style id="test"> .tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
$('head').append('<style id="viewport-style"> .container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; } </style>')
var container = $('<div />', { 'class': 'container-viewport' }).appendTo('body')
var target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 50px; left: 350px;"></a>')
.appendTo(container)
.bootstrapTooltip({ placement: 'bottom', viewport: '.container-viewport' })
.bootstrapTooltip('show')
var tooltip = container.find('.tooltip')
ok(Math.round(tooltip.offset().left) === Math.round(60 + container.width() - tooltip[0].offsetWidth))
target.bootstrapTooltip('hide')
$('head #test').remove()
$('head #viewport-style').remove()
})
test('should not error when trying to show an auto-placed tooltip that has been removed from the dom', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').appendTo('#qunit-fixture')
tooltip
.one('show.bs.tooltip', function () {
tooltip.remove()
})
.bootstrapTooltip({ placement: 'auto' })
var passed = true
try {
tooltip.bootstrapTooltip('show')
}
catch (err) {
passed = false
console.log(err)
}
ok(passed, '.tooltip(\'show\') should not throw an error in this case')
try {
tooltip.remove()
}
catch (err) {
// tooltip may have already been removed
}
})
})

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,238 @@
<!DOCTYPE html>
<html>
<head>
<title>Affix</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
<style>
/* Test Styles */
.affix {
top: 10px;
}
.affix-bottom {
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header js-page-header">
<h1>Affix <small>Bootstrap Visual Test</small></h1>
</div>
<div class="col-md-3">
<ul class="list-group js-affixed-element">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Porta ac consectetur ac</li>
</ul>
</div>
<div class="col-md-9">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="col-md-12 js-footer">
<hr>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../affix.js"></script>
<!-- JavaScript Test -->
<script>
$(function () {
$('.js-affixed-element').affix({
offset: {
top: $('.js-page-header').outerHeight(true) - 10
, bottom: $('.js-footer').outerHeight(true) + 10
}
})
// todo(fat): sux you have to do this.
.on('affix.bs.affix', function (e) {
$(e.target).width(e.target.offsetWidth)
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Alert</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Alert <small>Bootstrap Visual Test</small></h1>
</div>
<div class="alert alert-warning fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../alert.js"></script>
</body>
</html>

View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Button <small>Bootstrap Visual Test</small></h1>
</div>
<button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button">
Loading state
</button>
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> checkbox 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> checkbox 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../button.js"></script>
<!-- JavaScript Test -->
<script>
$(function () {
$('.js-loading-button').on('click', function () {
var btn = $(this).button('loading')
setTimeout(function (){
btn.button('reset')
}, 3000)
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Carousel <small>Bootstrap Visual Test</small></h1>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
</div>
<div class="item">
<img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
</div>
<div class="item">
<img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../carousel.js"></script>
</body>
</html>

View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Collapse</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Collapse <small>Bootstrap Visual Test</small></h1>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../collapse.js"></script>
</body>
</html>

View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example-js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="collapse navbar-collapse example-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../dropdown.js"></script>
</body>
</html>

View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<title>Modal</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Modal <small>Bootstrap Visual Test</small></h1>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default js-popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="js-tooltip" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../modal.js"></script>
<script src="../../tooltip.js"></script>
<script src="../../popover.js"></script>
<!-- JavaScript Test -->
<script>
$(function () {
$('.js-popover').popover()
$('.js-tooltip').tooltip()
})
</script>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Popover</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Popover <small>Bootstrap Visual Test</small></h1>
</div>
<button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
Popover on left
</button>
<button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
Popover on top
</button>
<button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
Popover on bottom
</button>
<button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
Popover on right
</button>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../tooltip.js"></script>
<script src="../../popover.js"></script>
<!-- JavaScript Test -->
<script>
$(function () {
$('.js-popover').popover()
})
</script>
</body>
</html>

View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<title>Scrollspy</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
<style type="text/css">
body { padding-top: 70px; }
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="70">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="collapse navbar-collapse js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class=""><a href="#fat">@fat</a></li>
<li class=""><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li class=""><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h2 id="fat">@fat</h2>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr>
<h2 id="mdo">@mdo</h2>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr>
<h2 id="one">one</h2>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr>
<h2 id="two">two</h2>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr>
<h2 id="three">three</h2>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</p>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../scrollspy.js"></script>
<script src="../../dropdown.js"></script>
<script src="../../collapse.js"></script>
</body>
</html>

View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Tab</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
<style type="text/css">
.nav-tabs {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Tab <small>Bootstrap Visual Test</small></h1>
</div>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../tab.js"></script>
<script src="../../dropdown.js"></script>
</body>
</html>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Tooltip <small>Bootstrap Visual Test</small></h1>
</div>
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
<hr>
<p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</p>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../tooltip.js"></script>
<!-- JavaScript Test -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>

View File

@ -0,0 +1,457 @@
/* ========================================================================
* Bootstrap: tooltip.js v3.2.0
* http://getbootstrap.com/javascript/#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// TOOLTIP PUBLIC CLASS DEFINITION
// ===============================
var Tooltip = function (element, options) {
this.type =
this.options =
this.enabled =
this.timeout =
this.hoverState =
this.$element = null
this.init('tooltip', element, options)
}
Tooltip.VERSION = '3.2.0'
Tooltip.DEFAULTS = {
animation: true,
placement: 'top',
selector: false,
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
viewport: {
selector: 'body',
padding: 0
}
}
Tooltip.prototype.init = function (type, element, options) {
this.enabled = true
this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
var triggers = this.options.trigger.split(' ')
for (var i = triggers.length; i--;) {
var trigger = triggers[i]
if (trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (trigger != 'manual') {
var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
}
}
this.options.selector ?
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
this.fixTitle()
}
Tooltip.prototype.getDefaults = function () {
return Tooltip.DEFAULTS
}
Tooltip.prototype.getOptions = function (options) {
options = $.extend({}, this.getDefaults(), this.$element.data(), options)
if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay,
hide: options.delay
}
}
return options
}
Tooltip.prototype.getDelegateOptions = function () {
var options = {}
var defaults = this.getDefaults()
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
})
return options
}
Tooltip.prototype.enter = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show()
self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
var inDom = $.contains(document.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
var $tip = this.tip()
var tipId = this.getUID(this.type)
this.setContent()
$tip.attr('id', tipId)
this.$element.attr('aria-describedby', tipId)
if (this.options.animation) $tip.addClass('fade')
var placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
var autoToken = /\s?auto?\s?/i
var autoPlace = autoToken.test(placement)
if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
var pos = this.getPosition()
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
var orgPlacement = placement
var $parent = this.$element.parent()
var parentDim = this.getPosition($parent)
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
placement == 'top' && pos.top - parentDim.scroll - actualHeight < 0 ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' :
placement
$tip
.removeClass(orgPlacement)
.addClass(placement)
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
var complete = function () {
that.$element.trigger('shown.bs.' + that.type)
that.hoverState = null
}
$.support.transition && this.$tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(150) :
complete()
}
}
Tooltip.prototype.applyPlacement = function (offset, placement) {
var $tip = this.tip()
var width = $tip[0].offsetWidth
var height = $tip[0].offsetHeight
// manually read margins because getBoundingClientRect includes difference
var marginTop = parseInt($tip.css('margin-top'), 10)
var marginLeft = parseInt($tip.css('margin-left'), 10)
// we must check for NaN for ie 8/9
if (isNaN(marginTop)) marginTop = 0
if (isNaN(marginLeft)) marginLeft = 0
offset.top = offset.top + marginTop
offset.left = offset.left + marginLeft
// $.fn.offset doesn't round pixel values
// so we use setOffset directly with our own function B-0
$.offset.setOffset($tip[0], $.extend({
using: function (props) {
$tip.css({
top: Math.round(props.top),
left: Math.round(props.left)
})
}
}, offset), 0)
$tip.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (placement == 'top' && actualHeight != height) {
offset.top = offset.top + height - actualHeight
}
var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
if (delta.left) offset.left += delta.left
else offset.top += delta.top
var arrowDelta = delta.left ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
var arrowPosition = delta.left ? 'left' : 'top'
var arrowOffsetPosition = delta.left ? 'offsetWidth' : 'offsetHeight'
$tip.offset(offset)
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition)
}
Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '')
}
Tooltip.prototype.setContent = function () {
var $tip = this.tip()
var title = this.getTitle()
$tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
$tip.removeClass('fade in top bottom left right')
}
Tooltip.prototype.hide = function () {
var that = this
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
this.$element.removeAttr('aria-describedby')
function complete() {
if (that.hoverState != 'in') $tip.detach()
that.$element.trigger('hidden.bs.' + that.type)
}
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$tip.removeClass('in')
$.support.transition && this.$tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(150) :
complete()
this.hoverState = null
return this
}
Tooltip.prototype.fixTitle = function () {
var $e = this.$element
if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
}
}
Tooltip.prototype.hasContent = function () {
return this.getTitle()
}
Tooltip.prototype.getPosition = function ($element) {
$element = $element || this.$element
var el = $element[0]
var isBody = el.tagName == 'BODY'
return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : null, {
scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop(),
width: isBody ? $(window).width() : $element.outerWidth(),
height: isBody ? $(window).height() : $element.outerHeight()
}, isBody ? { top: 0, left: 0 } : $element.offset())
}
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
var delta = { top: 0, left: 0 }
if (!this.$viewport) return delta
var viewportPadding = this.options.viewport && this.options.viewport.padding || 0
var viewportDimensions = this.getPosition(this.$viewport)
if (/right|left/.test(placement)) {
var topEdgeOffset = pos.top - viewportPadding - viewportDimensions.scroll
var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
if (topEdgeOffset < viewportDimensions.top) { // top overflow
delta.top = viewportDimensions.top - topEdgeOffset
} else if (bottomEdgeOffset > viewportDimensions.top + viewportDimensions.height) { // bottom overflow
delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
}
} else {
var leftEdgeOffset = pos.left - viewportPadding
var rightEdgeOffset = pos.left + viewportPadding + actualWidth
if (leftEdgeOffset < viewportDimensions.left) { // left overflow
delta.left = viewportDimensions.left - leftEdgeOffset
} else if (rightEdgeOffset > viewportDimensions.width) { // right overflow
delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
}
}
return delta
}
Tooltip.prototype.getTitle = function () {
var title
var $e = this.$element
var o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
Tooltip.prototype.getUID = function (prefix) {
do prefix += ~~(Math.random() * 1000000)
while (document.getElementById(prefix))
return prefix
}
Tooltip.prototype.tip = function () {
return (this.$tip = this.$tip || $(this.options.template))
}
Tooltip.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
}
Tooltip.prototype.validate = function () {
if (!this.$element[0].parentNode) {
this.hide()
this.$element = null
this.options = null
}
}
Tooltip.prototype.enable = function () {
this.enabled = true
}
Tooltip.prototype.disable = function () {
this.enabled = false
}
Tooltip.prototype.toggleEnabled = function () {
this.enabled = !this.enabled
}
Tooltip.prototype.toggle = function (e) {
var self = this
if (e) {
self = $(e.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(e.currentTarget, this.getDelegateOptions())
$(e.currentTarget).data('bs.' + this.type, self)
}
}
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
Tooltip.prototype.destroy = function () {
clearTimeout(this.timeout)
this.hide().$element.off('.' + this.type).removeData('bs.' + this.type)
}
// TOOLTIP PLUGIN DEFINITION
// =========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option
if (!data && option == 'destroy') return
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.tooltip
$.fn.tooltip = Plugin
$.fn.tooltip.Constructor = Tooltip
// TOOLTIP NO CONFLICT
// ===================
$.fn.tooltip.noConflict = function () {
$.fn.tooltip = old
return this
}
}(jQuery);

View File

@ -0,0 +1,59 @@
/* ========================================================================
* Bootstrap: transition.js v3.2.0
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
}(jQuery);

View File

@ -0,0 +1,68 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

View File

@ -0,0 +1,55 @@
//
// Badges
// --------------------------------------------------
// Base class
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
border-radius: @badge-border-radius;
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for badges in buttons
.btn & {
position: relative;
top: -1px;
}
.btn-xs & {
top: 0;
padding: 1px 5px;
}
// Hover state, but only for links
a& {
&:hover,
&:focus {
color: @badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Account for badges in navs
a.list-group-item.active > &,
.nav-pills > .active > a > & {
color: @badge-active-color;
background-color: @badge-active-bg;
}
.nav-pills > li > a > & {
margin-left: 3px;
}
}

View File

@ -0,0 +1,50 @@
// Core variables and mixins
@import "variables";
@import "mixins";
// Reset and dependencies
@import "normalize";
@import "print";
@import "glyphicons";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "component-animations";
@import "dropdowns";
@import "button-groups";
@import "input-groups";
@import "navs";
@import "navbar";
@import "breadcrumbs";
@import "pagination";
@import "pager";
@import "labels";
@import "badges";
@import "jumbotron";
@import "thumbnails";
@import "alerts";
@import "progress-bars";
@import "media";
@import "list-group";
@import "panels";
@import "responsive-embed";
@import "wells";
@import "close";
// Components w/ JavaScript
@import "modals";
@import "tooltip";
@import "popovers";
@import "carousel";
// Utility classes
@import "utilities";
@import "responsive-utilities";

View File

@ -0,0 +1,26 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
border-radius: @border-radius-base;
> li {
display: inline-block;
+ li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
}
}
> .active {
color: @breadcrumb-active-color;
}
}

View File

@ -0,0 +1,240 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: 0;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: 5px;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); }
.btn-group-sm > .btn { &:extend(.btn-sm); }
.btn-group-lg > .btn { &:extend(.btn-lg); }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
.box-shadow(none);
}
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
> .btn-group .dropdown-menu {
left: auto;
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot
// use `display: none;` or `visibility: hidden;` as that also hides the popover.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 for more.
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
position: absolute;
z-index: -1;
.opacity(0);
}

View File

@ -0,0 +1,157 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
.user-select(none);
&,
&:active,
&.active {
&:focus {
.tab-focus();
}
}
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: @link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

View File

@ -0,0 +1,243 @@
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
line-height: 1;
}
}
> .active,
> .next,
> .prev {
display: block;
}
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
outline: 0;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
}
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
font-family: serif;
}
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
}
.active {
margin: 0;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
}
}
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicon-chevron-left,
.glyphicon-chevron-right,
.icon-prev,
.icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.glyphicon-chevron-left,
.icon-prev {
margin-left: -15px;
}
.glyphicon-chevron-right,
.icon-next {
margin-right: -15px;
}
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}

View File

@ -0,0 +1,33 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.2);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(.5);
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button& {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
}

View File

@ -0,0 +1,68 @@
//
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: @font-family-monospace;
}
// Inline code
code {
padding: 2px 4px;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
}
// User input typically entered via keyboard
kbd {
padding: 2px 4px;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
kbd {
padding: 0;
font-size: 100%;
box-shadow: none;
}
}
// Blocks of code
pre {
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}

View File

@ -0,0 +1,31 @@
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in { display: block; }
tr&.in { display: table-row; }
tbody&.in { display: table-row-group; }
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
}

View File

@ -0,0 +1,215 @@
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// The dropdown wrapper (div)
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: not-allowed;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-small;
line-height: @line-height-base;
color: @dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}

View File

@ -0,0 +1,540 @@
//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
label {
display: inline-block;
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: 5px;
font-weight: bold;
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; // IE8-9
line-height: normal;
}
// Set the height of file controls to match text inputs
input[type="file"] {
display: block;
}
// Make range inputs behave like textual form controls
input[type="range"] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Adjust output element
output {
display: block;
padding-top: (@padding-base-vertical + 1);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
}
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
// Placeholder
.placeholder();
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
-webkit-appearance: none;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned.
// As a workaround, we set a pixel line-height that matches the
// given height of the input. Since this fucks up everything else, we have to
// appropriately reset it for Internet Explorer and the size variations.
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
&.input-sm {
line-height: @input-height-small;
}
&.input-lg {
line-height: @input-height-large;
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: 15px;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
position: relative;
display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
label {
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: not-allowed;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: not-allowed;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: not-allowed;
}
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
// Size it appropriately next to real form controls
padding-top: (@padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
&.input-lg,
&.input-sm {
padding-left: 0;
padding-right: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.has-feedback {
// Enable absolute positioning
position: relative;
// Ensure icons don't overlap text
.form-control {
padding-right: (@input-height-base * 1.25);
}
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
}
.input-lg + .form-control-feedback {
width: @input-height-large;
height: @input-height-large;
line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
width: @input-height-small;
height: @input-height-small;
line-height: @input-height-small;
}
// Feedback states
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Reposition feedback icon if label is hidden with "screenreader only" state
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
.control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
label {
padding-left: 0;
}
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: (@line-height-computed + (@padding-base-vertical + 1));
}
// Make form groups behave like rows
.form-group {
.make-row();
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
right: (@grid-gutter-width / 2);
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
}
}
.form-control {
&:extend(.input-lg);
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@padding-small-vertical + 1);
}
}
.form-control {
&:extend(.input-sm);
}
}
}

View File

@ -0,0 +1,233 @@
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }

View File

@ -0,0 +1,84 @@
//
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
.container-fixed();
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
.make-row();
}
// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}

View File

@ -0,0 +1,166 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
// Sizing
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
margin-left: -1px;
}
}
}

View File

@ -0,0 +1,48 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1,
.h1 {
color: @jumbotron-heading-color;
}
p {
margin-bottom: (@jumbotron-padding / 2);
font-size: @jumbotron-font-size;
font-weight: 200;
}
> hr {
border-top-color: darken(@jumbotron-bg, 10%);
}
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
.container {
max-width: 100%;
}
@media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1,
.h1 {
font-size: (@font-size-base * 4.5);
}
}
}

View File

@ -0,0 +1,64 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: @label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
// Add hover effects, but only for links
a& {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: -1px;
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
}
.label-primary {
.label-variant(@label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
}

View File

@ -0,0 +1,131 @@
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
}
// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
color: @list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
color: @list-group-link-hover-color;
background-color: @list-group-hover-bg;
}
}
.list-group-item {
// Disabled state
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
}
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

View File

@ -0,0 +1,56 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media {
> .pull-left {
margin-right: 10px;
}
> .pull-right {
margin-left: 10px;
}
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

Some files were not shown because too many files have changed in this diff Show More