templates/reader/lib.js

   1 Ext.ns('Reader');
   2
   3
   4 Reader.SubscriptionPanel = Ext.extend(Ext.Panel, {
   5         constructor: function(application, config) {
   6                 this.application = application;
   7                 var self = this;
   8
   9                 var listView = this.listView = new Ext.list.ListView({
  10                         emptyText: 'No Subscriptions',
  11                         store: this.application.subscription_store,
  12                         columns: [
  13                                 {
  14                                         header: 'Title',
  15                                         dataIndex: 'title',
  16                                         width: .75,
  17                                 },
  18                                 {
  19                                         header: 'Unread',
  20                                         dataIndex: 'unread',
  21                                         align: 'right',
  22                                 },
  23                         ],
  24                         hideHeaders: true,
  25                         singleSelect: true,
  26                         loadingText: 'Loading...',
  27                 });
  28
  29                 Reader.SubscriptionPanel.superclass.constructor.call(this, Ext.applyIf(config||{}, {
  30                         title: 'Subscriptions',
  31                         items: [
  32                                 this.listView,
  33                         ],
  34                         bbar: [
  35                                 {
  36                                         text: 'Add Feed...',
  37                                         iconCls: 'icon-add-feed',
  38                                         handler: function() {
  39                                                 Ext.MessageBox.prompt('Add Feed', 'Enter the URL to the feed:', function(button, text) {
  40                                                         if (button == 'ok') {
  41                                                                 Ext.Ajax.request({
  42                                                                         url: '{% url reader_add_subscription %}',
  43                                                                         params: {
  44                                                                                 'url': text,
  45                                                                                 'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
  46                                                                         },
  47                                                                         success: function() {
  48                                                                                 self.application.subscription_store.reload();
  49                                                                         },
  50                                                                         failure: function() {
  51                                                                                 alert('Unable to add feed.');
  52                                                                         },
  53                                                                 });
  54                                                         }
  55                                                 });
  56                                         },
  57                                 },'->',{
  58                                         text: 'Refresh',
  59                                         handler: function() {
  60                                                 self.application.subscription_store.reload();
  61                                         },
  62                                 },
  63                         ],
  64                         collapsible: true,
  65                 }));
  66
  67                 listView.on('selectionchange', function(listView, selections) {
  68                         if (selections.length > 0) {
  69                                 self.application.selected_subscription(listView.getSelectedRecords()[0]['data']);
  70                         }
  71                 });
  72         },
  73 });
  74
  75
  76 Reader.EntryPanel = Ext.extend(Ext.Panel, {
  77         constructor: function(application, config) {
  78                 this.application = application;
  79                 var self = this;
  80
  81                 var gridView = this.gridView = new Ext.grid.GridPanel({
  82                         store: this.application.entry_store,
  83                         columns: [
  84                                 {
  85                                         header: 'Title',
  86                                         dataIndex: 'title',
  87                                 },
  88                                 {
  89                                         header: 'Date',
  90                                         dataIndex: 'date',
  91                                 },
  92                         ],
  93                         viewConfig: {
  94                                 forceFit: true,
  95                         },
  96                         sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
  97                         region: 'north',
  98                         split: true,
  99                         height: 200,
 100                         minSize: 150,
 101                         maxSize: 400,
 102                 });
 103
 104                 var entryDetailTpl = this.entryDetailTpl = new Ext.Template(
 105                         '<h1><a href="{link}" target="_blank">{title}</a></h1>',
 106                         '<p style="font-size: smaller;">{date}</p>',
 107                         '<p>{content}</p>'
 108                 );
 109
 110                 var entryDetail = this.entryDetail = {
 111                         id: 'entryDetail',
 112                         region: 'center',
 113                         bodyStyle: {
 114                                 background: 'white',
 115                                 padding: '7px',
 116                                 color: 'black',
 117                         },
 118                         preventBodyReset: true,
 119                         html: 'Select an entry to view',
 120                         autoScroll: true,
 121                 };
 122
 123                 gridView.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
 124                         var detailPanel = Ext.getCmp('entryDetail');
 125                         entryDetailTpl.overwrite(detailPanel.body, r.data);
 126
 127                         Ext.Ajax.request({
 128                                 url: '{% url reader_read_entry %}',
 129                                 params: {
 130                                         'entry_id': r.data['id'],
 131                                         'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
 132                                 },
 133                                 success: function() {
 134                                         self.application.subscription_store.reload();
 135                                 },
 136                                 failure: function() {
 137                                         console.log('Unable to set read entry');
 138                                 },
 139                         });
 140                 });
 141
 142                 Reader.EntryPanel.superclass.constructor.call(this, Ext.applyIf(config||{}, {
 143                         title: 'Entries',
 144                         header: true,
 145                         items: [ this.gridView, this.entryDetail ],
 146                         layout: 'border',
 147                 }));
 148         },
 149 });
 150
 151
 152 Reader.Application = Ext.extend(Ext.util.Observable, {
 153         constructor: function(config) {
 154                 Ext.apply(this, config, {
 155                         renderTo: Ext.getBody(),
 156                 });
 157                 Reader.Application.superclass.constructor.call(this);
 158                 this.init();
 159         },
 160         init: function() {
 161                 Ext.QuickTips.init();
 162
 163                 var subscription_store = this.subscription_store = new Ext.data.JsonStore({
 164                         autoLoad: true,
 165                         autoDestroy: true,
 166                         url: '{% url reader_get_subscriptions %}',
 167                         root: 'root',
 168                         totalProperty: 'len',
 169                         fields: [
 170                                 'id',
 171                                 'title',
 172                                 'unread',
 173                         ]
 174                 });
 175
 176                 var entry_store = this.entry_store = new Ext.data.JsonStore({
 177                         url: '{% url reader_get_entries %}',
 178                         baseParams: {
 179                                 'subscription_id': '-2',
 180                                 'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
 181                         },
 182                         root: 'root',
 183                         totalProperty: 'len',
 184                         fields: [
 185                                 'id', 'title', 'date', 'content', 'link'
 186                         ],
 187                 });
 188
 189                 var subscription_panel = this.subscription_panel = new Reader.SubscriptionPanel(this, {
 190                         region: 'west',
 191                         split: true,
 192                         width: 200,
 193                         minSize: 150,
 194                         maxSize: 400,
 195                 });
 196                 var entry_panel = this.entry_panel = new Reader.EntryPanel(this, {
 197                         region: 'center',
 198                         autoScroll: true,
 199                 });
 200                 var viewport = this.viewport = new Ext.Viewport({
 201                         layout: 'border',
 202                         renderTo: this.renderTo,
 203                         items: [
 204                                 this.subscription_panel,
 205                                 this.entry_panel,
 206                         ],
 207                 });
 208
 209                 this.viewport.doLayout();
 210         },
 211         selected_subscription: function(subscription) {
 212                 this.entry_panel.setTitle(subscription['title']);
 213                 this.entry_store.reload({ params: {
 214                         'subscription_id': subscription['id'],
 215                 }});
 216         }
 217 });