-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
31 lines (31 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Reference Field Custom Extension</title>
<link href="https://unpkg.com/@contentstack/[email protected]/dist/ui-extension-sdk.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@contentstack/[email protected]/dist/ui-extension-sdk.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>#choose-button{border-radius:30px;border:1px solid #25c2a3;padding:5px 15px;position:relative}span{color:#25c2a3;cursor:pointer}.mainDiv{padding:15px;border-image:initial;border-radius:2px;background-color:#f8fffe;margin-left:0!important;border:1px solid #e6eced;box-shadow:0 1px 1px 0 rgba(0,0,0,.03);overflow:hidden;height:67px;width:450px}#close-button{padding:100px}.titleHome{color:#748590}.refer-ct-name{color:#a5abb8}.action{height:58px;padding-top:20px;float:right;transform:translateY(-78%)}</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="description_box">
<div>
<ul id="entry-list"></ul>
</div>
<br />
<div id="message-id">No entry selected</div>
<button id="choose-button" class="btn cs-btn-primary button">
<span>Select entry</span>
</button>
</div>
</div>
</div>
<script>let extensionField;const row=$("#entry-list");let uid,allEnv,baseUrl,selectedData=[];async function getHomeEntries(e){return new Promise((e,n)=>{axios({url:`${extensionField.config.baseURL}v3/content_types/${extensionField.config.contentType}/entries?locale=en-us&include_publish_details=true`,method:"GET",headers:{"Content-Type":"application/json",api_key:`${extensionField.config.apiKey}`,authorization:`${extensionField.config.managementToken}`}}).then(n=>{e(n.data)}).catch(e=>{console.log(e)})})}function onClick(e){let n,t=$(e).find();0!==selectedData.length&&(selectedData.map(e=>{e.entry_uid===t.context.id&&(n=selectedData.indexOf(e))}),selectedData.splice(n,1),$(`#${t.context.id}`).parent().parent().parent().remove(),extensionField.field.setData(selectedData))}function renderHandler(e){e.length<=0&&$("#message-id").show(),0!==e.length&&($("#message-id").hide(),0!==Object.keys(e).length&&e.map(e=>{let n=`<div class="col-xs-6 col-sm-4 col-md-3 mainDiv">\n <li>\n <div>${e.title}\n </div>\n <div class="refer-ct-name">Content type:home </div>\n <div> \n <span class="action" id='${e.entry_uid}' onclick="onClick(${e.entry_uid})">\n <img src="https://app.contentstack.com/static/images/remove-entry.svg">\n </span>\n </div>\n </li>\n </div>`;row.append(n)}))}function handler(){return new Promise(async(e,n)=>{let t=[],i=await getHomeEntries(),a=allEnv;i.entries.filter(e=>e.person[0].uid===uid).map(n=>{let i=[];n.publish_details.map(e=>(a.environments.filter(n=>{n.uid===e.environment&&i.push(n.name)}),i));let s={entry_uid:n.uid,title:n.title,updated_by:n.updated_by,publish_detail:i,checkedValue:!1};t.push(s),e(t)})})}async function windowEventHandler(e){if(e.data.hasOwnProperty("response"))if("selectedEntries"===e.data.response.message)e.data.response.result.map(e=>selectedData.push(e)),0!==selectedData.length&&($(".mainDiv").remove(),renderHandler(selectedData)),selectedData.length<=0&&$(".mainDiv").remove(),extensionField.field.setData(selectedData);else if("initialData"===e.data.response.message){let n=await handler(),t=new URL(extensionField.config.windowURL);baseUrl=t.protocol+"//"+t.hostname,e.source.postMessage({response:{entryResponse:n,current:selectedData||[]}},baseUrl)}}$("#choose-button").on("click",function(){window.open(extensionField.config.windowURL,"pop","width=900,left=500,height=500,menubar=no,toolbar=no,status=no")}),$(document).ready(()=>{ContentstackUIExtension.init().then(e=>{(extensionField=e).window.enableAutoResizing(),renderHandler(selectedData=extensionField.field.getData()),extensionField.stack.getEnvironments("get").then(e=>{allEnv=e}),e.entry.onChange(async e=>{if(e.person.length>0)uid=e.person[0].uid;else{selectedData=[],$(".mainDiv").remove(),extensionField.field.setData(selectedData)}})})}),window.addEventListener("message",windowEventHandler);</script>
</body>
</html>