I am having problems pulling the correct chapter and book info for the pinned tile. It always pins the first chapter of the first book. This code works for the gridView template but not the splitView. I have the same problem with sharing contact to email
applications as well. Please assist!
(function () {
"use strict";
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var binding = WinJS.Binding;
var utils = WinJS.Utilities;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
var item;
var ui = WinJS.UI;
var start = Windows.UI.StartScreen;
var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;
WinJS.UI.Pages.define("/pages/splitPage/splitPage.html", {
/// <field type="WinJS.Binding.List" />
_items: null,
_group: null,
_itemSelectionIndex: -1,
currentIndex: 1,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var listView = element.querySelector(".itemlist").winControl;
// Store information about the group and selection that this page will
// display.
this._group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
this._items = Data.getItemsFromGroup(this._group);
this._itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;
// Set up the ListView.
listView.itemDataSource = this._items.dataSource;
listView.itemTemplate = element.querySelector(".itemtemplate");
listView.onselectionchanged = this._selectionChanged.bind(this);
listView.layout = new ui.ListLayout();
item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".item-descript").innerHTML = this._group.description;
element.querySelector("article .article-content").innerHTML = item.content;
element.querySelector("header[role=banner] .pagetitle").textContent = this._group.title;
element.querySelector(".title").textContent = this._group.title;
element.querySelector(".short").textContent = this._group.short;
document.getElementById("pinTile").addEventListener("click", pinCustomSecondaryTile, false);
document.getElementById("shareText").addEventListener("click", shareButtonHandler, false);
dtm.getForCurrentView().addEventListener("datarequested", this.onDataRequested);
this._updateVisibility();
if (this._isSingleColumn()) {
if (this._itemSelectionIndex >= 0) {
// For single-column detail view, load the article.
binding.processAll(element.querySelector(".articlesection"), this._items.getAt(this._itemSelectionIndex));
}
} else {
if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/splitPage/splitPage.html") {
// Clean up the backstack to handle a user snapping, navigating
// away, unsnapping, and then returning to this page.
nav.history.backStack.pop();
}
// If this page has a selectionIndex, make that selection
// appear in the ListView.
listView.selection.set(Math.max(this._itemSelectionIndex, 0));
}
},
// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
var listView = element.querySelector(".itemlist").winControl;
var firstVisible = listView.indexOfFirstVisible;
this._updateVisibility();
var handler = function (e) {
listView.removeEventListener("contentanimating", handler, false);
e.preventDefault();
}
if (this._isSingleColumn()) {
listView.selection.clear();
if (this._itemSelectionIndex >= 0) {
// If the app has snapped into a single-column detail view,
// add the single-column list view to the backstack.
nav.history.current.state = {
groupKey: this._group.key,
selectedIndex: this._itemSelectionIndex
};
nav.history.backStack.push({
location: "/pages/splitPage/splitPage.html",
state: { groupKey: this._group.key }
});
element.querySelector(".articlesection").focus();
} else {
listView.addEventListener("contentanimating", handler, false);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
listView.forceLayout();
}
} else {
// If the app has unsnapped into the two-column view, remove any
if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/splitPage/splitPage.html") {
nav.history.backStack.pop();
}
if (viewState !== lastViewState) {
listView.addEventListener("contentanimating", handler, false);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
listView.forceLayout();
}
listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
}
},
// This function checks if the list and details columns should be displayed
// on separate pages instead of side-by-side.
_isSingleColumn: function () {
var viewState = Windows.UI.ViewManagement.ApplicationView.value;
},
_selectionChanged: function (args) {
var listView = document.body.querySelector(".itemlist").winControl;
var details;
// By default, the selection is restriced to a single item.
listView.selection.getItems().done(function updateDetails(items) {
if (items.length > 0) {
this._itemSelectionIndex = items[0].index;
if (this._isSingleColumn()) {
// If snapped or portrait, navigate to a new page containing the
// selected item's details.
details = document.querySelector(".articlesection");
binding.processAll(details, items[0].data);
details.scrollTop = 0;
} else {
// If fullscreen or filled, update the details column with new data.
details = document.querySelector(".articlesection");
binding.processAll(details, items[0].data);
details.scrollTop = 0;
}
}
}.bind(this));
},
// This function toggles visibility of the two columns based on the current
// view state and item selection.
_updateVisibility: function () {
var oldPrimary = document.querySelector(".primarycolumn");
if (oldPrimary) {
utils.removeClass(oldPrimary, "primarycolumn");
}
if (this._isSingleColumn()) {
if (this._itemSelectionIndex >= 0) {
utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
document.querySelector(".articlesection").focus();
} else {
utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
document.querySelector(".itemlist").focus();
}
} else {
document.querySelector(".itemlist").focus();
}
},
onDataRequested: function (e) {
var request = e.request;
request.data.properties.title = item.group.title + " (sent from Windows 8)";
request.data.properties.description = "Chapter " + item.title;
var chapText = item.content;
// var bookDescript = item.group.description;
var chapName = "Chapter " + item.title;
var space = '<br><br>';
var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(chapName + space + chapText);
request.data.setHtmlFormat(htmlFormat);
}
});
function shareButtonHandler() {
Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
}
function pinCustomSecondaryTile() {
var tileId = "customTile" + new Date().getTime();
var uriLogo = new Windows.Foundation.Uri(item.backgroundImage);
var uriSmallLogo = new Windows.Foundation.Uri("ms-appx:///images/pinned.jpg");
var tileName = "Chapter " + item.title + " of my Book";
var tile = new Windows.UI.StartScreen.SecondaryTile(
tileId,
item.group.description,
tileName,
JSON.stringify(Data.getItemReference(item)),
Windows.UI.StartScreen.TileOptions.showNameOnLogo,
uriLogo);
tile.foregroundText = Windows.UI.StartScreen.ForegroundText.dark;
tile.smallLogo = uriSmallLogo;
var selectionRect = document.getElementById("pinTile").getBoundingClientRect();
tile.requestCreateForSelectionAsync({ x: selectionRect.left, y: selectionRect.top, width: selectionRect.width, height: selectionRect.height }, Windows.UI.Popups.Placement.below).done(function (isCreated) {
});
}
})();
