[ADD] doc: new documentation, with training tutorials, and new scaffolding
This commit is contained in:
parent
97256fa1fb
commit
2ad092b5e5
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
@ -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.
|
||||
|
|
@ -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.
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
|
|
@ -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.
|
|
@ -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
|
||||
|
|
@ -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
|
|
@ -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
|
|
@ -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).
|
|
@ -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|
|
||||
+-------+-------+-----------+-----------+-------+-------+
|
|
@ -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>
|
|
@ -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
|
|
@ -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).
|
|
@ -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.
|
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 |
|
@ -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 |
|
@ -1,19 +0,0 @@
|
|||
Short description of the issue
|
||||
|
||||
***Impacted versions:***
|
||||
|
||||
-
|
||||
|
||||
***Steps to reproduce:***
|
||||
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
***Current behavior:***
|
||||
|
||||
-
|
||||
|
||||
***Expected behavior:***
|
||||
|
||||
-
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,3 +0,0 @@
|
|||
*.pyc
|
||||
*.pyo
|
||||
.DS_Store
|
|
@ -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)
|
|
@ -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')
|
|
@ -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),
|
||||
}
|
|
@ -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 %}© <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
|
||||
{%- else %}
|
||||
{% trans copyright=copyright|e %}© 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 %}
|
|
@ -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
|
|
@ -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.
|
@ -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');
|
||||
});
|
||||
});
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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>
|
|
@ -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)
|
||||
})
|
||||
})
|
|
@ -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')
|
||||
})
|
||||
|
||||
})
|
|
@ -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')
|
||||
})
|
||||
|
||||
})
|
|
@ -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">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</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')
|
||||
})
|
||||
})
|
|
@ -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()
|
||||
})
|
||||
|
||||
})
|
|
@ -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()
|
||||
})
|
||||
|
||||
})
|
|
@ -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()
|
||||
})
|
||||
})
|
|
@ -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 don’t 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)
|
||||
}
|
||||
|
||||
}())
|
|
@ -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')
|
||||
})
|
||||
|
||||
})
|
|
@ -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);
|
||||
})
|
||||
})
|
|
@ -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')
|
||||
})
|
||||
|
||||
})
|
|
@ -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
|
@ -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>
|
|
@ -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">×</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">×</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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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">×</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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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";
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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%;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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"; } }
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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
Loading…
Reference in New Issue