src/examples/touchflickr/app/controller/Search.js

   1 /*
   2  * This controller is the main, and only controller for this application. It handles all the views and functionality
   3  * of this application.
   4  */
   5 Ext.define('Flickr.controller.Search', {
   6     extend: 'Ext.app.Controller',
   7     requires: ["Ext.Img"],
   8     config: {
   9         refs: {
  10             main: {
  11                 selector  : 'mainview',
  12                 xtype     : 'mainview',
  13                 autoCreate: true
  14             },
  15             searchBar: 'searchbar',
  16             searchList: 'searchlist',
  17             flickrList: 'flickrlist',
  18             searchField: 'searchbar > searchfield'
  19         },
  20
  21         control: {
  22             searchField: {
  23                 keyup: 'onSearch'
  24             },
  25
  26             flickrList: {
  27                 itemtap: 'onFlickrTap'
  28             },
  29
  30             searchList: {
  31                 select: 'onSearchSelect',
  32                 itemswipe: 'onSearchSwipe'
  33             },
  34
  35             'searchlist searchlistitem button': {
  36                 tap: 'onSearchDelete'
  37             }
  38         }
  39     },
  40
  41     launch: function() {
  42         Ext.getStore('Searches').load({
  43             callback: this.onSearchesStoreLoad,
  44             scope: this
  45         });
  46     },
  47
  48     /**
  49      * Called when the searchesStore has been loaded from localStorage. If it is NOT a phone, it will select one of the searches
  50      * from the list, now that it is loaded.
  51      * We don't want to select a search when it is loaded on a phone, as it would trigger the flickrList view to display.
  52      */
  53     onSearchesStoreLoad: function() {
  54         var search = Ext.getStore('Searches').getAt(0);
  55
  56         if (!search) {
  57             this.doSearch("senchacon");
  58         }
  59     },
  60
  61     /**
  62      * Called when a search is selected from the searchList. It sets the store of the flickrList to the flickrimages() store of the selected
  63      * search instance.
  64      */
  65     onSearchSelect: function(list, search) {
  66         var store = search.flickrimages();
  67
  68         this.getFlickrList().setStore(store);
  69         store.load();
  70     },
  71
  72     /**
  73      * Called when an item in the searchList is swiped. It will show the delete button in the swiped item.
  74      */
  75     onSearchSwipe: function(dataview, index, target) {
  76         if (Ext.getStore('Searches').getCount() < 2) {
  77             return;
  78         }
  79
  80         //set the currentDeleteButton so we know what is it to hide it in the listener below
  81         this.currentDeleteButton = target.getDeleteButton();
  82         this.currentDeleteButton.show();
  83
  84         //add a listener to the body, so we can hide the button if the user taps anywhere but the button.
  85         Ext.getBody().on('tap', this.onBodyTap, this);
  86     },
  87
  88     /**
  89      * Called when the user taps on the body. Hides the delete button and removes the listener from the body.
  90      */
  91     onBodyTap: function(e) {
  92         if (this.currentDeleteButton) {
  93             this.currentDeleteButton.hide();
  94         }
  95
  96         //remove the listener
  97         Ext.getBody().un('tap', this.onBodyTap, this);
  98     },
  99
 100     /**
 101      * Called when a user taps on an item in the flickrList.
 102      */
 103     onFlickrTap: function(list, index, target, record, e) {
 104         var me= this,
 105             img;
 106         if(!me.popUp) {
 107             me.popUp = Ext.create("Ext.Panel", {
 108                 width:"75%",
 109                 height:"75%",
 110                 layout:"fit",
 111                 centered:true,
 112                 cls: "flickr-image",
 113                 modal:true,
 114                 hideOnMaskTap: true,
 115                 items: {
 116                     xtype: "image",
 117                     src: record.get("image_url")
 118                 }
 119             });
 120
 121             img = me.popUp.down("image");
 122
 123             me.popUp.on("hide", function(){
 124                 img.setSrc(null);
 125             });
 126
 127             img.on("load", function() {
 128                 me.popUp.setMasked(false);
 129             })
 130         }else {
 131             img = me.popUp.down("image");
 132             img.setSrc(null);
 133             img.setSrc(record.get("image_url"));
 134         }
 135
 136         me.popUp.setMasked({xtype:'loadmask'});
 137         me.popUp.show();
 138     },
 139
 140     /**
 141      * Called when a use taps the delete button on a searchList item
 142      */
 143     onSearchDelete: function(button, e) {
 144         var item   = button.getParent(),
 145             search = item.getRecord();
 146
 147         this.fireAction('destroy', [search, button], 'doDestroy');
 148     },
 149
 150     /**
 151      * Removes a specified search record from the searches store. The tablet controller subclass has some additional
 152      * logic to select the nearest saved search
 153      */
 154     doDestroy: function(search, button) {
 155         var store = Ext.getStore('Searches');
 156
 157         store.remove(search);
 158         store.sync();
 159         button.hide();
 160     },
 161
 162     /**
 163      * Called on the keyup event of the search field. If the enter/return key was pressed, it will fire the search action.
 164      */
 165     onSearch: function(field, e) {
 166         var keyCode = e.event.keyCode,
 167             searchField = this.getSearchField();
 168
 169         //the return keyCode is 13.
 170         if (keyCode == 13) {
 171             //fire the search action with the current value of the searchField
 172             this.fireAction('search', [searchField.getValue()], 'doSearch');
 173         }
 174     },
 175
 176     /**
 177      * Called with the search action above. Searches twitter for a specified search term or record
 178      */
 179     doSearch: function(search) {
 180         var model         = Flickr.model.Search,
 181             flickrList     = this.getFlickrList(),
 182             searchList    = this.getSearchList(),
 183             searchesStore = Ext.getStore('Searches'),
 184             searchField   = this.getSearchField(),
 185             query, index;
 186
 187         // ensure there is a search...
 188         if (!search) {
 189             return;
 190         }
 191
 192         //ensure the flickrlist is visible
 193         flickrList.show();
 194
 195         //check if ths search already exists in the searchesStore
 196         index = searchesStore.find('query', search);
 197         if (index != -1) {
 198             //it exists, so lets just select it
 199             search = searchesStore.getAt(index);
 200
 201             searchList.select(search);
 202
 203             //empty the field and blur it so it looses focus
 204             searchField.setValue('');
 205             searchField.blur();
 206
 207             return;
 208         }
 209
 210         //if the passed argument is not an instance of a Search mode, create a new instance
 211         if (!(search instanceof Flickr.model.Search)) {
 212             query = search.replace("%20", " ");
 213             search = new model({
 214                 query: query
 215             });
 216         }
 217
 218         //add the new search instance to the searchsStore
 219         searchesStore.add(search);
 220         searchesStore.sync();
 221
 222         // select the new record in the list
 223         searchList.select(search);
 224
 225         //empty the field and remove focus from it
 226         searchField.setValue('');
 227         searchField.blur();
 228     }
 229 });