extensions/optimizely/index.html at master · contentstack/extensions · GitHub

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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: 0.2;
}

.selectize-control.plugin-remove_button [data-value] .remove:hover {
  background-color: #d1dfe2;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.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";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,_toPropertyKey(n.key),n)}}function _createClass(e,t,o){return t&&_defineProperties(e.prototype,t),o&&_defineProperties(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0===o)return("string"===t?String:Number)(e);t=o.call(e,t||"default");if("object"!=_typeof(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}var extensionField,auidences=[];function calculateHeight(){var e=document.body,t=document.documentElement,t=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight);extensionField.window.updateHeight(t)}var Optimizely=function(){function o(e){var t=e.access_token,e=e.project_id;_classCallCheck(this,o),this.AccessToken=t,this.ProjectId=e}return _createClass(o,[{key:"getAudience",value:function(){var n,e=this;return new Promise(function(t,o){fetch("https://api.optimizely.com/v2/audiences?project_id=".concat(e.ProjectId),{method:"GET",headers:{Authorization:"Bearer ".concat(e.AccessToken)}}).then(function(e){return n=e.status,e.json()}).then(function(e){throw 200===n&&t(e),Error("Failed to fetch resource")}).catch(function(e){o(e)})})}}]),o}();function domChangeListner(e){var t;$("#select-tools").on("change",function(){t=$("#select-tools").val();var o=[];return null!==t&&t.forEach(function(t){e.forEach(function(e){t===e.name&&o.push(e)})}),extensionField.field.setData(o)}),$(".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(),o=[];0!==Object.keys(t).length&&t.forEach(function(e){o.push(e.name)}),$("#select-tools").selectize({plugins:["remove_button"],maxItems:null,valueField:"name",labelField:"name",searchField:"name",options:e,create:!1,items:o,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!==o.length&&o.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>