JSUI-1364 (#273)

* Add ActionBar with Details overlay to Card Youtube templates https://coveord.atlassian.net/browse/JSUI-1364 * Add clickUrl and clickUrlField options to Backdrop https://coveord.atlassian.net/browse/JSUI-1364 * Add missing semicolon https://coveord.atlassian.net/browse/JSUI-1364 * Remove redundant link options from Backdrop Replace these options in templates with a surrounding CoveoResultLink component. https://coveord.atlassian.net/browse/JSUI-1364 * Remove tests for removed Backdrop options https://coveord.atlassian.net/browse/JSUI-1364 * Remove unused imports https://coveord.atlassian.net/browse/JSUI-1364
coveo · Jan 23, 2017 · 9939367 · 9939367
1 parent dc88d17
commit 9939367
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 50 deletions.
diff --git a/src/ui/Backdrop/Backdrop.ts b/src/ui/Backdrop/Backdrop.ts
@@ -61,7 +61,7 @@ export class Backdrop extends Component {
      *
      * Default value is `false`.
      */
-    overlayGradient: ComponentOptions.buildBooleanOption({ defaultValue: false, depend: 'overlayColor' })
+    overlayGradient: ComponentOptions.buildBooleanOption({ defaultValue: false, depend: 'overlayColor' }),
   };
 
   /**
@@ -72,10 +72,12 @@ export class Backdrop extends Component {
    * resolved (with a slower execution time).
    * @param result The {@link IQueryResult}.
    */
-  constructor(public element: HTMLElement, public options?: IBackdropOptions, bindings?: IComponentBindings, public result?: IQueryResult) {
+  constructor(public element: HTMLElement, public options?: IBackdropOptions, bindings?: IComponentBindings, public result?: IQueryResult, public _window?: Window) {
     super(element, Backdrop.ID, bindings);
     this.options = ComponentOptions.initComponentOptions(element, Backdrop, options);
 
+    this._window = this._window || window;
+
     let background = '';
     if (this.options.overlayColor) {
       background += `linear-gradient(${this.options.overlayColor}, `
@@ -88,6 +90,7 @@ export class Backdrop extends Component {
     this.element.style.background = background;
     this.element.style.backgroundSize = 'cover';
 
+    // Initialize components inside
     let initOptions = this.searchInterface.options.originalOptionsObject;
     let resultComponentBindings: IResultsComponentBindings = _.extend({}, this.getBindings(), {
       resultElement: element

diff --git a/src/ui/ResultLink/ResultLink.ts b/src/ui/ResultLink/ResultLink.ts
@@ -106,7 +106,7 @@ export class ResultLink extends Component {
      * global scope properties.
      *
      * Default value is `undefined`.
-     * 
+     *
      * #### Examples
      *
      * The following markup will generate a ResultLink href such as `http://uri.com?id=documentTitle`:
@@ -116,7 +116,7 @@ export class ResultLink extends Component {
      * ```
      *
      * The following markup will generate a ResultLink href such as `localhost/fooBar`:
-     * 
+     *
      * ```html
      * <a class="CoveoResultLink" data-href-template="$${window.location.hostname}/{Foo.Bar}"></a>
      * ```
@@ -133,7 +133,7 @@ export class ResultLink extends Component {
      * This option is ignored if the ResultLink innerHTML contains any value.
      *
      * Default value is `undefined`.
-     * 
+     *
      * #### Examples
      *
      * The following markup will generate a ResultLink display title such as `Case number: 123456` if both the
@@ -152,7 +152,7 @@ export class ResultLink extends Component {
      *
      * The following markup will generate `This will be displayed` as a ResultLink display title, because the
      * ResultLink innterHTML is not empty:
-     * 
+     *
      * ```html
      * <a class="CoveoResultLink" data-title-template="${will} ${be} ${ignored}">This will be displayed</a>
      * ```

diff --git a/templates/Dropbox/CardDropbox.html b/templates/Dropbox/CardDropbox.html
@@ -44,18 +44,18 @@
   <div class="CoveoCardActionBar">
     <div class="CoveoQuickview"></div>
     <div class="CoveoCardOverlay" data-title="Details" data-icon="coveo-sprites-main-search-active">
-        <table class="CoveoFieldTable" data-allow-minimization="false">
-          <tbody>
-            <tr data-field="@author" data-caption="Author">
-            </tr>
-            <tr data-field="@source" data-caption="Source">
-            </tr>
-            <tr data-field="@language" data-caption="Language">
-            </tr>
-            <tr data-field="@dropboxrevision" data-caption="Revision">
-            </tr>
-          </tbody>
-        </table>
+      <table class="CoveoFieldTable" data-allow-minimization="false">
+        <tbody>
+          <tr data-field="@author" data-caption="Author">
+          </tr>
+          <tr data-field="@source" data-caption="Source">
+          </tr>
+          <tr data-field="@language" data-caption="Language">
+          </tr>
+          <tr data-field="@dropboxrevision" data-caption="Revision">
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
diff --git a/templates/YouTube/CardYouTubePlaylistItem.html b/templates/YouTube/CardYouTubePlaylistItem.html
@@ -1,19 +1,22 @@
 <div class="coveo-result-frame" style="padding: 0">
-  <div class="CoveoBackdrop coveo-result-row"
-       data-image-field="ytthumbnailurl"
-       data-overlay-color="rgb(38, 62, 85)"
-       data-overlay-gradient="true">
-    <div style="padding: 20px">
-      <div class="coveo-result-row" style="margin-bottom: 15px">
-        <div class="coveo-result-cell" style="width: 32px; vertical-align:middle; flex-grow:0">
-          <span class="CoveoIcon" data-small="true"></span>
-        </div>
-        <div class="coveo-result-cell" style="padding-left: 10px">
-          <a class="CoveoResultLink" style="color: white"></a>
+  <a class="CoveoResultLink" style="text-decoration: none; outline: none">
+    <div class="CoveoBackdrop coveo-result-row"
+        data-image-field="ytthumbnailurl"
+        data-overlay-color="rgb(38, 62, 85)"
+        data-overlay-gradient="true"
+        data-click-url-field="clickableuri">
+      <div style="padding: 20px">
+        <div class="coveo-result-row" style="margin-bottom: 15px">
+          <div class="coveo-result-cell" style="width: 32px; vertical-align:middle; flex-grow:0">
+            <span class="CoveoIcon" data-small="true"></span>
+          </div>
+          <div class="coveo-result-cell" style="padding-left: 10px">
+            <span class="CoveoResultLink" style="color: white"></span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </a>
   <div class="coveo-result-row" style="padding: 20px">
     <div class="coveo-result-cell">
       <div class="CoveoText" data-value="Date" data-weight="bold" style="margin-bottom: .5em"></div>
@@ -22,6 +25,16 @@
   </div>
   <div class="CoveoCardActionBar" style="margin: auto 0 0 0">
     <div class="CoveoQuickview"></div>
+    <div class="CoveoCardOverlay" data-title="Details" data-icon="coveo-sprites-main-search-active">
+      <table class="CoveoFieldTable" data-allow-minimization="false">
+        <tbody>
+          <tr data-field="@author" data-caption="Author">
+          </tr>
+          <tr data-field="@source" data-caption="Source">
+          </tr>
+        </tbody>
+      </table>
+    </div>
     <div class="CoveoFollowItem"></div>
   </div>
 </div>
diff --git a/templates/YouTube/CardYouTubeVideo.html b/templates/YouTube/CardYouTubeVideo.html
@@ -1,34 +1,50 @@
 <div class="coveo-result-frame" style="padding: 0">
-  <div class="CoveoBackdrop coveo-result-row" data-image-field="ytthumbnailurl" data-overlay-color="rgb(38, 62, 85)" data-overlay-gradient="true">
-    <div style="padding: 20px">
-      <div class="coveo-result-row" style="margin-bottom: 15px">
-        <div class="coveo-result-cell" style="width: 32px; vertical-align:middle; flex-grow:0">
-          <span class="CoveoIcon" data-small="true"></span>
+  <a class="CoveoResultLink" style="text-decoration: none; outline: none">
+    <div class="CoveoBackdrop coveo-result-row" data-image-field="ytthumbnailurl" data-overlay-color="rgb(38, 62, 85)" data-overlay-gradient="true" data-click-url-field="clickableuri">
+      <div style="padding: 20px">
+        <div class="coveo-result-row" style="margin-bottom: 15px">
+          <div class="coveo-result-cell" style="width: 32px; vertical-align:middle; flex-grow:0">
+            <span class="CoveoIcon" data-small="true"></span>
+          </div>
+          <div class="coveo-result-cell" style="padding-left: 10px">
+            <span class="CoveoResultLink" style="color: white"></span>
+          </div>
         </div>
-        <div class="coveo-result-cell" style="padding-left: 10px">
-          <a class="CoveoResultLink" style="color: white"></a>
+        <div class="coveo-result-row" style="margin-bottom: 20px">
+          <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
+            <div class="CoveoExcerpt" style="color: white;"></div>
+          </div>
         </div>
       </div>
-      <div class="coveo-result-row" style="margin-bottom: 20px">
-        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
-          <div class="CoveoExcerpt" style="color: white;"></div>
+      <div class="coveo-result-row" style="display: flex; justify-content: space-between; margin: 0; color: white;">
+        <div class="coveo-result-cell" style="background-color: rgba(38, 62, 85, 0.8); padding: 10px 10px 10px 20px;">
+          <span class="CoveoFieldValue" data-field="@ytviewcount" data-helper="number" data-helper-options-format="n"></span>
+          <span class="CoveoText" data-value="views"></span>
+        </div>
+        <div class="coveo-result-cell" style="background-color: rgba(38, 62, 85, 0.8); padding: 10px 20px 10px 10px">
+          <span class="CoveoFieldValue" data-field="@ytvideoduration" data-helper="timeSpan" data-helper-options-is-milliseconds="false"></span>
         </div>
       </div>
     </div>
-    <div class="coveo-result-row" style="display: flex; justify-content: space-between; margin: 0; color: white;">
-      <div class="coveo-result-cell" style="background-color: rgba(38, 62, 85, 0.8); padding: 10px 10px 10px 20px;">
-        <span class="CoveoFieldValue" data-field="@ytviewcount" data-helper="number" data-helper-options-format="n"></span>
-        <span class="CoveoText" data-value="views"></span>
-      </div>
-      <div class="coveo-result-cell" style="background-color: rgba(38, 62, 85, 0.8); padding: 10px 20px 10px 10px">
-        <span class="CoveoFieldValue" data-field="@ytvideoduration" data-helper="timeSpan" data-helper-options-is-milliseconds="false"></span>
-      </div>
-    </div>
-  </div>
+  </a>
   <div class="coveo-result-row" style="padding: 20px">
     <div class="coveo-result-cell">
       <div class="CoveoText" data-value="Date" data-weight="bold" style="margin-bottom: .5em"></div>
       <div class="CoveoFieldValue" data-field="@date" data-helper="emailDateTime" data-helper-options-always-include-time="true"></div>
     </div>
   </div>
+  <div class="CoveoCardActionBar" style="margin: auto 0 0 0">
+    <div class="CoveoQuickview"></div>
+    <div class="CoveoCardOverlay" data-title="Details" data-icon="coveo-sprites-main-search-active">
+      <table class="CoveoFieldTable" data-allow-minimization="false">
+        <tbody>
+          <tr data-field="@author" data-caption="Author">
+          </tr>
+          <tr data-field="@source" data-caption="Source">
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="CoveoFollowItem"></div>
+  </div>
 </div>