* add new steps to reproduce section to github issue template to ask
issue filers to provide explicit steps to reproduce the issue so people
aren't left to guess or parse poorly written ones.
* feat(dropdown): make dropdown-append-to-body configurable
Make dropdown-append-to-body accept a value which will be evaluated to
determine if the menu should be appended to body. If no value is
specified, or a non-false value is specified then the menu will be
appended to body. If the value is `false` then the menu will not be
appended to body.
* feat(dropdown): append and remove menu when menu is opened or closed
Only append and remove append-to and append-to-body menus when the
menu is opened or closed. This allows for the values of append-to and
append-to-body to be evaluated when the menu is toggled open, and also
prevents littering of the DOM.
* fix(dropdown): don't remove the dropdown-menu on close
Instead of removing the dropdown-menu on close, append it back to the
original element.
- Trigger a test failure if resolved on rejected promise and rejected on resolved promise
- Trigger a test failure if neither resolved or rejected when expected resolved/rejected promise
Closes#6195
- Remove `replace: true` usage
BREAKING CHANGE: The template structure changed slightly due to the removal of `replace: true` - see documentation examples in action to see differences in practice.
Closes#5994
- Wait until animations are complete before removing window class
BREAKING CHANGE: This introduces a minor behavior change in when the class is removed
Closes#6056Fixes#6051
- Remove `replace: true` usage
BREAKING CHANGE: Due to the removal of `replace: true`, this results in a slight change to the HTML structure - see the documentation examples to see it in action.
Closes#5998
- Remove `replace: true` usage
BREAKING CHANGE: This removes `replace: true`, which changes the HTML structure slightly - see the documentation examples to see it in action.
Closes#5997
- Remove `replace: true` usage
BREAKING CHANGE: Due to the nature of `replace: true`, this has a slight structural HTML change in the popup as a result - see documentation examples for the change in action.
Closes#5993
- Remove `replace: true` usage
BREAKING CHANGE: Due to the removal of `replace: true`, this affects the HTML structure slightly - see documentation examples to see new usage.
Closes#5992
- Remove `replace: true usage
BREAKING CHANGE: This removes `replace: true` usage from the pager, which causes a slight usage change - see documentation examples for new usage.
Closes#5991
- Remove `replace: true` usage
BREAKING CHANGE: This removes `replace: true` usage, causing some structural changes to the HTML - the major part here is that there is no more backdrop template, and the top level elements for the window/backdrop elements lose a little flexibility. See documentation examples for new structure.
Closes#5989
- Remove `replace: true` usage
BREAKING CHANGE: As a result of removal of `replace: true`, there is the potential that this may break some CSS layout due to the slightly different HTML. Refer to the documentation examples to see the new structure.
Closes#5988
- Remove `replace: true` usage from the carousel and the slide
BREAKING CHANGE: Due to the removal of `replace: true`, this causes a slight HTML structure change to the carousel and the slide elements - see documentation demos to see how it changes. This also caused removal of the ngTouch built in support - if one is using ng-touch, one needs to add the `ng-swipe-left` and `ng-swipe-right` directives to the carousel element with relevant logic.
Closes#5987
- Remove `replace: true` usage
BREAKING CHANGE: This removes the `replace: true` usage, so this has an effect on how one uses the directive in the template - see documentation for reference
Closes#5986
- Remove usage of `replace: true`
- Remove unnecessary `panel-class` feature
BREAKING CHANGE: This removes usage of `replace: true` in the accordion group, which results in a template change where the template no longer needs to contain the panel itself, but its contents. The accordion group will add the `panel` class by default, so the user just needs to add the appropriate classes to the accordion group element. This allows the user to use ng-class as well to fully control the panel related classes, so `panel-class` now is unnecessary
Closes#5985
- Add expression support for tooltip-trigger
- Add support for object event bindings for showing/hiding tooltips
BREAKING CHANGE: This removes support for plain strings and interpolations in tooltip-trigger and popover-trigger - please change these appropriately. See test changes in this commit for reference
Closes#5221Closes#5938
* remove any duplicate `id` attribute on the typeahead hint element if used on
the original input element.
BREAKING CHANGE: This change removes the `id` attribute on the first `<input>`
element placed into the DOM when the `typeahead-show-hint` attribute is used
and there is an `id` attribute present on the original `uib-typeahead` element.
This could affect selectors if they are being used.
Closes#5936Fixes#5926
- Focus the toggle element when the click causes the dropdown menu to close
BREAKING CHANGE: This changes the focus behavior of the dropdown slightly, and potentially may break code built around current usage
Closes#5934Fixes#5782
- Adds support for ngModelOptions in the `datepicker-options` object
BREAKING CHANGE: This modifies the current behavior around the datepicker & popup's ngModelOptions, which may affect custom components that are built around both
Closes#5933Fixes#5825
- Change to select `.uib-typeahead-match` class instead of the `li` tag
BREAKING CHANGE: This changes the selector used so that it doesn't select for the `li` tag specifically, but the elements with the class `uib-typeahead-match` - if using a custom template, this class needs to be added to the `li` element in the typeahead popup template.
Closes#5922Fixes#5848
By default behaves as before. If specified, allows a custom function
to be defined to determine whether the keydown event should trigger
selection based on the `typeahead-should-select` attribute.
Closes#5671Closes#5794
* update the datepicker and datepicker popup docs to let user know
about using the `uibDateParser` service to convert a date string
into a `Date` object.
Closes#5880
- Add intermediary check for whether the date is valid due to an IE quirk of turning a valid date into an invalid date when using the date constructor
Closes#5872Fixes#5865
- Expose resolve in template as $resolve for those modals opened with a controller
BREAKING CHANGE: Since this adds support for $resolve being exposed on $scope, it could potentially overwrite any pre-existing usage of it - this is an unlikely scenario, but marked as a breaking change in case this key is being used
Closes#5808Closes#5857
Fixes#5778Closes#5787
BREAKING CHANGE: Stops propagation of keydown event when escape key is pressed. Removes keydown event from the document and moves it to the dropdown element.
Some users' adblock and virus protection is accidentally blocking third party `fastclick.js`.
Put a guard around the line that invokes the FastClick api
Closes#5756
* switch event handler call to look at `event.isDefaultPrevented()` instead of
`event.defaultPrevented` as angular has implemented that method on jqlite
events.
Fixes#5720Closes#5738
* add ability for user to prevent currently selected tab's deselection by
calling `$event.preventDefault()` in tab's `deselect` callback.
Fixes#5720
Addresses #2715, #4836, and #5716.
Closes#5723
- Implements TWBS body padding fix to keep content in an element
with a container class from shifting when the body overflow is
set to hidden with the modal-open class.
Fixes#2631Closes#5711
- When at bounds and noWrap is enabled, disable the prev and next arrows when appropriate
BREAKING CHANGE: This adds disabled CSS - there is a possibility this may break existing UI slightly for those adding custom CSS/making use of custom templates. Modify the template appropriately if necessary
Closes#5704Closes#5708
- Removes automatic padding when input is empty to allow ability to manipulate inputs on user's side
Closes#5293Closes#5299
BREAKING CHANGE: This removes automatic padding done by the timepicker
when the input is empty - if that behavior is desired, write a custom
directive implementing it
- Remove listener for $locationChangeSuccess event
BREAKING CHANGE: The dropdown no longer will remain open on $locationChangeSuccess with autoclose set to disabled. Implement this logic inside app along with usage of isOpen two-way binding if this functionality is desired.
Closes#5648Closes#5680
- Split off datepicker popup into new datepickerPopup module
BREAKING CHANGE: The datepicker popup is no longer a part of the
datepicker module, but now a part of the datepickerPopup module. Please
change code accordingly if including specific modules
Closes#5676
- Remove all deprecated attribute support
BREAKING CHANGE: This removes inline datepicker attribute support and
attribute pass-throughs in the popup
Closes#5660
* update tab documentation to clarify proper use and intended behavior of the
`active` attribute on both the `tabset` and `tab` directives.
* fix the tab select buttons in the tab demo.
Closes#5575Fixes#5551
- Move all inline styles supporting the auto position and
flicker suppression to a class.
- Refine how placement classes get applied to the tooltip
Closes#5535Fixes#5470
- Move arrow position style overrides to a class instead of inline
styles. This will allow for consumers to position the arrow to
suit their needs by setting margins on the arrow element.
- Optimize when the positionTooltip function calls the
positionArrow function. Now the arrow position will only be
recalced when the tooltip placement changes.
Fixes#5464Closes#5502
Added popup-placement attribute that implements the auto position
feature that exists in the tooltip directive. Accepts the same
placement options as the tooltip.
Closes#5444
- Change so active state is primarily on two-way bound variable
Closes#5353Closes#5432
BREAKING CHANGE: This changes the active state to be in line with
similar components centralizing the information. Please refer to the
carousel documentation for usage.
- Change to store active index on tabset controller
- Set index on tab by tab basis
Closes#5425
BREAKING CHANGE: The tab API is changed - please refer to the
documentation on new usage of tabs. Note that if you are using custom
templates, the templates will need to be changed slightly.
- Change to use `uibAccordionHeader` attribute for insertion point for header transclusion
Closes#5324Closes#5396
BREAKING CHANGE: This changes to use the `uibAccordionHeader` attribute instead of a `<span>` element for inserting the custom header HTML. If you use a custom template for the accordion group, please add this attribute to the appropriate location.
- Stop event bubbling from clicks in popup
Closes#5400Fixes#5347
BREAKING CHANGE: This requires $event to be passed in the second
argument of the select function and in the close argument for the popup
template
- Adjust the CSS for the datepicker header buttons to not have inconsistent spacing due to Chrome browser differences
Closes#5393Fixes#5392
BREAKING CHANGE: This adds extra CSS for the datepicker for the left and right header buttons - one can override this appropriately with any selector of class priority higher than 1
- Pass through options object wholesale from popup to inline datepicker
Closes#5355
BREAKING CHANGE: This breaks any snake-cased key usage, i.e.
`show-weeks`. Convert all keys used to camelCase.
* update popover readme indicating we will not support issues on mobile devices.
* update tooltip readme indicating we will not support issues on mobile devices.
Closes#5307
- Change back from div element to anchor element
BREAKING CHANGE: This changes the div element in the accordion-group
element back to an anchor element. If one wishes to use more complex
templates inside the accordion group heading, one must override the
template and add the `cursor: pointer` CSS targeting that element.
Closes#5263
- Reverts template change to tab
- Adds warning if one desires more complex HTML inside the tab
BREAKING CHANGE: This undoes the prior change to the template using div
elements. If one wishes to use div elements, one must override the
template in one's app and provide the necessary CSS
Closes#5262Fixes#5254
- The element selector was not limited to direct descendants so
nested tooltip/popover arrow elements were getting selected instead
of the direct descendant arrow element.
Closes#5246Fixes#5230
- The element selector was not limited to direct descendants so
nested tooltip/popover arrow elements were getting selected instead
of the direct descendant arrow element.
Closes#5246Fixes#5230
- With the addition of the header, the selector to scroll the dropdown
onto the correct element is incorrect - this fixes it to select all
list elements in the dropdown
Closes#5168Fixes#5167
- Add new class manipulation helper directive that uses 1 watcher as opposed to watchers for each element with ng-class
- Optimize disabled state
- Optimize class binding
Closes#2613Closes#3451Closes#3770Closes#5065
BREAKING CHANGE: For those using custom templates, the changes result in necessary changes being made to the templates to match the new class changing syntax
BREAKING CHANGE: yearRange is replaced by yearRows and yearColumns for manually specifying the dimensions of the yearpicker. If one wants the prior behavior with yearRange with a different number of rows, just set yearRows
Closes#3348Closes#4970
- Fixes issue where `$scope` provided does not have properties present
on controller instance due to $new resulting in the property on the
prototype of the $scope copied from, which causes it to not be
enumerable
Closes#5048Fixes#5039
- Defer selection of active slide until after transition has been reset
to avoid selection occuring before the transition finishes, preventing
a new slide from being chosen
- Buffer slides if transition is currently going on to navigate to last
slide selected after
Closes#4984Fixes#4361Fixes#4823Fixes#4969
BREAKING CHANGE: As part of the split of the pager component from the
pagination component, this changes the controllerAs use to `pager` from
`pagination`
Closes#4961
- Changes from ' to ` for template literals
- Adds documentation about template literals
BREAKING CHANGE: This changes template literals from the single quote
`'` to the backtick character `` ` `` for more natural usage with certain
strings such as `o'clock`.
Closes#4880Closes#4936Closes#4938
Closes#4891
BREAKING CHANGE: `keyboard-nav` for the dropdown is not longer a directive and to use it you have to use `keyboard-nav` instead of `uib-keyboard-nav`.
- Add `outsideClick` trigger support, which allows dismissal of the tooltip/popover on click of any element outside of the tooltip/popover
Closes#4419Closes#4871
- Change all virtual paths with built in templates to be prefixed by `uib/`
BREAKING CHANGE: All virtual templates in UI Bootstrap now are prefixed
with `uib/` - if one is overriding the templates via `$templateCache` path
or manually building the templates from the UI Bootstrap repository, one
needs to change the string used in the `$templateCache` representation
to have the new prefix
Closes#1205Closes#4839
- Change `formatCodeToRegex` into an array to avoid potential iteration bug where the order the keys are listed in the object matters in the iteration order
Closes#4810Fixes#4808
- Adds force-ellipsis option for adding ellipses to pagination
- Add boundary-link-numbers option for allowance of the first and last page numbers to always be shown
Closes#2924Closes#3064Closes#3565
- Change signature to `appendTo`, which takes a value that evaluates to a DOM node for API consistency
BREAKING CHANGE: Usage before
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to-element-id="typeahead-container">
```
After
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to="typeaheadContainer">
```
```js
$scope.typeaheadContainer = angular.element(document.querySelector('#typeaheadContainer'));
```
Closes#4797
- Change anchor tag to `div` to prevent unexpected routing being triggered by the browser on generation of anchor tags with nested clickable controls
BREAKING CHANGE: This causes the cursor style to be removed from the tab - implement CSS on the `.uib-tab > div` selector, or similar, accordingly
Closes#4793Fixes#3266
- Change anchor tag to `div` to prevent anchor tag from triggering route change
BREAKING CHANGE: This causes the cursor style to be removed from the heading - implement CSS on the `accordion-toggle` class accordingly
Closes#4792
- When `total-items` initializes as undefined, ignore value and do not update page information
- Remove extra watcher and call action manually
Closes#3786Closes#4783Fixes#2956
A race condition could occur when there is an open delay that
doesn't get cancelled after the transition delay resulting in
the position logic getting called. This will then try to set
the css of the tooltip after is has been destroyed in the
removeTooltip function.
Closes#4765Fixes#4757
The watch for the isOpen property from the model was not
checking to see if the internal tooltip scope was still
valid (null or undefined) before comparing the value to
the tooltip scope isOpen property.
Closes#4697Fixes#4683
The attribute for the close delay on the popover was incorrectly
documented as 'popover-close-popup-delay' and should be
'popover-popup-close-delay.
Closes#4698
Set class 'in' at the end of the animation to mimick the
behaviour of TWBS js. This removes scrollbars which are
otherwise visible during the animation in certain
configurations (most notably when used inside navbars).
The show and hide delay timeouts where not getting
cancelled correctly resulting in tooltips staying
open when both popup and popup-close delays were
in use.
Closes#4621Fixes#4618
When the tooltip is rendered for positioning scroll bars
may breifly appear depending on where the linked element
is positioned. This change adds a negative top and left
style to push the tooltip element out of view while it
is being measured and positioned.
Closes#4550Closes#4623Fixes#4458
Under PR #4455 the timeout for the popup close delay
was impacted by the evalAsync for setting the isOpen
value. Moved the popup close delay timeout to the
hideTooltipBind method so the hide method will now
get called after the close popup delay. This will
also ensure if the show method is called and the
close timeout is cancelled, the isOpen property
will not get toggled.
Closes#4597Fixes#4567
The tooltip was not being removed from the stackedMap
resulting in a memeory leak. Tooltip will now be
removed from the stackedMap in scope destroy
function.
Closes#4610Fixes#4604
In the tooltip $$postDigest function a check is done
on ttScope.isOpen but ttScope may have been set to null
in the scope.$on('$destroy'...) function. Added a
check to make sure ttScope is defined and not null.
Closes#4555Fixes#4552
- Ensure `dropdown-menu` class is present when using as an attribute
directive
- Refactor `DropdownController` to be more agnostic of directive
Closes#4523Fixes#4442
This is a rollup commit intended to address several
issues around the positioning and parsing of
attributes.
- Fixes issue introduced under PR #4311 where setting
height and width in tooltip position function
messed up arrow placement.
- Fixes issue introduced under PR #4363 where setting
visibility to hidden in tooltip position function
caused elements in popover to lose focus.
- Fixes issue #1780 where tooltip would render if
content was just whitespace.
- Fixes issue #3347 where tooltip isolate scope was
being accessed after it was set to null. Observers
will now be created/destroyed as tooltip opens/closes
which will also offer a performance improvement.
- Fixes issue #3557 by implementing evalAsync to set
tooltip scope isOpen property.
- Fixes issue #4335 where if model isOpen property is
undefined, tooltip would call show/hide toggle function.
- Closes PR #4429 where how the templated content
was being evaluated could cause an infinite digest loop.
Closes#4400Closes#4418Closes#4429Closes#4431Closes#4455Fixes#1780Fixes#3347Fixes#3557Fixes#4321Fixes#4335
- Added ability to add a class to the most recently opened modal window.
Note that even if different classes are specified, the class will
only be present if the modal is the most recently opened modal, i.e. if
modal1 was opened with a top class of `foo`, and modal2 is opened
afterwards with a top class of `bar`, modal2 will have the class `bar`
for the modal window, and modal1 will not have the class `foo`.
Closes#2524
* fix accordion demo for last panel
* last panel was previously the markup example so moving just the close toggle
was not sufficient and moving the markup as well would have rendered that
specific accordion example obsolete. so this restores the markup accordion
back to original and moves to the last accordion example.
Closes#4344
BREAKING CHANGE:
The `transition` module along with its `$transition` service are no longer
available. We're now using `$animate` service for animations and would
encourage users to do the same.
Closes#4359
Wrapped position logic in a timeout to ensure the
digest cycle always completes before positioning
the popup. Also optimized when the calls to
position the popup occur.
Closes#4328
- Switch to use `addEventListener` and `removeEventListener` to prevent
jqLite/jQuery bug where the events are swallowed on disabled elements
Closes#4322Fixes#4060
- Ensure that the original event target is not a child of the popup element to avoid edge case where the datepicker closes on any click
Closes#4316Fixes#4314
- Change to add `dropdown` class and open class to the `<body>` element
BREAKING CHANGE: This differs from the existing behavior in that it no longer will toggle based on the existing `dropdown` directive element, but on the `body` element instead
Closes#4305Fixes#4240
- Fix issue where select callback is fired twice due to compilation order when using dynamic tabs mixed with static tabs
Closes#3060Closes#4230Fixes#2883
- Switches to use `ng-bind-html` from `bind-html-unsafe`
BREAKING CHANGE: This modifies the typeahead to use the the `$sce` service instead when `ngSanitize` is present
Closes#3463Resolves#4073
When using a template with the tooltip/popover
the position funciton needs to be called at the
end of the $digest cycle to ensure correct
positioning in case the template content size
has changed
Closes: #4144Fixes: #4090
- Add support for `openedClass` to allow overriding the default modal class added & removed on the `body` element (`modal-open`)
Closes#2633Closes#4132
BREAKING CHANGE: Allow the user to hit `esc` inside an element in a modal and not exit the modal if the event has been `defaultPrevented`
Closes#3551Fixes#2544
- fix bug in directive whereby list item selector is not being initiated on
correct DOM element.
- fix bug in directive whereby invalid `keyCode` property of jQuery Event
object is being referenced instead of `which`.
- update functional test to trigger keydown event on correct DOM element
because otherwise the keydown handler in the directive is not getting
executed.
- remove invalid functional test because it is not possible to trigger a
keydown event on a hidden DOM element through normal UI interaction.
Closes#4110Fixes#4091
- Add type and validity check to ensure proper date object is created
- Make code style uniform in scripts
- Add warning if the string is not a valid date
Closes#3701Closes#3759Closes#3933Fixes#3609Fixes#3713Fixes#3736Fixes#3875Fixes#3937Fixes#3976
Moved the datepicker popup document click bind to
a timeout so having preventDefault and stopPropagation
on the element click event triggering the
popup to be open is no longer necessary.
Closes#3972Fixes#3705
- Adjust check due to change in Angular 1.4 where the presence of attribute gives key value of `undefined`, causing variable to contain incorrect truthiness
Closes#3864Closes#3890Fixes#3848
- Force the carousel indicator to not select the slide if the animation has not completed
- Factor out `goNext` function to not redefine on each execution of `select`
chore(carousel): move `$currentTransition` check to `select` method
Fixes#3729Closes#3757
Reducing the number of watches created for the
datepicker by implementing one time binding
on the datepicker templates. Removing aria-disabled
attribute as the ngAria module will add that
to the button with ng-disabled.
Closes#3443
The uninitialized $sniffer variable causes the
changeInputValueTo function to fail in Chrome.
Also fixed issue where an ng-change test was failing
as the date selected was the same as the initialized
scope date (today's date).
Closes#3630
Allows for trusted resource URLs through Strict Contextual Escaping ($sce).
If an interpolated expression is used instead, then the benefits of SCE is
lost.
Fixes#3558
Allows for trusted resource URLs through Strict Contextual Escaping ($sce).
If an interpolated expression is used instead, then the benefits of SCE is
lost.
Fixes#3558
- Add tooltip-class support to tooltip-template
- Remove observer for tooltip-class, it’s evaluated once on tooltip
preparation instead
- Remove interpolation on class attribute
Interpolation on the class attribute can have undesirable mangling
effects when use with a directive that has `replace: true`. It also
doesn’t work properly with ngAnimate.
Relates to #3126Closes#3510
If the title is blank, ngAnimate attempts to animate ngShow so positionTooltip
gets called when the title box is still visible, about to be animated to
hidden. Hence, the positionTooltip receives a taller height. Avoid this by
using ngIf instead.
Closes#3518
- Animations didn't work because the class attribute was mangled during
compilation due to the way class attributes are merged on directives with
`replace: true`
- Rename attribute to popup-class
- Refactor to rename variables named "class" as it's a keyword
and also looks weird in editors
Closes#3509Fixes#3375Fixes#3506
- Separate validation from parsing so that validation still runs on model
change
- Remove direct calls to $render
- Remove extra call to $render during intialization (only run when format is
changed)
- Save last date value in formatter
- Remove use of ngModel.$modelValue as users may add parsers to convert
$modelValue to other formats
Relates to #2069Fixes#3349
- Add support for `HH`, `H`, `mm`, `m`, `ss`, `s` formats from Angular's
`dateFilter`
- Add support for `:` character in format expression
- Fix typos
- Add regexp escaping of special characters
Fixes#2509Fixes#3159Closes#3417
- Moves render logic converting model values into date or null object into a formatter, which allows the render function to more correctly render using the viewValue
- remove parentheses as per CR
Relates to #2069Fixes#3160Closes#3427
Note: Move backdropClass logic into compile function because otherwise
modifying classes in the compile function is broken when using an interpolated
class attribute.
Fixes#1007Closes#2725
Upgrade configuration file. However, still use an old version of karma-jasmine
because upgrading to Jasmine 2.x requires a number of test code changes.
Note that firefox-launcher is used for travis CI builds.
Reposition on each digest, this ensures that the tooltip is always positioned
correctly no matter how its content changes.
Fixes#96Fixes#1109Closes#2816Closes#3435
The timepicker template has an ng-mousewheel
binding on the hours input element and the
TimepickerController also binds the elemeent
to mouse wheel events. Removed ng-mousewheel
binding from the template.
Closes#3442
When the calendar is in the maximum configured mode, clicking the title
button has no effect. To convey this to users, make the non-functional
button non-clickable, and take the button out of focus order, disable
the button when in the maximum mode.
Closes#3012
After I upgraded from 0.10.0 to 0.11.0 I needed to add the dropdown directive to my button dropdowns. This is not documented in the breakting changes.
The bootstrap documentation only mentions the dropdown class only in the [dropdowns section](http://getbootstrap.com/components/#dropdowns), but not in the [btn-dropdowns section](http://getbootstrap.com/components/#btn-dropdowns).
Optimized opening of modals by causing one digest loop less: The modalBackdrop directive now schedules switching its animate flag using a $timeout which does not cause a digest loop. If we assume modalBackdrop is always followed by a modalWindow directive, then we are guaranteed a digest loop by modalWindow's $timeout, which will happen after modalBackdrop's $timeout.
- Moved rounding logic into a formatter
- Checking for number instead of checking if undefined
- Using angular.isNumber for rounding logic
- Using bitwise instead of modulo to check for decimel
Fixes#3413Closes#3415
When typeahead-editable="false" and we select a perfect
match from the results list, the $parsers aren't called,
which results in the 'parse' error key not being reset.
As with the 'editable' key, we should reset this once
an item is selected because we know we have a valid
model matching the view value.
Closes#3166
- Animations are now opt-in, include ngAnimate to see collapse
animations
- ngAnimate handles initial state and doesn't animate if first
reflow hasn't occurred.
angular/angular.js@cc58460
- Tests may need more work. Right now they test for 'in' class.
Fixes#1774Fixes#2821Fixes#2836Closes#1274Closes#1444
Fix of the init-date attribute for the datepicker-popup. The init-date attribute, when set in a datepicker-popup element, is now added to the datepicker element and in the datepicker-popup scope, so the datepicker element can retrieve the attribute value.
- Fix scope.$apply call not working previously because scope was already
destroyed. Use $rootScope instead.
- Move $destroy call nearer to the dom removal.
- Remove fallback timer (emulateTime param)
Fixes#2585Fixes#2674Fixes#2536Fixes#2790Fixes#3182Closes#2724
With this commit, the validity of a typeahead model is set to true if
the model is set manually and the typehead directive is set to be
non-editable.
add test for setting model manually
Fixes#3318
Accept a number of milliseconds since 01.01.1970 as a valid value
for `ng-model`:
- change parseDate() to handle timestamp values
- add the test to `datepicker.spec.js`
Closes#2345
AngularJS 1.3 seems stricter with controller registration. Previously,
the controller were registered with undefined values but AngularJS 1.2
found them as they were window globals.
Looks like aa0b639 was incomplete. This should fix the rest of the demo app.
Fixes#3394
When nesting buttons in the header, and calling `$event.stopPropagation()` in their click handlers would cause a page refresh, because the default empty URL would be executed. By changing this into a noop, the page refresh is prevented. #3299
In reference to issue #3096
If the escape key should have other functionality in the context of a form (for
example, if datepicker is on a modal) it makes sense to prevent this from
happening if escape is used to close the dropdown. If the dropdown is closed,
however, the event should be allowed to propagate.
Fixes#3096Closes#3179
The $digest that was removed in 32c470 is actually necessary to get the
tooltip contents rendered. The rendered content is important when the
tooltip is on the right edge. See Plunker in #2995:
http://plnkr.co/edit/8GZ5F5zj3Xe6IinXQz74?p=preview
Reverts change in 32c470 (#2995) but fixes it in another way.
Fixes#2995Fixes#2992Fixes#2951Closes#2996
Use approach from Twitter Bootstrap. Most of the code is from their customizer.
- use modules in mappings file
- generate concatenated JS
- generate tpl and non-tpl file with banner
- generate zip file for custom builds
- add browser compatibility message
- speed up page by deferring loading of files
- only load the files when needed. Cache them after they're loaded.
Fixes#2960Fixes#2847Fixes#2625Fixes#2489Fixes#2357Fixes#2176Closes#2892
In Angular 1.3.1, when using tooltips with ngAnimate, this extra $digest
call seems to break ngClass. This is an extra call to ngAnimate and it
shouldn’t be called since the tooltip hasn’t been added to the DOM.
I was unable to create a test case to test compatibility with ngAnimate.
Fixes#2951Fixes#2959
Add typeahead-focus-first option to prevent first match from being
focused.
Currently, the first result is automatically focused as you type. Now, set
`typeahead-focus-first="false"` and the first result is *not*
automatically focused as you type.
Closes#908Closes#2916
I had a to tweak a bit two tests since $interval never throws an exception after flushing, hope I did it OK.
Ammend: addresses @chrisirhc critics
Fixes#1308Fixes#2454Closes#2776
tt_ scope variables are now in the ttScope which is specific to each
tooltip directive (multiple tooltip directives can now run on the same
element).
This allows tooltips to be used alongside any directive that may or
may not require different scope types.
Closes#1269Fixes#2320Fixes#2203
This wasn't working properly with the location change code
(lines 305-314) because the observe call happens asynchronously after
the linking function has completed.
Hence, the locationChangeSuccess wasn't being set up unless the global
tooltip option's appendToBody option was set to true.
Closes#2921
This change fixes the usage of the tooltip directive with AngularJS
1.3.1 when no trigger attribute is used.
BREAKING CHANGE: tooltip/popover trigger is no longer a watched
attribute.
This affects both popovers and tooltips. The triggers are now set up
once and can no longer be changed after initialization.
- Use $log instead of console as it's safer and always defined
- JSHint thinks usage of alert is possibly development code, so use
$window.alert instead
- Check for usage of undefined variables
- Add basic Jasmine globals so that spec files pass JSHint
- Ensure that angular variable can't be re-defined (set to false)
Closes#2861
when `appendToBody` option is set to true and then scope is destroyed,
DOM is still polluted with popup.
This fix removes `$popup` from DOM, thus cleaning it
If `.html` is removed from the end only to be added to the end, there's no reason to touch it. Also, `template` + `/` is the same as `template/`.
I haven't tested this, but I see absolutely no reason why this code isn't the same functionally.
Closes#2635
Auto-focusing of a freshly-opened modal element causes any child
elements with the autofocus attribute to loose focus. This is an issue
on touch based devices which will show and then hide the onscreen
keyboard. Attempts to refocus the autofocus element via JavaScript will
not reopen the onscreen keyboard. Fixed by updated the focusing logic to
only autofocus the modal element if the modal does not contain an
autofocus element.
Fixes#1696Closes#1892Closes#2273
Regression from #1745 as there's a double interpolation expected but
ngClass doesn't support that.
The attribute value of ngClass is only interpolated once and the
interpolated expression is watched.
Fixes#2145Closes#2146
$modalStack.openWindows.get(modalInstance) is undefined after the first dismiss and throws:
- TypeError: Cannot read property 'value' of undefined
Closes#1972
Add logic to handle cases where hide/show can be called multiple times
even before their timeouts complete.
This is more ugly logic to handle degenerate cases. Hopefully switching
over to ngAnimate and cleaning up the logic of tooltips will be better.
Fixes#1847Closes#1940
Allows use of the size modifier classes shipped with Bootstrap 3.1
onwards. Specify either 'sm' or 'lg' to get a small/large modal dialog.
Defaults to normal size dialog if not specified.
Closes#2084
* keyboard navigation
* WAI-ARIA roles
* popup will close on escape on input or calendar
* handle focus when closing popup
Closes#1922
BREAKING CHANGES: popup calendar does not open on input focus
Acts as a hybrid checkbox/radio-button, selecting exclusively among the button set, but also allowing the selected item to be unselected, leaving the button set without a selected item.
Closes#1760
* Add two-way binded `datepicker-mode`.
* Add optional `init-date` when no model value is specified.
* Add hint for current date.
* Use isolated scope for popup directive.
* Use optional binding for `isOpen`.
* Split each mode into it's own directive.
Closes#1599
BREAKING CHANGE:
`show-weeks` is no longer a watched attribute
`*-format` attributes have been renamed to `format-*`
`min` attribute has been renamed to `min-date`
`max` attribute has been renamed to `max-date`
* Add `aria-haspopup` and `and aria-expanded` attributes to dropdown toggle.
* Dynamically change `aria-expanded` when the dropdown closes or opens.
Closes#1733
Closes#1409
BREAKING CHANGE: Use interpolation for type attribute.
Before:
<tabset type="'pills'" ...></tabset >
or
<tabset type="navtype" ...></tabset>
After:
<tabset type="pills" ...></tabset>
or
<tabset type="{{navtype}}" ...></tabset>
Closes#1546
BREAKING CHANGE: `rating` is now integrated with `ngModelController`.
* `value` is replaced from `ng-model`.
Before:
<rating value="rate" ...></rating>
After:
<rating ng-model="rate" ...></rating>
Closes#1545
BREAKING CHANGE: Both `pagination` and `pager` are now integrated with `ngModelController`.
* `page` is replaced from `ng-model`.
* `on-select-page` is removed since `ng-change` can now be used.
Before:
<pagination page="current" on-select-page="changed(page)" ...></pagination>
After:
<pagination ng-model="current" ng-change="changed()" ...></pagination>
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.
Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.
Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
https://github.com/angular/angular.js/pull/5109 ).
Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.
Closes#1341
Tooltips were nested in anchor elements to get the hyperlink styling
from Bootstrap. This seems like an odd use of anchor elements and we
shouldn't encourage this. Instead, use anchors like actual links that
point to nowhere (#).
Closes#1507Closes#1509
Tests were compiling the element multiple times unnecessarily as it's
done in the root describe's beforeEach.
Introduce describe blocks with no name to encapsulate tests that need
the element to be compiled and separate them from tests that have their
own compilation.
Closes#1499
Isolate scope contents should be the same after hiding and showing the
tooltip. The isolate scope's parent should also always be set to the
directive's scope correctly.
fix(tooltip): link on demand
- Calling $digest is enough as we only need to digest the watchers in
this scope and its children. No need to call $apply.
- Set invokeApply to false on $timeout for popUpDelay
- No need to test for cached reference when tooltip isn't visible as
the tooltip has no scope.
Closes#1450Closes#1191Closes#1455
Knowing what exactly isn't being covered by the tests is more
important than knowing the statistics.
By default, this outputs full HTML reports with indicators of which
lines or branches haven't aren't covered.
As far as I understand, to test sizes like widths or height you need to append your element to the real document. But that `describe` is not running any test with that. My guess is that there was some in the past and that line was forgotten there.
Previously, there would be a case where the two transitions would run
as the cancel would asynchronously invoke the reject handler of the
transition which would set the currTransition to undefined even when
the currTransition has been replaced with a new transition.
This reverts commit 220e7b6012.
Revert the capability to set the tab direction. This is no longer a
feature in Bootstrap 3 and breaks nested tabs.
Closes#783
Relates to #659
* General refactor. Move logic to controller.
* Remove `onFull` & `onEmpty` handlers.
* Remove automatic types and stacked types.
* `progress` & `bar` transclude content to support text & extra elements.
BREAKING CHANGE: The onFull/onEmpty handlers & auto/stacked types have been removed.
To migrate your code change your markup like below.
Before:
<progress percent="var" class="progress-warning"></progress>
After:
<progressbar value="var" type="warning"></progressbar>
and for stacked instead of passing array/objects you can do:
<progress><bar ng-repeat="obj in objs" value="obj.var" type="{{obj.type}}"></bar></progress>
For unclear reasons the directive was watching DOM element's height
which incurs performance penalty. Normally this watching shouldn't be
necessery as collapsible elements should get height: auto;
Closes#1222
Attribute / option specifies where in the DOM to place the datepicker
popup elements.
If this option evaluates to 'true', the datepicker popup elements are
appended to 'body'. Otherwise, they follow the directive element.
Closes#834, Fixes#747
- Avoid re-initializing `tab.active`
- `setActive` only when all `tab.active` are set up (on the next
digest cycle)
Before I go to explain, there are up to two expressions that indicate
whether a tab is active:
1. `active` variable in the isolate scope of the tab directive
2. The expression from the active attribute (`attrs.active`) if it
is set, I'll call this `getActive`, as that's the variable that
refers to it.
During initial linking (adding of tabs), the `active` variable in the
tab's isolate scope tracks the active tab. When the first tab is
added, it's `active` is set to true since there's no way to know if
subsequent tabs are active since they haven't been added yet. As such,
at this point, it is not meaningful to set assign the `getActive`
with the value of `active`. At least not until all the tabs have been
added. Hence, a good time would be to wait until the next $digest
cycle.
A watcher is called asynchronously after initialization even if there
is no change on the expression's value.
As such, we can leave that to the watcher for the `active` expression
to initialize getActive by calling setActive during its initlization
cycle.
However, there is a chance (if the $digest cycles and planets
align...) that the `active` variable gets initialized a second time
using the `getActive` (in the watcher for `getActive`). Since we're
already setting `active` to `getActive`, and the `active` variable
should now be carrying the *truth*. Avoid this re-initialization.
This makes the highlighter behave more consistently like other filters.
It also makes it more useful as an empty query doesn't result in an
empty result.
Closes#820.
BREAKING CHANGE: API has undergone some changes in order to be easier to use.
* `current-page` is replaced from `page`.
* Number of pages is not defined by `num-pages`, but from `total-items` &
`items-per-page` instead. If `items-per-page` is missing, default is 10.
* `num-pages` still exists but is just readonly.
Before:
<pagination num-pages="10" ...></pagination>
After:
<pagination total-items="100" ...></pagination>
BREAKING CHANGE:
* `$dialog` service was refactored into `$modal`
* `modal` directive was removed - use the `$modal` service instead
Check the documentation for the `$modal` service to migrate from `$dialog`
This option represents class which is added to the body when the dialog is open.
It was present before in twitter bootstrap, then removed in 2.3.0,
but then recently reintroduced in 3.0
Closes#798
The element.focus() will throw an error since the object needs to be unwrapped first.
Should be: element[0].focus() at a minimum to unwrap the jqlite object since it doesn't expose focus().
Closes#758
If a user defines a tooltip-trigger attribute, this ensures the correct event handlers is used to hide the tooltip.
Fixes a bug where if a user sets both a default trigger using the tooltip provider, and then tries to override with an attribute, the wrong 'hide' event was being used.
Add the ability to set the direction of the tabs, the possible
values are 'right', 'left' and 'below'. If no direction is defined
the tabs are rendered on the top as they do now
Closes#659
* Before, tab content was being transcluded before the tab content area
was ready. This forced us to disconnect the tab contents from the DOM
temporarily, then reocnnect them later. This caused a lot of problems.
* Now, neither the tab content or header are transcluded until both
the heading and content areas are loaded. This is simpler and fixes
many weird compilation bugs.
Until now, the $tooltipProvider has been an undocumented feature, but as
there are now several options requested by the community at large, it is
finally included in the documentation.
The tooltip and popover directives (through the $tooltip service) now
support using an attribute in addition to the provider to set a
particular tooltip or popover to use $body as the container for the
popup element rather than the directive element's parent.
Closes#395.
Adds a mouse() method to the $position service API to return the current
mouse position. The $tooltip API has been changed to allow using this
value to set the position of the tooltip element. The top left corner of
the element will be at the cursor position.
Closes#535. Problem with IE10.
BREAKING CHANGE: The 'value' is replaced by 'percent'.
Before:
<progress value="..."></progress>
After:
<progress percent="..."></progress>
BREAKING CHANGE: The 'first-text', 'previous-text', 'next-text' and 'last-text'
attributes are now binded to parent scope.
To migrate your code, surround the text of these attributes with quotes.
Before:
<pagination first-text="<<" ...></pagination>
After:
<pagination first-text="'<<'" ...></pagination>
When an element on which the tooltip is applied is destroyed (along with
its scope), the tooltip popup will now be closed if it was open.
Also refactored the $locationChangeSuccess binding as well to not waste
a run of `hide()` unless the tooltip was already open, following the
same pattern used in this bug fix.
Closes#410.
* Rename 'tabs' directive to 'tabset', and 'pane' directive to 'tab'.
The new syntax is more intuitive; The word pane does not obviously
represent a subset of a tab group. (Closes#186)
* Add 'tab-heading' directive, which is a child of a 'tab'. Allows
HTML in tab headings. (Closes#124)
* Add option for a 'select' attribute callback when a tab is selected.
(Closes#141)
* Tabs transclude to title elements instead of content elements. Now the
ordering of tab titles is always correct. (Closes#153)
BREAKING CHANGE: The 'tabs' directive has been renamed to 'tabset', and
the 'pane' directive has been renamed to 'tab'.
To migrate your code, follow the example below.
Before:
<tabs>
<pane heading="one">
First Content
</pane>
<pane ng-repeat="apple in basket" heading="{{apple.heading}}">
{{apple.content}}
</pane>
</tabs>
After:
<tabset>
<tab heading="one">
First Content
</tab>
<tab ng-repeat="apple in basket" heading="{{apple.heading}}">
{{apple.content}}
</tab>
</tabset>
The `$tooltip` service now has two ways to customize the default triggers.
The `$tooltipProvider` takes a `trigger` option and the `*-trigger`
attribute can be applied to a single element.
The `$tooltipProvider`'s `trigger` option overwrites the default value
but the attribute will overwrite both.
A few logical default triggers are supported out of the box and have an
associated map to determine which hide trigger to use. `mouseenter` ->
`mouseleave`, `focus` -> `blur`, and `click` -> `click`. If any other
trigger is provided, it will be used to both show and hide the tooltip.
Custom hide triggers are not yet supported as they would require some
code trickery due to the way `$observe` works.
Closes#131
To calculate the relative position of the tooltip or popover, the
$tooltip service now uses the $position service, which resolves many
positioning bugs.
Closes#265, #115
* Move custom html2js task to grunt-html2js npmTask
* Move site task to simple grunt-contrib-copy and grunt.template.process
step
* Centralize module information into one config object
* Centralize demo assets into one folder
The directive displays the unsanitized HTML in the tooltip instead of
the escaped text.
The $tooltip service has been modified to allow a little more
flexibility in terms of the prefix used on the $observe'd attributes.
For example, the `tooltip-html-unsafe` directive needs to be called as
written, but it would be nonsensical to require all other attributes
(like animation or placement) to also use that verbose prefix as opposed
to the simpler and more familiar `tooltip-` prefix. The service now
allows independent specification of the name and its prefix.
Lastly, the docs for the tooltip and popover have been updated to show
their available optional attributes.
Closes#246
In IE10 msTransition exists but msTransitionEnd never fires. IE10 does however support standard transitionend.
Since IE<10 does not support transitions this line can be removed entirely.
This has already been done in Twitter Bootstrap. Reference here: https://github.com/twitter/bootstrap/pull/4166
Tooltips and popovers can now be appended to the body of the HTML
document instead of directly after the element on which the directive
was invoked, by setting `appendToBody` to true through
$tooltipProvider.options().
The tooltip specs were refactored slightly to bucket all
provider-related specs under a single `describe` for cleanliness.
Changes to the path API in nodeJS causes the build to fail with grunt 0.4.0. This patch fixes it in two ways:
- Update to grunt 0.4.1 - this version fixes the bug
- Add cwd option to build - this also fixes the issue but from our side and works with grunt 0.4.0
Popover and tooltip directive creation is now performed through the help
of the `$tooltip` service that manages all aspects of directive
creation and management based on only the name of the component and
their default triggers.
The tooltip and popover sub-directives and their templates were
refactored to use common scope variables that the new service can
provide, yielding even greater flexibility.
Animation is now enabled by default.
Lastly, the `$tooltipProvider` has been established to allow setting
default global options for the tooltip and popover, but these features
are not yet public as the API is sure to change drastically as we flesh
out which global options to allow. But the framework is in place as this
was a logical time to incorporate it.
Defines a new directive <accordion-heading> that can be used below <accordion-group> elements to provide HTML to be transcluded into the group's heading.
The transcluded headfng is compiled and linked to the same scope as the transcluded body - so it can contain AngularJS directives itself.
Changing the $dialog service to treat the 'resolve' property the same way as $routeProvider does. It means expecting a string or a factory function instead of a value.
Signed-off-by: thiagofelix <felixthi@gmail.com>
As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery
* Personal attacks
* Trolling or insulting/derogatory comments
* Public or private harassment
* Publishing other's private information, such as physical or electronic addresses, without explicit permission
* Other unethical or unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)
We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules:
* Please make sure that your contribution fits well in the project's context:
* we are aiming at rebuilding boostrap directives in pure AngularJS, without any dependencies on any external JavaScript library;
* the only dependency should be boostrap CSS and its markup structure;
* directives should be html-agnostic as much as possible which in practice means:
* templates should be referred to using the `templateUrl` property
* it should be easy to change a default template to a custom one
* directives shouldn't manipulate DOM structure directly (when possible)
*Please assure that you are submitting quality code, specifically make sure that:
* your directive has accompanying tests and all the tests are passing; don't hesitate to contact us (angular-ui@googlegroups.com) if you ned any help with unit testing
* your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
## Got a question or problem?
Firstly, please go over our FAQ: https://github.com/angular-ui/bootstrap/wiki/FAQ
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](http://stackoverflow.com/questions/tagged/angular-ui-bootstrap) where maintainers are looking at questions tagged with `angular-ui-bootstrap`.
StackOverflow is a much better place to ask questions since:
* there are hundreds of people willing to help on StackOverflow
* questions and answers stay available for public viewing so your question / answer might help someone else
*SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
## You think you've found a bug?
Oh, we are ashamed and want to fix it asap! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a _minimal_ reproduce scenario using http://plnkr.co/. Having a live reproduce scenario gives us wealth of important information without going back & forth to you with additional questions like:
* version of AngularJS used
* version of this library that you are using
* 3rd-party libraries used, if any
* and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
The best part is that you don't need to create plunks from scratch - you can use one from our [demo page](http://angular-ui.github.io/bootstrap/).
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co/, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
## You want to contribute some code?
We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules:
* Please make sure that your contribution fits well in the project's context:
* we are aiming at rebuilding bootstrap directives in pure AngularJS, without any dependencies on any external JavaScript library;
* the only dependency should be bootstrap CSS and its markup structure;
* directives should be html-agnostic as much as possible which in practice means:
* templates should be referred to using the `templateUrl` property
* it should be easy to change a default template to a custom one
* directives shouldn't manipulate DOM structure directly (when possible)
* Please assure that you are submitting quality code, specifically make sure that:
* your directive has accompanying tests and all the tests are passing; don't hesitate to contact us (angular-ui@googlegroups.com) if you need any help with unit testing
* your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
* your commits conform to the conventions established [here](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)
- [Contributing to the project](#contributing-to-the-project)
- [Development, meeting minutes, roadmap and more.](#development-meeting-minutes-roadmap-and-more)
## Project philosophy
### Native, lightweight directives
# Demo
We are aiming at providing a set of AngularJS directives based on Twitter Bootstrap's markup and CSS. The goal is to provide **native AngularJS directives** without any dependency on jQuery or Bootstrap's JavaScript.
It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.
Do you want to see directives in action? Visit https://angular-ui.github.io/bootstrap/!
### Customizability
# Angular 2
All the directives in this repository should have their markup externalized as templates (loaded via `templateUrl`). In practice it means that you can **customize directive's markup at will**. One could even imagine providing a non-Boostrap version of the templates!
Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core).
### Take what you need and not more
# Installation
Each directive has its own AngularJS module without any dependencies on other modules or third-pary JavaScript code. In practice it means that you can **just grab the code for the directives you need** and you are not obliged to drag the whole repository.
Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required.
*Notes:*
* Since version 0.13.0, UI Bootstrap depends on [ngAnimate](https://docs.angularjs.org/api/ngAnimate) for transitions and animations, such as the accordion, carousel, etc. Include `ngAnimate` in the module dependencies for your app in order to enable animation.
* UI Bootstrap depends on [ngTouch](https://docs.angularjs.org/api/ngTouch) for swipe actions. Include `ngTouch` in the module dependencies for your app in order to enable swiping.
### Quality and stability
## Angular Requirements
* UI Bootstrap 1.0 and higher _requires_ Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
* UI Bootstrap 0.14.3 is the _last_ version that supports Angular 1.3.x.
* UI Bootstrap 0.12.0 is the _last_ version that supports Angular 1.2.x.
Directives should work. All the time and in all browsers. This is why all the directives have a comprehensive suite of unit tests. All the automated tests are executed on each checkin in several browsers: Chrome, ChromeCanary, Firefox, Opera, Safari, IE9.
In fact we are fortunate enough to **benefit from the same testing infrastructure as AngularJS**!
## Bootstrap Requirements
* UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
* UI Bootstrap 0.8 is the _last_ version that supports Bootstrap CSS 2.3.x.
## Contributing to the project
#### Install with NPM
We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](bootstrap/blob/master/CONTRIBUTING.md) for the contribution guidelines.
```sh
$ npm install angular-ui-bootstrap
```
### Development
#### Prepare your environment
* Install [Node.js](http://nodejs.org/) and NPM (should come with)
* Install global dev dependencies: `npm install -g grunt testacular`
* Instal local dev dependencies: `npm install` while current directory is bootstrap repo
This will install AngularJS and Bootstrap NPM packages.
#### Run unit tests
* Start testacular server: `grunt server`
* Run test: `grunt test-run`
#### Install with Bower
```sh
$ bower install angular-bootstrap
```
#### Before commit
* Build the whole project: `grunt` - this will run `lint`, `test`, and `concat` targets
Note: do not install 'angular-ui-bootstrap'. A separate repository - [bootstrap-bower](https://github.com/angular-ui/bootstrap-bower) - hosts the compiled javascript file and bower.json.
### Release
* Bump up version number in `package.json`
* Commit the version change with the following message: `chore(release): [versio number]`
* tag
* push changes with a tag: `git push --tags`
* switch to the `gh-pages` branch: `git checkout gh-pages`
* copy content of the dist folder to the main folder
* Commit the version change with the following message: `chore(release): [versio number]`
* tag
* push changes with a tag: `git push --tags`
#### Install with NuGet
To install AngularJS UI Bootstrap, run the following command in the Package Manager Console
Well done! (If you don't like repeating yourself open a PR with a grunt task taking care of the above!)
```sh
PM> Install-Package Angular.UI.Bootstrap
```
#### Custom build
Head over to https://angular-ui.github.io/bootstrap/ and hit the *Custom build* button to create your own custom UI Bootstrap build, just the way you like it.
#### Manual download
After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here:
Don't worry, if you are not sure which file to take, opt for `ui-bootstrap-tpls-[version].min.js`.
### Adding dependency to your project
When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the `ui.bootstrap` AngularJS module:
```js
angular.module('myModule',['ui.bootstrap']);
```
# Webpack / JSPM
To use this project with webpack, follow the [NPM](#install-with-npm) instructions.
Now, if you want to use only the accordion, you can do:
This will load all the dependencies (if any) and also the templates (if any).
Be sure to have a loader able to process `css` files like `css-loader`.
If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the `index-nocss.js` file instead, which is available for the modules:
* carousel
* datepicker
* datepickerPopup
* dropdown
* modal
* popover
* position
* timepicker
* tooltip
* typeahead
The other modules, such as `accordion` in the example below, do not have CSS resources to load, so you should continue to import them as normal:
Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows [semantic versioning](http://semver.org/). All release changes can be viewed on our [changelog](CHANGELOG.md).
# Support
## FAQ
https://github.com/angular-ui/bootstrap/wiki/FAQ
# Code of Conduct
Take a moment to read our [Code of Conduct](CODE_OF_CONDUCT.md)
## PREFIX MIGRATION GUIDE
If you're updating your application to use prefixes, please check the [migration guide](https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes).
## Supported browsers
Directives from this repository are automatically tested with the following browsers:
* Chrome (stable and canary channel)
* Firefox
* IE 9 and 10
* Opera
* Safari
Modern mobile browsers should work without problems.
## Need help?
Need help using UI Bootstrap?
* Live help in the IRC (`#angularjs` channel at the `freenode` network). Use this [webchat](https://webchat.freenode.net/) or your own IRC client.
* Ask a question in [StackOverflow](http://stackoverflow.com/) under the [angular-ui-bootstrap](http://stackoverflow.com/questions/tagged/angular-ui-bootstrap) tag.
**Please do not create new issues in this repository to ask questions about using UI Bootstrap**
## Found a bug?
Please take a look at [CONTRIBUTING.md](CONTRIBUTING.md#you-think-youve-found-a-bug) and submit your issue [here](https://github.com/angular-ui/bootstrap/issues/new).
----
# Contributing to the project
We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.
# Development, meeting minutes, roadmap and more.
Head over to the [Wiki](https://github.com/angular-ui/bootstrap/wiki) for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.
<!-- Place this tag where you want the +1 button to render. -->
<divclass="g-plusone"data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<scripttype="text/javascript">
(function(){
varpo=document.createElement('script');
po.type='text/javascript';
po.async=true;
po.src='https://apis.google.com/js/plusone.js';
vars=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po,s);
})();
</script>
</li>
</ul>
</div>
</div>
</header>
<divclass="container">
<sectionid="getting_started">
<divclass="page-header">
<h1>Getting started</h1>
</div>
<divclass="row">
<divclass="span12">
<h3>Dependencies</h3>
<p>
This repository contains a set of <strong>native AngularJS directives</strong> based on
Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
JavaScript is required. The <strong>only required dependencies</strong> are:
</p>
<ul>
<li>AngularJS (minimal version 1.0.4 or 1.1.2)</li>
<li>Bootstrap CSS</li>
</ul>
<h3>Files to download</h3>
<p>
Build files for all directives are distributed in several flavours: minified for production usage, un-minified
for development, with or without templates. All the options are described and can be
<ahref="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>.
</p>
<p>Alternativelly, if you are only interested in a subset of directives, you can
<ang-click="showBuildModal()">create your own build</a>.
</p>
<p>Whichever method you choose the good news that the overall size of a download is very small:
<20kB for all directives (~5kB with gzip compression!)</p>
</div>
</div>
</section>
<% modules.forEach(function(module) { %>
<sectionid="<%= module.name %>">
<divclass="page-header">
<h1><%= module.displayName %></h1>
</div>
<divclass="row">
<divclass="span6">
<%= module.html %>
</div>
<divclass="span6">
<%= module.description %>
<section>
Directive is found in the module <ahref="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>
<p>Designed and built by <ahref="https://github.com/angular-ui?tab=members"target="_blank">Angular-UI team</a> and <ahref="https://github.com/angular-ui/bootstrap/graphs/contributors"target="_blank">contributors</a>.</p>
<p>Code licensed under <ahref="https://github.com/angular-ui/bootstrap/blob/master/LICENSE">MIT License</a>.</p>
This repository contains a set of <strong>native AngularJS directives</strong> based on
Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
JavaScript is required. The <strong>only required dependencies</strong> are:
</p>
<ul>
<li><ahref="http://angularjs.org"target="_blank">AngularJS</a> (requires AngularJS 1.4.x or higher, tested with <%= ngversion %>).
0.14.3 is the last version of this library that supports AngularJS 1.3.x and
0.12.0 is the last version that supports AngularJS 1.2.x.</li>
<li><ahref="http://angularjs.org"target="_blank">Angular-animate</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using animations, you need to load angular-animate as well.</li>
<li><ahref="http://angularjs.org"target="_blank">Angular-touch</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using swipe actions, you need to load angular-touch as well.</li>
<li><ahref="http://getbootstrap.com"target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>).
This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x.
0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
</li>
</ul>
<h3>Files to download</h3>
<p>
Build files for all directives are distributed in several flavours: minified for production usage, un-minified
for development, with or without templates. All the options are described and can be
<ahref="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <ahref="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <ahref="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.
</p>
<p>Alternativelly, if you are only interested in a subset of directives, you can
<ang-click="showBuildModal()">create your own build</a>.
</p>
<p>Whichever method you choose the good news that the overall size of a download is fairly small:
122K minified for all directives with templates and 98K without (~31kB with gzip
compression, with templates, and 28K gzipped without)</p>
<h3>Installation</h3>
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the <code>ui.bootstrap</code><ahref="http://docs.angularjs.org/guide/module">module</a>:<br>
<p>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
<p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
<h3>Migration to prefixes</h3>
<p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
<p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>
</p>
<h3>FAQ</h3>
<p>Please check <ahref="https://github.com/angular-ui/bootstrap/wiki/FAQ"target="_blank">our FAQ section</a> for common problems / solutions.</p>
<h3>Reading the documentation</h3>
<p>
Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.
</p>
<p>
For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:
<ul>
<li><iclass="glyphicon glyphicon-eye-open"></i> - This setting has an angular $watch listener applied to it.</li>
<li><smallclass="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
<li><smallclass="badge">C</small> - This setting can be configured globally in a constant service*.</li>
<li><smallclass="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
<li><smallclass="badge">readonly</small> - This setting is readonly.</li>
</ul>
</p>
<p>
For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.
</p>
<p>
* Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
**node-markdown** is based on [Showdown](http://attacklab.net/showdown/) parser and is meant to parse [Markdown](http://daringfireball.net/projects/markdown/) syntax into HTML code.
Installation
------------
Use `npm` package manager
npm install node-markdown
Usage
-----
Include Markdown parser
var md = require("node-markdown").Markdown;
Parse Markdown syntax into HTML
var html = md("**markdown** string");
Allow only [default set](http://github.com/andris9/node-markdown/blob/master/lib/markdown.js#L38) of HTML tags to be used
var html = md("**markdown** string", true);
Allow only specified HTML tags to be used (default set of allowed attributes is used)
var html = md("**markdown** string", true, "p|strong|span");
Allow specified HTML tags and specified attributes
var html = md("**markdown** string", true, "p|strong|span", {
"a":"href", // 'href' for links
"*":"title|style" // 'title' and 'style' for all
});
Complete example
var md_text = "**bold** *italic* [link](http://www.neti.ee) `code block`",
<h4>a javascript port of <ahref="http://daringfireball.net/projects/markdown/"title="The Markdown web site">Markdown</a></h4>
</div>
<divid="leftContainer">
<divclass="paneHeader">
<span>Input</span>
</div>
<textareaid="inputPane"cols="80"rows="20"class="pane">Using this tool
---------------
This page lets you create HTML by entering text in a simple format that's easy to read and write.
- Type Markdown text in the left window
- See the HTML in the right
Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email. As [John Gruber] writes on the [Markdown site] [1]:
> The overriding design goal for Markdown's
> formatting syntax is to make it as readable
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.
This document is written in Markdown; you can see the plain-text version on the left. To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right. You can see a Markdown syntax guide by switching the right-hand window from *Preview* to *Syntax Guide*.
Showdown is a Javascript port of Markdown. You can get the full [source code] by clicking on the version number at the bottom of the page.
**Start with a [blank page] or edit this document in the left window.**
This is an overview of Markdown's syntax. For more information, visit the [Markdown web site].
[Markdown web site]:
http://daringfireball.net/projects/markdown/
Italics and Bold
================
*This is italicized*, and so is _this_.
**This is bold**, and so is __this__.
You can use ***italics and bold together*** if you ___have to___.
Links
=====
Simple links
------------
There are three ways to write links. Each is easier to read than the last:
Here's an inline link to [Google](http://www.google.com/).
Here's a reference-style link to [Google] [1].
Here's a very readable link to [Yahoo!].
[1]: http://www.google.com/
[yahoo!]: http://www.yahoo.com/
The link definitions can appear anywhere in the document -- before or after the place where you use them. The link definition names (`1` and `Yahoo!`) can be any unique string, and are case-insensitive; `[Yahoo!]` is the same as `[YAHOO!]`.
Advanced links: Title attributes
--------------------------------
You can also add a `title` attribute to a link, which will show up when the user holds the mouse pointer it. Title attributes are helpful if your link text is not descriptive enough to tell users where they're going. (In reference links, you can use optionally parentheses for the link title instead of quotation marks.)
Here's a [poorly-named link](http://www.google.com/ "Google").
Never write "[click here][^2]".
Trust [me].
[^2]: http://www.w3.org/QA/Tips/noClickHere
(Advice against the phrase "click here")
[me]: http://www.attacklab.net/ "Attacklab"
Advanced links: Bare URLs
-------------------------
You can write bare URLs by enclosing them in angle brackets:
My web site is at <http://www.attacklab.net>.
If you use this format for email addresses, Showdown will encode the address to make it harder for spammers to harvest. Try it and look in the *HTML Output* pane to see the results:
Humans can read this, but most spam harvesting robots can't: <me@privacy.net>
Headers
=======
There are two ways to do headers in Markdown. (In these examples, Header 1 is the biggest, and Header 6 is the smallest.)
You can underline text to make the two top-level headers:
Header 1
========
Header 2
--------
The number of `=` or `-` signs doesn't matter; you can get away with just one. But using enough to underline the text makes your titles look better in plain text.
You can also use hash marks for all six levels of HTML headers:
# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######
The closing `#` characters are optional.
Horizontal Rules
================
You can insert a horizontal rule by putting three or more hyphens, asterisks, or underscores on a line by themselves:
---
*******
___
You can also use spaces between the characters:
- - - -
All of these examples produce the same output.
Lists
=====
Simple lists
------------
A bulleted list:
- You can use a minus sign for a bullet
+ Or plus sign
* Or an asterisk
A numbered list:
1. Numbered lists are easy
2. Markdown keeps track of the numbers for you
7. So this will be item 3.
A double-spaced list:
- This list gets wrapped in `<p>` tags
- So there will be extra space between items
Advanced lists: Nesting
-----------------------
You can put other Markdown blocks in a list; just indent four spaces for each nesting level. So:
1. Lists in a list item:
- Indented four spaces.
* indented eight spaces.
- Four spaces again.
2. Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.
We indented the first line an extra space to align
it with these paragraphs. In real use, we might do
that to the entire list so that all items line up.
This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.
3. Blockquotes in a list item:
> Skip a line and
> indent the >'s four spaces.
4. Preformatted text in a list item:
Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.
Blockquotes
===========
Simple blockquotes
------------------
Blockquotes are indented:
> The syntax is based on the way email programs
> usually do quotations. You don't need to hard-wrap
> the paragraphs in your blockquotes, but it looks much nicer if you do. Depends how lazy you feel.
Advanced blockquotes: Nesting
-----------------------------
You can put other Markdown blocks in a blockquote; just add a `>` followed by a space:
Parragraph breaks in a blockquote:
> The > on the blank lines is optional.
> Include it or don't; Markdown doesn't care.
>
> But your plain text looks better to
> humans if you include the extra `>`
> between paragraphs.
Blockquotes within a blockquote:
> A standard blockquote is indented
>> A nested blockquote is indented more
>>>> You can nest to any depth.
Lists in a blockquote:
> - A list in a blockquote
> - With a > and space in front of it
> * A sublist
Preformatted text in a blockquote:
> Indent five spaces total. The first
> one is part of the blockquote designator.
Images
======
Images are exactly like links, but they have an exclamation point in front of them:
The word in square brackets is the alt text, which gets displayed if the browser can't show the image. Be sure to include meaningful alt text for blind users' screen-reader software.
Just like links, images work with reference syntax and titles:
This page is ![valid XHTML][checkmark].
[checkmark]: http://w3.org/Icons/valid-xhtml10
"What are you smiling at?"
**Note:**
Markdown does not currently support the shortest reference syntax for images:
Here's a broken ![checkmark].
But you can use a slightly more verbose version of implicit reference names:
This ![checkmark][] works.
The reference name (`valid icon`) is also used as the alt text.
Inline HTML
===========
If you need to do something that Markdown can't handle, you can always just use HTML:
Strikethrough humor is <strike>funny</strike>.
Markdown is smart enough not to mangle your span-level HTML:
<u>Markdown works *fine* in here.</u>
Block-level HTML elments have a few restrictions:
1. They must be separated from surrounding text by blank
lines.
2. The begin and end tags of the outermost block element
must not be indented.
3. You can't use Markdown within HTML blocks.
So:
<div style="background-color: lightgray">
You can <em>not</em> use Markdown in here.
</div>
Preformatted Text
=================
You can include preformatted text in a Markdown document.
To make a code block, indent four spaces:
printf("goodbye world!"); /* his suicide note
was in C */
The text will be wrapped in `<pre>` and `<code>` tags, and the browser will display it in a monospaced typeface. The first four spaces will be stripped off, but all other whitespace will be preserved.
You cannot use Markdown or HTML within a code block, which makes them a convenient way to show samples of Markdown or HTML syntax:
<blink>
You would hate this if it weren't
wrapped in a code block.
</blink>
Code Spans
==========
You can make inline `<code>` tags by using code spans. Use backticks to make a code span:
Press the `<Tab>` key, then type a `$`.
(The backtick key is in the upper left corner of most keyboards.)
Like code blocks, code spans will be displayed in a monospaced typeface. Markdown and HTML will not work within them:
Markdown italicizes things like this: `I *love* it.`
Don't use the `<font>` tag; use CSS instead.
This directory contains John Gruber's original Perl implementation of Markdown. Smart diff programs like Araxis Merge will be able to match up this file with markdown.pl.
A little tweaking helps. In markdown.pl:
- replace `#` with `//`
- replace `$text` with `text`
Be sure to ignore whitespace and line endings.
Note: This release of Showdown is based on `markdown1.0.2b7.pl`, but uses the HTML parser from `markdown1.0.2b2.pl`.
Original Markdown Copyright (c) 2004-2005 John Gruber
<http://daringfireball.net/projects/markdown/>
Redistributable under a BSD-style open source license.
See license.txt for more information.
What's it for?
--------------
Developers can use Showdown to:
* Add in-browser preview to existing Markdown apps
Showdown's output is (almost always) identical to
markdown.pl's, so the server can reproduce exactly
the output that the user saw. (See below for
exceptions.)
* Add Markdown input to programs that don't support it
Any app that accepts HTML input can now be made to speak
Markdown by modifying the input pages's HTML. If your
application lets users edit documents again later,
then they won't have access to the original Markdown
text. But this should be good enough for many
uses -- and you can do it with just a two-line
`onsubmit` function!
* Add Markdown input to closed-source web apps
You can write bookmarklets or userscripts to extend
any standard textarea on the web so that it accepts
Markdown instead of HTML. With a little more hacking,
the same can probably be done with many rich edit
controls.
* Build new web apps from scratch
A Showdown front-end can send back text in Markdown,
HTML or both, so you can trade bandwidth for server
load to reduce your cost of operation. If your app
requires JavaScript, you won't need to do any
Markdown processing on the server at all. (For most
uses, you'll still need to sanitize the HTML before
showing it to other users -- but you'd need to do
that anyway if you're allowing raw HTML in your
Markdown.)
Browser Compatibility
---------------------
Showdown has been tested successfully with:
- Firefox 1.5 and 2.0
- Internet Explorer 6 and 7
- Safari 2.0.4
- Opera 8.54 and 9.10
- Netscape 8.1.2
- Konqueror 3.5.4
In theory, Showdown will work in any browser that supports ECMA 262 3rd Edition (JavaScript 1.5). The converter itself might even work in things that aren't web browsers, like Acrobat. No promises.
Known Differences in Output
---------------------------
In most cases, Showdown's output is identical to that of Perl Markdown v1.0.2b7. What follows is a list of all known deviations. Please email me if you find more.
* This release uses the HTML parser from Markdown 1.0.2b2,
which means it fails `Inline HTML (Advanced).text` from
the Markdown test suite:
<div>
<div>
unindented == broken
</div>
</div>
* Showdown doesn't support the markdown="1" attribute:
<div markdown="1">
Markdown does *not* work in here.
</div>
This is half laziness on my part and half stubbornness.
Markdown is smart enough to process the contents of span-
level tags without screwing things up; shouldn't it be
able to do the same inside block elements? Let's find a
way to make markdown="1" the default.
* You can only nest square brackets in link titles to a
depth of two levels:
[[fine]](http://www.attacklab.net/)
[[[broken]]](http://www.attacklab.net/)
If you need more, you can escape them with backslashes.
* When sublists have paragraphs, Showdown produces equivalent
HTML with a slightly different arrangement of newlines:
+ item
- subitem
The HTML has a superfluous newline before this
paragraph.
- subitem
The HTML here is unchanged.
- subitem
The HTML is missing a newline after this
list subitem.
* Markdown.pl creates empty title attributes for
inline-style images:
Here's an empty title on an inline-style
.
I tried to replicate this to clean up my diffs during
testing, but I went too far: now Showdown also makes
"readme":"node-markdown\n=============\n\n**node-markdown** is based on [Showdown](http://attacklab.net/showdown/) parser and is meant to parse [Markdown](http://daringfireball.net/projects/markdown/) syntax into HTML code.\n\nInstallation\n------------\n\nUse `npm` package manager\n\n npm install node-markdown\n\nUsage\n-----\n\nInclude Markdown parser\n\n var md = require(\"node-markdown\").Markdown;\n\nParse Markdown syntax into HTML\n\n var html = md(\"**markdown** string\");\n\nAllow only [default set](http://github.com/andris9/node-markdown/blob/master/lib/markdown.js#L38) of HTML tags to be used\n\n var html = md(\"**markdown** string\", true);\n\nAllow only specified HTML tags to be used (default set of allowed attributes is used)\n\n var html = md(\"**markdown** string\", true, \"p|strong|span\");\n\nAllow specified HTML tags and specified attributes\n\n var html = md(\"**markdown** string\", true, \"p|strong|span\", {\n \"a\":\"href\", // 'href' for links\n \"*\":\"title|style\" // 'title' and 'style' for all\n });\n\nComplete example\n\n var md_text = \"**bold** *italic* [link](http://www.neti.ee) `code block`\",\n md_parser = require(\"node-markdown\").Markdown;\n\n // simple\n console.log(md_parser(md_text));\n \n // limit HTML tags and attributes\n console.log(md_parser(md_text, true, 'h1|p|span'));\n \n // limit HTML tags and keep attributes for allowed tags\n var allowedTags = 'a|img';\n allowedAttributes = {\n 'a':'href|style',\n 'img': 'src',\n '*': 'title'\n }\n console.log(md_parser(md_text, true, allowedTags, allowedAttributes));\n",
The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
We can control whether expanding an item will cause the other items to close, using the `close-others` attribute on accordion.
The body of each accordion group is transcluded into the body of the collapsible element.
The body of each accordion group is transcluded in to the body of the collapsible element.
### uib-accordion settings
*`close-others`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `true`)_ -
Control whether expanding an item will cause the other items to close.
Add the ability to override the template used on the component.
### Accordion heading
Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.
If you're using a custom template for the `uib-accordion-group`, you'll need to have an element for the heading to be transcluded into using `uib-accordion-header` (e.g. `<div uib-accordion-header></div>`).
### Known issues
To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add `cursor: pointer` in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.
If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the `ng-class` usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. `<uib-accordion-group class="{{customClass()}}"></uib-accordion-group>`.
it('should have disabled styling when is-disabled is true',isDisabledStyleCheck);
});
describe('uib-accordion-heading, with repeating uib-accordion-groups',function(){
it('should clone the uib-accordion-heading for each group',function(){
element=$compile('<uib-accordion><div uib-accordion-group ng-repeat="x in [1,2,3]"><uib-accordion-heading>{{x}}</uib-accordion-heading></div></uib-accordion>')(scope);
scope.$digest();
groups=element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
expect(findGroupLink(2).text()).toBe('3');
});
});
describe('uib-accordion-heading attribute, with repeating uib-accordion-groups',function(){
it('should clone the uib-accordion-heading for each group',function(){
element=$compile('<uib-accordion><div uib-accordion-group ng-repeat="x in [1,2,3]"><div uib-accordion-heading>{{x}}</div></div></uib-accordion>')(scope);
scope.$digest();
groups=element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
expect(findGroupLink(2).text()).toBe('3');
});
});
describe('uib-accordion-heading attribute, with custom template',function(){
it('should transclude heading to a template using data-uib-accordion-header',inject(function($templateCache){
Alert is an AngularJS-version of bootstrap's alert.
This directive can be used both to generate alerts from static and dynamic model data (using the `ng-repeat` directive).
This directive can be used to generate alerts from the dynamic model data (using the ng-repeat directive);
### uib-alert settings
*`close()`
<small class="badge">$</small> -
A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.
*`dismiss-on-timeout`
_(Default: `none`)_ -
Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.
*`template-url`
_(Default: `uib/template/alert/alert.html`)_ -
Add the ability to override the template used in the component.
With the buttons directive, we can make a group of buttons behave like a set of checkboxes (`uib-btn-checkbox`) or behave like a set of radio buttons (`uib-btn-radio`).
### uib-btn-checkbox settings
*`btn-checkbox-false`
_(Default: `false`)_ -
Sets the value for the unchecked status.
*`btn-checkbox-true`
_(Default: `true`)_ -
Sets the value for the checked status.
*`ng-model`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the checkbox status. By default `true` or `false`.
### uib-btn-radio settings
*`ng-model`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the radio status. All radio buttons in a group should use the same `ng-model`.
*`uib-btn-radio` -
<small class="badge">$</small>
Value to assign to the `ng-model` if we check this radio button.
*`uib-uncheckable`
<small class="badge">$</small>
_(Default: `null`)_ -
An expression that evaluates to a truthy or falsy value that determines whether the `uncheckable` attribute is present.
*`uncheckable`
<small class="badge">B</small> -
Whether a radio button can be unchecked or not.
### Additional settings `uibButtonConfig`
*`activeClass`
_(Default: `active`)_ -
Class to apply to the checked buttons.
*`toggleEvent`
_(Default: `click`)_ -
Event used to toggle the buttons.
### Known issues
To use tooltips or popovers on elements within a `btn-group`, set the tooltip/popover `appendToBody` option to `true`. This is due to Bootstrap CSS styling. See [here](http://getbootstrap.com/components/#btn-groups) for more information.
Carousel creates a carousel similar to bootstrap's image carousel.
Use a `<carousel>` element with `<slide>` elements inside it. It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.
Use a `<uib-carousel>` element with `<uib-slide>` elements inside it.
### uib-carousel settings
*`active`
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `Index of first slide`)_ -
Index of current active slide.
*`interval`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `none`)_ -
Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.
*`no-pause`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
The interval pauses on mouseover. Setting this to truthy, disables this pause.
*`no-transition`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.
*`no-wrap`
<small class="badge">$</small>
_(Default: `false`)_ -
Disables the looping of slides. Setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
Add the ability to override the template used on the component.
### uib-slide settings
*`actual`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `none`)_ -
Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.
*`index`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `none`)_ -
The index of the slide. Must be unique.
*`template-url`
_(Default: `uib/template/carousel/slide.html`)_ -
Add the ability to override the template used on the component.
**uib-collapse** provides a simple way to hide and show an element with a css transition
### uib-collapse settings
*`collapsed()`
<small class="badge">$</small> -
An optional expression called after the element finished collapsing.
*`collapsing()`
<small class="badge">$</small> -
An optional expression called before the element begins collapsing.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, collapsing will be cancelled.
*`expanded()`
<small class="badge">$</small> -
An optional expression called after the element finished expanding.
*`expanding()`
<small class="badge">$</small> -
An optional expression called before the element begins expanding.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, expanding will be cancelled.
*`uib-collapse`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
Whether the element should be collapsed or not.
*`horizontal`
<small class="badge">$</small> -
An optional attribute that permit to collapse horizontally.
### Known Issues
When using the `horizontal` attribute with this directive, CSS can reflow as the collapse element goes from `0px` to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.
The `uibDateParser` is what the `uib-datepicker` uses internally to parse the dates. You can use it standalone by injecting the `uibDateParser` service where you need it.
The public API for the dateParser is a single method called `parse`.
Certain format codes support i18n. Check this [guide](https://docs.angularjs.org/guide/i18n) for more information.
### uibDateParser's parse function
##### parameters
*`input`
_(Type: `string`, Example: `2004/Sep/4`)_ -
The input date to parse.
*`format`
_(Type: `string`, Example: `yyyy/MMM/d`)_ -
The format we want to use. Check all the supported formats below.
*`baseDate`
_(Type: `Date`, Example: `new Date()`)_ -
If you want to parse a date but maintain the timezone, you can pass an existing date here.
##### return
* If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.
### uibDateParser's format codes
*`yyyy`
_(Example: `2015`)_ -
Parses a 4 digits year.
*`yy`
_(Example: `15`)_ -
Parses a 2 digits year.
*`y`
_(Example: `15`)_ -
Parses a year with 1, 2, 3, or 4 digits.
*`MMMM`
_(Example: `February`, i18n support)_ -
Parses the full name of a month.
*`MMM`
_(Example: `Feb`, i18n support)_ -
Parses the short name of a month.
*`MM`
_(Example: `12`, Leading 0)_ -
Parses a numeric month.
*`M`
_(Example: `3`)_ -
Parses a numeric month.
*`M!`
_(Example: `3` or `03`)_ -
Parses a numeric month, but allowing an optional leading zero
*`LLLL`
_(Example: `February`, i18n support)_ - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.
*`dd`
_(Example: `05`, Leading 0)_ -
Parses a numeric day.
*`d`
_(Example: `5`)_ -
Parses a numeric day.
*`d!`
_(Example: `3` or `03`)_ -
Parses a numeric day, but allowing an optional leading zero
*`EEEE`
_(Example: `Sunday`, i18n support)_ -
Parses the full name of a day.
*`EEE`
_(Example: `Mon`, i18n support)_ -
Parses the short name of a day.
*`HH`
_(Example: `14`, Leading 0)_ -
Parses a 24 hours time.
*`H`
_(Example: `3`)_ -
Parses a 24 hours time.
*`hh`
_(Example: `11`, Leading 0)_ -
Parses a 12 hours time.
*`h`
_(Example: `3`)_ -
Parses a 12 hours time.
*`mm`
_(Example: `09`, Leading 0)_ -
Parses the minutes.
*`m`
_(Example: `3`)_ -
Parses the minutes.
*`sss`
_(Example: `094`, Leading 0)_ -
Parses the milliseconds.
*`ss`
_(Example: `08`, Leading 0)_ -
Parses the seconds.
*`s`
_(Example: `22`)_ -
Parses the seconds.
*`a`
_(Example: `10AM`)_ -
Parses a 12 hours time with AM/PM.
*`Z`
_(Example: `-0800`)_ -
Parses the timezone offset in a signed 4 digit representation
*`ww`
_(Example: `03`, Leading 0)_ -
Parses the week number
*`w`
_(Example: `03`)_ -
Parses the week number
*`G`, `GG`, `GGG`
_(Example: `AD`)_ -
Parses the era (`AD` or `BC`)
*`GGGG`
_(Example: `Anno Domini`)_ -
Parses the long form of the era (`Anno Domini` or `Before Christ`)
\* The ones marked with `Leading 0`, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.
\** It also supports `fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime` as the format for parsing.
\*** It supports template literals as a string between the single quote `'` character, i.e. `'The Date is' MM/DD/YYYY`. If one wants the literal single quote character, one must use `''''`.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.