Skip to content
This repository was archived by the owner on Jul 19, 2026. It is now read-only.

Develop #2

Open
minhtambk92 wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Develop #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6e69fb1
update
May 5, 2017
06bbcae
vendor
May 5, 2017
3d3c06b
update
May 7, 2017
ae95dc6
update
May 7, 2017
6844073
optimize code
May 15, 2017
8104c5d
optimize code
May 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions build/Arf.build.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/Arf.build.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2,554 changes: 2,026 additions & 528 deletions build/Arf.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/Arf.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/Arf.min.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions demo/blog-post/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@
<div class="row">

<!-- Ads Zone -->
<zone id="cd25d64e-0be4-4947-8249-3998230cbf04"></zone>
<script src="//adserving.manhpt.com/corejs/arf-cd25d64e-0be4-4947-8249-3998230cbf04.min.js"></script>
<!--<zone id="cd25d64e-0be4-4947-8249-3998230cbf04"></zone>-->
<!--<script src="//adserving.manhpt.com/corejs/arf-cd25d64e-0be4-4947-8249-3998230cbf04.min.js"></script>-->
<!-- / Ads Zone -->

</div>
Expand Down Expand Up @@ -224,7 +224,7 @@ <h4>Blog Categories</h4>

<!-- Ads Zone -->
<zone id="d4e65ac4-9630-4a0e-b2c0-11fe9d07b2f0"></zone>
<script src="//adserving.manhpt.com/corejs/arf-d4e65ac4-9630-4a0e-b2c0-11fe9d07b2f0.min.js"></script>
<script src="./js/right1.js"></script>
<!-- / Ads Zone -->

</div>
Expand Down
6,612 changes: 6,612 additions & 0 deletions demo/blog-post/js/right1.js
View file
Open in desktop

Large diffs are not rendered by default.

182 changes: 177 additions & 5 deletions src/components/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import Vue from 'vue';
import { Banner as BannerModel } from '../models';
import { dom } from '../mixins';
import { util } from '../vendor';

const Banner = Vue.component('banner', {

Expand Down Expand Up @@ -46,8 +47,31 @@ const Banner = Vue.component('banner', {
},

mounted() {
this.renderToIFrame();
if (this.current.bannerType.isInputData !== undefined &&
this.current.bannerType.isInputData === true && this.current.isIFrame === true) {
console.log('renderBannerHTML');
this.renderBannerHTML();
} else if (this.current.bannerType.isInputData !== undefined &&
this.current.bannerType.isInputData === false && this.current.isIFrame === true &&
this.current.bannerType.isUpload !== undefined &&
this.current.bannerType.isUpload === false) {
console.log('renderToIFrame');
this.renderToIFrame();
} else if (this.current.bannerType.isInputData !== undefined &&
this.current.bannerType.isInputData === false && this.current.isIFrame === false) {
console.log('renderBannerNoIframe');
this.renderBannerNoIframe();
}
if (this.current.bannerType.isUpload !== undefined &&
this.current.bannerType.isUpload === true) {
// this.renderBannerImg();
this.renderToIFrame();
}
this.current.countFrequency();
if (this.current.isRelative) {
// this.$parent.$emit('relativeBannerRender', this.current.keyword);
window.ZoneConnect.setRelativeKeyword(this.current.keyword);
}
},

methods: {
Expand All @@ -62,13 +86,19 @@ const Banner = Vue.component('banner', {
if (vm.$data.isRendered === false) {
iframe.width = vm.current.width;
iframe.height = vm.current.height;
iframe.id = `iframe-${vm.current.id}`;
iframe.frameBorder = vm.iframe.frameBorder;
iframe.marginWidth = vm.iframe.marginWidth;
iframe.marginHeight = vm.iframe.marginHeight;
iframe.scrolling = 'no'; // Prevent iframe body scrolling

iframe.contentWindow.document.open();
iframe.contentWindow.document.write(vm.current.html);
if (this.current.bannerType.isUpload !== undefined &&
this.current.bannerType.isUpload === true) {
iframe.contentWindow.document.write(`<img src="${vm.current.imageUrl}">`);
} else {
iframe.contentWindow.document.write(vm.current.html);
}
iframe.contentWindow.document.close();

// Prevent scroll on IE
Expand All @@ -85,21 +115,163 @@ const Banner = Vue.component('banner', {
throw new Error(error);
}
},
renderBannerHTML() {
const vm = this;
const urlCore = 'http://admicro1.vcmedia.vn/core/admicro_core_nld.js';
const sponsorFormat = vm.current.linkFormatBannerHtml;
const writeIfrm = (ifrm) => {
ifrm = ifrm.contentWindow ? ifrm.contentWindow.document : // eslint-disable-line
ifrm.contentDocument ? ifrm.contentDocument : ifrm.document;
ifrm.open();
ifrm.write(`${`${'<head>' +
'<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">' +
'<script>inDapIF = true;function mobileCallbackMedium(){window.parent.callbackMedium();}</script>' +
'</head><body style="border: none;display: block;margin: 0 auto;">' +
'<script>'} </script>` +
'<script src="'}${sponsorFormat.toString()}" type="text/javascript"> </script>` +
'<script >sponsoradx(parent.data)</script></body>');
ifrm.close();
document.getElementById(`${vm.current.id}`).style.display = 'block';
};

console.log('linkFormatBannerHtml', sponsorFormat);
const loadIfrm = () => {
const ifrm = vm.iframe.el;
ifrm.onload = () => {
ifrm.width = vm.current.width;
// ifrm.height = vm.current.height;
ifrm.id = `iframe-${vm.current.id}`;
ifrm.frameBorder = vm.iframe.frameBorder;
ifrm.marginWidth = vm.iframe.marginWidth;
ifrm.marginHeight = vm.iframe.marginHeight;
ifrm.scrolling = 'no'; // Prevent iframe body scrolling
ifrm.style.display = 'block';
ifrm.style.border = 'none';
ifrm.scrolling = 'no';
ifrm.allowfullscreen = 'true';
ifrm.webkitallowfullscreen = 'true';
ifrm.mozallowfullscreen = 'true';
ifrm.src = 'about:blank';

/* eslint-disable no-useless-concat */
// window.data = JSON.parse(vm.current.dataBannerHtml.replace(/\r?\n|\r/g, ''));
try {
eval(`window.data = ${vm.current.dataBannerHtml.replace(/\r?\n|\r/g, '')};`); // eslint-disable-line
} catch (err) {
writeIfrm(ifrm);
}
// ifrm = ifrm.contentWindow ? ifrm.contentWindow.document : // eslint-disable-line
// ifrm.contentDocument ? ifrm.contentDocument : ifrm.document;
// ifrm.open();
// ifrm.write(`${`${'<head>' +
// '<meta name="viewport" content="width=device-width,
// initial-scale=1.0, maximum-scale=1.0, user-scalable=0">' +
// '<script>inDapIF = true;
// function mobileCallbackMedium(){window.parent.callbackMedium();}</sc' + 'ript>' +
// '</head><body style="border: none;display: block;margin: 0 auto;">' +
// '<scri' + 'pt>'} </scr` + 'ipt>' +
// '<scri' + 'pt src="'}${sponsorFormat.toString()}"
// type="text/javascript"> </scr` + 'ipt>' +
// '<scri' + 'pt >sponsoradx(parent.data)</scr' +
// 'ipt></body>');
// ifrm.close();
// document.getElementById(`${vm.current.id}`).style.display = 'block';
writeIfrm(ifrm);
};

try {
vm.$el.replaceChild(ifrm, vm.$refs.banner); // Do the trick
const setHeightIframe = setInterval(() => {
const iframe = document.getElementById(`iframe-${vm.current.id}`);
if (iframe !== undefined) {
const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
iframe.height = innerDoc.documentElement.getElementsByTagName('body')[0].offsetHeight;
clearInterval(setHeightIframe);
}
}, 100);
} catch (error) {
throw new Error(error);
}
};
const loadAsync = setInterval(() => {
if (window.isLoadLib !== undefined && window.isLoadLib) {
loadIfrm();
clearInterval(loadAsync);
}
}, 500);
util.admLoadJs(urlCore, 'admicro_core_nld', () => {
loadIfrm();
clearInterval(loadAsync);
});
},
renderBannerNoIframe() {
const vm = this;
const urlCore = 'http://admicro1.vcmedia.vn/core/admicro_core_nld.js';
const loadAsync = setInterval(() => {
if (window.isLoadLib !== undefined && window.isLoadLib) {
const idw = document.getElementById(`${vm.current.id}`);
if (idw) {
idw.innerHTML = '';
const data = vm.current.html;
admExecJs(data, `${vm.current.id}`); // eslint-disable-line no-undef
}
clearInterval(loadAsync);
}
}, 500);
util.admLoadJs(urlCore, 'admicro_core_nld', () => {
const idw = document.getElementById(`${vm.current.id}`);
if (idw) {
idw.innerHTML = '';
const data = vm.current.html;
admExecJs(data, `${vm.current.id}`); // eslint-disable-line no-undef
}
clearInterval(loadAsync);
});
},
// renderBannerImg() {
// console.log('renderBannerImg');
// const imgTag = document.createElement('img');
// imgTag.src = this.current.imageUrl;
// document.getElementById(`${this.current.id}`).appendChild(imgTag);
// },
},

render(h) { // eslint-disable-line no-unused-vars
const vm = this;

// const height = setInterval(() => {
// if (document.getElementById(`${vm.current.id}`)) {
// this.$parent.$emit('bannerHeight', document.getElementById(`${vm.current.id}`)
// .clientHeight);
// clearInterval(height);
// }
// }, 100);
const dev = location.search.indexOf('checkPlace=dev') !== -1;
if (dev) {
return (
<div
id={vm.current.id}
class="arf-banner"
style={{
width: `${vm.current.width}px`,
zIndex: 0,
position: 'absolute',
// height: `${vm.current.height}px`,
}}
>
<div ref="banner">{'banner content'}</div>
</div>
);
}
return (
<div
id={vm.current.id}
class="arf-banner"
style={{
width: `${vm.current.width}px`,
height: `${vm.current.height}px`,
// height: `${vm.current.height}px`,
}}
>
<div ref="banner">{vm.current.html}</div>
<div ref="banner">{'banner content'}</div>
</div>
);
},
Expand Down
48 changes: 46 additions & 2 deletions src/components/Placement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ const Placement = Vue.component('placement', {
window.arfPlacements[this.current.id] = this;
},

mounted() {
// this.$on('bannerHeight', (bannerHeight) => {
// document.getElementById(`${this.current.id}`).style.height = `${bannerHeight}px`;
// this.$parent.$emit('PlaceHeight', bannerHeight);
// });
},

computed: {
current() {
return (this.model instanceof PlacementModel) ? this.model : new PlacementModel(this.model);
Expand All @@ -38,14 +45,51 @@ const Placement = Vue.component('placement', {

render(h) { // eslint-disable-line no-unused-vars
const vm = this;

// make a trigger to parent component(share) and send place;
this.$parent.$emit('render', this.current.id, this.current.revenueType);
const dev = location.search.indexOf('checkPlace=dev') !== -1;
if (dev) {
return (
<div
id={vm.current.id}
class="arf-placement"
style={{
width: `${vm.current.width}px`,
height: `${vm.current.height}px`,
}}
>
<Banner model={vm.activeBannerModel} />
<div
style={{
zIndex: 9999,
margin: 'auto',
position: 'relative',
color: 'red',
paddingTop: '5px',
// backgroundColor: 'yellow',
// opacity: 0.5,
width: `${vm.current.width}px`,
height: `${vm.current.height}px`,
}}
><p
style={{
backgroundColor: 'black',
color: 'white',
fontSize: '15pt',
width: '35%',
textAlign: 'center',
}}
>{vm.current.revenueType} {vm.current.positionOnShare}</p></div>
</div>
);
}
return (
<div
id={vm.current.id}
class="arf-placement"
style={{
width: `${vm.current.width}px`,
height: `${vm.current.height}px`,
// height: `${vm.current.height}px`,
}}
>
<Banner model={vm.activeBannerModel} />
Expand Down
34 changes: 29 additions & 5 deletions src/components/Share.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,33 @@ const Share = Vue.component('share', {
window.arfShares[this.current.id] = this;
},

mounted() {
// this.$on('PlaceHeight', (PlaceHeight) => {
// let count = 0;
// let height = 0;
// height += PlaceHeight;
// count += 1;
// if (count === this.current.allPlacements.length) {
// document.getElementById(`${this.current.id}`).style.height = `${height}px`;
// this.$parent.$emit('shareHeight', height);
// }
// });
this.$on('render', (placeID, revenueType) => {
const placeIndex = this.activePlacementsModels.reduce((acc, item, index) => {
if (item.id === placeID) {
return index;
}
return acc;
}, 0);
this.$parent.$emit('placementRendered', placeIndex, revenueType, placeID);
});
},

computed: {
current() {
return (this.model instanceof ShareModel) ? this.model : new ShareModel(this.model);
const shareModel = (this.model instanceof ShareModel) ?
this.model : new ShareModel(this.model);
return shareModel;
},

activePlacementsModels() {
Expand All @@ -42,10 +66,10 @@ const Share = Vue.component('share', {
<div
id={vm.current.id}
class="arf-share"
style={{
width: `${vm.current.width}px`,
height: `${vm.current.height}px`,
}}
// style={{
// width: `${vm.current.width}px`,
// height: `${vm.current.height}px`,
// }}
>
{vm.activePlacementsModels.map(placement => (
<Placement model={placement} />
Expand Down
Loading