Hi all,
I'm developing a win8 store application to learn this new framework. Its purpose is to show the folders (with thumnail) of the Pictures Library in a ListView and when the user click on a thumbnail it will show the pictures in the folder.
OK: the first part is done, I can show all the folders and their thumnail but the second part is getting me crazy!
I get this error: Javascript run-time error: operation aborted
Any ides? Any help is appreciated!
Thanks,
luca
Here's my code:
home.html
<h2>Album:</h2>
<div id="folderList"
data-win-control="WinJS.UI.ListView"
data-win-options="{layout: {type: WinJS.UI.GridLayout}}">
</div>
<div id="folderTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageOverlayGalleryFolder">
<img class="imageOverlayGalleryFolderImage"
data-win-bind="src: picture" />
<div class="imageOverlayGalleryFolderOverlay">
<h4 class="imageOverlayGalleryFolderOverlayText"
data-win-bind="innerText: folderName">
</h4>
</div>
</div>
</div>
<hr />
<div id="albumPreview">
<div id="previewList"
data-win-control="WinJS.UI.ListView"
data-win-options="{layout: {type: WinJS.UI.GridLayout}}">
</div>
<div id="previewTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageOverlayGalleryFolder">
<img class="imageOverlayGalleryFolderImage"
data-win-bind="src: path" />
<div class="imageOverlayGalleryFolderOverlay">
<h4 class="imageOverlayGalleryFolderOverlayText"
data-win-bind="innerText: name">
</h4>
</div>
</div>
</div>
</div>
home.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// La funzione viene chiamata quando un utente passa a questa pagina. Popola
// gli elementi della pagina con i dati dell'applicazione.
ready: function (element, options) {
// TODO: inizializzare la pagina qui.
WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
var folderView = document.getElementById("folderList").winControl;
var template = document.getElementById("folderTemplate");
folderView.itemTemplate = template;
folderView.itemDataSource = PhotoFaces.Library.foldersList.dataSource;
var previewList = document.getElementById("previewList").winControl;
var previewTemplate = document.getElementById("previewTemplate");
previewList.itemTemplate = previewTemplate;
folderView.addEventListener("iteminvoked", this.folderClicked);
},
folderClicked: function (eventInfo) {
var idx = eventInfo.detail.itemIndex;
console.log("INDEX: " + idx);
var album = PhotoFaces.Library.getAlbum(idx);
var previewList = document.getElementById("previewList").winControl;
var array = [{ name: "ciccia", path: "path" }, { name: "ciccio", path: "giggi" }];
var arrayList = new WinJS.Binding.List(array);
previewList.itemDataSource = album.picturesList.dataSource;
console.log("fatto");
},
linkClickEventHandler: function (eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
Windows.Storage.KnownFolders.picturesLibrary.getFoldersAsync().done(function complete(list) {
for (var i in list) {
console.log(list[i].name);
}
});
}
});
})();
pictures.js
(function() {
"use strict"
var Picture = WinJS.Class.define(
function (path, album) {
this.album = album;
var that = this;
this.album.folder.getFileAsync(path).done(function (file) {
that.path = file.path;
that.name = file.name;
that.file = file;
});
},
{
album: null,
path: "",
name: "",
file: null
},
{
}
);
var Album = WinJS.Class.define(
function (path) {
this.path = path;
var that = this;
this.pictures = [];
this.picturesList = new WinJS.Binding.List(this.pictures);
Windows.Storage.StorageFolder.getFolderFromPathAsync(this.path).done(function (fld) {
that.folder = fld;
that._loadPictures();
});
},
{
picturesList: null,
_loadPictures: function () {
var that = this;
this.folder.getFilesAsync().done(function (files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if ([".jpg", ".jpeg", ".png"].indexOf(file.fileType.toLowerCase()) != -1) {
var pic = new Picture(file.name, that);
console.log("name: " + pic.name + " path: " + pic.path);
that.picturesList.push(pic);
}
};
});
}
},
{
}
);
var Library = WinJS.Class.define(function () {
},
{
// instance methods
},
{
picLib: null,
folders: [],
foldersList: null,
init: function () {
if (Library.picLib == null)
Library.picLib = Windows.Storage.KnownFolders.picturesLibrary;
if (Library.foldersList == null)
Library.foldersList = new WinJS.Binding.List(Library.folders);
},
loadFolders: function () {
Library.picLib.getFoldersAsync().done(function (fldrs) {
for (var i = 0; i < fldrs.length; i++) {
var folder = fldrs[i];
var obj = {
folderName: folder.name,
folderPath: folder.path,
picture: ""
};
Library.foldersList.push(obj);
Library.loadCover(folder, obj);
}
});
},
loadCover: function (folder, obj) {
folder.getThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.picturesView, 100).done(function (thumb) {
if (thumb)
obj.picture = URL.createObjectURL(thumb, { oneTimeOnly: true });
console.log(obj.folderName + ": " + obj.picture);
});
},
getAlbum: function (index) {
return new Album(Library.foldersList.getAt(index).folderPath);
},
loadCovers: function () {
for (var i = 0; i < Library.foldersList.length; i++) {
var r = Windows.Storage.StorageFolder.getFolderFromPathAsync(Library.foldersList.getItem(i).data.folderPath).done(function (folder) {
folder.getFilesAsync().done(function (files) {
var obj = {};
var j = 0;
for (; j < Library.foldersList.length; j++) {
if (Library.foldersList.getItem(j).data.folderPath == folder.path) {
obj = Library.foldersList.getItem(j).data;
break;
}
}
if (obj != {}) {
if (files.length > 0) {
obj.picture = files[0].path;
console.log("J: " + j);
Library.foldersList.setAt(j, obj);
console.log(Library.foldersList.getAt(j).picture);
}
}
});
});
}
}
}); // end of class Library
WinJS.Namespace.define("PhotoFaces",
{
Library: Library,
Album: Album,
Picture: Picture
}
);
})();
