API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 20th, 2019
125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.83 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <title>Keyword Filter Component Demo</title>
  5.   <script src="jquery-3.4.0.min.js"></script>
  6.   <!-- The following css file would be provided -->
  7.   <link rel="stylesheet" href="keyword-filter-component.css" />
  8.   <!-- The following js file would be provided -->
  9.   <script src="keyword-filter-component.js"></script>
  10. </head>
  11. <body>
  12.  
  13.   <div id="keyword-filter-component-div" style="position:fixed;top:0;right:0;bottom:0;width:300px;">
  14.     <!--
  15.      This div becomes the keyword filter component.
  16.      Its position MUST be fixed/absolute/relative,
  17.      and it should be located wherever you want
  18.      the component to be and its width and heigth
  19.      should be set accordingly.
  20.    -->
  21.   </div>
  22.  
  23.   <script>
  24.  
  25.     // Create the component and provide the necessary callbacks.
  26.     var keywordFilterComponent = $('#keyword-filter-component-div').keywordFilterComponent({
  27.       convertSecondsToPageTimeDisplay: null, // Optional; if not provided, we would use our own method that we implemented.
  28.       callbacks: {
  29.         collapseWordList: function(collapse) {
  30.           // Perhaps send the `collapse` value to your back-end server...
  31.         },
  32.         activateKeywordListSort: function(key) {
  33.           // Perhaps send the `key` value to your back-end server...
  34.         },
  35.         activateKeywordListDisplay: function(key) {
  36.           // Perhaps send the `key` value to your back-end server...
  37.         },
  38.         activateKeywordSelection: function(activated, word) {
  39.           // Perhaps send the `activated` value and `word` JSON object to your back-end server...
  40.         },
  41.         activateKeywordColorSelection: function(activated, word) {
  42.           // Perhaps send the `activated` value and `word` JSON object to your back-end server...
  43.         },
  44.         configureKeywordColor: function(word, color) {
  45.           // Perhaps send the `word` and `color` JSON objects to your back-end server...
  46.         },
  47.         onWordTimestampClick: function(word, timestamp) {
  48.           // Perhaps send the `word` and `timestamp` JSON objects to your back-end server...
  49.         },
  50.         collapseFilterList: function(collapse) {
  51.           // Perhaps send the `collapse` value to your back-end server...
  52.         },
  53.         activateKeywordFilterView: function(activated) {
  54.           // Perhaps send the `activated` value to your back-end server...
  55.         },
  56.         activateKeywordFilter: function(activated, filter) {
  57.           // Perhaps send the `activated` value and `filter` JSON object to your back-end server...
  58.         },
  59.         configureKeywordFilterName: function(filter, name) {
  60.           // Perhaps send the `filter` JSON object and `name` value to your back-end server...
  61.         },
  62.         adjustKeywordFilterKeywordList: function(added, filter, word) {
  63.           // Perhaps send the `added` value and `filter` and `word` JSON objects to your back-end server...
  64.         }
  65.       }
  66.     });
  67.  
  68.     // Dummy data retriever methods (for demonstration purposes):
  69.     function getKeywordList() {
  70.       return {
  71.        "WordList": [
  72.           {
  73.             "Id": 1,
  74.             "Count": 1,
  75.             "Content": "so",
  76.             "Selected": false,
  77.             "Color": "#c3c3c3",
  78.             "Occurrences": [
  79.               {
  80.                  "SecondsStart": 7,
  81.                  "SecondsEnd": 10
  82.               }
  83.             ]
  84.           }
  85.         ]
  86.       };
  87.     };
  88.     function getKeywordListActiveColors() {
  89.       return {
  90.         "AvailableColors": [
  91.           {
  92.             "Id": 1,
  93.             "Name": "PINK",
  94.             "HexValue": "#FFC0CB"
  95.           }
  96.         ]
  97.       };
  98.     };
  99.     function getAvailableFilters() {
  100.       return {
  101.         "Filter": [
  102.           {
  103.             "FilterName": "Technology",
  104.             "FilterId": 1,
  105.             "Active": true,
  106.             "words": [
  107.               {
  108.                 "Content": "Computational",
  109.                 "Id": 2
  110.               },
  111.               {
  112.                 "Content": "Implemntation",
  113.                 "Id": 3
  114.               }
  115.             ]
  116.           }
  117.         ]
  118.       };
  119.     };
  120.     function getConfiguration() {
  121.       return {
  122.         "KeywordListConfiguration": {
  123.           "KeywordListDisplayType" : "All",
  124.           "KeywordListSortType" : "Alphabetical",
  125.           "KeywordListViewCollapse": false,
  126.           "KeywordFilterViewCollapse": true
  127.         }
  128.       };
  129.     };
  130.  
  131.     // Call the components methods.
  132.     keywordFilterComponent.keywordFilterMethods.loadKeywordList(getKeywordList());
  133.     keywordFilterComponent.keywordFilterMethods.loadKeywordListActiveColors(getKeywordListActiveColors());
  134.     keywordFilterComponent.keywordFilterMethods.loadKeywordListFilters(getAvailableFilters());
  135.     keywordFilterComponent.keywordFilterMethods.loadKeywordListConfiguration(getConfiguration());
  136.  
  137.   </script>
  138.  
  139. </body>
  140. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!