Permalink
Browse files

Implemented profiles for tablet and phone; Added navigation view on i…

…Phone/phone with back button and swipe to change episode; Added navigation view on tablet/iPad with back, next, and previous buttons; Consolidated and cleaned up data, now use single store; Added local screenshots to project; Started to apply custom CSS.
  • Loading branch information...
jayrobinson committed Feb 22, 2012
1 parent 4911518 commit e956b679b330bc7a7a7e444f759a6f885f9bf556
View
@@ -5,6 +5,5 @@
/assets/
/touch/resources/scss/.sass-cache/
/touch/resources/scss/.sass-cache/*
-/touch/resources/scss/
/touch/touch2/
/touch/touch2/*
View
@@ -24,8 +24,13 @@ LCARS stands for Library Computer Access/Retrieval System, a fictional computer
*Feb 21, 2012*
-* Added SeriesList navigation view.
-* Cleaned up data; Stardates and JSON structure.
+* *Sencha Touch App*
+* Implemented profiles for tablet and phone.
+* Added navigation view on iPhone/phone with back button and swipe to change episode.
+* Added navigation view on tablet/iPad with back, next, and previous buttons.
+* Consolidated and cleaned up data; now use single store.
+* Added local screenshots to project.
+* Started to apply custom CSS.
*Feb 20, 2012*
View
@@ -12,24 +12,16 @@ Ext.application({
],
models: [
-
+ 'LCARS.model.Episode',
+ 'LCARS.model.Series'
+ ],
+
+ profiles: [
+ 'Tablet',
+ 'Phone'
],
stores: [
'LCARS.store.Series',
- 'LCARS.store.Episodes'
- ],
-
- views: [
- 'LCARS.view.Main',
- 'LCARS.view.SeriesList',
- 'LCARS.view.EpisodeList',
- 'LCARS.view.Episode'
- ],
-
- launch: function() {
- Ext.create('LCARS.view.Main', {
- fullscreen: true
- });
- }
+ ]
});
@@ -1,49 +1,38 @@
Ext.define('LCARS.controller.Series', {
extend: 'Ext.app.Controller',
- config: {
- refs: {
- 'main' : 'main'
- },
+ onPreviousButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem(),
+ episodeList = this.getEpisodeList(),
+ episodeStore = episodeList.getStore(),
+ selected = episodeList.getSelection()[0],
+ index = episodeStore.indexOf(selected),
+ record;
- control : {
- serieslist : {
- itemtap: 'onSeriesTap'
+ if (activeItem.xtype == 'episodetablet' || activeItem.xtype == "episodephone") {
+ if (index > 0) {
+ record = episodeStore.getAt(index-1);
+ episodeList.select(record);
+ this.getEpisode().setData(record.data);
}
}
},
- onSeriesTap: function(dataView, index, target, record) {
- var episodeStore = Ext.getStore('Episodes'),
- url;
+ onNextButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem(),
+ episodeList = this.getEpisodeList(),
+ episodeStore = episodeList.getStore(),
+ selected = episodeList.getSelection()[0],
+ index = episodeStore.indexOf(selected),
+ total = episodeStore.getCount(),
+ record;
- console.log(record.get('SeriesAbbr'))
-
- if ( record.get('SeriesAbbr') == 'TOS' ) {
- url = '../data/1-the-original-series.json';
- } else if ( record.get('SeriesAbbr') == 'TAS' ) {
- url = '../data/2-the-animated-series.json';
- } else if ( record.get('SeriesAbbr') == 'TNG' ) {
- url = '../data/3-the-next-generation.json';
- } else if ( record.get('SeriesAbbr') == 'DS9' ) {
- url = '../data/4-deep-space-nine.json';
- } else if ( record.get('SeriesAbbr') == 'VOY' ) {
- url = '../data/5-voyager.json';
- } else if ( record.get('SeriesAbbr') == 'ENT' ) {
- url = '../data/6-enterprise.json';
+ if (activeItem.xtype == 'episodetablet' || activeItem.xtype == "episodephone") {
+ if (index != total-1) {
+ record = episodeStore.getAt(index+1);
+ episodeList.select(record);
+ this.getEpisode().setData(record.data);
+ }
}
-
- episodeStore.load({
- url: url,
- callback: function() {
- console.log("Finished load")
- this.getMain().push({
- xtype: 'episodelist',
- title: record.get('SeriesName'),
- });
- },
- scope: this
- });
}
-
});
@@ -0,0 +1,48 @@
+Ext.define('LCARS.controller.phone.Series', {
+ extend: 'LCARS.controller.Series',
+
+ config: {
+ refs: {
+ 'main' : 'mainphone',
+ 'episodeList' : 'episodelistphone',
+ 'episode' : 'episodephone'
+ },
+
+ control : {
+ serieslistphone : {
+ itemtap: 'onSeriesTap'
+ },
+ episodelistphone : {
+ itemtap: 'onEpisodeTap'
+ },
+ episode: {
+ swipeepisode: 'onEpisodeSwipe'
+ }
+ }
+ },
+
+ onSeriesTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodelistphone',
+ store: record.episodes(),
+ title: record.get('SeriesName')
+ });
+ },
+
+ onEpisodeTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodephone',
+ data: record.data,
+ title: record.get('EpisodeName')
+ });
+ },
+
+ onEpisodeSwipe: function(episodeView, direction) {
+ if (direction == "left") {
+ this.onNextButtonTap();
+ } else if (direction == "right") {
+ this.onPreviousButtonTap();
+ }
+ }
+
+});
@@ -0,0 +1,57 @@
+Ext.define('LCARS.controller.tablet.Series', {
+ extend: 'LCARS.controller.Series',
+
+ config: {
+ refs: {
+ 'main' : 'maintablet',
+ 'previousButton' : '#previousButton',
+ 'nextButton' : '#nextButton',
+ 'episodeList' : 'episodelisttablet',
+ 'episode' : 'episodetablet'
+ },
+
+ control : {
+ serieslisttablet : {
+ itemtap: 'onSeriesTap'
+ },
+ episodelisttablet : {
+ itemtap: 'onEpisodeTap'
+ },
+ '#backButton': {
+ tap: 'onBackButtonTap'
+ },
+ 'previousButton': {
+ tap: 'onPreviousButtonTap'
+ },
+ 'nextButton': {
+ tap: 'onNextButtonTap'
+ }
+ }
+ },
+
+ onSeriesTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodelisttablet',
+ store: record.episodes()
+ });
+ },
+
+ onEpisodeTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodetablet',
+ data: record.data
+ });
+ this.getPreviousButton().setText('PRV');
+ this.getNextButton().setText('NX');
+ },
+
+ onBackButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem();
+ if (activeItem.xtype == 'episodetablet') {
+ this.getPreviousButton().setText('ASC');
+ this.getNextButton().setText('DESC');
+ }
+ this.getMain().pop();
+ }
+
+});
View
@@ -0,0 +1,16 @@
+Ext.define('LCARS.model.Episode', {
+ extend: 'Ext.data.Model',
+
+ config: {
+ fields: [
+ 'SeasonNumber',
+ 'EpisodeNumber',
+ 'EpisodeName',
+ 'FirstAired',
+ 'Stardate',
+ 'Overview',
+ 'Screenshot',
+ 'playCount'
+ ]
+ }
+});
View
@@ -0,0 +1,18 @@
+Ext.define('LCARS.model.Series', {
+ extend: 'Ext.data.Model',
+
+ config: {
+ fields: [
+ 'SeriesName',
+ 'SeriesAbbr'
+ ],
+ associations: [
+ {
+ type: 'hasMany',
+ name: 'episodes',
+ associationKey: 'Episode',
+ model: 'LCARS.model.Episode'
+ }
+ ]
+ }
+});
View
@@ -0,0 +1,20 @@
+Ext.define('LCARS.profile.Phone', {
+ extend: 'Ext.app.Profile',
+
+ config: {
+ name: 'phone',
+ namespace: 'phone',
+ controllers: ['Series'],
+ views: ['LCARS.view.phone.Main']
+ },
+
+ isActive: function() {
+ return Ext.os.is.Phone;
+ },
+
+ launch: function() {
+ Ext.create('LCARS.view.phone.Main', {
+ fullscreen: true
+ });
+ }
+});
@@ -0,0 +1,21 @@
+Ext.define('LCARS.profile.Tablet', {
+ extend: 'Ext.app.Profile',
+
+ config: {
+ name: 'tablet',
+ namespace: 'tablet',
+ controllers: ['Series'],
+ views: ['Main']
+
+ },
+
+ isActive: function() {
+ return Ext.os.is.Tablet;
+ },
+
+ launch: function() {
+ Ext.create('LCARS.view.tablet.Main', {
+ fullscreen: true
+ });
+ }
+});
@@ -1,24 +0,0 @@
-Ext.define('LCARS.store.Episodes', {
- extend: 'Ext.data.Store',
-
- config: {
- fields: [
- 'filename', // screenshot
- 'EpisodeName',
- 'DVD_season',
- 'EpisodeNumber',
- 'Stardate',
- 'FirstAired',
- 'Overview',
- 'playCount'
- ],
-
- proxy: {
- type: 'ajax',
-
- reader: {
- rootProperty: 'Data.Episode'
- }
- }
- }
-});
@@ -2,14 +2,11 @@ Ext.define('LCARS.store.Series', {
extend: 'Ext.data.Store',
config: {
- fields: [
- 'SeriesName',
- 'SeriesAbbr'
- ],
+ model: 'LCARS.model.Series',
proxy: {
type: 'ajax',
- url: '../data/0-all-series.json',
+ url: '../data/all.json',
reader: {
rootProperty: 'Data.Series'
View
@@ -1,12 +0,0 @@
-Ext.define('LCARS.view.Episode', {
- extend: 'Ext.Component',
- xtype: 'episode',
-
- config: {
- styleHtmlContent: true,
- tpl: [
- '<div class="content"><img src="{filename}" alt="Screenshot" style="float:right;margin: 0 -10px 20px 10px;" width="48%"><p><strong>Stardate:</strong> {Stardate}<br><strong>Airdate:</strong> {FirstAired}</p><p><strong>Teaser:</strong> {Overview}</p></div>'
- ]
- }
-
-});
@@ -1,11 +0,0 @@
-Ext.define('LCARS.view.EpisodeList', {
- extend: 'Ext.DataView',
- xtype: 'episodelist',
-
- config: {
- store: 'Episodes',
- itemTpl: Ext.create('Ext.XTemplate',
- '<div class="listItem"><div class="screenshot"><img src="{filename}" alt="" height="55"></div><span class="episodeListTitle">{EpisodeName}</span><br><span class="episodeNumber">S0{DVD_season} E0{EpisodeNumber}</span>&nbsp;&nbsp;&nbsp;<span class="airdate">{FirstAired}</span></div>'
- )
- }
-});
Oops, something went wrong.

0 comments on commit e956b67

Please sign in to comment.