Merge pull request #276 from Wikia/render-hack-fix

Refactor component render logic

app/components/ad-slot.js

@@ -5,8 +5,10 @@ import {dasherize} from '@ember/string';
 import {on} from '@ember/object/evented';
 import {setProperties, computed} from '@ember/object';
 import InViewportMixin from 'ember-in-viewport';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	InViewportMixin,
 	{
 		classNames: ['ad-slot-wrapper'],

app/components/ads/invisible-high-impact-2.js

@@ -3,8 +3,9 @@ import {readOnly} from '@ember/object/computed';
 import {dasherize} from '@ember/string';
 import Component from '@ember/component';
 import {computed, get} from '@ember/object';
+import RenderComponentMixin from '../../mixins/render-component';
 
-export default Component.extend({
+export default Component.extend(RenderComponentMixin, {
 	ads: service(),
 
 	highImpactCountries: get(Wikia, 'InstantGlobals.wgAdDriverHighImpact2SlotCountries'),

app/components/article-content.js

@@ -52,6 +52,7 @@ export default Component.extend(
 
 					this.handleInfoboxes();
 					this.replaceInfoboxesWithInfoboxComponents();
+
 					this.renderedComponents = this.renderedComponents.concat(
 						queryPlaceholders(this.$())
 							.map(getAttributesForMedia, {

app/components/article-contribution.js

@@ -1,8 +1,10 @@
 import Component from '@ember/component';
 import LanguagesMixin from '../mixins/languages';
 import {track, trackActions} from '../utils/track';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	LanguagesMixin,
 	{
 		classNames: ['contribution-container'],

app/components/article-media-gallery.js

@@ -4,8 +4,10 @@ import EmberObject, {computed} from '@ember/object';
 import Component from '@ember/component';
 import InViewportMixin from 'ember-in-viewport';
 import Thumbnailer from '../modules/thumbnailer';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	InViewportMixin,
 	{
 		classNames: ['article-media-gallery'],

app/components/article-media-linked-gallery.js

@@ -2,51 +2,50 @@ import {sort, map} from '@ember/object/computed';
 import {computed} from '@ember/object';
 import Component from '@ember/component';
 import Thumbnailer from '../modules/thumbnailer';
-
-export default Component.extend(
-	{
-		classNames: ['article-media-linked-gallery'],
-
-		imageSize: 195,
-		cropMode: Thumbnailer.mode.topCrop,
-		numberOfItemsRendered: 4,
-
-		canShowMore: computed('items', 'numberOfItemsRendered', function () {
-			return this.get('items.length') > this.get('numberOfItemsRendered');
-		}),
-
-		sortedItems: sort('sanitizedItems', (a, b) => {
-			if (a.isLinkedByUser && !b.isLinkedByUser) {
-				return 1;
-			} else if (b.isLinkedByUser && !a.isLinkedByUser) {
-				return -1;
-			}
-
-			return 0;
-		}),
-
-		sanitizedItems: map('items', (item, index) => {
-			item.galleryRef = index;
-			return item;
-		}),
-
-		/**
-		 * We don't want to render all child components because galleries can be big
-		 * Initially, we render this.numberOfItemsRendered components
-		 * Then increment this number in this.showMore
-		 */
-		itemsToRender: computed('sortedItems', 'numberOfItemsRendered', function () {
-			return this.get('sortedItems').slice(0, this.get('numberOfItemsRendered'));
-		}),
-
-		actions: {
-			openLightbox(galleryRef) {
-				// openLightbox is set in getAttributesForMedia() inside utils/article-media.js
-				this.get('openLightbox')(this.get('ref'), galleryRef);
-			},
-			showMore() {
-				this.set('numberOfItemsRendered', this.get('items.length'));
-			}
+import RenderComponentMixin from '../mixins/render-component';
+
+export default Component.extend(RenderComponentMixin, {
+	classNames: ['article-media-linked-gallery'],
+
+	imageSize: 195,
+	cropMode: Thumbnailer.mode.topCrop,
+	numberOfItemsRendered: 4,
+
+	canShowMore: computed('items', 'numberOfItemsRendered', function () {
+		return this.get('items.length') > this.get('numberOfItemsRendered');
+	}),
+
+	sortedItems: sort('sanitizedItems', (a, b) => {
+		if (a.isLinkedByUser && !b.isLinkedByUser) {
+			return 1;
+		} else if (b.isLinkedByUser && !a.isLinkedByUser) {
+			return -1;
+		}
+
+		return 0;
+	}),
+
+	sanitizedItems: map('items', (item, index) => {
+		item.galleryRef = index;
+		return item;
+	}),
+
+	/**
+	 * We don't want to render all child components because galleries can be big
+	 * Initially, we render this.numberOfItemsRendered components
+	 * Then increment this number in this.showMore
+	 */
+	itemsToRender: computed('sortedItems', 'numberOfItemsRendered', function () {
+		return this.get('sortedItems').slice(0, this.get('numberOfItemsRendered'));
+	}),
+
+	actions: {
+		openLightbox(galleryRef) {
+			// openLightbox is set in getAttributesForMedia() inside utils/article-media.js
+			this.get('openLightbox')(this.get('ref'), galleryRef);
 		},
-	}
-);
+		showMore() {
+			this.set('numberOfItemsRendered', this.get('items.length'));
+		}
+	},
+});

app/components/article-media-map-thumbnail.js

@@ -1,38 +1,37 @@
 import {inject as service} from '@ember/service';
 import Component from '@ember/component';
 import {track, trackActions} from '../utils/track';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend(
-	{
-		classNames: ['article-media-map-thumbnail'],
-		tagName: 'figure',
-		logger: service(),
+export default Component.extend(RenderComponentMixin, {
+	classNames: ['article-media-map-thumbnail'],
+	tagName: 'figure',
+	logger: service(),
 
-		/**
-		 * @returns {void|boolean}
-		 */
-		click() {
-			const url = this.get('url'),
-				id = this.get('id'),
-				title = this.get('title');
+	/**
+	 * @returns {void|boolean}
+	 */
+	click() {
+		const url = this.get('url'),
+			id = this.get('id'),
+			title = this.get('title');
 
-			if (url) {
-				this.get('logger').debug('Handling map with id:', id, 'and title:', title);
+		if (url) {
+			this.get('logger').debug('Handling map with id:', id, 'and title:', title);
 
-				track({
-					action: trackActions.click,
-					category: 'map',
-					label: 'open'
-				});
+			track({
+				action: trackActions.click,
+				category: 'map',
+				label: 'open'
+			});
 
-				this.get('openLightbox')('map', {
-					id,
-					title,
-					url
-				});
+			this.get('openLightbox')('map', {
+				id,
+				title,
+				url
+			});
 
-				return false;
-			}
+			return false;
 		}
 	}
-);
+});

app/components/article-media-thumbnail.js

@@ -7,8 +7,10 @@ import ViewportMixin from '../mixins/viewport';
 import MediaThumbnailUtilsMixin from '../mixins/media-thumbnail-utils';
 import Thumbnailer from '../modules/thumbnailer';
 import {normalizeThumbWidth} from '../utils/thumbnail';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	InViewportMixin,
 	MediaThumbnailUtilsMixin,
 	ViewportMixin,

app/components/article-table-of-contents.js

@@ -1,44 +1,43 @@
 import Component from '@ember/component';
 import {track, trackActions} from '../utils/track';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend(
-	{
-		classNames: ['table-of-contents'],
-		layoutName: 'components/article-table-of-contents',
+export default Component.extend(RenderComponentMixin, {
+	classNames: ['table-of-contents'],
+	layoutName: 'components/article-table-of-contents',
 
-		/**
-		 * Generates table of contents data based on h2 elements in the article
-		 * @todo https://wikia-inc.atlassian.net/browse/XW-1425
-		 * Temporary solution for generating Table of Contents
-		 * Ideally, we wouldn't be doing this as a post-processing step, but rather we would just get a JSON with
-		 * ToC data from server and render view based on that.
-		 *
-		 * @returns {void}
-		 */
-		didInsertElement() {
-			const headers = this.get('articleContent').find('h2[section]').map((i, elem) => {
-				if (elem.textContent) {
-					return {
-						element: elem,
-						level: elem.tagName,
-						name: elem.textContent,
-						id: elem.id,
-						section: elem.getAttribute('section'),
-					};
-				}
-			}).toArray();
+	/**
+	 * Generates table of contents data based on h2 elements in the article
+	 * @todo https://wikia-inc.atlassian.net/browse/XW-1425
+	 * Temporary solution for generating Table of Contents
+	 * Ideally, we wouldn't be doing this as a post-processing step, but rather we would just get a JSON with
+	 * ToC data from server and render view based on that.
+	 *
+	 * @returns {void}
+	 */
+	didInsertElement() {
+		const headers = this.get('articleContent').find('h2[section]').map((i, elem) => {
+			if (elem.textContent) {
+				return {
+					element: elem,
+					level: elem.tagName,
+					name: elem.textContent,
+					id: elem.id,
+					section: elem.getAttribute('section'),
+				};
+			}
+		}).toArray();
 
-			this.set('headers', headers);
-		},
+		this.set('headers', headers);
+	},
 
-		actions: {
-			trackClick(category, label) {
-				track({
-					action: trackActions.click,
-					category,
-					label
-				});
-			}
+	actions: {
+		trackClick(category, label) {
+			track({
+				action: trackActions.click,
+				category,
+				label
+			});
 		}
 	}
-);
+});

app/components/jwplayer-tag.js

@@ -3,8 +3,9 @@ import Component from '@ember/component';
 import {Promise} from 'rsvp';
 import jwPlayerAssets from '../modules/jwplayer-assets';
 import {track} from '../utils/track';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend({
+export default Component.extend(RenderComponentMixin, {
 	jwVideoDataUrl: 'https://cdn.jwplayer.com/v2/media/',
 
 	/**

app/components/lightbox-ads.js

@@ -1,7 +1,8 @@
 import {later} from '@ember/runloop';
 import Component from '@ember/component';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend({
+export default Component.extend(RenderComponentMixin, {
 	classNames: ['lightbox-ads', 'lightbox-content-inner'],
 
 	/**

app/components/lightbox-image.js

@@ -5,8 +5,10 @@ import {gt} from '@ember/object/computed';
 import Component from '@ember/component';
 import ViewportMixin from '../mixins/viewport';
 import ImageLoader from '../mixins/image-loader';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	ViewportMixin,
 	ImageLoader,
 	{

app/components/lightbox-map.js

@@ -1,8 +1,9 @@
 import {scheduleOnce} from '@ember/runloop';
 import {observer} from '@ember/object';
 import Component from '@ember/component';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend({
+export default Component.extend(RenderComponentMixin, {
 	classNames: ['lightbox-map', 'lightbox-content-inner'],
 
 	modelObserver: observer('model', function () {

app/components/lightbox-media.js

@@ -6,8 +6,10 @@ import {observer, computed} from '@ember/object';
 import ThirdsClickMixin from '../mixins/thirds-click';
 import MediaModel from '../models/media';
 import {normalizeToUnderscore} from '../utils/string';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	ThirdsClickMixin,
 	{
 		classNames: ['lightbox-media', 'lightbox-content-inner'],

app/components/lightbox-video.js

@@ -3,12 +3,14 @@ import {inject as service} from '@ember/service';
 import Component from '@ember/component';
 import ViewportMixin from '../mixins/viewport';
 import VideoLoader from '../modules/video-loader';
+import RenderComponentMixin from '../mixins/render-component';
 
 /**
  * Component that is used inside ligthbox-media component
  * to handle displaying video
  */
 export default Component.extend(
+	RenderComponentMixin,
 	ViewportMixin,
 	{
 		classNames: ['lightbox-video', 'lightbox-content-inner'],

app/components/lightbox-wrapper.js

@@ -1,8 +1,9 @@
 import {not} from '@ember/object/computed';
 import {computed} from '@ember/object';
 import Component from '@ember/component';
+import RenderComponentMixin from '../mixins/render-component';
 
-export default Component.extend({
+export default Component.extend(RenderComponentMixin, {
 	classNames: ['lightbox-wrapper'],
 	classNameBindings: ['isVisible:open'],
 	// This is needed for keyDown event to work

app/components/portable-infobox-hero-image.js

@@ -3,8 +3,10 @@ import {computed} from '@ember/object';
 import Component from '@ember/component';
 import Thumbnailer from '../modules/thumbnailer';
 import ViewportMixin from '../mixins/viewport';
+import RenderComponentMixin from '../mixins/render-component';
 
 export default Component.extend(
+	RenderComponentMixin,
 	ViewportMixin,
 	{
 		imageAspectRatio: 16 / 9,