src/chrome/common/extensions/docs/examples/extensions/news/views/feed.html

   1 <!DOCTYPE html>
   2 <!--
   3  * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
   4  * source code is governed by a BSD-style license that can be found in the
   5  * LICENSE file.
   6 -->
   7
   8 <!--
   9 @fileoverview This file serves as the pop-up page for showing news
  10 according to the settings saved in options page otherwise shows default
  11 settings.
  12 @author navneetg@google.com (Navneet Goel).
  13 -->
  14
  15 <html>
  16 <head>
  17 <script src = "/javascript/util.js"></script>
  18 <link rel = "stylesheet" href = "/css/feed.css"/>
  19
  20 <script id = "iframe_script">
  21
  22 /**
  23  * Facebook share URL.
  24  */
  25 var FB_SHARE_URL = "http://www.facebook.com/sharer.php?u=";
  26
  27 /**
  28  * Twitter share URL.
  29  */
  30 var TWITTER_SHARE_URL = "http://twitter.com/share?&url=";
  31
  32 /**
  33  * Buzz share URL.
  34  */
  35 var BUZZ_SHARE_URL = "http://www.google.com/buzz/post?&url=";
  36
  37 /**
  38  * Opens new window either of facebook, twitter or google buzz.
  39  * @param {String} id Specifies whether to share news on Facebook, Google Buzz
  40  *     or Twitter.
  41  * @param {String} url Contains URL of the News to be shared.
  42  */
  43 function openNewsShareWindow(id, url) {
  44   var newsUrl = url.substring(url.indexOf('&url=') + 5);
  45   var openUrl;
  46   switch (id) {
  47      case 'fb':
  48        openUrl = FB_SHARE_URL;
  49        break;
  50      case 'buzz':
  51        openUrl = BUZZ_SHARE_URL;
  52        break;
  53      case 'twitter':
  54        openUrl = TWITTER_SHARE_URL;
  55        break;
  56    }
  57   window.open(openUrl + newsUrl, '_blank',
  58       'resizable=0,scrollbars=0,width=690,height=415');
  59 }
  60
  61 /**
  62  * Checks language in image url retrieved from feed and sets style of
  63  * title and openbox in pop-up page(if url is found), otherwise sets
  64  * to default styling.
  65  */
  66 function setStyleByLang(titleImgUrl) {
  67   var openBoxes = document.getElementsByClassName('open_box');
  68   var itemTitles = document.getElementsByClassName('item_title');
  69
  70   if (titleImgUrl != 'NULL') {
  71     var pattern = /ar_/gi;
  72     var result = titleImgUrl.match(pattern);
  73     if (result != null || titleImgUrl == ISRAEL_IMAGE_URL) {
  74       document.querySelector('body').className = 'rtl';
  75     }
  76   }
  77 }
  78
  79 /**
  80  * Reports the height.
  81  */
  82 function reportHeight() {
  83   var msg = JSON.stringify({type:"size", size:document.body.offsetHeight});
  84   parent.postMessage(msg, "*");
  85 }
  86
  87 /**
  88  * Initialize the iframe body.
  89  */
  90 function frameLoaded() {
  91   var links = document.getElementsByTagName("A");
  92   for (var i = 0, link; link = links[i]; i++) {
  93     var class = link.className;
  94     if (class != "item_title" && class != "open_box") {
  95       link.addEventListener("click", showStory);
  96     }
  97   }
  98   window.addEventListener("message", messageHandler);
  99 }
 100
 101 /**
 102  * Redirects to Google news site according to clicked URL.
 103  * @param {Object} event Onclick event.
 104  */
 105 function showStory(event) {
 106   var href = event.currentTarget.href;
 107   parent.postMessage(JSON.stringify({type:"show", url:href}), "*");
 108   event.preventDefault();
 109 }
 110
 111 /**
 112  * Handles message.
 113  * @param {Object} event Onmessage event.
 114  */
 115 function messageHandler(event) {
 116   reportHeight();
 117 }
 118 </script>
 119 <script src = "/javascript/feed.js"></script>
 120 </head>
 121
 122 <body onload = "getTopics();getNewsByTitle();" onunload = "saveLastTopic();">
 123
 124 <div style = "margin-bottom: 15px;">
 125   <div style = "float: right;">
 126     <div style = "float: right; font-size: 11px">
 127       <a id = "option_link" onclick = "chrome.tabs.create({url: '/views/options.html', selected: true})">
 128       </a>
 129     </div>
 130     <div style = "margin-top: 27px">
 131       <select id = "topics" onchange = "getNewsByTitle();" style = "display: inline;">
 132       </select>
 133     </div>
 134   </div>
 135   <a id = "title_a">
 136     <img id = "title" style = "padding-top: 5px;">
 137   </a>
 138 </div>
 139
 140 <div id = "feed">
 141 </div>
 142
 143 <div id = "noStories">
 144 </div>
 145 </body>
 146 </html>