invitation advertisement

templates/user/dashboard/repolist.tmpl

@@ -18,9 +18,11 @@
 	v-cloak
 	>
 	<div>
+		{{if .invite_image_url}}
 		<div style="height:60px;">
-			<a href="/user/invitation_tpl"><img src="/img/ad/ad02.png" style="width:100%;height:100%" /></a>
+			<a href="{{.invite_image_link}}" target="_blank"><img src="{{.invite_image_url}}" style="width:100%;height:100%" /></a>
 		</div>
+		{{end}}
 		<div v-if="!isOrganization" class="ui two item tabable menu">
 			<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
 			<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>

templates/user/profile.tmpl

@@ -51,9 +51,33 @@
 							{{if and .IsSigned (eq .SignedUserName .Owner.Name)}}
 							<li>
 								{{svg "octicon-clock" 16}} {{.i18n.Tr "user.join_on"}} {{.Owner.CreatedUnix.FormatShort}}
-								<div style="margin-top:6px;height:50px;">
-									<a href="/user/invitation_tpl"><img src="/img/ad/ad02.png" style="width:100%;height:100%" /></a>
+								<div class=__ad_profile_c__ style="margin-top:6px;height:50px;display:none;">
+									<a class="__ad_profile__" href="" target="_blank"><img src="" style="width:100%;height:100%" /></a>
 								</div>
+								<script>
+									;(function(){
+										document.addEventListener("DOMContentLoaded", function() {
+											$.ajax({
+												type: "GET",
+												url: "/dashboard/invitation",
+												dataType: "json",
+												data: { filename: 'ad-profile.json' },
+												success: function (res) {
+													try {
+														var data = JSON.parse(res);
+														$('.__ad_profile__').attr('href', data.url).find('img').attr('src', data.src);
+														$('.__ad_profile_c__').show();
+													} catch (err) {
+														console.log(err);
+													}
+												},
+												error: function (err) {
+													console.log(err);
+												}
+											});
+										});
+									})();
+								</script>
 							</li>
 							{{end}}
 							<li>{{svg "octicon-clock" 16}} {{.i18n.Tr "user.join_on"}} {{.Owner.CreatedUnix.FormatShort}}</li>

web_src/js/features/ad.js

@@ -1,43 +1,71 @@
 ; (function () {
-  const adList = [{
-    id: 1,
-    pos: {
-      left: 50,
-      bottom: 50,
+  /*const adList = [
+  {
+    "width": 144,
+    "height": 108,
+    "pos": {
+      "left": 50,
+      "bottom": 50
     },
-    src: '/img/ad/ad01.png',
-    url: '/user/invitation_tpl',
-    width: 144,
-    height: 108,
-  }/*, {
-    id: 2,
-    pos: {
-      right: 50,
-      bottom: 50,
+    "src": "https://git.openi.org.cn/OpenIOSSG/promote/raw/branch/master/imgs/invitation/pic-01.png",
+    "url": "/user/invitation_tpl",
+    "show": true
+  },
+  {
+    "width": 144,
+    "height": 108,
+    "pos": {
+      "right": 50,
+      "bottom": 50
     },
-    src: '/img/ad/ad01.png',
-    url: '/user/invitation_tpl',
-    width: 144,
-    height: 108,
-  }*/];
+    "src": "https://git.openi.org.cn/OpenIOSSG/promote/raw/branch/master/imgs/invitation/pic-01.png",
+    "url": "/user/invitation_tpl",
+    "show": false
+  }
+];*/
+  const exceptPages = [
+    // '/user/invitation_tpl'
+  ];
+
+  function initAd() {
+    $.ajax({
+      type: "GET",
+      url: "/dashboard/invitation",
+      dataType: "json",
+      data: { filename: 'ad-pop-up.json' },
+      success: function (res) {
+        try {
+          var data = JSON.parse(res);
+          createAd(data);
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      error: function (err) {
+        console.log(err);
+      }
+    });
+  }
 
   function createAd(adList) {
     const adInfoStr = window.localStorage.getItem('ads') || '{}';
     let adInfoObj = JSON.parse(adInfoStr);
     const today = new Date();
-    const timeEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1).getTime();
+    const timeTodayEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1).getTime();
     const now = Date.now();
+    const expTime = now + 4 * 60 * 60 * 1000;
     if (!adInfoObj.expires || adInfoObj.expires <= now) {
       adInfoObj = {
-        expires: timeEnd,
+        expires: Math.min(timeTodayEnd, expTime),
       };
     }
     for (var i = 0, iLen = adList.length; i < iLen; i++) {
       var adI = adList[i];
-      var showOr = adInfoObj[adI.id] === false ? false : true;
-      adInfoObj[adI.id] = showOr;
+      if (adI.show === false) continue;
+      var showOr = adInfoObj[i] === false ? false : true;
+      adInfoObj[i] = showOr;
       if (!showOr) continue;
-      var adEl = $(`<div class="__ad_c__" _id="${adI.id}" style="position:fixed;z-index:99999999;
+      var adEl = $(`<div class="__ad_c__" _id="${i}" style="position:fixed;z-index:99999999;
         width:${adI.width}px;height:${adI.height}px;
         left:${adI.pos.left !== undefined ? adI.pos.left + 'px' : ''};
         top:${adI.pos.top !== undefined ? adI.pos.top + 'px' : ''};
@@ -50,6 +78,7 @@
           <i class="ri-close-circle-line __ad_close__" style="color:white;font-size:18px;cursor:pointer;"></i>
         </div>
       </div>`);
+      adEl.data('data', adI);
       $('body').append(adEl);
     }
     window.localStorage.setItem('ads', JSON.stringify(adInfoObj));
@@ -73,15 +102,39 @@
       var offSet = scrollTop - scrollTopOld;
       scrollTopOld = scrollTop;
       timeHandler && clearTimeout(timeHandler);
-      $('.__ad_c__').animate({ bottom: 50 + offSet + 'px' }, 0);
+      $('.__ad_c__').each(function (_, item) {
+        var self = $(item);
+        var adData = self.data('data');
+        if (adData.pos.bottom !== undefined) {
+          self.animate({ bottom: adData.pos.bottom + offSet + 'px' }, 0);
+        }
+        if (adData.pos.top !== undefined) {
+          self.animate({ top: adData.pos.top - offSet + 'px' }, 0);
+        }
+      })
       timeHandler = setTimeout(function () {
-        $('.__ad_c__').animate({ bottom: 50 + 'px' }, 0);
+        $('.__ad_c__').each(function (_, item) {
+          var self = $(item);
+          var adData = self.data('data');
+          if (adData.pos.bottom !== undefined) {
+            self.animate({ bottom: adData.pos.bottom + 'px' }, 0);
+          }
+          if (adData.pos.top !== undefined) {
+            self.animate({ top: adData.pos.top + 'px' }, 0);
+          }
+        })
       }, 20);
     });
   }
 
   setTimeout(function () {
-    createAd(adList);
+    if (!$('meta[name="_uid"]').length) { // 未登录，不显示
+      window.localStorage.removeItem('ads');
+      return;
+    }
+    var pathName = window.location.pathname;
+    if (exceptPages.indexOf(pathName) > -1) return; // 排除页，不显示
+    initAd();
     initAdEvent();
   }, 0);
 })();