Commit de0428e0 authored by Aaron Boushley's avatar Aaron Boushley

Merge branch 'master' into backbone

parents 0e7aaa15 45b8f759
todomvc.com
\ No newline at end of file
......@@ -20,6 +20,7 @@ To help solve this problem, TodoMVC was created - a project which offers the sam
- KnockoutJS (MVVM)
- Knockback.js
- Dojo
- Closure
- YUILibrary
- AngularJS
- Angular + PersistenceJS
......@@ -62,8 +63,3 @@ Whilst we enjoy implementing and improving existing Todo apps, we're always inte
If you have an implementation you would like to show us or a patch you would like to send upstream, please feel free to send through a pull request. One of us will be happy to review them and discuss any changes that may be required before they can be included.
Note that due to the current number of MVC/MVVM/MV* frameworks in circulation at the moment, it's not always possible to include each one in TodoMVC, but we'll definitely discuss the merits of any framework prior to making a decision. We hope you understand :)
\ No newline at end of file
## Next release
The target release timeline for TodoMVC 0.3 is late-Feb 2012.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<title>Closure</title>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="todoapp">
<div class="title">
<h1>Todos</h1>
</div>
<div class="content">
<div id="create-todo">
<input id="new-todo"
placeholder="What needs to be done?" type="text" /> <span
class="ui-tooltip-top" style="display: none;">Press Enter to
save this task</span>
</div>
<div id="todos">
<ul id="todo-list">
</ul>
</div>
<div id="todo-stats">
</div>
</div>
</div>
<ul id="instructions">
<li>Click to edit a todo.</li>
</ul>
<div id="credits">
Created by <br /> <a href="http://jgn.me/">J&eacute;r&ocirc;me
Gravel-Niquet</a> <br /> Modified to use Closure by <a
href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</a>
</div>
<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > web/compiled.js) -->
<script type="text/javascript" src="js/compiled.js"></script>
<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script> -->
<!-- The COMPILED development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script> -->
</body>
</html>
This diff is collapsed.
goog.require('goog.array');
goog.require('goog.events.EventType');
goog.require('goog.events.KeyCodes');
goog.require('goog.ui.Component');
goog.require('goog.ui.Control');
goog.require('todomvc.model.ToDoItem');
goog.require('todomvc.view');
goog.require('todomvc.view.ClearCompletedControlRenderer');
goog.require('todomvc.view.ItemCountControlRenderer');
goog.require('todomvc.view.ToDoItemControl');
goog.require('todomvc.view.ToDoListContainer');
/**
* @fileoverview The controller/business logic for the application.
*
* This file creates the interface and marshalls changes from the interface to the model and back.
*/
/**
* @type {Array.<todomvc.model.ToDoItem>}
*/
var items = [];
/**
* @type {Element}
*/
var todoStats = document.getElementById('todo-stats');
/**
* @type {goog.ui.Control}
*/
var itemCountControl = new goog.ui.Control(null, todomvc.view.ItemCountControlRenderer.getInstance());
itemCountControl.render(todoStats);
/**
* @type {goog.ui.Control}
*/
var clearCompletedControl = new goog.ui.Control(null, todomvc.view.ClearCompletedControlRenderer.getInstance());
clearCompletedControl.render(todoStats);
goog.events.listen(clearCompletedControl, goog.ui.Component.EventType.ACTION, function(e) {
// go backwards to avoid collection modification problems
goog.array.forEachRight(items, function(model) {
if (model.isDone()) {
goog.array.remove(items, model);
// do optimised model view sync
container.forEachChild(function(control) {
if (control.getModel() === model) {
container.removeChild(control, true);
}
});
}
});
updateStats();
});
function updateStats() {
var doneCount = goog.array.reduce(items, function(count, model) {
return model.isDone() ? count + 1 : count;
}, 0);
var remainingCount = items.length - (/**@type {number}*/ doneCount);
itemCountControl.setContent((/**@type {string}*/ remainingCount));
itemCountControl.setVisible(remainingCount > 0);
clearCompletedControl.setContent((/**@type {string}*/ doneCount));
clearCompletedControl.setVisible((/**@type {number}*/ doneCount) > 0);
}
updateStats();
/**
* @type {todomvc.view.ToDoListContainer}
*/
var container = new todomvc.view.ToDoListContainer();
container.decorate(document.getElementById('todo-list'));
goog.events.listen(container, todomvc.view.ToDoItemControl.EventType.EDIT, function(e) {
/**
* @type {todomvc.view.ToDoItemControl}
*/
var control = e.target;
/**
* @type {todomvc.model.ToDoItem}
*/
var model = (/**@type {todomvc.model.ToDoItem} */ control.getModel());
// do optimised model view sync
model.setNote((/**@type {!string} */ control.getContent()));
model.setDone((/**@type {!boolean} */ control.isChecked()));
updateStats();
});
goog.events.listen(container, todomvc.view.ToDoItemControl.EventType.DESTROY, function(e) {
/**
* @type {todomvc.view.ToDoItemControl}
*/
var control = e.target;
/**
* @type {todomvc.model.ToDoItem}
*/
var model = (/**@type {todomvc.model.ToDoItem} */ control.getModel());
// do optimised model view sync
goog.array.remove(items, model);
container.removeChild(control, true);
updateStats();
});
/**
* @type {Element}
*/
var newToDo = document.getElementById('new-todo');
goog.events.listen(newToDo, goog.events.EventType.KEYUP, function(e) {
if (e.keyCode === goog.events.KeyCodes.ENTER) {
/**
* @type {todomvc.model.ToDoItem}
*/
var model = new todomvc.model.ToDoItem(newToDo.value);
/**
* @type {todomvc.view.ToDoItemControl}
*/
var control = new todomvc.view.ToDoItemControl();
// do optimised model view sync
items.push(model);
control.setContent(model.getNote());
control.setChecked(model.isDone());
control.setModel(model);
container.addChild(control, true);
// clear the input box
newToDo.value = '';
updateStats();
}
});
\ No newline at end of file
goog.provide('todomvc.model.ToDoItem');
/**
* The model object representing a todo item.
*
* @param {!string} note the text associated with this item
* @param {!boolean=} opt_done is this item complete? defaults to false
* @constructor
*/
todomvc.model.ToDoItem = function(note, opt_done) {
/**
* note the text associated with this item
* @private
* @type {!string}
*/
this.note_ = note;
/**
* is this item complete?
* @private
* @type {!boolean}
*/
this.done_ = opt_done || false;
};
/**
* @return {!string} the text associated with this item
*/
todomvc.model.ToDoItem.prototype.getNote = function() {
return this.note_;
};
/**
* @return {!boolean} is this item complete?
*/
todomvc.model.ToDoItem.prototype.isDone = function() {
return this.done_;
};
/**
* @param {!string} note the text associated with this item
*/
todomvc.model.ToDoItem.prototype.setNote = function(note) {
this.note_ = note;
};
/**
* @param {!boolean} done is this item complete?
*/
todomvc.model.ToDoItem.prototype.setDone = function(done) {
this.done_ = done;
};
\ No newline at end of file
goog.provide('todomvc.view.ClearCompletedControlRenderer');
goog.require('goog.dom');
goog.require('goog.ui.Component.State');
goog.require('goog.ui.ControlRenderer');
/**
* A renderer for the clear completed control.
*
* @constructor
* @extends {goog.ui.ControlRenderer}
*/
todomvc.view.ClearCompletedControlRenderer = function() {
goog.ui.ControlRenderer.call(this);
};
goog.inherits(todomvc.view.ClearCompletedControlRenderer, goog.ui.ControlRenderer);
// add getInstance method to todomvc.view.ClearCompletedControlRenderer
goog.addSingletonGetter(todomvc.view.ClearCompletedControlRenderer);
/**
* @param {goog.ui.Control} control Control to render.
* @return {Element} Root element for the control.
*/
todomvc.view.ClearCompletedControlRenderer.prototype.createDom = function(control) {
var html = todomvc.view.clearCompleted({
number : control.getContent()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
this.setAriaStates(control, element);
return element;
};
/**
* @param {Element} element Element to decorate.
* @return {boolean} Whether the renderer can decorate the element.
*/
todomvc.view.ClearCompletedControlRenderer.prototype.canDecorate = function(element) {
return false;
};
/**
* @param {Element} element Element to populate.
* @param {goog.ui.ControlContent} content Text caption or DOM
*/
todomvc.view.ClearCompletedControlRenderer.prototype.setContent = function(element, content) {
element.innerHTML = todomvc.view.clearCompletedInner({
number : content
});
};
/**
* Updates the appearance of the control in response to a state change.
*
* @param {goog.ui.Control} control Control instance to update.
* @param {goog.ui.Component.State} state State to enable or disable.
* @param {boolean} enable Whether the control is entering or exiting the state.
*/
todomvc.view.ClearCompletedControlRenderer.prototype.setState = function(control, state, enable) {
var element = control.getElement();
if (element) {
this.updateAriaState(element, state, enable);
}
};
goog.provide('todomvc.view.ItemCountControlRenderer');
goog.require('goog.dom');
goog.require('goog.ui.Component.State');
goog.require('goog.ui.ControlRenderer');
/**
* A renderer for the item count control.
*
* @constructor
* @extends {goog.ui.ControlRenderer}
*/
todomvc.view.ItemCountControlRenderer = function() {
goog.ui.ControlRenderer.call(this);
};
goog.inherits(todomvc.view.ItemCountControlRenderer, goog.ui.ControlRenderer);
// add getInstance method to todomvc.view.ItemCountControlRenderer
goog.addSingletonGetter(todomvc.view.ItemCountControlRenderer);
/**
* @param {goog.ui.Control} control Control to render.
* @return {Element} Root element for the control.
*/
todomvc.view.ItemCountControlRenderer.prototype.createDom = function(control) {
var html = todomvc.view.itemCount({
number : control.getContent()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
this.setAriaStates(control, element);
return element;
};
/**
* @param {Element} element Element to decorate.
* @return {boolean} Whether the renderer can decorate the element.
*/
todomvc.view.ItemCountControlRenderer.prototype.canDecorate = function(element) {
return false;
};
/**
* @param {Element} element Element to populate.
* @param {goog.ui.ControlContent} content Text caption or DOM
*/
todomvc.view.ItemCountControlRenderer.prototype.setContent = function(element, content) {
element.innerHTML = todomvc.view.itemCountInner({
number : content
});
};
/**
* Updates the appearance of the control in response to a state change.
*
* @param {goog.ui.Control} control Control instance to update.
* @param {goog.ui.Component.State} state State to enable or disable.
* @param {boolean} enable Whether the control is entering or exiting the state.
*/
todomvc.view.ItemCountControlRenderer.prototype.setState = function(control, state, enable) {
var element = control.getElement();
if (element) {
this.updateAriaState(element, state, enable);
}
};
goog.provide('todomvc.view.ToDoItemControl');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.ui.Component.State');
goog.require('goog.ui.Control');
goog.require('todomvc.view.ToDoItemControlRenderer');
/**
* A control representing each item in the todo list. It makes use of the CHECKED and SELECTED states to represent being
* done and being in edit mode.
*
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for document interaction.
* @constructor
* @extends {goog.ui.Control}
*/
todomvc.view.ToDoItemControl = function(opt_domHelper) {
goog.ui.Control.call(this, "", todomvc.view.ToDoItemControlRenderer
.getInstance(), opt_domHelper);
// enable CHECKED and SELECTED states
this.setSupportedState(goog.ui.Component.State.CHECKED, true);
this.setSupportedState(goog.ui.Component.State.SELECTED, true);
// disable auto handling of CHECKED and SELECTED states
this.setAutoStates(goog.ui.Component.State.CHECKED, false);
this.setAutoStates(goog.ui.Component.State.SELECTED, false);
// allow text selection within this control
this.setAllowTextSelection(true);
};
goog.inherits(todomvc.view.ToDoItemControl, goog.ui.Control);
todomvc.view.ToDoItemControl.EventType = {
EDIT: "edit",
DESTROY: "destroy"
};
/**
* Configures the component after its DOM has been rendered, and sets up event
* handling. Overrides {@link goog.ui.Component#enterDocument}.
*
* @override
*/
todomvc.view.ToDoItemControl.prototype.enterDocument = function() {
todomvc.view.ToDoItemControl.superClass_.enterDocument.call(this);
// prevent clicking the checkbox (or anything within the root element)
// from having any default behaviour. This stops the checkbox being set
// by the browser.
this.getHandler().listen(this.getElement(), goog.events.EventType.CLICK,
function(e) {
e.preventDefault();
});
};
/**
* Returns the renderer used by this component to render itself or to decorate
* an existing element.
*
* @return {todomvc.view.ToDoItemControlRenderer} Renderer used by the component
*/
todomvc.view.ToDoItemControl.prototype.getRenderer = function() {
return (/**@type {todomvc.view.ToDoItemControlRenderer}*/ this.renderer_);
};
/**
* Specialised handling of mouse events when clicking on the checkbox, label,
* textbox or remove link.
*
* @param {goog.events.Event} e Mouse event to handle.
*/
todomvc.view.ToDoItemControl.prototype.handleMouseUp = function(e) {
todomvc.view.ToDoItemControl.superClass_.handleMouseUp.call(this, e);
if (this.isEnabled()) {
if (e.target === this.getRenderer().getCheckboxElement(
this.getElement())) {
this.setChecked(!this.isChecked());
this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.EDIT);
} else if (e.target === this.getRenderer().getDestroyElement(
this.getElement())) {
this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.DESTROY);
} else if (!this.isSelected()) {
this.setSelected(true);
}
}
};
/**
* Override the behaviour when the control is unfocused.
* @param {boolean} focused
*/
todomvc.view.ToDoItemControl.prototype.setFocused = function(focused) {
todomvc.view.ToDoItemControl.superClass_.setFocused.call(this, focused);
if (!focused && this.isSelected()) {
/**
* @type {Element}
*/
var inputElement = this.getRenderer().getInputElement(
this.getElement());
this.setContent(inputElement.value);
this.setSelected(false);
this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.EDIT);
}
};
/**
* Override the behaviour to switch to editing mode when the control is selected
* @param {boolean} selected
*/
todomvc.view.ToDoItemControl.prototype.setSelected = function(selected) {
todomvc.view.ToDoItemControl.superClass_.setSelected.call(this, selected);
if (selected) {
/**
* @type {Element}
*/
var inputElement = this.getRenderer().getInputElement(
this.getElement());
inputElement.value = this.getContent();
inputElement.focus();
}
};
\ No newline at end of file
goog.provide('todomvc.view.ToDoItemControlRenderer');
goog.require('goog.ui.Component.State');
goog.require('goog.ui.ControlRenderer');
/**
* The renderer for the ToDoItemControl which has knowledge of the DOM structure of the Control and the applicable CSS
* classes.
*
* @constructor
* @extends {goog.ui.ControlRenderer}
*/
todomvc.view.ToDoItemControlRenderer = function() {
goog.ui.ControlRenderer.call(this);
};
goog.inherits(todomvc.view.ToDoItemControlRenderer, goog.ui.ControlRenderer);
// add getInstance method to todomvc.view.ToDoItemControlRenderer
goog.addSingletonGetter(todomvc.view.ToDoItemControlRenderer);
/**
* @param {goog.ui.Control} control Control to render.
* @return {Element} Root element for the control.
*/
todomvc.view.ToDoItemControlRenderer.prototype.createDom = function(control) {
var html = todomvc.view.toDoItem({
content : control.getContent()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
this.setAriaStates(control, element);
return element;
};
/**
* Updates the appearance of the control in response to a state change.
*
* @param {goog.ui.Control} control Control instance to update.
* @param {goog.ui.Component.State} state State to enable or disable.
* @param {boolean} enable Whether the control is entering or exiting the state.
*/
todomvc.view.ToDoItemControlRenderer.prototype.setState = function(control, state, enable) {
var element = control.getElement();
if (element) {
switch (state) {
case goog.ui.Component.State.CHECKED:
this.enableClassName(control, "done", enable);
this.getCheckboxElement(element).checked = enable;
break;
case goog.ui.Component.State.SELECTED:
this.enableClassName(control, "editing", enable);
break;
}
this.updateAriaState(element, state, enable);
}
};
/**
* Returns the element within the component's DOM that should receive keyboard
* focus (null if none). The default implementation returns the control's root
* element.
* @param {goog.ui.Control} control Control whose key event target is to be
* returned.
* @return {Element} The key event target.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getKeyEventTarget = function(control) {
return this.getInputElement(control.getElement());
};
/**
* Takes the control's root element and returns the display element
*
* @param {Element} element Root element of the control whose display element is
* to be returned.
* @return {Element} The control's display element.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getDisplayElement = function(
element) {
return element ? element.childNodes[0].childNodes[0] : null;
};
/**
* Takes the control's root element and returns the parent element of the
* control's contents.
*
* @param {Element} element Root element of the control whose content element is
* to be returned.
* @return {Element} The control's content element.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getContentElement = function(
element) {
return element ? this.getDisplayElement(element).childNodes[1] : null;
};
/**
* Takes the control's root element and returns the checkbox element
*
* @param {Element} element Root element of the control whose checkbox element
* is to be returned.
* @return {Element} The control's checkbox element.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getCheckboxElement = function(
element) {
return element ? this.getDisplayElement(element).childNodes[0] : null;
};
/**
* Takes the control's root element and returns the destroy element
*
* @param {Element} element Root element of the control whose destroy element is
* to be returned.
* @return {Element} The control's destroy element.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getDestroyElement = function(
element) {
return element ? this.getDisplayElement(element).childNodes[2] : null;
};
/**
* Takes the control's root element and returns the input element
*
* @param {Element} element Root element of the control whose input element is
* to be returned.
* @return {Element} The control's input element.
*/
todomvc.view.ToDoItemControlRenderer.prototype.getInputElement = function(
element) {
return element ? element.childNodes[0].childNodes[1].childNodes[0] : null;
};
goog.provide('todomvc.view.ToDoListContainer');
goog.require('goog.ui.Container');
goog.require('todomvc.view.ToDoListContainerRenderer');
/**
* A container for the ToDoItemControls, overridden to support keyboard focus on child controls.
*
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for document interaction.
* @constructor
* @extends {goog.ui.Container}
*/
todomvc.view.ToDoListContainer = function(opt_domHelper) {
goog.ui.Container
.call(this, goog.ui.Container.Orientation.VERTICAL,
todomvc.view.ToDoListContainerRenderer.getInstance(),
opt_domHelper);
// allow focus on children
this.setFocusable(false);
this.setFocusableChildrenAllowed(true);
};
goog.inherits(todomvc.view.ToDoListContainer, goog.ui.Container);
/**
* Override this method to allow text selection in children.
*
* @param {goog.events.BrowserEvent} e Mousedown event to handle.
*/
todomvc.view.ToDoListContainer.prototype.handleMouseDown = function(e) {
if (this.enabled_) {
this.setMouseButtonPressed(true);
}
};
\ No newline at end of file
goog.provide('todomvc.view.ToDoListContainerRenderer');
goog.require('goog.ui.Component.State');
goog.require('goog.ui.Container');
goog.require('goog.ui.ContainerRenderer');
/**
* A renderer for the container, overridden to support keyboard focus on child controls.
* @constructor
* @extends {goog.ui.ContainerRenderer}
*/
todomvc.view.ToDoListContainerRenderer = function() {
goog.ui.ContainerRenderer.call(this);
};
goog.inherits(todomvc.view.ToDoListContainerRenderer,
goog.ui.ContainerRenderer);
goog.addSingletonGetter(todomvc.view.ToDoListContainerRenderer);
/**
* @param {Element} element Element to decorate.
* @return {boolean} Whether the renderer can decorate the element.
*/
todomvc.view.ToDoListContainerRenderer.prototype.canDecorate = function(element) {
return element.tagName == 'UL';
};
/**
* Override this method to allow text selection in children
*
* @param {goog.ui.Container} container Container whose DOM is to be initialized
* as it enters the document.
*/
todomvc.view.ToDoListContainerRenderer.prototype.initializeDom = function(container) {
var elem = (/**@type {!Element}*/ container.getElement());
// Set the ARIA role.
var ariaRole = this.getAriaRole();
if (ariaRole) {
goog.dom.a11y.setRole(elem, ariaRole);
}
};
\ No newline at end of file
{namespace todomvc.view}
/**
* A todo list item template
* @param content the label for this item
*/
{template .toDoItem}
<li>
<div>
<div class="display">
<input class="check" type="checkbox" />
<div class="todo-content" style="cursor: pointer;">{$content}</div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text"/>
</div>
</div>
</li>
{/template}
/**
* A todo list item count template
* @param number the count of items
*/
{template .itemCount}
<span class="todo-count">
{call .itemCountInner data="all"/}
</span>
{/template}
/**
* A todo list item count template
* @param number the count of items
*/
{template .itemCountInner}
<span class="number">{$number}</span> <span class="word">{if $number > 1}items{else}item{/if}</span> left.
{/template}
/**
* A todo list clear completed template
* @param number the count of items
*/
{template .clearCompleted}
<span class="todo-clear">
{call .clearCompletedInner data="all"/}
</span>
{/template}
/**
* A todo list clear completed template
* @param number the count of items
*/
{template .clearCompletedInner}
<a href="#">
Clear <span class="number-done">{$number}</span> <span class="word-done">{if $number > 1}items{else}item{/if}</span>
</a>
{/template}
\ No newline at end of file
{
"id" : "todomvc",
"inputs" : "js/main.js",
"paths" : "js/",
"output-wrapper" : "(function(){%output%})();",
"mode" : "ADVANCED",
"define" : {
"goog.LOCALE": "en_GB"
},
"checks": {
// Unfortunately, the Closure Library violates these in many places.
// "accessControls": "ERROR",
// "visibility": "ERROR"
"checkRegExp": "WARNING",
"checkTypes": "WARNING",
"checkVars": "WARNING",
"deprecated": "WARNING",
"fileoverviewTags": "WARNING",
"invalidCasts": "WARNING",
"missingProperties": "WARNING",
"nonStandardJsDocs": "WARNING",
"undefinedVars": "WARNING"
}
}
<!DOCTYPE html>
<html>
<head>
<title>Dojo</title>
<style type="text/css">
@import "./css/claro.css";
</style>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script data-dojo-config="async:true, parseOnLoad:true, paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
</head>
<body class="claro">
<!-- Todo App Interface -->
<div id="todoapp">
<div class="title">
......
......@@ -45,7 +45,7 @@
if (e.keyCode == 13){
var todoContent = $(this).val();
var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
context.partial('templates/_todo.template', todo, function(html) {
context.partial('templates/todo.template', todo, function(html) {
$('#todo-list').append(html);
});
......
html,
body {
margin: 0;
padding: 0;
}
body {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eeeeee;
color: #333333;
width: 520px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
}
#todoapp {
background: #fff;
padding: 20px;
margin-bottom: 40px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#todoapp h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 0 0 10px 0;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#main {
display: none;
}
#todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
}
#todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
width: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li.editing {
border-bottom: none;
margin-top: -1px;
padding: 0;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#todo-list li.editing .edit {
display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .view label {
word-break: break-word;
}
#todo-list li .edit {
display: none;
}
#todoapp footer {
display: none;
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 37px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#clear-completed {
display: none;
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
#clear-completed:active {
position: relative;
top: 1px;
}
#todo-count span {
font-weight: bold;
}
#instructions {
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
#credits {
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
<a class="brand" href="http://github.com/addyosmani/todomvc">TodoMVC</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="http://github.com/addyosmani/todomvc/issues/new">Submit New Ticket</a></li>
</ul>
<p class="pull-right">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/todomvc" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
&nbsp; </p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="sidebar">
<div class="well">
<h5>Examples Included For:</h5>
<ul>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>
<li><a href="http://www.emberjs.com/">Ember.js (SproutCore 2.0)</a></li>
<li><a href="http://javascriptmvc.com/">JavaScriptMVC</a></li>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
<li><a href="http://spinejs.com/">Spine.js</a></li>
<li><a href="http://sammyjs.org/">Sammy.js</a></li>
<li><a href="http://dojotoolkit.org/">Dojo</a></li>
<li><a href="http://developer.yahoo.com/yui/">YUILibrary</a></li>
<li><a href="http://angularjs.org/">AngularJS</a></li>
<li><a href="https://github.com/jgallen23/fidel">Fidel.js</a></li>
<li><a href="http://kmalakoff.github.com/knockback/">Knockback.js</a></li>
<li><a href="https://github.com/brokenseal/broke-client">Broke.js</a></li>
</ul>
<h5>Architecture Examples:</h5>
<ul>
<li><a href="../architecture-examples/angularjs/index.html">AngularJS</a></li>
<li><a href="../architecture-examples/angularjs_persistencejs/index.html">Angular + PersistenceJS</a></li>
<li><a href="../architecture-examples/backbone/index.html">Backbone.js</a></li>
<li><a href="../architecture-examples/broke/index.html">Broke.js</a></li>
<li><a href="../architecture-examples/dojo/index.html">Dojo</a></li>
<li><a href="../architecture-examples/emberjs/index.html">Ember.js</a></li>
<li><a href="../architecture-examples/fidel/index.html">Fidel.js</a></li>
<li><a href="../architecture-examples/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="../architecture-examples/knockback/index.html">Knockback.js</a></li>
<li><a href="../architecture-examples/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="../architecture-examples/spine/index.html">Spine.js</a></li>
<li><a href="../architecture-examples/sammyjs/index.html">Sammy.js</a></li>
<li><a href="../reference-examples/vanillajs/index.html">Vanilla JS</a></li>
<li><a href="../architecture-examples/yuilibrary/index.html">YUILibrary</a></li>
</ul>
<h5>Dependency Examples:</h5>
<ul>
<li><a href="../dependency-examples/backbone_require/index.html">Backbone.js + RequireJS</a></li>
</ul>
<h5>Contributors:</h5>
<ul>
<li><a href="http://twitter.com/addyosmani">Addy Osmani</a></li>
<li><a href="https://github.com/boushley">Aaron Boushley</a></li>
<li><a href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li>
<li><a href="http://twitter.com/justinbmeyer">Justin Meyer</a></li>
<li><a href="http://twitter.com/macmann">Alex MacCaw</a></li>
<li><a href="">Ashish Sharma</a></li>
<li><a href="http://emberjs.com">Tom Dale, Yehuda Katz</a></li>
<li><a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a></li>
<li><a href="http://developer.yahoo.com">The YUI team</a></li>
<li><a href="https://github.com/jacobmumm">Jacob Mumm</a></li>
<li><a href="https://github.com/brokenseal">Davide Callegari</a></li>
<li><a href="https://github.com/kmalakoff">Kevin Malakoff</a></li>
<li><a href="https://twitter.com/ffesseler">Florian Fesseler</a></li>
<li><a href="https://github.com/jthomas">James Thomas</a></li>
<li><a href="https://github.com/sindresorhus">Sindre Sorhus</a></li>
</ul>
</div>
</div>
<div class="content">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>TodoMVC</h1>
<p>A common learning application for popular JavaScript MVC frameworks</p>
<p>
<a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/master">Download (latest)</a> &nbsp;
<a class="btn secondary large" href="http://github.com/addyosmani/todomvc">Follow On GitHub</a>
</p>
</div>
<div class="span12">
<h3>Screenshots</h3>
<p>A preview of the Todo apps included in the download:</p>
<ul class="media-grid">
<li> <a href="#"><img src="images/sproutcore.jpg" alt="SproutCore"></a> </li>
<li> <a href="#"><img src="images/backbone.jpg" alt="Backbone"></a> </li>
<li> <a href="#"><img src="images/yui.jpg" alt="YUILibrary"></a> </li>
</ul>
</div>
<a name="about"></a>
<div class="span12">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js (SproutCore 2.0), JavaScriptMVC..the list of new and stable solutions goes on and on, but just how do you <strong>decide</strong> on which to use in a sea of so many options?.</p>
<p>To help solve this problem, I created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol>
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.2">latest release</a>.</li>
<li>Run TodoMVC on a local server (using <a href="http://www.mamp.info">MAMP</a>, <a href="http://www.wampserver.com/en/">WAMP</a> or another suitable setup). You can then select an app to run using the 'Live demos' link to the left.</li>
<li>Browse through the Todo apps, examine their source and discover which framework you might feel the most comfortable working with.</li>
</ol>
</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Selecting A Framework</h2>
<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to use. </p>
<p>Study the syntax required for defining models, views, controllers and classes (if supported) in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand. </p>
<p>Some developers have also found that creating derivative apps that take the basic list-editing concept further greatly helped them in their selection process, so you may find a similar exercise helpful.</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MVC framework you feel would benefit from being included in TodoMVC? If so, feel free to submit a pull request and we'll be happy to review them further.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
</div>
</div>
<footer>
<p>&copy; TodoMVC, Addy Osmani 2011</p>
</footer>
</div>
</div>
</body>
</html>
/* ==========================================================
* bootstrap-alerts.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ){
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* ALERT CLASS DEFINITION
* ====================== */
var Alert = function ( content, options ) {
this.settings = $.extend({}, $.fn.alert.defaults, options)
this.$element = $(content)
.delegate(this.settings.selector, 'click', this.close)
}
Alert.prototype = {
close: function (e) {
var $element = $(this).parent('.alert-message')
e && e.preventDefault()
$element.removeClass('in')
function removeElement () {
$element.remove()
}
$.support.transition && $element.hasClass('fade') ?
$element.bind(transitionEnd, removeElement) :
removeElement()
}
}
/* ALERT PLUGIN DEFINITION
* ======================= */
$.fn.alert = function ( options ) {
if ( options === true ) {
return this.data('alert')
}
return this.each(function () {
var $this = $(this)
if ( typeof options == 'string' ) {
return $this.data('alert')[options]()
}
$(this).data('alert', new Alert( this, options ))
})
}
$.fn.alert.defaults = {
selector: '.close'
}
$(document).ready(function () {
new Alert($('body'), {
selector: '.alert-message[data-alert] .close'
})
})
}( window.jQuery || window.ender );
\ No newline at end of file
/* ============================================================
* bootstrap-dropdown.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#dropdown
* ============================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function( $ ){
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || d, 'click', function (e) {
var li = $(this).parent('li')
, isActive = li.hasClass('open')
clearMenus()
!isActive && li.toggleClass('open')
return false
})
})
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
var d = 'a.menu, .dropdown-toggle'
function clearMenus() {
$(d).parent('li').removeClass('open')
}
$(function () {
$('html').bind("click", clearMenus)
$('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
})
}( window.jQuery || window.ender );
/* =========================================================
* bootstrap-modal.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ){
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* MODAL PUBLIC CLASS DEFINITION
* ============================= */
var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
.delegate('.close', 'click.modal', $.proxy(this.hide, this))
if ( this.settings.show ) {
this.show()
}
return this
}
Modal.prototype = {
toggle: function () {
return this[!this.isShown ? 'show' : 'hide']()
}
, show: function () {
var that = this
this.isShown = true
this.$element.trigger('show')
escape.call(this)
backdrop.call(this, function () {
var transition = $.support.transition && that.$element.hasClass('fade')
that.$element
.appendTo(document.body)
.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
transition ?
that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
})
return this
}
, hide: function (e) {
e && e.preventDefault()
if ( !this.isShown ) {
return this
}
var that = this
this.isShown = false
escape.call(this)
this.$element
.trigger('hide')
.removeClass('in')
function removeElement () {
that.$element
.hide()
.trigger('hidden')
backdrop.call(that)
}
$.support.transition && this.$element.hasClass('fade') ?
this.$element.one(transitionEnd, removeElement) :
removeElement()
return this
}
}
/* MODAL PRIVATE METHODS
* ===================== */
function backdrop ( callback ) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if ( this.settings.backdrop != 'static' ) {
this.$backdrop.click($.proxy(this.hide, this))
}
if ( doAnimate ) {
this.$backdrop[0].offsetWidth // force reflow
}
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one(transitionEnd, callback) :
callback()
} else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in')
function removeElement() {
that.$backdrop.remove()
that.$backdrop = null
}
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one(transitionEnd, removeElement) :
removeElement()
} else if ( callback ) {
callback()
}
}
function escape() {
var that = this
if ( this.isShown && this.settings.keyboard ) {
$(document).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) {
that.hide()
}
})
} else if ( !this.isShown ) {
$(document).unbind('keyup.modal')
}
}
/* MODAL PLUGIN DEFINITION
* ======================= */
$.fn.modal = function ( options ) {
var modal = this.data('modal')
if (!modal) {
if (typeof options == 'string') {
options = {
show: /show|toggle/.test(options)
}
}
return this.each(function () {
$(this).data('modal', new Modal(this, options))
})
}
if ( options === true ) {
return modal
}
if ( typeof options == 'string' ) {
modal[options]()
} else if ( modal ) {
modal.toggle()
}
return this
}
$.fn.modal.Modal = Modal
$.fn.modal.defaults = {
backdrop: false
, keyboard: false
, show: false
}
/* MODAL DATA- IMPLEMENTATION
* ========================== */
$(document).ready(function () {
$('body').delegate('[data-controls-modal]', 'click', function (e) {
e.preventDefault()
var $this = $(this).data('show', true)
$('#' + $this.attr('data-controls-modal')).modal( $this.data() )
})
})
}( window.jQuery || window.ender );
/* ===========================================================
* bootstrap-popover.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#popover
* ===========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =========================================================== */
!function( $ ) {
var Popover = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
========================================= */
Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
setContent: function () {
var $tip = this.tip()
$tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
$tip[0].className = 'popover'
}
, getContent: function () {
var content
, $e = this.$element
, o = this.options
if (typeof this.options.content == 'string') {
content = $e.attr(o.content)
} else if (typeof this.options.content == 'function') {
content = this.options.content.call(this.$element[0])
}
return content
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="popover" />')
.html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
}
return this.$tip
}
})
/* POPOVER PLUGIN DEFINITION
* ======================= */
$.fn.popover = function (options) {
if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options)
$.fn.twipsy.initWith.call(this, options, Popover, 'popover')
return this
}
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
}( window.jQuery || window.ender );
\ No newline at end of file
/* =============================================================
* bootstrap-scrollspy.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================== */
!function ( $ ) {
var $window = $(window)
function ScrollSpy( topbar, selector ) {
var processScroll = $.proxy(this.processScroll, this)
this.$topbar = $(topbar)
this.selector = selector || 'li > a'
this.refresh()
this.$topbar.delegate(this.selector, 'click', processScroll)
$window.scroll(processScroll)
this.processScroll()
}
ScrollSpy.prototype = {
refresh: function () {
this.targets = this.$topbar.find(this.selector).map(function () {
var href = $(this).attr('href')
return /^#\w/.test(href) && $(href).length ? href : null
})
this.offsets = $.map(this.targets, function (id) {
return $(id).offset().top
})
}
, processScroll: function () {
var scrollTop = $window.scrollTop() + 10
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activateButton( targets[i] )
}
}
, activateButton: function (target) {
this.activeTarget = target
this.$topbar
.find(this.selector).parent('.active')
.removeClass('active')
this.$topbar
.find(this.selector + '[href="' + target + '"]')
.parent('li')
.addClass('active')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
$.fn.scrollSpy = function( options ) {
var scrollspy = this.data('scrollspy')
if (!scrollspy) {
return this.each(function () {
$(this).data('scrollspy', new ScrollSpy( this, options ))
})
}
if ( options === true ) {
return scrollspy
}
if ( typeof options == 'string' ) {
scrollspy[options]()
}
return this
}
$(document).ready(function () {
$('body').scrollSpy('[data-scrollspy] li > a')
})
}( window.jQuery || window.ender );
\ No newline at end of file
/* ========================================================
* bootstrap-tabs.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================== */
!function( $ ){
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
if ( /^#\w+/.test(href) ) {
e.preventDefault()
if ( $this.parent('li').hasClass('active') ) {
return
}
previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
$this.trigger({
type: 'change'
, relatedTarget: previous
})
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
$.fn.tabs = $.fn.pills = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
})
}
$(document).ready(function () {
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
}( window.jQuery || window.ender );
/* ==========================================================
* bootstrap-twipsy.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#twipsy
* Adapted from the original jQuery.tipsy by Jason Frame
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ) {
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
var Twipsy = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
Twipsy.prototype = {
show: function() {
var pos
, actualWidth
, actualHeight
, placement
, $tip
, tp
if (this.getTitle() && this.enabled) {
$tip = this.tip()
this.setContent()
if (this.options.animate) {
$tip.addClass('fade')
}
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
.prependTo(document.body)
pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
switch (placement) {
case 'below':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'above':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
break
}
$tip
.css(tp)
.addClass(placement)
.addClass('in')
}
}
, setContent: function () {
var $tip = this.tip()
$tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip[0].className = 'twipsy'
}
, hide: function() {
var that = this
, $tip = this.tip()
$tip.removeClass('in')
function removeElement () {
$tip.remove()
}
$.support.transition && this.$tip.hasClass('fade') ?
$tip.bind(transitionEnd, removeElement) :
removeElement()
}
, 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') || '').removeAttr('title')
}
}
, getTitle: function() {
var title
, $e = this.$element
, o = this.options
this.fixTitle()
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
} else if (typeof o.title == 'function') {
title = o.title.call($e[0])
}
title = ('' + title).replace(/(^\s*|\s*$)/, "")
return title || o.fallback
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
}
return this.$tip
}
, validate: function() {
if (!this.$element[0].parentNode) {
this.hide()
this.$element = null
this.options = null
}
}
, enable: function() {
this.enabled = true
}
, disable: function() {
this.enabled = false
}
, toggleEnabled: function() {
this.enabled = !this.enabled
}
}
/* TWIPSY PRIVATE METHODS
* ====================== */
function maybeCall ( thing, ctx, args ) {
return typeof thing == 'function' ? thing.apply(ctx, args) : thing
}
/* TWIPSY PLUGIN DEFINITION
* ======================== */
$.fn.twipsy = function (options) {
$.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
return this
}
$.fn.twipsy.initWith = function (options, Constructor, name) {
var twipsy
, binder
, eventIn
, eventOut
if (options === true) {
return this.data(name)
} else if (typeof options == 'string') {
twipsy = this.data(name)
if (twipsy) {
twipsy[options]()
}
return this
}
options = $.extend({}, $.fn[name].defaults, options)
function get(ele) {
var twipsy = $.data(ele, name)
if (!twipsy) {
twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
$.data(ele, name, twipsy)
}
return twipsy
}
function enter() {
var twipsy = get(this)
twipsy.hoverState = 'in'
if (options.delayIn == 0) {
twipsy.show()
} else {
twipsy.fixTitle()
setTimeout(function() {
if (twipsy.hoverState == 'in') {
twipsy.show()
}
}, options.delayIn)
}
}
function leave() {
var twipsy = get(this)
twipsy.hoverState = 'out'
if (options.delayOut == 0) {
twipsy.hide()
} else {
setTimeout(function() {
if (twipsy.hoverState == 'out') {
twipsy.hide()
}
}, options.delayOut)
}
}
if (!options.live) {
this.each(function() {
get(this)
})
}
if (options.trigger != 'manual') {
binder = options.live ? 'live' : 'bind'
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
this[binder](eventIn, enter)[binder](eventOut, leave)
}
return this
}
$.fn.twipsy.Twipsy = Twipsy
$.fn.twipsy.defaults = {
animate: true
, delayIn: 0
, delayOut: 0
, fallback: ''
, placement: 'above'
, html: false
, live: false
, offset: 0
, title: 'title'
, trigger: 'hover'
}
$.fn.twipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
}
}( window.jQuery || window.ender );
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<title>Bootstrap Plugin Test Suite</title>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<!-- qunit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
<script src="vendor/qunit.js"></script>
<!-- plugin sources -->
<script src="../../js/bootstrap-alerts.js"></script>
<script src="../../js/bootstrap-dropdown.js"></script>
<script src="../../js/bootstrap-modal.js"></script>
<script src="../../js/bootstrap-tabs.js"></script>
<script src="../../js/bootstrap-twipsy.js"></script>
<script src="../../js/bootstrap-popover.js"></script>
<!-- unit tests -->
<script src="unit/bootstrap-alerts.js"></script>
<script src="unit/bootstrap-dropdown.js"></script>
<script src="unit/bootstrap-modal.js"></script>
<script src="unit/bootstrap-popover.js"></script>
<script src="unit/bootstrap-tabs.js"></script>
<script src="unit/bootstrap-twipsy.js"></script>
<body>
<div>
<h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-runoff"></div>
</div>
</body>
</html>
\ No newline at end of file
$(function () {
module("bootstrap-alerts")
test("should be defined on jquery object", function () {
ok($(document.body).alert, 'alert method is defined')
})
test("should return element", function () {
ok($(document.body).alert()[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="#">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).alert()
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="#">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).appendTo('#qunit-runoff').alert()
ok($('#qunit-runoff').find('.alert-message').length, 'element added to dom')
alert.find('.close').click()
ok(!$('#qunit-runoff').find('.alert-message').length, 'element removed from dom')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-dropdowns")
test("should be defined on jquery object", function () {
ok($(document.body).dropdown, 'dropdown method is defined')
})
test("should return element", function () {
ok($(document.body).dropdown()[0] == document.body, 'document.body returned')
})
test("should add class open to menu if clicked", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle">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>'
, dropdown = $(dropdownHTML).dropdown()
dropdown.find('.dropdown-toggle').click()
ok(dropdown.find('.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">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>'
, dropdown = $(dropdownHTML).dropdown().appendTo('#qunit-runoff')
dropdown.find('.dropdown-toggle').click()
ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click')
$('body').click()
ok(!dropdown.find('.dropdown').hasClass('open'), 'open class removed')
dropdown.remove()
})
})
\ No newline at end of file
$(function () {
module("bootstrap-modal")
test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined')
})
test("should return element", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'div element returned')
})
test("should expose defaults var for settings", function () {
ok($.fn.modal.defaults, 'default object exposed')
})
test("should insert into dom when show method is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').length, 'modal insterted into dom')
start()
div.remove()
})
.modal("show")
})
test("should hide modal when hide is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.modal("hide")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("show")
})
test("should toggle when toggle is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.modal("toggle")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("toggle")
})
test("should remove from dom when click .close", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><span class='close'></span></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.find('.close').click()
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("toggle")
})
test("should add backdrop when desired", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({ backdrop:true })
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
start()
div.remove()
$('.modal-backdrop').remove()
})
.modal("show")
})
test("should not add backdrop when not desired", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop:false})
.bind("shown", function () {
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
start()
div.remove()
})
.modal("show")
})
test("should close backdrop when clicked", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop:true})
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
$('.modal-backdrop').click()
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
start()
div.remove()
})
.modal("show")
})
test("should not close backdrop when click disabled", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop: 'static'})
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
$('.modal-backdrop').click()
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
start()
div.remove()
$('.modal-backdrop').remove()
})
.modal("show")
})
})
$(function () {
module("bootstrap-popover")
test("should be defined on jquery object", function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
})
test("should return element", function () {
var div = $('<div></div>')
ok(div.popover() == 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-runoff')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
popover.popover('hide')
ok(!$(".popover").length, 'popover removed')
$('#qunit-runoff').empty()
})
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>')
.popover()
ok(!!popover.data('popover'), 'popover instance exists')
})
test("should get title and content from options", function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-runoff')
.popover({
title: function () {
return '@fat'
}
, content: function () {
return 'loves writing tests (╯°□°)╯︵ ┻━┻'
}
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .title').text(), '@fat', 'title correctly inserted')
equals($('.popover .content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-runoff').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-runoff')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .title').text(), '@mdo', 'title correctly inserted')
equals($('.popover .content').text(), "loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻", 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-runoff').empty()
})
})
\ No newline at end of file
$(function () {
module("bootstrap-scrollspy")
test("should be defined on jquery object", function () {
ok($(document.body).scrollspy, 'scrollspy method is defined')
})
test("should return element", function () {
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
})
test("should switch active class on scroll", function () {
var sectionHTML = '<div id="masthead"></div>'
, $section = $(sectionHTML).append('#qunit-runoff')
, topbarHTML ='<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container">'
+ '<h3><a href="#">Bootstrap</a></h3>'
+ '<ul class="nav">'
+ '<li><a href="#masthead">Overview</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
, $topbar = $(topbarHTML).topbar()
ok(topbar.find('.active', true)
})
})
\ No newline at end of file
$(function () {
module("bootstrap-tabs")
test("should be defined on jquery object", function () {
ok($(document.body).tabs, 'tabs method is defined')
})
test("should return element", function () {
ok($(document.body).tabs()[0] == document.body, 'document.body returned')
})
test("should activate element by tab id", function () {
var $tabsHTML = $('<ul class="tabs">'
+ '<li class="active"><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-runoff")
$tabsHTML.tabs().find('a').last().click()
equals($("#qunit-runoff").find('.active').attr('id'), "profile")
$tabsHTML.tabs().find('a').first().click()
equals($("#qunit-runoff").find('.active').attr('id'), "home")
$("#qunit-runoff").empty()
})
test("should activate element by pill id", function () {
var $pillsHTML = $('<ul class="pills">'
+ '<li class="active"><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-runoff")
$pillsHTML.pills().find('a').last().click()
equals($("#qunit-runoff").find('.active').attr('id'), "profile")
$pillsHTML.pills().find('a').first().click()
equals($("#qunit-runoff").find('.active').attr('id'), "home")
$("#qunit-runoff").empty()
})
test( "should trigger change event on activate", function () {
var $tabsHTML = $('<ul class="tabs">'
+ '<li class="active"><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>')
, $target
, count = 0
, relatedTarget
, target
$tabsHTML
.tabs()
.bind( "change", function (e) {
target = e.target
relatedTarget = e.relatedTarget
count++
})
$target = $tabsHTML
.find('a')
.last()
.click()
equals(relatedTarget, $tabsHTML.find('a').first()[0])
equals(target, $target[0])
equals(count, 1)
})
})
\ No newline at end of file
$(function () {
module("bootstrap-twipsy")
test("should be defined on jquery object", function () {
var div = $("<div></div>")
ok(div.twipsy, 'popover method is defined')
})
test("should return element", function () {
var div = $("<div></div>")
ok(div.twipsy() == div, 'document.body returned')
})
test("should expose default settings", function () {
ok(!!$.fn.twipsy.defaults, 'defaults is defined')
})
test("should remove title attribute", function () {
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
ok(!twipsy.attr('title'), 'title tag was removed')
})
test("should add data attribute for referencing original title", function () {
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute')
})
test("should place tooltips relative to placement option", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
.appendTo('#qunit-runoff')
.twipsy({placement: 'below'})
.twipsy('show')
ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should add a fallback in cases where elements have no title tag", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy"></a>')
.appendTo('#qunit-runoff')
.twipsy({fallback: '@fat'})
.twipsy('show')
equals($(".twipsy").text(), "@fat", 'has correct default text')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should not allow html entities", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
.appendTo('#qunit-runoff')
.twipsy()
.twipsy('show')
ok(!$('.twipsy b').length, 'b tag was not inserted')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should allow html entities if html option set to true", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
.appendTo('#qunit-runoff')
.twipsy({html: true})
.twipsy('show')
ok($('.twipsy b').length, 'b tag was inserted')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
})
\ No newline at end of file
/**
* QUnit - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests ol {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
background-color: #fff;
border-left: 26px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
}
/** Runoff */
#qunit-runoff {
display:none;
}
\ No newline at end of file
This diff is collapsed.
/*!
* Bootstrap @VERSION
*
* Copyright 2011 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: @DATE
*/
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// Grid system and page structure
@import "scaffolding.less";
// Styled patterns and elements
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";
\ No newline at end of file
/* Forms.less
* Base styles for various input types, form layouts, and states
* ------------------------------------------------------------- */
// FORM STYLES
// -----------
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
padding-top: @baseline;
legend {
display: block;
padding-left: 150px;
font-size: @basefont * 1.5;
line-height: 1;
color: @grayDark;
*padding: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
}
}
// Parent element that clears floats and wraps labels and fields together
form .clearfix {
margin-bottom: @baseline;
.clearfix()
}
// Set font for forms
label,
input,
select,
textarea {
#font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
padding-top: 6px;
font-size: @basefont;
line-height: @baseline;
float: left;
width: 130px;
text-align: right;
color: @grayDark;
}
// Shift over the inside div to align all label's relevant content
form .input {
margin-left: 150px;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
height: @baseline;
padding: 4px;
font-size: @basefont;
line-height: @baseline;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
}
/* mini reset for non-html5 file types */
input[type=checkbox],
input[type=radio] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0; /* IE6-7 */
line-height: normal;
border: none;
}
input[type=file] {
background-color: @white;
padding: initial;
border: initial;
line-height: initial;
.box-shadow(none);
}
input[type=button],
input[type=reset],
input[type=submit] {
width: auto;
height: auto;
}
select,
input[type=file] {
height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseline * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
// Make multiple select elements height not fixed
select[multiple] {
height: inherit;
}
textarea {
height: auto;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: @white;
display: block;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states
input,
textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
outline: 0;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
.box-shadow(none); // override for file inputs
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}
// Error styles
form div.clearfix.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,
span.help-inline,
span.help-block {
color: @red;
}
input,
textarea {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
color: darken(@error-text, 10%);
}
}
}
// Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
select.mini {
width: 60px;
}
.input-small,
input.small,
textarea.small,
select.small {
width: 90px;
}
.input-medium,
input.medium,
textarea.medium,
select.medium {
width: 150px;
}
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: auto;
}
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
display: inline-block;
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0;
}
input,
textarea,
select {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
&.span3 { .formColumns(3); }
&.span4 { .formColumns(4); }
&.span5 { .formColumns(5); }
&.span6 { .formColumns(6); }
&.span7 { .formColumns(7); }
&.span8 { .formColumns(8); }
&.span9 { .formColumns(9); }
&.span10 { .formColumns(10); }
&.span11 { .formColumns(11); }
&.span12 { .formColumns(12); }
&.span13 { .formColumns(13); }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); }
&.span16 { .formColumns(16); }
}
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
// Actions (the buttons)
.actions {
background: #f5f5f5;
margin-top: @baseline;
margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px;
border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px);
.secondary-action {
float: right;
a {
line-height: 30px;
&:hover {
text-decoration: underline;
}
}
}
}
// Help Text
.help-inline,
.help-block {
font-size: @basefont - 2;
line-height: @baseline;
color: @grayLight;
}
.help-inline {
padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
}
// Big blocks of help text
.help-block {
display: block;
max-width: 600px;
}
// Inline Fields (input fields that appear as inline objects
.inline-inputs {
color: @gray;
span, input {
display: inline-block;
}
input.mini {
width: 60px;
}
input.small {
width: 90px;
}
span {
padding: 0 2px 0 1px;
}
}
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
input {
.border-radius(0 3px 3px 0);
}
.add-on {
position: relative;
background: #f5f5f5;
border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 4px 4px 5px;
margin-right: -1px;
font-weight: normal;
line-height: 18px;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
.border-radius(3px 0 0 3px);
}
.active {
background: lighten(@green, 30);
border-color: @green;
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input {
float: left;
.border-radius(3px 0 0 3px);
}
.add-on {
.border-radius(0 3px 3px 0);
margin-right: 0;
margin-left: -1px;
}
}
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
margin: 0 0 5px;
width: 100%;
li {
display: block;
padding: 0;
width: 100%;
}
label {
display: block;
float: none;
width: auto;
padding: 0;
line-height: @baseline;
text-align: left;
white-space: normal;
strong {
color: @gray;
}
small {
font-size: @basefont - 2;
font-weight: normal;
}
}
.inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
}
&:first-child {
padding-top: 6px;
}
li + li {
padding-top: 2px;
}
input[type=radio],
input[type=checkbox] {
margin-bottom: 0;
}
}
// Stacked forms
.form-stacked {
padding-left: 20px;
fieldset {
padding-top: @baseline / 2;
}
legend {
padding-left: 0;
}
label {
display: block;
float: none;
width: auto;
font-weight: bold;
text-align: left;
line-height: 20px;
padding-top: 0;
}
.clearfix {
margin-bottom: @baseline / 2;
div.input {
margin-left: 0;
}
}
.inputs-list {
margin-bottom: 0;
li {
padding-top: 0;
label {
font-weight: normal;
padding-top: 0;
}
}
}
div.clearfix.error {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0;
margin-left: -10px;
}
.actions {
margin-left: -20px;
padding-left: 20px;
}
}
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
&:after {
clear: both;
}
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
}
// Input placeholder text
.placeholder(@color: @grayLight) {
:-moz-placeholder {
color: @color;
}
::-webkit-input-placeholder {
color: @color;
}
}
// Font Stacks
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
}
// Grid System
.fixed-container() {
width: @siteWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
float: left;
margin-left: @gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
.gridColumn();
.columns(@columnSpan);
}
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradient Bar Colors for buttons and allerts
.gradientBar(@primaryColor, @secondaryColor) {
#gradient > .vertical(@primaryColor, @secondaryColor);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
This diff is collapsed.
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// ERIC MEYER RESET
// --------------------------------------------------
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
// Normalize.css
// Pulling in select resets form the normalize.css project
// --------------------------------------------------
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
outline: thin dotted;
}
// Hover & Active
a:hover,
a:active {
outline: 0;
}
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio:not([controls]) {
display: none;
}
// Prevents sub and sup affecting line-height in all browsers
// -------------------------
// Source: http://github.com/necolas/normalize.css
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Img border in a's and image quality
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
// Forms
// -------------------------
// Source: http://github.com/necolas/normalize.css
// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
*overflow: visible; // Inner spacing ie IE6/7
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clicable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}
\ No newline at end of file
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
// STRUCTURAL LAYOUT
// -----------------
html, body {
background-color: @white;
}
body {
margin: 0;
#font > .sans-serif(normal,@basefont,@baseline);
color: @grayDark;
}
// Container (centered, fixed-width layouts)
.container {
.fixed-container();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
> .sidebar {
float: left;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific
> .content {
margin-left: 240px;
}
}
// BASE STYLES
// -----------
// Links
a {
color: @linkColor;
text-decoration: none;
line-height: inherit;
font-weight: inherit;
&:hover {
color: @linkColorHover;
text-decoration: underline;
}
}
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
.row {
.clearfix();
margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
[class*="span"] {
.gridColumn();
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 660px; }
This diff is collapsed.
This diff is collapsed.
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
// Links
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@basefont: 13px;
@baseline: 18px;
// Griditude
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Color Scheme
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@split2: spin(@baseColor, -158);
@triad1: spin(@baseColor, 135); // Triads colors
@triad2: spin(@baseColor, -135);
@tetra1: spin(@baseColor, 90); // Tetra colors
@tetra2: spin(@baseColor, -90);
@analog1: spin(@baseColor, 22); // Analogs colors
@analog2: spin(@baseColor, -22);
// More variables coming soon:
// - @basefont to @baseFontSize
// - @baseline to @baseLineHeight
// - @baseFontFamily
// - @primaryButtonColor
// - anything else? File an issue on GitHub
\ No newline at end of file
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 4, 2011 */
@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/league_gothic-webfont.eot');
src: url('fonts/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/league_gothic-webfont.woff') format('woff'),
url('fonts/league_gothic-webfont.ttf') format('truetype'),
url('fonts/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment