KronolithMobile.currentDate = new Date();
$('body').bind('swipeleft', KronolithMobile.showNextDay);
$('body').bind('swiperight', KronolithMobile.showPrevDay);
+ $('#dayview').bind('pageshow', function(event, ui) {
+ $('body').bind('swipeleft', KronolithMobile.showNextDay);
+ $('body').bind('swiperight', KronolithMobile.showPrevDay);
+ });
+ $('#dayview').bind('pagebeforehide', function(event, ui) {
+ $('body').unbind('swipeleft', KronolithMobile.showNextDay);
+ $('body').unbind('swiperight', KronolithMobile.showPrevDay);
+ });
$('#prevDay').bind('click', KronolithMobile.showPrevDay);
$('#nextDay').bind('click', KronolithMobile.showNextDay);
KronolithMobile.listEventsCallback
);
- // Test the month building
+ // Set up the month view
+ // Build the first month, should due this on first page show, but the
+ // pagecreate event doesn't seem to fire for the internal page? Not sure how
+ // else to do it, so just build the first month outright.
var date = KronolithMobile.currentDate;
KronolithMobile.buildCal(date);
-
$('#kronolithMinicalPrev').bind('click', KronolithMobile.showPrevMonth);
$('#kronolithMinicalNext').bind('click', KronolithMobile.showNextMonth);
- $('#monthcontent').bind('swipeleft', KronolithMobile.showNextMonth);
- $('#monthcontent').bind('swiperight', KronolithMobile.showPrevMonth);
+
+ $('#monthview').bind('pageshow', function(event, ui) {
+ $('body').bind('swipeleft', KronolithMobile.showNextMonth);
+ $('body').bind('swiperight', KronolithMobile.showPrevMonth);
+ });
+ $('#monthview').bind('pagebeforehide', function(event, ui) {
+ $('body').unbind('swipeleft', KronolithMobile.showNextMonth);
+ $('body').unbind('swiperight', KronolithMobile.showPrevMonth);
+ });
});
// Some Date extensions from horde.js that can't be included because of it's
<script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/en-US.js"></script>
<script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/date.js"></script>
<script type="text/javascript" src="<?php echo $registry->get('jsuri', 'kronolith') ?>/kronolithmobile.js"></script>
- <link href="/horde/kronolith/themes/screen.css" rel="stylesheet" type="text/css" />
+ <link href="<?php echo $registry->get('themesuri');?>/mobile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Calendar:Day</h1>
<a class="ui-btn-left" href="<?php echo Horde::getServiceLink('portal', 'horde')?>"><?php echo _("Home")?></a>
<a rel="external" class="ui-btn-right" href="<?php echo Horde::getServiceLink('logout', 'horde')?>"><?php echo _("Logout")?></a>
- <div class="ui-bar-b" style="width:100%;text-align:center;"><a href="#" data-icon="arrow-l" data-iconpos="notext" id="prevDay"><?php echo _("Previous")?></a><span id="todayheader"></span><a href="#" data-icon="arrow-r" data-iconpos="notext" id="nextDay"><?php echo _("Next")?></a></div>
+ <div class="ui-bar-b" style="width:100%;text-align:center;"><a href="#" style="vertical-align: middle;" data-icon="arrow-l" data-iconpos="notext" id="prevDay"><?php echo _("Previous")?></a><span id="todayheader"></span><a href="#" style="vertical-align: middle;" data-icon="arrow-r" data-iconpos="notext" id="nextDay"><?php echo _("Next")?></a></div>
+ </div>
+ <div data-role="content" id="daycontent">
</div>
- <div data-role="content" class="ui-body" id="daycontent"></div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- Month View -->
<div data-role="page" id="monthview" class="monthview">
- <div data-role="header"><h1>Month</h1></div>
+ <div data-role="header">
+ <h1>Month</h1>
+ <a class="ui-btn-left" href="<?php echo Horde::getServiceLink('portal', 'horde')?>"><?php echo _("Home")?></a>
+ <a rel="external" class="ui-btn-right" href="<?php echo Horde::getServiceLink('logout', 'horde')?>"><?php echo _("Logout")?></a>
+ </div>
<div data-role="content" class="ui-body" id="monthcontent">
<div id="kronolithMinical" class="kronolithMinical">
<table>
--- /dev/null
+
+.kronolithEventTentative {
+ font-style: italic;
+}
+.kronolithEventCancelled {
+ text-decoration: line-through;
+}
+.event-time, .event-location {
+ font-size: 85%;
+}
+.weekend {
+ background: #ffc;
+}
+.description {
+ padding: .5em;
+}
+
+/* Mini calendar */
+.kronolithMinical {
+ position: relative;
+}
+#kronolithMinical {
+/* top: 15px;*/
+}
+.kronolithMinical table {
+ width: 100%;
+ border-spacing: 1px;
+}
+.kronolithMinical caption, #kronolithBody .kronolithMinical caption {
+ position: relative;
+ margin: 0 1px 1px 1px;
+ height: 20px;
+ line-height: 20px;
+ font-weight: bold;
+ font-size: 100%;
+ border-bottom: 1px #999 dotted;
+ text-align: left;
+}
+.kronolithMinical caption span {
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: pointer;
+}
+#kronolithMinicalPrev, #kronolithMinicalNext {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 16px;
+ text-indent: -10000px;
+ cursor: pointer;
+ background: transparent url("graphics/right.png") no-repeat right center;
+}
+#kronolithMinicalPrev {
+ background-image: url("graphics/left.png");
+ right: 15px;
+}
+
+.kronolithMinical th, .kronolithMinical td {
+ font-size: 90%;
+}
+.kronolithMinical th, .kronolithMinical td.kronolithMinicalWeek {
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ text-align: center;
+ background-color: #d6d6d6;
+ color: #202020;
+ border: 1px #999 solid !important;
+}
+.kronolithMinical tbody td {
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ border: 1px #999 solid;
+ text-align: center;
+ color: #808080;
+ empty-cells: show;
+ cursor: pointer;
+}
+.kronolithMinical .kronolithMinicalEmpty {
+ background: none;
+ border-color: #e2e2e2;
+ color: silver;
+}
+.kronolithMinical .kronolithSelected {
+ background-color: #ffc;
+}