From c5feb36703958b1735247f32446a1a68a892fd2a Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Wed, 22 Nov 2017 14:15:16 +0100 Subject: [PATCH 01/11] reworking render-component WIP --- app/components/article-content.js | 2 ++ app/components/article-contribution.js | 2 ++ app/components/article-table-of-contents.js | 2 ++ app/components/portable-infobox.js | 2 ++ app/components/widget-apester.js | 3 ++- app/components/widget-flite.js | 3 ++- app/components/widget-playbuzz.js | 3 ++- app/components/widget-polldaddy.js | 3 ++- app/components/widget-twitter.js | 2 ++ app/components/widget-vk.js | 2 ++ app/mixins/render-component.js | 12 +++++++++++ app/utils/render-component.js | 23 +++++++++++---------- 12 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 app/mixins/render-component.js diff --git a/app/components/article-content.js b/app/components/article-content.js index 8fb5b071a0a..08edfebc2e0 100644 --- a/app/components/article-content.js +++ b/app/components/article-content.js @@ -52,6 +52,8 @@ export default Component.extend( this.handleInfoboxes(); this.replaceInfoboxesWithInfoboxComponents(); + + // todo: add mixin for these this.renderedComponents = this.renderedComponents.concat( queryPlaceholders(this.$()) .map(getAttributesForMedia, { diff --git a/app/components/article-contribution.js b/app/components/article-contribution.js index 600b2a8032a..768aabdfa1a 100644 --- a/app/components/article-contribution.js +++ b/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'], diff --git a/app/components/article-table-of-contents.js b/app/components/article-table-of-contents.js index 17e75a29de9..13f043ea94f 100644 --- a/app/components/article-table-of-contents.js +++ b/app/components/article-table-of-contents.js @@ -1,7 +1,9 @@ import Component from '@ember/component'; import {track, trackActions} from '../utils/track'; +import RenderComponentMixin from '../mixins/render-component'; export default Component.extend( + RenderComponentMixin, { classNames: ['table-of-contents'], layoutName: 'components/article-table-of-contents', diff --git a/app/components/portable-infobox.js b/app/components/portable-infobox.js index 53b2b7ea4de..e0833e29948 100644 --- a/app/components/portable-infobox.js +++ b/app/components/portable-infobox.js @@ -1,9 +1,11 @@ import {computed} from '@ember/object'; import Component from '@ember/component'; import ViewportMixin from '../mixins/viewport'; +import RenderComponentMixin from '../mixins/render-component'; import {track, trackActions} from '../utils/track'; export default Component.extend( + RenderComponentMixin, ViewportMixin, { classNames: ['portable-infobox'], diff --git a/app/components/widget-apester.js b/app/components/widget-apester.js index 07f5bd024b7..b36a639273a 100644 --- a/app/components/widget-apester.js +++ b/app/components/widget-apester.js @@ -1,7 +1,8 @@ import Component from '@ember/component'; import WidgetScriptStateMixin from '../mixins/widget-script-state'; +import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend(WidgetScriptStateMixin, { +export default Component.extend(WidgetScriptStateMixin, RenderComponentMixin, { classNames: ['widget-apester'], data: null, diff --git a/app/components/widget-flite.js b/app/components/widget-flite.js index 15b6799deef..e6dcccd47df 100644 --- a/app/components/widget-flite.js +++ b/app/components/widget-flite.js @@ -1,6 +1,7 @@ import Component from '@ember/component'; +import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend({ +export default Component.extend(RenderComponentMixin, { classNames: ['widget-flite'], layoutName: 'components/widget-flite', data: null, diff --git a/app/components/widget-playbuzz.js b/app/components/widget-playbuzz.js index f610379900b..cba64100b41 100644 --- a/app/components/widget-playbuzz.js +++ b/app/components/widget-playbuzz.js @@ -1,6 +1,7 @@ import Component from '@ember/component'; +import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend({ +export default Component.extend(RenderComponentMixin, { classNames: ['widget-playbuzz'], data: null, diff --git a/app/components/widget-polldaddy.js b/app/components/widget-polldaddy.js index 43855de5e00..ade0681a4a8 100644 --- a/app/components/widget-polldaddy.js +++ b/app/components/widget-polldaddy.js @@ -1,7 +1,8 @@ import $ from 'jquery'; import Component from '@ember/component'; +import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend({ +export default Component.extend(RenderComponentMixin, { classNames: ['widget-polldaddy'], layoutName: 'components/widget-polldaddy', data: null, diff --git a/app/components/widget-twitter.js b/app/components/widget-twitter.js index 859df87f9cb..c29689bf935 100644 --- a/app/components/widget-twitter.js +++ b/app/components/widget-twitter.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import {observer} from '@ember/object'; import Component from '@ember/component'; import WidgetScriptStateMixin from '../mixins/widget-script-state'; +import RenderComponentMixin from '../mixins/render-component'; /** * Widgets @@ -22,6 +23,7 @@ import WidgetScriptStateMixin from '../mixins/widget-script-state'; */ export default Component.extend( + RenderComponentMixin, WidgetScriptStateMixin, { classNames: ['widget-twitter'], diff --git a/app/components/widget-vk.js b/app/components/widget-vk.js index 59bcaf2f429..efe0c027e6d 100644 --- a/app/components/widget-vk.js +++ b/app/components/widget-vk.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import {observer} from '@ember/object'; import Component from '@ember/component'; import WidgetScriptStateMixin from '../mixins/widget-script-state'; +import RenderComponentMixin from '../mixins/render-component'; /** * Widgets @@ -22,6 +23,7 @@ import WidgetScriptStateMixin from '../mixins/widget-script-state'; */ export default Component.extend( + RenderComponentMixin, WidgetScriptStateMixin, { classNames: ['widget-vk'], diff --git a/app/mixins/render-component.js b/app/mixins/render-component.js new file mode 100644 index 00000000000..95c69de1237 --- /dev/null +++ b/app/mixins/render-component.js @@ -0,0 +1,12 @@ +import {on} from '@ember/object/evented'; +import Mixin from '@ember/object/mixin'; + +export default Mixin.create({ + replacePlaceholder: on('didInsertElement', function () { + if (this.placeholderElement) { + this.placeholderElement.parentNode.insertBefore(this.element, this.placeholderElement); + $(this.placeholderElement).remove(); + this.placeholderElement = null; + } + }), +}); diff --git a/app/utils/render-component.js b/app/utils/render-component.js index 3a2601ee425..fc6f678e001 100644 --- a/app/utils/render-component.js +++ b/app/utils/render-component.js @@ -39,21 +39,22 @@ export function getRenderComponentFor(parent) { * @type {string} */ attrs.layoutName = `components/${name}`; + attrs.placeholderElement = placeholderElement; let componentInstance = component.create(attrs); componentInstance.renderer.appendTo(componentInstance, placeholderElement.parentNode); - scheduleOnce('afterRender', this, () => { - if (componentInstance.element instanceof Node) { - placeholderElement.parentNode.insertBefore(componentInstance.element, placeholderElement); - $(placeholderElement).remove(); - } else { - logEvent('render-component--element', { - componentName: name, - componentInstanceElement: JSON.stringify(componentInstance.element), - }); - } - }); + // scheduleOnce('afterRender', this, () => { + // if (componentInstance.element instanceof Node) { + // placeholderElement.parentNode.insertBefore(componentInstance.element, placeholderElement); + // $(placeholderElement).remove(); + // } else { + // logEvent('render-component--element', { + // componentName: name, + // componentInstanceElement: JSON.stringify(componentInstance.element), + // }); + // } + // }); return componentInstance; }; From c4b4d78845253da713b6b5bf8d0362b3c5dabd01 Mon Sep 17 00:00:00 2001 From: bkoval Date: Wed, 22 Nov 2017 15:55:22 +0100 Subject: [PATCH 02/11] XW-3360 | Default to [] when linkslist does not exist --- app/components/fastboot-only/local-navigation-for-seo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/fastboot-only/local-navigation-for-seo.js b/app/components/fastboot-only/local-navigation-for-seo.js index 2b4605d81e5..1278e5dc769 100644 --- a/app/components/fastboot-only/local-navigation-for-seo.js +++ b/app/components/fastboot-only/local-navigation-for-seo.js @@ -8,7 +8,7 @@ export default Component.extend({ wikiVariables: service(), localLinks: readOnly('wikiVariables.localNav'), currentLocalLinks: or('currentLocalNav.children', 'localLinks'), - flattenLinksArray(linksList) { + flattenLinksArray(linksList = []) { let flatArray = []; linksList.forEach((item) => { if (item.href !== '#') { From 9b1da6ca92f1653d04455adc322025971a9f7795 Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 10:57:31 +0100 Subject: [PATCH 03/11] add RenderComponentMixin to components --- app/components/ad-slot.js | 2 ++ app/components/ads/invisible-high-impact-2.js | 3 ++- app/components/article-media-gallery.js | 2 ++ app/components/article-media-linked-gallery.js | 3 ++- app/components/article-media-map-thumbnail.js | 3 ++- app/components/article-media-thumbnail.js | 2 ++ app/components/article-table-of-contents.js | 4 +--- app/components/portable-infobox-hero-image.js | 2 ++ app/components/portable-infobox-image-collection.js | 3 ++- 9 files changed, 17 insertions(+), 7 deletions(-) diff --git a/app/components/ad-slot.js b/app/components/ad-slot.js index eefa9e85a94..23ba217542c 100644 --- a/app/components/ad-slot.js +++ b/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'], diff --git a/app/components/ads/invisible-high-impact-2.js b/app/components/ads/invisible-high-impact-2.js index e002361e34e..e54e3c5922c 100644 --- a/app/components/ads/invisible-high-impact-2.js +++ b/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'), diff --git a/app/components/article-media-gallery.js b/app/components/article-media-gallery.js index 1dad15940ed..747accd98e0 100644 --- a/app/components/article-media-gallery.js +++ b/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'], diff --git a/app/components/article-media-linked-gallery.js b/app/components/article-media-linked-gallery.js index febd305991a..4c78416ce56 100644 --- a/app/components/article-media-linked-gallery.js +++ b/app/components/article-media-linked-gallery.js @@ -2,8 +2,9 @@ import {sort, map} from '@ember/object/computed'; import {computed} from '@ember/object'; import Component from '@ember/component'; import Thumbnailer from '../modules/thumbnailer'; +import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend( +export default Component.extend(RenderComponentMixin, { classNames: ['article-media-linked-gallery'], diff --git a/app/components/article-media-map-thumbnail.js b/app/components/article-media-map-thumbnail.js index db12f4605e6..55c3fbc1f8f 100644 --- a/app/components/article-media-map-thumbnail.js +++ b/app/components/article-media-map-thumbnail.js @@ -1,8 +1,9 @@ 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( +export default Component.extend(RenderComponentMixin, { classNames: ['article-media-map-thumbnail'], tagName: 'figure', diff --git a/app/components/article-media-thumbnail.js b/app/components/article-media-thumbnail.js index 1e154291af0..ddaa46bfed8 100644 --- a/app/components/article-media-thumbnail.js +++ b/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, diff --git a/app/components/article-table-of-contents.js b/app/components/article-table-of-contents.js index 13f043ea94f..e73fa5573c1 100644 --- a/app/components/article-table-of-contents.js +++ b/app/components/article-table-of-contents.js @@ -2,9 +2,7 @@ import Component from '@ember/component'; import {track, trackActions} from '../utils/track'; import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend( - RenderComponentMixin, - { +export default Component.extend(RenderComponentMixin, { classNames: ['table-of-contents'], layoutName: 'components/article-table-of-contents', diff --git a/app/components/portable-infobox-hero-image.js b/app/components/portable-infobox-hero-image.js index 7595b76bd3f..15218aa885f 100644 --- a/app/components/portable-infobox-hero-image.js +++ b/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, diff --git a/app/components/portable-infobox-image-collection.js b/app/components/portable-infobox-image-collection.js index 9a04547d502..a64213df750 100644 --- a/app/components/portable-infobox-image-collection.js +++ b/app/components/portable-infobox-image-collection.js @@ -3,8 +3,9 @@ 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( +export default Component.extend(RenderComponentMixin, ViewportMixin, { classNames: ['pi-image-collection'], From 81833ba5145ae7372478256d563bf79abd70cecd Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 11:34:31 +0100 Subject: [PATCH 04/11] add RenderComponentMixin to components --- app/components/jwplayer-tag.js | 3 ++- app/components/lightbox-ads.js | 3 ++- app/components/lightbox-image.js | 2 ++ app/components/lightbox-map.js | 3 ++- app/components/lightbox-media.js | 2 ++ app/components/lightbox-video.js | 2 ++ app/components/lightbox-wrapper.js | 3 ++- 7 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/components/jwplayer-tag.js b/app/components/jwplayer-tag.js index c7ad30421aa..a8f9b185c1b 100644 --- a/app/components/jwplayer-tag.js +++ b/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/', /** diff --git a/app/components/lightbox-ads.js b/app/components/lightbox-ads.js index ae6bd092c46..c78e2da701b 100644 --- a/app/components/lightbox-ads.js +++ b/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'], /** diff --git a/app/components/lightbox-image.js b/app/components/lightbox-image.js index f7b085e6903..fbe9f0ae9b3 100644 --- a/app/components/lightbox-image.js +++ b/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, { diff --git a/app/components/lightbox-map.js b/app/components/lightbox-map.js index 22c85449e53..124b15ef1cf 100644 --- a/app/components/lightbox-map.js +++ b/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 () { diff --git a/app/components/lightbox-media.js b/app/components/lightbox-media.js index 591d8941654..d15c3d35e24 100644 --- a/app/components/lightbox-media.js +++ b/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'], diff --git a/app/components/lightbox-video.js b/app/components/lightbox-video.js index 6fa699028e5..eedf3a7d1e7 100644 --- a/app/components/lightbox-video.js +++ b/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'], diff --git a/app/components/lightbox-wrapper.js b/app/components/lightbox-wrapper.js index 76cfd23f726..a5acc3d3b44 100644 --- a/app/components/lightbox-wrapper.js +++ b/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 From aab1239961d5cef0c7d7e33cc3c677a816f9981f Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 11:51:34 +0100 Subject: [PATCH 05/11] sonnar issues, fix broken import --- app/components/ads/invisible-high-impact-2.js | 2 +- .../article-media-linked-gallery.js | 90 +++++++++---------- app/components/article-media-map-thumbnail.js | 52 ++++++----- app/components/article-table-of-contents.js | 67 +++++++------- .../portable-infobox-image-collection.js | 3 +- 5 files changed, 104 insertions(+), 110 deletions(-) diff --git a/app/components/ads/invisible-high-impact-2.js b/app/components/ads/invisible-high-impact-2.js index e54e3c5922c..bd2bbee2728 100644 --- a/app/components/ads/invisible-high-impact-2.js +++ b/app/components/ads/invisible-high-impact-2.js @@ -3,7 +3,7 @@ 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'; +import RenderComponentMixin from '../../mixins/render-component'; export default Component.extend(RenderComponentMixin, { ads: service(), diff --git a/app/components/article-media-linked-gallery.js b/app/components/article-media-linked-gallery.js index 4c78416ce56..f696fc1067b 100644 --- a/app/components/article-media-linked-gallery.js +++ b/app/components/article-media-linked-gallery.js @@ -4,50 +4,48 @@ import Component from '@ember/component'; import Thumbnailer from '../modules/thumbnailer'; 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')); - } +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')); + } + }, +}); diff --git a/app/components/article-media-map-thumbnail.js b/app/components/article-media-map-thumbnail.js index 55c3fbc1f8f..bb01d1bbc28 100644 --- a/app/components/article-media-map-thumbnail.js +++ b/app/components/article-media-map-thumbnail.js @@ -3,37 +3,35 @@ import Component from '@ember/component'; import {track, trackActions} from '../utils/track'; import RenderComponentMixin from '../mixins/render-component'; -export default Component.extend(RenderComponentMixin, - { - 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; } } -); +}); diff --git a/app/components/article-table-of-contents.js b/app/components/article-table-of-contents.js index e73fa5573c1..4290dbf750e 100644 --- a/app/components/article-table-of-contents.js +++ b/app/components/article-table-of-contents.js @@ -3,42 +3,41 @@ import {track, trackActions} from '../utils/track'; import RenderComponentMixin from '../mixins/render-component'; export default Component.extend(RenderComponentMixin, { - classNames: ['table-of-contents'], - layoutName: 'components/article-table-of-contents', + 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 + }); } } -); +}); diff --git a/app/components/portable-infobox-image-collection.js b/app/components/portable-infobox-image-collection.js index a64213df750..cdfc5c01c18 100644 --- a/app/components/portable-infobox-image-collection.js +++ b/app/components/portable-infobox-image-collection.js @@ -79,5 +79,4 @@ export default Component.extend(RenderComponentMixin, this.set('currentImageIndex', newImageIndex); } } - } -); + }); From 5659d44d6b9c8f4f7234d11ddb1da36dc8009ffe Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 12:45:22 +0100 Subject: [PATCH 06/11] remove commented code --- app/utils/render-component.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/app/utils/render-component.js b/app/utils/render-component.js index fc6f678e001..2c610f995b6 100644 --- a/app/utils/render-component.js +++ b/app/utils/render-component.js @@ -44,18 +44,6 @@ export function getRenderComponentFor(parent) { let componentInstance = component.create(attrs); componentInstance.renderer.appendTo(componentInstance, placeholderElement.parentNode); - // scheduleOnce('afterRender', this, () => { - // if (componentInstance.element instanceof Node) { - // placeholderElement.parentNode.insertBefore(componentInstance.element, placeholderElement); - // $(placeholderElement).remove(); - // } else { - // logEvent('render-component--element', { - // componentName: name, - // componentInstanceElement: JSON.stringify(componentInstance.element), - // }); - // } - // }); - return componentInstance; }; } From fd6a586bcaf93fb8fa9d7229fdbb7b439d930d52 Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 13:24:15 +0100 Subject: [PATCH 07/11] remove outdated todo comment --- app/components/article-content.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/article-content.js b/app/components/article-content.js index ce85454abfa..bd53a0c4937 100644 --- a/app/components/article-content.js +++ b/app/components/article-content.js @@ -53,7 +53,6 @@ export default Component.extend( this.handleInfoboxes(); this.replaceInfoboxesWithInfoboxComponents(); - // todo: add mixin for these this.renderedComponents = this.renderedComponents.concat( queryPlaceholders(this.$()) .map(getAttributesForMedia, { From 388888096a6c8bc7a899ef9ed3426a2e6aefaa77 Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 15:58:30 +0100 Subject: [PATCH 08/11] fix article-component tests --- tests/unit/components/article-content-test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/unit/components/article-content-test.js b/tests/unit/components/article-content-test.js index 218c8c99cd9..6670322639b 100644 --- a/tests/unit/components/article-content-test.js +++ b/tests/unit/components/article-content-test.js @@ -4,8 +4,10 @@ import {computed} from '@ember/object'; import {run} from '@ember/runloop'; import sinon from 'sinon'; import {test, moduleForComponent} from 'ember-qunit'; +import {on} from '@ember/object/evented'; +import RenderComponentMixin from 'mobile-wiki/mixins/render-component'; -const adSlotComponentStub = Component.extend({ +const adSlotComponentStub = Component.extend(RenderComponentMixin, { classNameBindings: ['nameLowerCase'], nameLowerCase: computed('name', function () { return dasherize(this.get('name').toLowerCase()); From 239dc2f9fa1dc75a5229d8867bb46c65d0c20c29 Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Thu, 23 Nov 2017 16:19:45 +0100 Subject: [PATCH 09/11] unused import --- tests/unit/components/article-content-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/unit/components/article-content-test.js b/tests/unit/components/article-content-test.js index 6670322639b..05cbd57117d 100644 --- a/tests/unit/components/article-content-test.js +++ b/tests/unit/components/article-content-test.js @@ -4,7 +4,6 @@ import {computed} from '@ember/object'; import {run} from '@ember/runloop'; import sinon from 'sinon'; import {test, moduleForComponent} from 'ember-qunit'; -import {on} from '@ember/object/evented'; import RenderComponentMixin from 'mobile-wiki/mixins/render-component'; const adSlotComponentStub = Component.extend(RenderComponentMixin, { From 3ecf85b0346a7584af8fae0bf350c14343ac0220 Mon Sep 17 00:00:00 2001 From: bkoval Date: Thu, 23 Nov 2017 16:33:17 +0100 Subject: [PATCH 10/11] XW-3360 | If theres a error code, use it instead of 503 --- app/routes/application.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/application.js b/app/routes/application.js index fe2a47db49b..470c5ad2123 100644 --- a/app/routes/application.js +++ b/app/routes/application.js @@ -1,6 +1,7 @@ import {inject as service} from '@ember/service'; import Route from '@ember/routing/route'; import {getOwner} from '@ember/application'; +import {getWithDefault} from '@ember/object'; import Ember from 'ember'; import ArticleModel from '../models/wiki/article'; import HeadTagsStaticMixin from '../mixins/head-tags-static'; @@ -193,10 +194,9 @@ export default Route.extend( } this.get('logger').error('Application error', error); - if (fastboot.get('isFastBoot')) { fastboot.get('shoebox').put('serverError', true); - fastboot.set('response.statusCode', 503); + fastboot.set('response.statusCode', getWithDefault(error, 'code', 503)); this.injectScriptsFastbootOnly(null, transition.queryParams); // We can't use the built-in mechanism to render error substates. From 00b573b88dbbffc164f034aea2f52050ef22b837 Mon Sep 17 00:00:00 2001 From: Mateusz Rybarski Date: Fri, 24 Nov 2017 10:37:08 +0100 Subject: [PATCH 11/11] chnage property names --- app/mixins/render-component.js | 10 +++++----- app/utils/render-component.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/mixins/render-component.js b/app/mixins/render-component.js index 95c69de1237..c62e7565639 100644 --- a/app/mixins/render-component.js +++ b/app/mixins/render-component.js @@ -2,11 +2,11 @@ import {on} from '@ember/object/evented'; import Mixin from '@ember/object/mixin'; export default Mixin.create({ - replacePlaceholder: on('didInsertElement', function () { - if (this.placeholderElement) { - this.placeholderElement.parentNode.insertBefore(this.element, this.placeholderElement); - $(this.placeholderElement).remove(); - this.placeholderElement = null; + _replacePlaceholder: on('didInsertElement', function () { + if (this._placeholderElement) { + this._placeholderElement.parentNode.insertBefore(this.element, this._placeholderElement); + $(this._placeholderElement).remove(); + this._placeholderElement = null; } }), }); diff --git a/app/utils/render-component.js b/app/utils/render-component.js index 2c610f995b6..13530ad21f9 100644 --- a/app/utils/render-component.js +++ b/app/utils/render-component.js @@ -39,7 +39,7 @@ export function getRenderComponentFor(parent) { * @type {string} */ attrs.layoutName = `components/${name}`; - attrs.placeholderElement = placeholderElement; + attrs._placeholderElement = placeholderElement; let componentInstance = component.create(attrs); componentInstance.renderer.appendTo(componentInstance, placeholderElement.parentNode);