Commit Graph

22 Commits

Author SHA1 Message Date
Adam Bradley
8ebde73d0b feat(swipe): iOS swipe to go back 2015-02-06 16:29:50 -06:00
Adam Bradley
d1c92dae14 refactor(activator): activate immediately when not scrolling 2014-12-03 01:54:28 -06:00
Adam Bradley
5d6a33c1db style(*): jscs linter updates to nav improvements 2014-11-11 23:04:33 -06:00
Adam Bradley
39951ca99a refactor(): navigation improvements, Angular 1.3
#### Refactor:

* **Navigation:** Refactored navigation for improved performance,
reduce DOM manipulations, increase transition FPS, cached views,
smoother transitions, platform specific transitions with added
configurable controls for transition animation and direction.
* **Cached Views:** Previously as a user navigated an app, each leaving
view’s element and scope would be destroyed. If the same view was
accessed again then the app would have to recreate the element. Views
can now be cached to improve performance. When a view is navigated away
from, its element is left in the DOM, and its scope is disconnected
from the cycle. When navigating to a view which is already cached, its
scope is reconnected, and the existing element which was left in the
DOM becomes the active view. This also allows for scroll position of
previous views to be maintained (without skippy jumps). Config
variables can be used to disable view caching (set to 0), or change the
maximum number of views to cache.
* **Angular v1.3:** Upgraded Ionic’s to work with Angular v1.3. In
general Ionic just works with the upgrade, but the required change was
that animations in v1.3 uses promise, whereas in v1.2 animations used
callbacks.

#### Features:

* **Platform Specific Transitions:** Transitions between views now
default to the transition style appropriate for each platform. For
example, iOS will move forward by transitioning the entering view from
right to center, and the leaving view from center to left. However,
Android will transition with the entering view going from bottom to
center, covering the previous view, which remains stationary. Platform
transitions are automatically applied by default, but config variables
and custom CSS allows these defaults to be easily overridden.
* **Override Transition Type and Direction:** As a user navigates the
app, Ionic automatically applies the appropriate transition type for
the platform, and the direction the user is navigating. However, both
can be overridden in numerous ways: config variable, view attribute,
stateProvider property, or attribute on the button/link that initiated
the transition.
* **enable-menu-with-back-views:** The `enable-menu-with-back-views`
attribute determines if the side menu is enabled when the back button
is showing. When set to `false`, any buttons/links with the
`menuToggle` directive will be hidden, and the user cannot swipe to
open the menu. When going back to the root page of the side menu (the
page without a back button visible), then any menuToggle buttons will
show again, and menus will be enabled again.
* **menuClose:** Closes a side menu which is currently opened.
Additionally, the menuClose directive will now cause transitions to not
animate between views while the menu is being closed.
* **ionNavBackButton:** The back button icon and text will
automatically update to platform config defaults, such as adjusting to
the platform back icon. To take advantage of this, the
`ionNavBackButton` directive now should be empty, such as
`<ion-nav-back-button></ion-nav-back-button>`. The back button can
still be fully customized like it could before, but without any inner
content it knows to style using platform configs.
* **navBar button primary/secondary sides:** Primary and secondary
sides are now the recommended values for the `side` attribute, such as
`<ion-nav-buttons side="primary">`. Primary buttons generally map to
the left side of the header, and secondary buttons are generally on the
right side. However, their exact locations are platform specific. For
example, in iOS the primary buttons are on the far left of the header,
and secondary buttons are on the far right, with the header title
centered between them. For Android however, both groups of buttons are
on the far right of the header, with the header title aligned left.
Recommendation is to always use `primary` and `secondary` so buttons
correctly map to the side familiar to users of a platform. However, in
cases where buttons should always be on an exact side, both `left` and
`right` sides are still available.
* **navDirection:** An attribute directive that sets the direction
which the nav view transition should animate.
* **navTransition:** An attribute directive that sets the transition
type which the nav view transition should use when it animates. Using
`none` will disable an animation.

#### Breaking Changes:

* **Animation CSS:** The CSS for view transitions have changed. This is
a breaking change only if Ionic apps had customized Ionic’s animation
CSS.
* **$ionicPlatformDefaults:** Platform config variables are no longer
in the $ionicPlatformDefaults constant, but within `$ionicConfig`.
* **$ionicViewService:** In the navigation refactoring,
$ionicViewService was split up into two factories, `$ionicViewSwitcher`
and `$ionicHistory`. The `$ionicHistory` is largely what
`$ionicViewService`, but between the two factories there is a better
separation of concerns for improved testing.
* **navClear:** The navClear directive was created to do what the new
side menu `enable-menu-with-back-views` attribute accomplishes.
Additionally, the new `navTransition` and `navDirection` directives are
more useful and granular than the navClear directive.
* **scrollView.rememberScrollPosition:** This method has been removed
since it is no longer needed with cached views.

#### Deprecated:

* **ionView.title:** The `ionView` directive used the `title`
attribute, but this can cause the tooltip to show up on desktop
browsers. The `title` attribute will still work for backwards
compatibility, but we now recommend using `view-title`, such as
`<ion-view view-title=”My Title”>`.
* **ionNavView animation attribute removed:** The animation attribute
is no longer used for nav views. Instead use `$ionicConfig`.
* **ionNavBar animation attribute removed:** The animation attribute is
no longer used for nav bars. Instead use `$ionicConfig`.
2014-11-11 14:43:10 -06:00
Perry Govier
840c014b27 fix(item): clicks climb 5 levels looking for an item to activate, but not 6. Fixes #1921 2014-08-19 14:20:35 -05:00
Andrew Joslin
3c15b118ca fix(activator): properly activate elements nested inside an item.
Addresses #1373.

Before: if an `<a>`, `ng-click`, or `<button>` inside of a .item,
was clicked, the activator would walk up .item and activate it.

Now:  If an `<a>`, `ng-click`, or `<button>` inside of a
.item is clicked, the activator will activate that element.

Additionally, CSS was added so `a.item-content.activated` would look
activated.
2014-05-13 08:56:37 -06:00
Adam Bradley
57d66b2a2d style(jshint): jshint 2014-05-08 08:19:14 -05:00
Adam Bradley
6b3c2b929a merge keyboard-fixes 2014-05-03 22:30:21 -05:00
Adam Bradley
05a6d7cca6 fix(tap): input[file] clicks within ion-content, closes #1237 2014-05-01 08:54:13 -05:00
Adam Bradley
22322610c8 remove console.log 2014-04-30 13:40:53 -05:00
Andy Joslin
b772a94de5 style(activator): remove console.log 2014-04-29 06:10:33 -06:00
Max Lynch
040af8245d fix(listView): fixed active state on scroll 2014-04-28 13:25:30 -05:00
Andy Joslin
8e3a3d0b2d activator: do not activate if tapRequiresNativeClick
Addresses #1202
2014-04-25 07:05:27 -06:00
Adam Bradley
d0047cda44 refactor(tap): Refactor tap system for improved tap/click/keyboard/scroll/focus
Overhaul of the tap system so the keyboard does not cover up focused
inputs, correctly bring up the keyboard on text input focus, disabling
focus during scroll, disabling clicks after a hold then scroll,
removing 300ms delay without additional event handlers on each element,
etc. Refactored the tap/click/scroll/activator events for more
testability, along with adding more tests.
2014-04-17 08:26:25 -05:00
Adam Bradley
cb602b587b fix(tap): Prevent clicks from firing after scrolling, #579 2014-04-04 12:28:42 -05:00
Adam Bradley
3ee5ea77a6 fix(tap): Deactivate elements during scroll at the same time click is ignored, #997
Previously I disabled the activation class immediately on a touchmove,
where as the click will still work if you touchstart and touchend
within a few pixels of each other. So visually it may have looked like
the click shouldn't have worked. I just updated it so the use the same
numbers. For example, if you hold down an item and move just 5 pixels,
the item will stay active (before it wouldn't have), and the click will
fire. But at the same time, if you hold down an item, and move a larger
distance, once it realizes that it went farther than 6 pixels it'll not
allow a click to happen, AND it'll not show the item as being active.
2014-04-03 23:24:31 -05:00
Adam Bradley
870dcd6f99 fix(active): Taps/clicks now use .activated instead of .active, closes #913
Both .active and .activated classes exist within the css now. When a
button/link/item is “active”, the .activated class gets added and
removed. This is so Ionic is not removing any user defined .active
classes, but also so users can use Ionic’s active classes (but not have
to worry about them being removed automatically by Ionic). Styled the
same by default, but easily overridden.
2014-03-27 21:26:59 -05:00
Adam Bradley
c355114365 prevent double active states on touch 2014-03-21 14:13:14 -05:00
Adam Bradley
423f9e4f77 fix(active): Updated which elements to set active class along w/ tests, closes #857 2014-03-21 09:08:40 -05:00
Adam Bradley
97e69f0464 only add move listener for pointer type started with, touch or mouse 2014-03-20 14:19:03 -05:00
Adam Bradley
bd4c1f48a5 modify how elements remove active class 2014-03-18 08:48:58 -05:00
Adam Bradley
8c55e280ba fix scrolling through list causes "active" class on items 2014-03-17 13:47:04 -05:00