browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 import React from "react";
   6 import { actionCreators as ac } from "common/Actions.mjs";
   7 import { SafeAnchor } from "../../DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
   8 import { WallpapersSection } from "../../WallpapersSection/WallpapersSection";
   9
  10 export class ContentSection extends React.PureComponent {
  11   constructor(props) {
  12     super(props);
  13     this.onPreferenceSelect = this.onPreferenceSelect.bind(this);
  14
  15     // Refs are necessary for dynamically measuring drawer heights for slide animations
  16     this.topSitesDrawerRef = React.createRef();
  17     this.pocketDrawerRef = React.createRef();
  18   }
  19
  20   inputUserEvent(eventSource, status) {
  21     this.props.dispatch(
  22       ac.UserEvent({
  23         event: "PREF_CHANGED",
  24         source: eventSource,
  25         value: { status, menu_source: "CUSTOMIZE_MENU" },
  26       })
  27     );
  28   }
  29
  30   onPreferenceSelect(e) {
  31     // eventSource: TOP_SITES | TOP_STORIES | HIGHLIGHTS
  32     const { preference, eventSource } = e.target.dataset;
  33     let value;
  34     if (e.target.nodeName === "SELECT") {
  35       value = parseInt(e.target.value, 10);
  36     } else if (e.target.nodeName === "INPUT") {
  37       value = e.target.checked;
  38       if (eventSource) {
  39         this.inputUserEvent(eventSource, value);
  40       }
  41     } else if (e.target.nodeName === "MOZ-TOGGLE") {
  42       value = e.target.pressed;
  43       if (eventSource) {
  44         this.inputUserEvent(eventSource, value);
  45       }
  46     }
  47     this.props.setPref(preference, value);
  48   }
  49
  50   componentDidMount() {
  51     this.setDrawerMargins();
  52   }
  53
  54   componentDidUpdate() {
  55     this.setDrawerMargins();
  56   }
  57
  58   setDrawerMargins() {
  59     this.setDrawerMargin(
  60       `TOP_SITES`,
  61       this.props.enabledSections.topSitesEnabled
  62     );
  63     this.setDrawerMargin(
  64       `TOP_STORIES`,
  65       this.props.enabledSections.pocketEnabled
  66     );
  67   }
  68
  69   setDrawerMargin(drawerID, isOpen) {
  70     let drawerRef;
  71
  72     if (drawerID === `TOP_SITES`) {
  73       drawerRef = this.topSitesDrawerRef.current;
  74     } else if (drawerID === `TOP_STORIES`) {
  75       drawerRef = this.pocketDrawerRef.current;
  76     } else {
  77       return;
  78     }
  79
  80     let drawerHeight;
  81
  82     if (drawerRef) {
  83       drawerHeight = parseFloat(window.getComputedStyle(drawerRef)?.height);
  84
  85       if (isOpen) {
  86         drawerRef.style.marginTop = `0`;
  87       } else {
  88         drawerRef.style.marginTop = `-${drawerHeight}px`;
  89       }
  90     }
  91   }
  92
  93   render() {
  94     const {
  95       enabledSections,
  96       mayHaveSponsoredTopSites,
  97       pocketRegion,
  98       mayHaveSponsoredStories,
  99       mayHaveRecentSaves,
 100       openPreferences,
 101       spocMessageVariant,
 102       wallpapersEnabled,
 103       activeWallpaper,
 104       setPref,
 105     } = this.props;
 106     const {
 107       topSitesEnabled,
 108       pocketEnabled,
 109       highlightsEnabled,
 110       showSponsoredTopSitesEnabled,
 111       showSponsoredPocketEnabled,
 112       showRecentSavesEnabled,
 113       topSitesRowsCount,
 114     } = enabledSections;
 115
 116     return (
 117       <div className="home-section">
 118         {wallpapersEnabled && (
 119           <div className="wallpapers-section">
 120             <h2 data-l10n-id="newtab-wallpaper-title"></h2>
 121             <WallpapersSection
 122               setPref={setPref}
 123               activeWallpaper={activeWallpaper}
 124             />
 125           </div>
 126         )}
 127         <div id="shortcuts-section" className="section">
 128           <moz-toggle
 129             id="shortcuts-toggle"
 130             pressed={topSitesEnabled || null}
 131             onToggle={this.onPreferenceSelect}
 132             data-preference="feeds.topsites"
 133             data-eventSource="TOP_SITES"
 134             data-l10n-id="newtab-custom-shortcuts-toggle"
 135             data-l10n-attrs="label, description"
 136           />
 137           <div>
 138             <div className="more-info-top-wrapper">
 139               <div className="more-information" ref={this.topSitesDrawerRef}>
 140                 <select
 141                   id="row-selector"
 142                   className="selector"
 143                   name="row-count"
 144                   data-preference="topSitesRows"
 145                   value={topSitesRowsCount}
 146                   onChange={this.onPreferenceSelect}
 147                   disabled={!topSitesEnabled}
 148                   aria-labelledby="custom-shortcuts-title"
 149                 >
 150                   <option
 151                     value="1"
 152                     data-l10n-id="newtab-custom-row-selector"
 153                     data-l10n-args='{"num": 1}'
 154                   />
 155                   <option
 156                     value="2"
 157                     data-l10n-id="newtab-custom-row-selector"
 158                     data-l10n-args='{"num": 2}'
 159                   />
 160                   <option
 161                     value="3"
 162                     data-l10n-id="newtab-custom-row-selector"
 163                     data-l10n-args='{"num": 3}'
 164                   />
 165                   <option
 166                     value="4"
 167                     data-l10n-id="newtab-custom-row-selector"
 168                     data-l10n-args='{"num": 4}'
 169                   />
 170                 </select>
 171                 {mayHaveSponsoredTopSites && (
 172                   <div className="check-wrapper" role="presentation">
 173                     <input
 174                       id="sponsored-shortcuts"
 175                       className="sponsored-checkbox"
 176                       disabled={!topSitesEnabled}
 177                       checked={showSponsoredTopSitesEnabled}
 178                       type="checkbox"
 179                       onChange={this.onPreferenceSelect}
 180                       data-preference="showSponsoredTopSites"
 181                       data-eventSource="SPONSORED_TOP_SITES"
 182                     />
 183                     <label
 184                       className="sponsored"
 185                       htmlFor="sponsored-shortcuts"
 186                       data-l10n-id="newtab-custom-sponsored-sites"
 187                     />
 188                   </div>
 189                 )}
 190               </div>
 191             </div>
 192           </div>
 193         </div>
 194
 195         {pocketRegion && (
 196           <div id="pocket-section" className="section">
 197             <label className="switch">
 198               <moz-toggle
 199                 id="pocket-toggle"
 200                 pressed={pocketEnabled || null}
 201                 onToggle={this.onPreferenceSelect}
 202                 aria-describedby="custom-pocket-subtitle"
 203                 data-preference="feeds.section.topstories"
 204                 data-eventSource="TOP_STORIES"
 205                 data-l10n-id="newtab-custom-stories-toggle"
 206                 data-l10n-attrs="label, description"
 207               />
 208             </label>
 209             <div>
 210               {(mayHaveSponsoredStories || mayHaveRecentSaves) && (
 211                 <div className="more-info-pocket-wrapper">
 212                   <div className="more-information" ref={this.pocketDrawerRef}>
 213                     {mayHaveSponsoredStories && (
 214                       <div className="check-wrapper" role="presentation">
 215                         <input
 216                           id="sponsored-pocket"
 217                           className="sponsored-checkbox"
 218                           disabled={!pocketEnabled}
 219                           checked={showSponsoredPocketEnabled}
 220                           type="checkbox"
 221                           onChange={this.onPreferenceSelect}
 222                           data-preference="showSponsored"
 223                           data-eventSource="POCKET_SPOCS"
 224                         />
 225                         <label
 226                           className="sponsored"
 227                           htmlFor="sponsored-pocket"
 228                           data-l10n-id="newtab-custom-pocket-sponsored"
 229                         />
 230                       </div>
 231                     )}
 232                     {mayHaveRecentSaves && (
 233                       <div className="check-wrapper" role="presentation">
 234                         <input
 235                           id="recent-saves-pocket"
 236                           className="sponsored-checkbox"
 237                           disabled={!pocketEnabled}
 238                           checked={showRecentSavesEnabled}
 239                           type="checkbox"
 240                           onChange={this.onPreferenceSelect}
 241                           data-preference="showRecentSaves"
 242                           data-eventSource="POCKET_RECENT_SAVES"
 243                         />
 244                         <label
 245                           className="sponsored"
 246                           htmlFor="recent-saves-pocket"
 247                           data-l10n-id="newtab-custom-pocket-show-recent-saves"
 248                         />
 249                       </div>
 250                     )}
 251                   </div>
 252                 </div>
 253               )}
 254             </div>
 255           </div>
 256         )}
 257
 258         <div id="recent-section" className="section">
 259           <label className="switch">
 260             <moz-toggle
 261               id="highlights-toggle"
 262               pressed={highlightsEnabled || null}
 263               onToggle={this.onPreferenceSelect}
 264               data-preference="feeds.section.highlights"
 265               data-eventSource="HIGHLIGHTS"
 266               data-l10n-id="newtab-custom-recent-toggle"
 267               data-l10n-attrs="label, description"
 268             />
 269           </label>
 270         </div>
 271
 272         {pocketRegion &&
 273           mayHaveSponsoredStories &&
 274           spocMessageVariant === "variant-c" && (
 275             <div className="sponsored-content-info">
 276               <div className="icon icon-help"></div>
 277               <div>
 278                 Sponsored content supports our mission to build a better web.{" "}
 279                 <SafeAnchor
 280                   dispatch={this.props.dispatch}
 281                   url="https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs"
 282                 >
 283                   Find out how
 284                 </SafeAnchor>
 285               </div>
 286             </div>
 287           )}
 288
 289         <span className="divider" role="separator"></span>
 290
 291         <div>
 292           <button
 293             id="settings-link"
 294             className="external-link"
 295             onClick={openPreferences}
 296             data-l10n-id="newtab-custom-settings"
 297           />
 298         </div>
 299       </div>
 300     );
 301   }
 302 }