forked from contentstack/extensions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
29 lines (23 loc) · 5.63 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Optimizely Auidences</title>
<link href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/1.1.0/ui-extension-sdk.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://assets.contentstack.io/v3/assets/bltd1343376dfba54d2/blt87d67698547696b1/5bbdf8591ecf66190c1b9dd5/selectize.bootstrap3.css">
<style>
.selectize-control.multi .selectize-input>div.item{background-color:#d1dfe2;color:#748590;padding:6px 10px;border-radius:3px;border:1px solid #e8eced}.selectize-control.multi .selectize-input.has-items{padding:10px;border-radius:3px;background-clip:padding-box}.selectize-dropdown,.selectize-input.focus{border-color:#eee;box-shadow:none;font-size:13px;color:#748590;background-color:#f7fbfc}.selectize-input{width:100%;font-size:13px;border:1px solid #eee;padding:3px 5px;border-radius:2px}::placeholder{color:#aabac4;font-size:13px}#select-tools-selectized{min-width:127px;text-overflow:ellipsis}.selectize-dropdown .active{background:#f5f5f5;cursor:pointer}.selectize-control.plugin-remove_button [data-value] .remove{margin:5px;font-size:0!important;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.selectize-control.plugin-remove_button [data-value] .remove:hover{background-color:#d1dfe2;color:#000;text-decoration:none;cursor:pointer;opacity:.5}.selectize-dropdown .option:hover{background:#f5f5f5}.selectize-control.plugin-remove_button [data-value] .remove::before{content:"\f00d";font-size:15px;position:relative;font-family:FontAwesome,Helvetica,Arial,Verdana,Tahoma,sans-serif}.selectize-dropdown-content{max-height:none}
</style>
<script src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/1.1.0/ui-extension-sdk.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.x-git.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://assets.contentstack.io/v3/assets/bltd1343376dfba54d2/blta4c5a4f8fbfa58fb/5bbc6b9ca50786140c1fde33/selectize.min.js"></script>
</head>
<body>
<select id="select-tools"></select>
<script>
"use strict";var _createClass=function(){function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var extensionField=void 0,auidences=[];function calculateHeight(){var e=document.body,t=document.documentElement,n=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight);extensionField.window.updateHeight(n)}var Optimizely=function(){function o(e){var t=e.access_token,n=e.project_id;_classCallCheck(this,o),this.AccessToken=t,this.ProjectId=n}return _createClass(o,[{key:"getAudience",value:function(){var e=this,o=void 0;return new Promise(function(t,n){fetch("https://api.optimizely.com/v2/audiences?project_id="+e.ProjectId,{method:"GET",headers:{Authorization:"Bearer "+e.AccessToken}}).then(function(e){return o=e.status,e.json()}).then(function(e){throw 200===o&&t(e),Error("Failed to fetch resource")}).catch(function(e){n(e)})})}}]),o}();function domChangeListner(e){var t=void 0;$("#select-tools").on("change",function(){t=$("#select-tools").val();var n=[];return null!==t&&t.forEach(function(t){e.forEach(function(e){t===e.name&&n.push(e)})}),extensionField.field.setData(n)}),$(".selectize-control").on("click",function(){calculateHeight()})}function calculateDomHeight(){var e=$(".selectize-control").outerHeight()+$(".selectize-dropdown ").height();extensionField.window.updateHeight(e)}function render(e){var t=extensionField.field.getData(),n=[];0!==Object.keys(t).length&&t.forEach(function(e){n.push(e.name)}),$("#select-tools").selectize({plugins:["remove_button"],maxItems:null,valueField:"name",labelField:"name",searchField:"name",options:e,create:!1,items:n,hideSelected:!0,onFocus:function(){calculateHeight(),$("#select-tools-selectized").attr("placeholder","Start typing to search")},onBlur:function(){0===$(".option").length?$("#select-tools-selectized").attr("placeholder"," "):$("#select-tools-selectized").attr("placeholder","Click to select options");var e=$(".selectize-control").outerHeight();extensionField.window.updateHeight(e)},onInitialize:function(){0===n.length?$("#select-tools-selectized").attr("placeholder","Click to select options"):n.length===auidences.length?$("#select-tools-selectized").attr("placeholder"," "):$("#select-tools-selectized").attr("placeholder","Click to select options");var e=$(".selectize-control").outerHeight();extensionField.window.updateHeight(e)},onDropdownOpen:function(){calculateDomHeight()},onItemAdd:function(){0===$(".option").length?$("#select-tools-selectized").attr("placeholder"," "):$("#select-tools-selectized").attr("placeholder","Start typing to search")},onItemRemove:function(){$("#select-tools-selectized").attr("placeholder","Start typing to search"),calculateDomHeight()}}),domChangeListner(e)}$(document).ready(function(){ContentstackUIExtension.init().then(function(e){new Optimizely((extensionField=e).config).getAudience().then(function(e){render(e)})})});
</script>
</body>
</html>