Skip to content

Commit 65c431a

Browse files
mortoraymortoray
committed
restructure and add README
1 parent dcb78d8 commit 65c431a

File tree

8 files changed

+85
-23
lines changed

8 files changed

+85
-23
lines changed

‎Samples/UIStructure/CalendarNav/CalendarView/CalendarView.ux

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Page ux:Class="CalendarView">
2+
<Router ux:Dependency="router"/>
3+
<JavaScript>
4+
var d = new Date()
5+
router.gotoRelative( calNav, "month", { month: d.getMonth(), year: d.getFullYear() } )
6+
</JavaScript>
7+
<Navigator ux:Name="calNav" SwipeBack="Down">
8+
<NavigatorSwipe Direction="Left" How="GotoBookmark" Bookmark="nextMonth"
9+
Style="fromRight" IsEnabled="false" ux:Name="swipeLeft"/>
10+
<NavigatorSwipe Direction="Right" How="GotoBookmark" Bookmark="prevMonth"
11+
Style="fromLeft" IsEnabled="false" ux:Name="swipeRight"/>
12+
13+
<WhilePageActive NameEquals="month" Threshold="0">
14+
<Change swipeLeft.IsEnabled="true"/>
15+
<Change swipeRight.IsEnabled="true"/>
16+
</WhilePageActive>
17+
18+
<MonthView ux:Template="month" router="router" SwipeBack="None"/>
19+
<DayView ux:Template="day" router="router" ZOffset="1"/>
20+
</Navigator>
21+
</Page>

‎Samples/UIStructure/CalendarNav/DayView.js ‎Samples/UIStructure/CalendarNav/CalendarView/DayView.js

File renamed without changes.

‎Samples/UIStructure/CalendarNav/DayView.ux ‎Samples/UIStructure/CalendarNav/CalendarView/DayView.ux

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<JavaScript File="DayView.js"/>
44
<Panel Color="{Resource ColorWhite}" Padding="10">
55
<Rectangle CornerRadius="5,5,0,0" Color="{Resource ColorWhite}" Layer="Background"/>
6-
<Image Alignment="TopRight" File="Assets/cross.png" Color="{Resource ColorTextPrime}">
6+
<Image Alignment="TopRight" File="../Assets/cross.png" Color="{Resource ColorTextPrime}">
77
<Clicked>
88
<RouterModify How="GoBack"/>
99
</Clicked>

‎Samples/UIStructure/CalendarNav/MonthView.js ‎Samples/UIStructure/CalendarNav/CalendarView/MonthView.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
11
var Observable = require("FuseJS/Observable")
22
var DateTime = require("Lib/DateTime")
33

4+
var viewNode = this
45
var date = Observable(DateTime.first(new Date()))
56

7+
/** The parameter to this page contains the date we should be displaying. */
68
this.Parameter.onValueChanged( function(value) {
79
date.value = new Date(value.year, value.month,1)
810
})
911

12+
/** When a month is activated we set the bookmarks to the previous and next month. */
1013
exports.activated = function() {
1114
var p = new Date(date.value.valueOf())
1215
p.setMonth( p.getMonth() - 1)
1316
router.bookmark({
1417
name: "prevMonth",
18+
relative: viewNode,
1519
path: [ "month", { month: p.getMonth(), year: p.getFullYear() } ]
1620
})
1721

1822
p = new Date(date.value.valueOf())
1923
p.setMonth( p.getMonth() + 1)
2024
router.bookmark({
2125
name: "nextMonth",
26+
relative: viewNode,
2227
path: [ "month", { month: p.getMonth(), year: p.getFullYear() } ]
2328
})
2429
}
2530

31+
/** A day from the previous/next month on the grid */
2632
function FillDay(day) {
2733
this.type = "fill"
2834
this.day = day
2935
}
3036

37+
/** A day from the current month */
3138
function Day(day) {
3239
this.type = "day"
3340
this.day = day
3441
this.dayOfMonth = day.getDate()
3542
}
3643

37-
//TODO: someway to do this with `.map`
44+
/** The `days` are filled with complete weeks worth of days to cover the current month. */
3845
exports.days = Observable()
3946
date.onValueChanged( function(v) {
4047
var first = DateTime.first(v)
@@ -74,5 +81,5 @@ exports.daysOfWeek = DateTime.dayLabels
7481

7582
exports.openDay = function(args) {
7683
var day = args.data.day
77-
router.push( "day", { month: day.getMonth(), year: day.getFullYear(), day: day.getDate() })
84+
router.pushRelative( viewNode, "day", { month: day.getMonth(), year: day.getFullYear(), day: day.getDate() })
7885
}

‎Samples/UIStructure/CalendarNav/MonthView.ux ‎Samples/UIStructure/CalendarNav/CalendarView/MonthView.ux

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<DockPanel Color="{Resource ColorDark}" Padding="5">
1111
<Grid Dock="Top" Columns="auto,1*,auto" CellSpacing="5" Margin="0,0,0,5">
1212
<Panel Color="{Resource ColorHigh}" Width="35" Height="35">
13-
<Image File="Assets/arrowleft.png" Color="{Resource ColorTextPrime}"/>
13+
<Image File="../Assets/arrowleft.png" Color="{Resource ColorTextPrime}"/>
1414
<Clicked>
1515
<RouterModify Bookmark="prevMonth" Style="fromLeft"/>
1616
</Clicked>
@@ -19,7 +19,7 @@
1919
<Text FontSize="25" Color="{Resource ColorTextPrime}" Value="{monthLabel}" TextAlignment="Center" Alignment="VerticalCenter"/>
2020
</Panel>
2121
<Panel Color="{Resource ColorHigh}" Width="35" Height="35">
22-
<Image File="Assets/arrowright.png" Color="{Resource ColorTextPrime}"/>
22+
<Image File="../Assets/arrowright.png" Color="{Resource ColorTextPrime}"/>
2323
<Clicked>
2424
<RouterModify Bookmark="nextMonth" Style="fromRight"/>
2525
</Clicked>

‎Samples/UIStructure/CalendarNav/Lib/DateTime.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* A simple DateTime library used by this example */
2+
13
exports.monthDays = function(date) {
24
var d= new Date(date.getFullYear(), date.getMonth()+1, 0)
35
return d.getDate()

‎Samples/UIStructure/CalendarNav/MainView.ux

+2-18
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,8 @@
33
<Router ux:Name="router"/>
44

55
<ClientPanel>
6-
<JavaScript>
7-
var d = new Date()
8-
router.goto( "month", { month: d.getMonth(), year: d.getFullYear() } )
9-
</JavaScript>
10-
<Navigator SwipeBack="Down">
11-
<NavigatorSwipe Direction="Left" How="GotoBookmark" Bookmark="nextMonth"
12-
Style="fromRight" IsEnabled="false" ux:Name="swipeLeft"/>
13-
<NavigatorSwipe Direction="Right" How="GotoBookmark" Bookmark="prevMonth"
14-
Style="fromLeft" IsEnabled="false" ux:Name="swipeRight"/>
15-
16-
<WhilePageActive NameEquals="month" Threshold="0">
17-
<Change swipeLeft.IsEnabled="true"/>
18-
<Change swipeRight.IsEnabled="true"/>
19-
</WhilePageActive>
20-
21-
<MonthView ux:Template="month" router="router" SwipeBack="None"/>
22-
<DayView ux:Template="day" router="router" ZOffset="1"/>
23-
6+
<Navigator DefaultPath="calendar">
7+
<CalendarView router="router" ux:Template="calendar"/>
248
</Navigator>
259
</ClientPanel>
2610
</App>

‎Samples/UIStructure/CalendarNav/README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Calendar Navigation
2+
3+
This example creates a calendar component that allows navigation between months and viewing individual days.
4+
5+
6+
## CalendarView
7+
8+
The `CalendarView` folder is structured like a component you'd put into an existing application. It works with a global `Router` but uses relative routes during navigation.
9+
10+
The navigator in `MainView.ux` contains only this component. This shows how such a component might be included at a particular location in your app.
11+
12+
13+
## Bookmarks
14+
15+
Router bookmarks are being created to point the previous and next month. This happens anytime a `MonthView` is activated, in the JavaScript code. Using a bookmark lets us construct a complex route in JavaScript and then use it simply in the UX code.
16+
17+
For example, the previous month button navigates to one of our stored bookmarks:
18+
19+
<RouterModify Bookmark="prevMonth" Style="fromLeft"/>
20+
21+
22+
## NavigatorSwipe
23+
24+
The ability to swipe to the previous and next month is provided by `NavigatorSwipe` in `CalendarView.ux`.
25+
26+
For example, this is the code to go to the next month:
27+
28+
<NavigatorSwipe Direction="Left" How="GotoBookmark" Bookmark="nextMonth"
29+
Style="fromRight" IsEnabled="false" ux:Name="swipeLeft"/>
30+
31+
Notice that it is disabled by default. We have a `WhilePageActive` in the same file that enables it.
32+
33+
<WhilePageActive NameEquals="month" Threshold="0">
34+
35+
This ensures this swiping behaviour is only active while the user is actually in the month view. If any other page is active it will be disabled.
36+
37+
38+
## Transition Style
39+
40+
The `RouterModify` and `NavigatorSwipe` are both using a `Style` parameter. This lets us distinguish how the user is navigating to create specific left/right animations.
41+
42+
The style is matched inside the `Transition` animations of `MonthView`. For example, the navigation of the next month to the active one:
43+
44+
<Transition Style="fromLeft" Direction="ToActive">
45+
<Move X="-1" RelativeTo="ParentSize" Duration="0.4" Easing="SinusoidalInOut"/>
46+
</Transition>
47+
48+
Notice in that file we need to actually define four transitions to cover all the month-to-month navigation we have. Half of them could be avoided if `Transition` allowed for an "or" condition, but at the moment it does not.

0 commit comments

Comments
 (0)