From f5330eb90da1d56efd0c08bfccbb4a3fd3d493fa Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Wed, 17 Apr 2013 15:34:51 +0000 Subject: Add filter on collections, fixe CSS to fit the XO screen, fix database --- diff --git a/html/database.js b/html/database.js index 9a62f21..1e07058 100644 --- a/html/database.js +++ b/html/database.js @@ -1231,7 +1231,7 @@ Abcd.enTexts = [ "kimono", "nightgown", "pajamas", "panties", "pants", "patch", "pocket", "pompon", "pullover", "raincoat", "robe", "sandals", "sash", "scarf", "shirt", "shoe", "shoelace", "short", "skirt", "sleeve", "slippers", "smock", "sneaker", "sock", "sole_shoe", "suit", "sweatshirt", "uniform", "vest", "zipper", "black", "blue", "brown", "color", "gray", "green", - "mauve", "orange-color", "pink", "red", "white", "yellow", "bank", "barn", "bedroom", "big_top", "bridge", "cabin", + "mauve", "orange", "pink", "red", "white", "yellow", "bank", "barn", "bedroom", "big_top", "bridge", "cabin", "cage", "castle", "chimney", "circus", "city", "dam", "door", "fair", "farm", "faucet", "fountain", "garage", "grave", "home", "hospital", "house", "hut", "kitchen", "lane", "lighthouse", "merry-go-round", "mill", "mosque", "office", "pool", "post", "prison", "pyramid", "ramp", "road", "roof", "room", "school", "shed", "shop", "shutter", @@ -1421,7 +1421,7 @@ Abcd.enLetters = { "l": [606,714,180,530,715,389,286,980,717,1093,48,558,1018,531,505,1094,921,288,1095,836,49,466], "m": [428,1096,189,840,842,532,844,952,50,953,190,191,559,193,289,721,560,195,1140], "n": [51,292,850,851,722,293,1141], -"o": [854,723,1098,758,508,360,199,200], +"o": [854,723,1098,758,360,508,199,200], "p": [856,857,956,561,328,724,206,510,52,860,861,209,864,210,989,361,1058,992,562,53,54,512,868,395,474,618,563,55,1101,925,621,622,869,214,215], "q": [57,624,926,534,927], "r": [871,429,1038,399,1020,218,58,362,475,1021,1102,59,730,401,876,994,1103,1104,535,61], @@ -1436,27 +1436,27 @@ Abcd.enLetters = { Abcd.frLetters = { "a": [109,2,491,579,146,1036,1137,254,837,100,910,945,786,426,773,911,104,544,105,9,1000,996,793,797,87,1125,580,1126,581,1003,10,1136,60,702,197,1071,1058,1022,1127,607], -"b": [684,516,546,564,253,776,1004,777,518,1116,365,261,823,376,345,1050,27,312,1043,450,524,438,545,608,519,138,830,896,445,363,1156,354,1072,344,886,434,22,907,451,784,782,440,55,83,267,1091,289,584,803,721,788,7,1030,968,313,998,967,258,917,1073,437,1031,1129,355,113,969,913,778,394,526,1051], -"c": [370,494,970,820,792,444,371,853,1047,238,123,1067,1005,523,144,118,789,145,1052,790,686,315,549,914,1131,1111,840,791,321,466,8,108,688,335,1133,441,136,833,495,265,794,521,709,367,117,1140,551,70,319,368,585,599,119,372,176,121,1089,550,346,343,338,260,106,724,373,337,324,120,167,605,281,257,158,139,871,126,215,443,1130,1132,97,808,295,735,796,272,762,799,374,1039,504,505,1148,916,832,1048,6,779,410,589,590,18,129,178,210,161,422,169,822,849,710,141,298,578,1135,26,802,462,571,956,112,876,1146,348,692,292,271,86,353,20,941,1151,61,908,805,1019,557,558,133,795,246,861,446,21,227,65,592,189,134,804,448,806,568,388,1,586,303,326,241], +"b": [684,516,564,546,253,776,1004,777,518,1116,365,261,823,376,345,1050,27,312,1043,450,524,438,545,608,519,138,830,896,445,363,1156,354,1072,344,886,434,22,907,451,784,782,440,55,83,267,1091,289,584,803,721,788,7,1030,968,313,998,967,258,917,1073,437,1031,1129,355,113,969,913,778,394,526,1051], +"c": [370,494,970,820,792,444,371,853,1047,238,123,1067,1005,523,144,118,789,145,1052,790,686,315,549,914,1131,1111,791,840,321,466,8,108,688,335,1133,441,136,833,495,265,794,521,709,367,117,1140,551,70,319,368,585,599,119,372,176,121,1089,550,346,343,338,260,106,724,373,337,324,120,167,605,281,257,158,139,871,126,215,443,1130,1132,97,808,295,735,796,272,762,799,374,1039,504,505,1148,916,832,1048,6,779,410,589,590,18,129,178,210,161,422,169,822,849,710,141,298,578,1135,26,802,462,571,956,112,876,1146,348,692,292,271,86,353,20,941,1151,61,908,805,1019,557,558,133,795,246,861,446,21,227,65,592,189,134,804,448,806,568,388,1,586,303,326,241], "d": [950,424,497,140,1112,59,774,12,249,302,1069,696,449,759,1082,697,247,11,767,277,811,1085,74,259,538,421,769,142,816,1115,1102,700], "e": [752,80,403,99,565,239,192,594,600,829,940,1090,90,41,1119,1150,567,983,409,232,300,537,82,727,745,884,893,741,240,627,89,539,814], -"f": [689,944,148,454,1120,515,918,964,963,588,276,418,882,1105,379,352,596,703,981,498,895,909,946,922,959,815,152,704,975,36,818,978,381,705,1117,428,1074,718,577,555,102,103,156,514,513,939,456,693,442,425,499,737,1061,873], +"f": [689,944,148,454,1120,515,918,963,964,588,276,418,882,379,1105,352,596,703,981,498,895,909,946,922,959,815,152,704,975,36,818,978,381,705,1117,1074,428,718,577,555,102,103,156,514,513,939,456,693,442,425,499,737,1061,873], "g": [98,318,382,937,416,439,1093,173,1084,463,38,285,953,351,157,461,965,947,1011,813,304,160,699,976,1070,1118,948,366,1080,64,155,128,66,572,357,39,252,825,920], "h": [1029,284,404,1128,826,1088,977,237,1087,199,165,755,1014,187,951,385,460,1059,765,201,1123,170], "i": [712,171,713,864,332,587,613,612,595,114], "j": [172,287,459,706,364,819,601,1101,603,972,268,53,900,852,1017,602,961,962,341,464], "k": [175,323,503,771,177], "l": [714,339,470,1139,179,547,530,1044,307,217,216,1124,835,716,96,94,48,1154,183,288,186,143,921,1094,982,231,465,184,185,1095,58,517,783,255,838,198,531,719,821], -"m": [583,405,311,282,1134,384,386,182,1092,1106,954,342,391,29,506,316,411,95,973,949,934,938,625,1034,842,843,533,609,845,593,174,507,269,732,955,1045,846,447,1075,984,1107,847,848,235,1086,756,720,912,130,393,936,1054,1055,153,897,228,392,919,193,225,195,417,492,290,610,923,493], +"m": [583,405,311,282,1134,386,384,182,1092,1106,954,342,391,29,506,316,411,95,973,949,934,938,625,1034,842,843,533,609,845,593,174,507,269,732,955,1045,846,447,1075,984,1107,847,848,235,1086,756,720,912,130,393,936,1054,1055,153,897,228,392,919,193,225,195,417,492,290,610,923,493], "n": [150,943,570,294,532,1153,1063,738,15,766,293,850,915,834,356,1155,496,924,291,31,455,502,1097,690,691,722], "o": [723,452,159,1143,111,1142,733,768,196,360,508,985,270,866,306,435,107,1046,1099], -"p": [856,527,890,436,857,986,127,501,202,327,203,207,942,509,618,858,116,1056,903,230,78,569,181,206,297,510,598,1057,801,208,1042,891,980,894,736,991,859,205,204,906,988,1109,1100,390,863,725,52,188,402,800,328,279,901,743,211,888,614,865,989,1037,1032,573,85,212,615,395,974,750,987,473,685,726,1081,554,575,1083,19,616,1009,728,149,329,561,935,1018,310,278,1078,511,1138,1144,151,266,471,1145,490,990,1147,966,597,330,213,369,474,377,563,305,131,163,453,125,810,124,619,620,621,622,740,397,623,925,628,1012,512,1114,331,81,467,325,398], +"p": [856,527,890,436,857,986,127,501,202,327,203,207,942,509,618,858,116,1056,903,230,78,569,206,181,297,510,598,1057,801,208,1042,891,980,894,736,991,859,205,204,906,988,1109,1100,390,863,725,52,188,328,402,800,279,901,743,211,888,614,865,989,1037,1032,573,85,212,615,395,974,750,987,473,685,726,1081,554,575,1083,19,616,1009,728,149,329,561,1018,935,310,278,1078,511,1138,1144,151,266,471,1145,490,990,1147,966,597,330,213,369,474,377,563,305,131,163,453,125,810,124,619,620,621,622,740,397,623,925,628,1012,512,1114,331,81,467,325,398], "q": [761,926,243,831], -"r": [993,1060,870,1149,429,486,1113,500,854,399,17,33,872,218,1038,717,299,49,624,611,154,50,77,79,468,219,224,772,220,553,427,734,729,744,475,317,380,874,730,604,1103,361,994,476,807,905,362,423,875,400,1104,166,413,694], -"s": [731,878,775,84,46,221,1077,574,477,432,62,478,479,222,44,883,110,408,928,223,76,57,69,785,824,28,68,770,877,347,995,764,233,899,88,536,71,763,1023,1024,958,708,626,234,747,1076,749,999,481,431,280,194,1122,482,566,1025,296,485,860,487,1098,349], +"r": [993,1060,870,1149,429,486,1113,500,854,399,17,33,872,218,1038,717,299,49,624,611,154,50,77,79,468,219,224,772,220,553,427,734,744,729,475,317,380,874,730,604,1103,361,994,476,905,807,362,423,875,400,1104,166,413,694], +"s": [731,878,775,84,46,221,1077,574,477,432,62,478,479,222,44,883,110,408,928,223,76,57,69,785,824,28,68,770,877,347,995,764,233,899,88,536,71,763,1023,1024,958,708,626,234,747,1076,749,999,481,280,431,194,1122,482,566,1025,296,485,860,487,1098,349], "t": [541,320,812,137,535,520,472,560,191,115,1065,862,542,414,748,1027,415,698], "T": [701], -"t": [242,283,855,930,997,245,889,56,528,798,739,543,401,1152,383,30,1035,898,809,248,885,1041,16,1066,1064,880,301,971,1108,264,1121,960,430,760,407,711,164,34,902,1001,828], +"t": [242,283,855,930,997,245,889,56,528,798,739,543,401,1152,383,30,1035,898,809,248,885,1041,16,1066,880,1064,301,971,1108,264,1121,960,430,760,407,711,164,34,902,1001,828], "u": [758,350], "v": [132,753,892,751,742,576,251,308,1049,1021,754,262,1002,556,309,358,322,630,469,1079,375,359,250,1040,419,67,1053,35,406,629,931,933], "w": [147], diff --git a/html/filter.js b/html/filter.js index d1c9a49..b34f3e9 100644 --- a/html/filter.js +++ b/html/filter.js @@ -1,5 +1,9 @@ +// Minimum number of entries to allow filtering +var minFilterEntries = 3; + + // Filter popup enyo.kind({ name: "Abcd.FilterPopup", @@ -27,23 +31,29 @@ enyo.kind({ }, rendered: function() { - // Delete all - var items = []; - enyo.forEach(this.$.box.getControls(), function(item) { - items.push(item); - }); - for (var i = 0 ; i < items.length ; i++) { - items[i].destroy(); - } + this.displayThemes(); + }, + + filterChanged: function() { + this.render(); + }, + + // Display themes and letters + displayThemes: function() { + // Clean all + this.cleanBox(); // Display themes var length = Abcd.themes.length; + var theme = -1; + if (this.filter != null && this.filter.kind == "Abcd.Collection") + theme = Abcd.collections[this.filter.index].theme; for (var i = 0 ; i < length ; i++) { this.$.box.createComponent( - { kind: "Abcd.Theme", index: i, ontap: "displayCollections" }, + { kind: "Abcd.Theme", index: i, selected: (i == theme), ontap: "displayCollections" }, { owner: this } ).render(); - } + } // Display letters for (var i = 0 ; i < 26 ; i++) { @@ -56,8 +66,24 @@ enyo.kind({ } }, - filterChanged: function() { + // Display filter, recompute each time + display: function(filter) { + this.filter = filter; this.render(); + this.show(); + }, + + // Display all collection + displayCollections: function(inSender, inEvent) { + var theme = inSender.index; + var length = Abcd.collections.length; + this.cleanBox(); + for (var i = 0 ; i < length ; i++) { + if (Abcd.collections[i].theme != theme) continue; + this.$.box.createComponent({ kind: "Abcd.Collection", index: i, + selected: (this.filter != null&&this.filter.index == i), + ontap: "filterOnCollection"}, {owner: this}).render(); + } }, // Trash taped, remove filter @@ -69,10 +95,39 @@ enyo.kind({ // Tap on a letter, filter on this letter filterOnLetter: function(l, e) { - if (!Abcd.letters.hasOwnProperty(l.letter) || Abcd.letters[l.letter].length < 3) + if (!Abcd.letters.hasOwnProperty(l.letter) || Abcd.letters[l.letter].length < minFilterEntries) return; this.hide(); this.filter = l; this.doFilterChanged(); + }, + + // Tap on a collection, filter on this collection + filterOnCollection: function(c, e) { + var index = c.index; + var collection = Abcd.collections[index]; + var length = collection.entries.length; + var count = 0; + for (var i = 0 ; i < length ; i++) { + var entry = collection.entries[i]; + if (Abcd.entries[entry][Abcd.context.lang] == 1) + count++; + } + if (count < minFilterEntries) + return; + this.hide(); + this.filter = c; + this.doFilterChanged(); + }, + + cleanBox: function() { + // Delete all + var items = []; + enyo.forEach(this.$.box.getControls(), function(item) { + items.push(item); + }); + for (var i = 0 ; i < items.length ; i++) { + items[i].destroy(); + } } }); \ No newline at end of file diff --git a/html/item.js b/html/item.js index 5a7c625..b210035 100644 --- a/html/item.js +++ b/html/item.js @@ -2,7 +2,7 @@ enyo.kind({ name: "Abcd.Item", kind: enyo.Control, - published: { x: -1, y: -1, z: -1 }, + published: { x: -1, y: -1, z: -1, selected: false }, // Constructor create: function() { @@ -10,6 +10,7 @@ enyo.kind({ this.xChanged(); this.yChanged(); this.zChanged(); + this.selectedChanged(); }, // Localization changed, update @@ -32,6 +33,15 @@ enyo.kind({ if (this.z != -1) this.applyStyle("z-index", this.z); }, + // Selection changed + selectedChanged: function() { + var className = "item"+this.kind.substring(5)+"-selected"; + if (this.selected) + this.addClass(className); + else + this.removeClass(className); + }, + // Change position moveTo: function(x, y) { this.x = x; diff --git a/html/letter.js b/html/letter.js index b7b2bad..e30014e 100644 --- a/html/letter.js +++ b/html/letter.js @@ -2,7 +2,7 @@ enyo.kind({ name: "Abcd.Letter", kind: "Abcd.Item", - published: { letter: "", selected: false }, + published: { letter: "" }, classes: "itemLetter", showing: false, components: [ @@ -34,13 +34,6 @@ enyo.kind({ } }, - selectedChanged: function() { - if (this.selected) - this.addClass("itemLetter-selected"); - else - this.removeClass("itemLetter-selected"); - }, - // Play sound for this letter play: function(media) { media.play("audio/"+Abcd.context.lang+"/database/upper_"+this.letter.toUpperCase()); diff --git a/html/play.js b/html/play.js index cb9b467..fbc964d 100644 --- a/html/play.js +++ b/html/play.js @@ -19,7 +19,8 @@ enyo.kind({ ]}, {components: [ {name: "filterLetter", kind: "Abcd.Letter", letter: "", classes: "filterLetter"}, - {name: "itemCount", content: "-/-", classes: "pageCount", showing: false}, + {name: "filterCollection", kind: "Abcd.Collection", index: 0, classes: "filterCollection", showing: false}, + {name: "itemCount", content: "-/-", classes: "itemCount", showing: false}, {name: "back", kind: "Image", src: "images/back.png", showing: false, classes: "backButton", ontap: "backTaped"}, {name: "filter", kind: "Image", src: "images/filter.png", showing: false, classes: "filterButton", ontap: "filterTaped"}, {name: "check", kind: "Image", src: "images/check.png", showing: false, classes: "checkButton", ontap: "checkTaped"} @@ -101,9 +102,8 @@ enyo.kind({ setLocale: function() { // Remove filter because too risky this.filter = null; - this.$.filterLetter.hide(); - this.$.filterPopup.setFilter(null); - this.$.filterPopup.render(); + this.$.filterLetter.hide(); + this.$.filterCollection.hide(); // If playing, change game because could inexist in the current language if (this.theme != -1) @@ -122,26 +122,28 @@ enyo.kind({ }); // Redraw filter letter and filter popup - this.$.filterLetter.hide(); - this.$.filterPopup.setFilter(this.filter); - this.$.filterPopup.render(); + this.$.filterLetter.letterChanged(); + this.$.filterCollection.indexChanged(); }, // Display filter dialog filterTaped: function() { - this.$.filterPopup.filter = this.filter; - this.$.filterPopup.show(); + this.$.filterPopup.display(this.filter); }, // Process filter change filterChanged: function(s, e) { this.filter = this.$.filterPopup.filter; - this.$.filterPopup.render(); - if (this.filter == null) { - this.$.filterLetter.hide(); - } else { - this.$.filterLetter.show(); - this.$.filterLetter.setLetter(this.filter.letter); + this.$.filterLetter.hide(); + this.$.filterCollection.hide(); + if (this.filter != null) { + if (this.filter.kind == "Abcd.Letter") { + this.$.filterLetter.show(); + this.$.filterLetter.setLetter(this.filter.letter); + } else { + this.$.filterCollection.show(); + this.$.filterCollection.setIndex(this.filter.index); + } } }, diff --git a/html/styles.css b/html/styles.css index 85704d0..8bdddf2 100644 --- a/html/styles.css +++ b/html/styles.css @@ -1,7 +1,7 @@  @font-face { font-family: Rochester; - src: url('css/Rochester-Regular.ttf'); + src: url('Rochester-Regular.ttf'); } .logo { @@ -117,7 +117,7 @@ .itemLetter { display: inline-block; - margin-right: 13px; + margin-right: 15px; margin-bottom: 10px; z-index: 0; } @@ -125,7 +125,7 @@ .itemLetter-selected { border: thin solid; border-width: 4px; - border-color: blue; + border-color: blue; } .spinner { @@ -225,6 +225,11 @@ display: inline-block; } +.itemCollection-selected { + border-color: blue; + color: blue; +} + .collectionImage { width: 30%; vertical-align: middle; @@ -265,7 +270,7 @@ background-color: white; z-index: 0; -webkit-user-select: none; - margin-left: 5px; + margin-left: 10px; margin-right: 25px; margin-top: 60px; margin-bottom: 80px; @@ -273,6 +278,11 @@ user-select: none; } +.itemTheme-selected { + border-color: blue; + color: blue; +} + .themeImage { width: 70%; margin-top: 10px; @@ -323,7 +333,7 @@ .playbox { margin-left: 150px; - margin-top: 40px; + margin-top: 90px; } .play-type-button { @@ -388,6 +398,7 @@ .entryPlaySelected { border-color: blue; + color: blue; } .entryPlayWrong { @@ -398,12 +409,20 @@ background-color: green; } +.itemCount { + font-size: 26px; + position: absolute; + left: 565px; + top: 105px; + text-align: center; +} + .checkButton { position: absolute; width: 60px; height: 60px; left: 1010px; - top: 480px; + top: 520px; } .filterBox { @@ -424,8 +443,14 @@ top: 90px; } +.filterCollection { + position: absolute; + left: -25px; + top: 60px; +} + .filter-popup { - width: 1055px; + width: 1080px; height: 600px; color: black; } @@ -434,6 +459,6 @@ position: absolute; width: 60px; height: 60px; - left: 980px; + left: 1000px; top: 540px; } \ No newline at end of file diff --git a/html/util.js b/html/util.js index 7706842..28d61f3 100644 --- a/html/util.js +++ b/html/util.js @@ -64,32 +64,45 @@ Abcd.changeVisibility = function(object, items) { // Randomly get an entry in the current language Abcd.randomEntryIndex = function(excludes, filter) { - // Choose a letter - var firstlen = 0; - var firstindex = -1; - for(var key in Abcd.letters) { - if (filter != null && filter.letter == key) { - firstindex = firstlen; - break; + // Get first level + var value = null; + if (filter != null && filter.kind == "Abcd.Collection") { + // Get the collection + var collection = Abcd.collections[filter.index]; + var length = collection.entries.length; + value = []; + for (var i = 0 ; i < length ; i++) { + var entry = collection.entries[i]; + if (Abcd.entries[entry][Abcd.context.lang] == 1) + value.push(entry); + } + } else { + // Choose a letter + var firstlen = 0; + var firstindex = -1; + for(var key in Abcd.letters) { + if (filter != null && filter.letter == key) { + firstindex = firstlen; + break; + } + if (Abcd.letters.hasOwnProperty(key)) firstlen++; } - if (Abcd.letters.hasOwnProperty(key)) firstlen++; - } - if (firstindex == -1) - firstindex = Math.floor(Math.random()*firstlen); - - // Choose an index - var i = 0; - var value = null; - for(var key in Abcd.letters) { - if (i++ == firstindex) { - value = Abcd.letters[key]; - break; + if (firstindex == -1) + firstindex = Math.floor(Math.random()*firstlen); + + // Choose an index + var i = 0; + for(var key in Abcd.letters) { + if (i++ == firstindex) { + value = Abcd.letters[key]; + break; + } } } // Copy without excludes var array = []; - for (i = 0 ; i < value.length ; i++) { + for (var i = 0 ; i < value.length ; i++) { var found = false; if (excludes !== undefined) { for (var j = 0 ; !found && j < excludes.length ; j++) { -- cgit v0.9.1