API tools faq
paste
Advertisement
Guest User

main.html

a guest
Feb 16th, 2017
585
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 29.28 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <!-- Custom CSS -->
  3. <link href="/client/compatibility/css/app/fullview/applozic.combined.min.css"
  4.     rel="stylesheet">
  5. <!-- AutoSuggest Plugin CSS -->
  6. <link href="/client/compatibility/autosuggest/css/jquery.atwho.min.css" rel="stylesheet">
  7.  
  8. <link href="/client/compatibility/css/app/fullview/applozic.fullview.css" rel="stylesheet">
  9.  
  10. <!-- Custom JS -->
  11. <link rel="stylesheet" href="/client/compatibility/css/app/fullview/applozic.plugin.css">
  12. <script type="text/javascript">
  13.     var $original;
  14.     if (typeof jQuery !== 'undefined') {
  15.         $original = jQuery.noConflict(true);
  16.         $ = $original;
  17.         jQuery = $original;
  18.     }
  19. </script>
  20. <script src="/client/compatibility/js/jquery.min.js"></script>
  21. </head>
  22. <body>
  23.   <h1>Welcome to Meteor!</h1>
  24.   {{>hello}}
  25.  
  26. </body>
  27.  
  28. <template name="hello">
  29.   <div class="mck-container">
  30.         <div class="left mck-message-inner-left">
  31.             <div class="panel-content">
  32.                 <div class="mck-box-top mck-row mck-wt-user-icon">
  33.                     <div class="blk-lg-3">
  34.                         <div id="mck-user-icon" class="mck-user-icon"></div>
  35.                     </div>
  36.                     <div class="blk-lg-7">
  37.                         <h4 id="mck-box-title" class="mck-box-title mck-truncate">Conversations</h4>
  38.                     </div>
  39.                     <div class="blk-lg-2 move-right mck-menu-item mck-text-right">
  40.                         <div class="mck-dropdown-toggle" data-toggle="mckdropdown"
  41.                             aria-expanded="true">
  42.                             <img src="/icon-menu.png" class="mck-menu-icon"
  43.                                 alt="Menu">
  44.                         </div>
  45.                         <ul id="mck-start-new-menu-box"
  46.                             class="mck-dropdown-menu mck-tab-menu-box menu-right" role="menu">
  47.                             <li><a href="#" class="mck-contact-search menu-item"
  48.                                 title="New Chat">New Chat</a></li>
  49.                             <li><a href="#" class="mck-contact-search menu-item"
  50.                                 title="Contacts">Contacts</a></li>
  51.                             <li><a href="#" class="mck-group-search menu-item"
  52.                                 title="Groups">Groups</a></li>
  53.                             <li><a href="#" id="mck-new-group" class="menu-item"
  54.                                 title="Create Group">Create Group</a></li>
  55.                         </ul>
  56.                     </div>
  57.                 </div>
  58.                 <div class="top">
  59.                     <span class="mck-search-icon"> <a href="#" role="link"
  60.                         class="mck-tab-search"> <span class="mck-icon-search"></span>
  61.                     </a>
  62.                     </span> <input type="text" id="mck-search" data-provide="typeahead"
  63.                         placeholder="Search./compatibility." autofocus />
  64.                 </div>
  65.                 <div class="mck-panel-body">
  66.                     <div id="mck-contact-cell" class="mck-panel-cell">
  67.                         <div class="mck-panel-inner mck-contacts-inner">
  68.                             <ul id="mck-contact-list"
  69.                                 class="people mck-contact-list mck-nav mck-nav-tabs mck-nav-stacked">
  70.                 </ul>
  71.                         </div>
  72.                         <div id="mck-contact-loading" class="mck-loading">
  73.                             <img src="/ring.gif">
  74.                         </div>
  75.                         <div id="mck-no-contact-text"
  76.                             class="mck-no-data-text mck-text-muted n-vis">No
  77.                             conversations yet!</div>
  78.                         <div id="mck-show-more-icon" class="mck-show-more-icon n-vis">
  79.                             <h3>No more conversations!</h3>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.         <div class="right">
  86.             <div class="panel-content">
  87.                 <div id="mck-tab-header" class="mck-box-top n-vis">
  88.                     <div id="mck-tab-individual" class="mck-tab-individual mck-row">
  89.                         <div class="blk-lg-8 mck-box-title">
  90.                             <div id="mck-group-tab-title" class="n-vis">
  91.                                 <a id="mck-tab-info" href="#" class="mck-tab-info">
  92.                                     <div class="mck-tab-title mck-truncate name"></div>
  93.                                     <div class="mck-tab-status mck-truncate n-vis"></div>
  94.                                     <div class="mck-typing-box mck-truncate n-vis">
  95.                                         <span class="name-text"></span><span>typing...</span>
  96.                                     </div>
  97.                                 </a>
  98.                             </div>
  99.                             <div id="mck-individual-tab-title"
  100.                                 class="mck-individual-tab-title">
  101.                                 <div class="mck-tab-title mck-truncate name"></div>
  102.                                 <div class="mck-tab-status mck-truncate n-vis"></div>
  103.                                 <div class="mck-typing-box mck-truncate n-vis">
  104.                                     <span class="name-text"></span><span>typing...</span>
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                         <div class="blk-lg-4 move-right">
  109.                             <div id="mck-tab-menu" class="mck-menu-item mck-text-right">
  110.                                 <div class="mck-dropdown-toggle" data-toggle="mckdropdown"
  111.                                     aria-expanded="true">
  112.                                     <img src="/icon-menu.png" class="mck-menu-icon"
  113.                                         alt="Tab Menu">
  114.                                 </div>
  115.                                 <ul id="mck-tab-menu-list"
  116.                                     class="mck-dropdown-menu mck-tab-menu-box menu-right"
  117.                                     role="menu">
  118.                                     <li class="mck-tab-message-option vis"><a href="#"
  119.                                         id="mck-delete-button" class="mck-delete-button menu-item vis"
  120.                                         title="Clear Messages"> Clear Messages </a></li>
  121.                                     <li id="li-mck-block-user" class="vis"><a href="#"
  122.                                         id="mck-block-button" class="menu-item" title="Block User">Block
  123.                                             User</a></li>
  124.                                     <li id="li-mck-group-info" class="mck-group-menu-options n-vis"><a
  125.                                         href="#" id="mck-group-info-btn"
  126.                                         class="menu-item mck-group-info-btn" title="Group Info">
  127.                                             Group Info </a></li>
  128.                                     <li id="li-mck-leave-group"
  129.                                         class="mck-group-menu-options n-vis"><a href="#"
  130.                                         id="mck-leave-group-btn" class="menu-item" title="Exit Group">
  131.                                             Exit Group </a></li>
  132.                                 </ul>
  133.                             </div>
  134.  
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                 <div id="mck-product-group"
  139.                     class="mck-tab-panel mck-btn-group mck-product-group">
  140.                     <div id="mck-product-box"
  141.                         class="mck-product-box n-vis mck-dropdown-toggle"
  142.                         data-toggle="mckdropdown" aria-expanded="true">
  143.                         <div class="mck-row">
  144.                             <div class="blk-lg-10">
  145.                                 <div class="mck-row">
  146.                                     <div class="blk-lg-3 mck-product-icon"></div>
  147.                                     <div class="blk-lg-9">
  148.                                         <div class="mck-row">
  149.                                             <div class="blk-lg-8 mck-product-title mck-truncate"></div>
  150.                                             <div
  151.                                                 class="blk-lg-4 move-right mck-product-rt-up mck-truncate">
  152.                                                 <strong class="mck-product-key"></strong>:<span
  153.                                                     class="mck-product-value"></span>
  154.                                             </div>
  155.                                         </div>
  156.                                         <div class="mck-row">
  157.                                             <div class="blk-lg-8 mck-truncate mck-product-subtitle"></div>
  158.                                             <div
  159.                                                 class="blk-lg-4 move-right mck-product-rt-down mck-truncate">
  160.                                                 <strong class="mck-product-key"></strong>:<span
  161.                                                     class="mck-product-value"></span>
  162.                                             </div>
  163.                                         </div>
  164.                                     </div>
  165.                                 </div>
  166.                             </div>
  167.                             <div class="blk-lg-2 mck-text-center">
  168.                                 <span class="mck-caret n-vis"></span>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                     <ul id="mck-conversation-list"
  173.                         class="mck-dropdown-menu menu-right mck-conversation-list n-vis"
  174.                         role="menu"></ul>
  175.                 </div>
  176.                 <div class="mck-panel-body">
  177.                     <div id="mck-message-cell" class="mck-message-cell mck-panel-cell">
  178.                         <div id="conversation-section" class="conversation-section">
  179.                             <div class="chat mck-message-inner mck-panel-inner"
  180.                                 data-mck-id="${contIdExpr}"></div>
  181.                             <div id="mck-msg-loading" class="mck-loading n-vis">
  182.                                 <img src="/ring.gif">
  183.                             </div>
  184.                             <div id="mck-no-more-messages"
  185.                                 class="mck-no-more-messages mck-show-more-icon n-vis">
  186.                                 <h3>No more messages!</h3>
  187.                             </div>
  188.                         </div>
  189.                     </div>
  190.                 </div>
  191.                 <div class="write">
  192.                     <!-- Create message send form -->
  193.                     <div id="mck-sidebox-ft" class="mck-box-ft mck-panel-ft">
  194.                         <div class="mck-box-form mck-row n-vis">
  195.                             <div class="blk-lg-12">
  196.                                 <p id="mck-msg-error" class="mck-sidebox-error n-vis"></p>
  197.                             </div>
  198.                             <div class="blk-lg-12">
  199.                                 <p id="mck-msg-response" class="mck-box-response n-vis"></p>
  200.                             </div>
  201.                             <div id="mck-write-box" class="blk-lg-12 mck-write-box">
  202.                                 <form id="mck-msg-form" class="vertical mck-msg-form">
  203.                                     <div class="mck-form-group n-vis">
  204.                                         <label class="sr-only placeholder-text control-label"
  205.                                             for="mck-msg-to">To:</label> <input class="mck-form-cntrl"
  206.                                             id="mck-msg-to" name="mck-msg-to" placeholder="To" required>
  207.                                     </div>
  208.                                     <input id="mck-file-input" class="mck-file-input n-vis"
  209.                                         type="file" name="files[]">
  210.                                     <div id="mck-btn-attach" class="mck-btn-attach">
  211.                                         <div class="mck-dropdown-toggle" data-toggle="mckdropdown"
  212.                                             aria-expanded="true">
  213.                                             <a href="#" type="button" id="mck-btn-attach"
  214.                                                 class="write-link attach mck-btn-text-panel"
  215.                                                 aria-expanded="true" title="Attach File"> </a>
  216.                                         </div>
  217.                                         <ul id="mck-upload-menu-list"
  218.                                             class="mck-dropup-menu mck-upload-menu-list" role="menu">
  219.                                             <li><a id="mck-file-up" href="#"
  220.                                                 class="mck-file-upload menu-item" title="File &amp; Photos">
  221.  
  222.                                                     <img src="/mck-icon-photo.png"
  223.                                                     class="menu-icon" alt="File &amp; Photos"> <span>Files
  224.                                                         &amp; Photos</span>
  225.                                             </a></li>
  226.                                             <li><a id="mck-btn-loc" href="#" class="menu-item"
  227.                                                 title="Location"> <img
  228.                                                     src="/mck-icon-marker.png" class="menu-icon"
  229.                                                     alt="Location"> <span>Location</span>
  230.                                             </a></li>
  231.  
  232.                                         </ul>
  233.                                     </div>
  234.                                     <a href="#" id="mck-file-up2" type="button"
  235.                                         class="write-link attach n-vis mck-file-upload mck-btn-text-panel"
  236.                                         title="Attach File"> </a> <span id="mck-text-box"
  237.                                         contenteditable="true" class="mck-text-box mck-text required"></span>
  238.  
  239.                                     <a href="#" type="button" id="mck-btn-smiley"
  240.                                         class="write-link smiley mck-btn-smiley mck-btn-text-panel"
  241.                                         title="Smiley"></a> <a href="#" type="submit"
  242.                                         id="mck-msg-sbmt" class="write-link send mck-btn-text-panel"
  243.                                         title="Send Message"></a>
  244.                                 </form>
  245.                             </div>
  246.                             <div class="blk-lg-12">
  247.                                 <div id="mck-file-box" class="n-vis"></div>
  248.                             </div>
  249.                         </div>
  250.                     </div>
  251.                 </div>
  252.             </div>
  253.         </div>
  254.         <div id="mck-group-create-tab"
  255.             class="mck-group-create-tab mck-panel-sm mck-panel n-vis">
  256.             <div class="panel-content">
  257.                 <div class="mck-box-top">
  258.                     <div class="blk-lg-10">
  259.                         <div class="mck-box-title mck-truncate" title="Create Group">Create
  260.                             Group</div>
  261.                     </div>
  262.                     <div class="blk-lg-2">
  263.                         <button type="button" id="mck-group-create-close"
  264.                             class="mck-box-close mck-close-panel move-right">
  265.                             <span aria-hidden="true">&times;</span>
  266.                         </button>
  267.                     </div>
  268.                 </div>
  269.                 <div class="mck-box-body">
  270.                     <div class="mck-tab-cell">
  271.                         <div id="mck-group-create-panel"
  272.                             class="mck-tab-panel mck-message-inner mck-group-create-inner">
  273.                             <div class="mck-group-sub-sec">
  274.                                 <div id="mck-group-create-icon-box"
  275.                                     class="mck-group-create-icon-box mck-group-icon-box mck-hover-on">
  276.                                     <div class="mck-group-icon"></div>
  277.                                     <span class="mck-overlay-box">
  278.                                         <div class="mck-overlay">
  279.                                             <span class="mck-camera-icon"></span> <span
  280.                                                 class="mck-overlay-label">Add Group Icon</span>
  281.                                         </div>
  282.                                         <div id="mck-group-create-icon-loading"
  283.                                             class="mck-loading n-vis">
  284.                                             <img src="/mck-loading.gif" />
  285.                                         </div> <input id="mck-group-icon-upload"
  286.                                         class="mck-group-icon-upload n-vis" type="file" name="files[]">
  287.                                     </span>
  288.                                 </div>
  289.                             </div>
  290.                             <div id="mck-group-create-name-sec" class="mck-group-sub-sec">
  291.                                 <div id="mck-group-create-name-box"
  292.                                     class="mck-row mck-group-name-box">
  293.                                     <div class="blk-lg-12">
  294.                                         <div class="mck-label">Group Title</div>
  295.                                     </div>
  296.                                     <div class="blk-lg-12">
  297.                                         <div id="mck-group-create-title"
  298.                                             class="mck-group-create-title mck-group-title"
  299.                                             contenteditable="true">Group title</div>
  300.                                     </div>
  301.                                 </div>
  302.                             </div>
  303.                             <div id="mck-group-create-type-sec" class="mck-group-sub-sec">
  304.                                 <div id="mck-group-create-type-box"
  305.                                     class="mck-row mck-group-type-box">
  306.                                     <div class="blk-lg-12">
  307.                                         <div class="mck-label">Group Type</div>
  308.                                     </div>
  309.                                     <div class="blk-lg-12">
  310.                                         <select id="mck-group-create-type" class="mck-select">
  311.                                             <option value="2" selected>Public</option>
  312.                                             <option value="1">Private</option>
  313.                                             <option value="6">Open</option>
  314.                                         </select>
  315.                                     </div>
  316.                                 </div>
  317.                             </div>
  318.                             <div id="mck-group-create-btn-sec" class="mck-group-sub-sec">
  319.                                 <button type="button" id="mck-btn-group-create"
  320.                                     class="mck-btn mck-btn-green mck-btn-group-create"
  321.                                     title="Create Group">Create Group</button>
  322.                             </div>
  323.                         </div>
  324.                     </div>
  325.                 </div>
  326.             </div>
  327.         </div>
  328.         <div id="mck-group-info-tab"
  329.             class="mck-group-info-tab mck-panel-sm mck-panel n-vis">
  330.             <div class="panel-content">
  331.                 <div class="mck-box-top">
  332.                     <div class="blk-lg-10">
  333.                         <div class="mck-box-title mck-truncate" title="Group Info">Group
  334.                             Info</div>
  335.                     </div>
  336.                     <div class="blk-lg-2">
  337.                         <button type="button" id="mck-group-info-close"
  338.                             class="mck-box-close mck-close-panel move-right">
  339.                             <span aria-hidden="true">&times;</span>
  340.                         </button>
  341.                     </div>
  342.                 </div>
  343.                 <div id="mck-group-detail-panel" class="mck-group-detail-box">
  344.                     <div class="mck-group-icon-sec">
  345.                         <div id="mck-group-info-icon-box"
  346.                             class="mck-group-icon-box mck-group-info-icon-box mck-hover-on">
  347.                             <div class="mck-group-icon"></div>
  348.                             <span class="mck-overlay-box n-vis">
  349.                                 <div class="mck-overlay">
  350.                                     <span class="mck-camera-icon"></span> <span
  351.                                         class="mck-overlay-label">Change Group Icon</span>
  352.                                 </div>
  353.                                 <div id="mck-group-info-icon-loading" class="mck-loading n-vis">
  354.                                     <img src="/mck-loading.gif" />
  355.                                 </div> <input id="mck-group-icon-change"
  356.                                 class="mck-group-icon-change n-vis" type="file" name="file[]" />
  357.                             </span>
  358.                         </div>
  359.                         <div class="mck-text-center">
  360.                             <a id="mck-btn-group-icon-save" href="#" role="link"
  361.                                 class="mck-btn-group-icon-save n-vis" title="Click to save">
  362.                                 <img src="/mck-icon-save.png" alt="Save">
  363.                             </a>
  364.                         </div>
  365.                     </div>
  366.                     <div id="mck-group-name-sec" class="mck-group-name-sec">
  367.                         <div id="mck-group-name-box" class="mck-row mck-group-name-box">
  368.                             <div class="blk-lg-9">
  369.                                 <div id="mck-group-title" class="mck-group-title"
  370.                                     contenteditable="false">Group title</div>
  371.                             </div>
  372.                             <div class="blk-lg-3 mck-group-name-edit-icon">
  373.                                 <a id="mck-group-name-edit" href="#" role="link"
  374.                                     class="mck-group-name-edit vis" title="Edit"> <img
  375.                                     src="/mck-icon-write.png" alt="Edit"></a> <a
  376.                                     id="mck-group-name-save" href="#" role="link"
  377.                                     class="mck-group-name-save n-vis" title="Click to save"> <img
  378.                                     src="/mck-icon-save.png" alt="Save"></a>
  379.                             </div>
  380.                         </div>
  381.                     </div>
  382.                     <div id="mck-group-member-panel"
  383.                         class="mck-tab-panel mck-group-member-panel vis">
  384.                         <div class="mck-group-md-sec">
  385.                             <div class="mck-row mck-group-member-text">Members</div>
  386.                             <div id="mck-group-add-member-box"
  387.                                 class="mck-row mck-group-admin-options mck-group-add-member-box n-vis">
  388.                                 <a id="mck-group-add-member" class="mck-group-add-member"
  389.                                     href="#">
  390.                                     <div class="blk-lg-3">
  391.                                         <img src="/mck-icon-add-member.png"
  392.                                             alt="Add Member">
  393.                                     </div>
  394.                                     <div class="blk-lg-9">Add member</div>
  395.                                 </a>
  396.                             </div>
  397.                         </div>
  398.                     </div>
  399.                 </div>
  400.                 <div class="mck-box-body">
  401.                     <div class="mck-tab-cell">
  402.                         <div class="mck-group-member-inner">
  403.                             <ul id="mck-group-member-list"
  404.                                 class="mck-group-member-list mck-contact-list mck-nav mck-nav-tabs mck-nav-stacked">
  405.                             </ul>
  406.                         </div>
  407.                     </div>
  408.                 </div>
  409.                 <div id="mck-group-info-ft" class="mck-group-info-ft">
  410.                     <button type="button" id="mck-btn-group-exit"
  411.                         class="mck-btn mck-btn-blue mck-btn-group-exit" title="Exit Group">Exit
  412.                         Group</button>
  413.                 </div>
  414.             </div>
  415.         </div>
  416.     </div>
  417.     <div id="mck-loc-box" class="mck-box mck-loc-box fade"
  418.         aria-hidden="false">
  419.         <div class="mck-box-dialog mck-box-md">
  420.             <div class="mck-box-content">
  421.                 <div class="mck-box-top mck-row">
  422.                     <div class="blk-lg-10">
  423.                         <h4 class="mck-box-title">Location Sharing</h4>
  424.                     </div>
  425.                     <div class="blk-lg-2">
  426.                         <button type="button" class="mck-box-close" data-dismiss="mckbox"
  427.                             aria-label="Close">
  428.                             <span aria-hidden="true">&times;</span>
  429.                         </button>
  430.                     </div>
  431.                 </div>
  432.                 <div class="mck-box-body">
  433.                     <div class="mck-form-group">
  434.                         <div class="blk-lg-12">
  435.                             <input id="mck-loc-address" type="text" class="mck-form-control"
  436.                                 placeholder="Enter a location" autocomplete="off">
  437.                         </div>
  438.                     </div>
  439.                     <div id="mck-map-content" class="mck-loc-content"></div>
  440.                     <div class="n-vis">
  441.                         <label class="blk-sm-2 mck-control-label">Lat.:</label>
  442.                         <div class="blk-sm-3">
  443.                             <input type="text" id="mck-loc-lat" class="mck-form-control">
  444.                         </div>
  445.                         <label class="blk-sm-2 mck-control-label">Long.:</label>
  446.                         <div class="blk-sm-3">
  447.                             <input type="text" id="mck-loc-lon" class="mck-form-control">
  448.                         </div>
  449.                     </div>
  450.                 </div>
  451.                 <div class="mck-box-footer">
  452.                     <button id="mck-my-loc" type="button"
  453.                         class="mck-my-loc mck-btn mck-btn-green">My Location</button>
  454.                     <button id="mck-loc-submit" type="button"
  455.                         class="mck-btn mck-btn-blue mck-loc-submit move-right">Send</button>
  456.                     <button type="button" class="mck-btn mck-btn-default move-right"
  457.                         data-dismiss="mckbox">Close</button>
  458.                 </div>
  459.             </div>
  460.         </div>
  461.     </div>
  462.     <div id="mck-contact-search-box"
  463.         class="mck-box mck-contact-search-box mck-sm-modal-box fade"
  464.         aria-hidden="false">
  465.         <div class="mck-box-dialog mck-box-sm">
  466.             <div class="mck-box-content">
  467.                 <div class="mck-box-top mck-row">
  468.                     <div class="blk-lg-10">
  469.                         <h4 class="mck-box-title" title="New Chat">New Chat</h4>
  470.                     </div>
  471.                     <div class="blk-lg-2">
  472.                         <button type="button" class="mck-box-close" data-dismiss="mckbox"
  473.                             aria-label="Close">
  474.                             <span aria-hidden="true">&times;</span>
  475.                         </button>
  476.                     </div>
  477.                 </div>
  478.                 <div id="mck-search-tab-box" class="mck-search-tab-box mck-row">
  479.                     <div class="blk-lg-12">
  480.                         <ul class="mck-nav mck-nav-panel">
  481.                             <li class="mck-nav-item mck-nav-divider"><a
  482.                                 id="mck-contact-search-tab"
  483.                                 class="mck-nav-link mck-contact-search active" href="#"><strong>Contacts</strong></a></li>
  484.                             <li class="mck-nav-item"><a id="mck-group-search-tab"
  485.                                 class="mck-nav-link mck-group-search" href="#"><strong>Groups</strong></a>
  486.                             </li>
  487.                         </ul>
  488.                     </div>
  489.                 </div>
  490.                 <div class="mck-box-body">
  491.                     <div class="mck-form-group">
  492.                         <div id="mck-contact-search-input-box"
  493.                             class="mck-input-group blk-lg-12">
  494.                             <input id="mck-contact-search-input" type="text"
  495.                                 data-provide="typeahead" placeholder="Search..." autofocus /> <span
  496.                                 class="mck-search-icon"><a href="#" role="link"
  497.                                 class="mck-contact-search-link"><span
  498.                                     class="mck-icon-search"></span></a></span>
  499.                         </div>
  500.                         <div id="mck-group-search-input-box"
  501.                             class="mck-input-group blk-lg-12 n-vis">
  502.                             <input id="mck-group-search-input" type="text"
  503.                                 data-provide="typeahead" placeholder="Search..." autofocus /> <span
  504.                                 class="mck-search-icon"><a href="#" role="link"
  505.                                 class="mck-group-search-link"><span class="mck-icon-search"></span></a></span>
  506.                         </div>
  507.                     </div>
  508.                     <div class="mck-tab-cell">
  509.                         <div class="mck-message-inner">
  510.                             <ul id="mck-contact-search-list"
  511.                                 class="mck-contact-list mck-contact-search-list mck-nav mck-nav-tabs mck-nav-stacked"></ul>
  512.                             <ul id="mck-group-search-list"
  513.                                 class="mck-contact-list mck-group-search-list mck-nav mck-nav-tabs mck-nav-stacked n-vis"></ul>
  514.                             <div id="mck-no-search-contacts" class="mck-show-more-icon n-vis">
  515.                                 <h3>No contacts yet!</h3>
  516.                             </div>
  517.                             <div id="mck-no-search-groups" class="mck-show-more-icon n-vis">
  518.                                 <h3>No groups yet!</h3>
  519.                             </div>
  520.                             <div id="mck-search-loading" class="mck-loading n-vis">
  521.                                 <img src="/ring.gif">
  522.                             </div>
  523.                         </div>
  524.                     </div>
  525.                 </div>
  526.             </div>
  527.         </div>
  528.     </div>
  529.     <div id="mck-goup-search-box"
  530.         class="mck-box mck-group-search-box mck-sm-modal-box fade"
  531.         aria-hidden="false">
  532.         <div class="mck-box-dialog mck-box-sm">
  533.             <div class="mck-box-content">
  534.                 <div class="mck-box-top mck-row">
  535.                     <div class="blk-lg-3">
  536.                         <img src="/mck-icon-add-member.png" alt="Add Member">
  537.                     </div>
  538.                     <div class="blk-lg-7">
  539.                         <h4 class="mck-box-title">Add Member</h4>
  540.                     </div>
  541.                     <div class="blk-lg-2">
  542.                         <button type="button" class="mck-box-close" data-dismiss="mckbox"
  543.                             aria-label="Close">
  544.                             <span aria-hidden="true">&times;</span>
  545.                         </button>
  546.                     </div>
  547.                 </div>
  548.                 <div class="mck-box-body">
  549.                     <div class="mck-form-group">
  550.                         <div class="mck-input-group blk-lg-12">
  551.                             <input id="mck-group-member-search" type="text"
  552.                                 data-provide="typeahead" placeholder="Search./compatibility." autofocus /> <span
  553.                                 class="mck-search-icon"><a href="#" role="link"
  554.                                 class="mck-group-member-search-link"><span
  555.                                     class="mck-icon-search"></span></a></span>
  556.                         </div>
  557.                     </div>
  558.                     <div class="mck-tab-cell">
  559.                         <div class="mck-message-inner">
  560.                             <ul id="mck-group-member-search-list"
  561.                                 class=" mck-contact-list mck-group-search-list mck-nav mck-nav-tabs mck-nav-stacked"></ul>
  562.                             <div id="mck-no-gsm-text"
  563.                                 class="mck-no-data-text mck-text-muted n-vis">No Users!</div>
  564.                         </div>
  565.                     </div>
  566.                 </div>
  567.             </div>
  568.         </div>
  569.     </div>
  570.  
  571.     <div id="mck-sidebox"></div>
  572.  
  573.  
  574.  
  575.     <script type="text/javascript" src="/client/compatibility/js/applozic.plugins.min.js"></script>
  576.     <script type="text/javascript" src="/client/compatibility/js/applozic.widget.min.js"></script>
  577.     <script type="text/javascript" src="/client/compatibility/js/applozic.emojis.min.js"></script>
  578.     <script type="text/javascript" src="/client/compatibility/js/applozic.socket.min.js"></script>
  579.  
  580. <script type="text/javascript" src="/client/compatibility/js/locationpicker.jquery.min.js"></script>
  581.  
  582.  
  583. <script type="text/javascript" src="/client/compatibility/js/app/applozic.common.js"></script>
  584. <script type="text/javascript"
  585.   src="/client/compatibility/js/app/fullview/applozic.fullview.js"></script>
  586.  
  587.   <script type="text/javascript">
  588.     //var $applozic = jQuery.noConflict(true);
  589.     //Sample json contains display name and photoLink for userId
  590.     var contacts = {
  591.       "user1" : {
  592.         "displayName" : "Devashish",
  593.         "imageLink" : "https://www.applozic.com/resources/images/applozic_icon.png"
  594.       },
  595.       "user2" : {
  596.         "displayName" : "Adarsh",
  597.         "imageLink" : "https://www.applozic.com/resources/images/applozic_icon.png"
  598.       },
  599.       "user3" : {
  600.         "displayName" : "Shanki",
  601.         "imageLink" : "https://www.applozic.com/resources/images/applozic_icon.png"
  602.       }
  603.     };
  604.     // Contacts Array
  605.      var contactsJSON = [{"userId": "USER_1", "displayName": "Devashish",
  606.                               "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional)
  607.                               "imageData" :"Base64 encoded image data"  // or image data (optional)
  608.                               },
  609.                              {"userId": "USER_2", "displayName": "Adarsh",
  610.                               "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional)
  611.                               "imageData" :"Base64 encoded image data"  // or image data (optional)
  612.                              },
  613.                              {"userId": "USER_3", "displayName": "Shanki",
  614.                               "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png",  // image url (optional)
  615.                               "imageData" :"Base64 encoded image data"  // or image data (optional)
  616.                              }
  617.                           ];
  618.     function readMessage() {
  619.       //console.log(userId);
  620.     }
  621.     //Callback Function to return display name by userId
  622.     /*  function displayName(userId) {
  623.           //Todo: replace this with users display name
  624.           var contact = contacts[userId];   // contacts sample given above
  625.           if (typeof contact !== 'undefined') {
  626.               return contact.displayName;
  627.           }
  628.       }*/
  629.     //Callback Function to return contact image url by userId
  630.     /*  function contactImageSrc(userId) {
  631.           var contact = contacts[userId]; // contacts sample given above
  632.           if (typeof contact !== 'undefined') {
  633.               return contact.imageLink;
  634.           }
  635.       }*/
  636.     //callback function execute after plugin initialize.
  637.     function onInitialize(response) {
  638.       if (response.status === 'success') {
  639.         // $applozic.fn.applozic('loadContacts', {'contacts':contactsJSON});
  640.         // $applozic.fn.applozic('loadTab', 'shanki.connect');
  641.         //write your logic exectute after plugin initialize.
  642.       } else {
  643.         alert(response.errorMessage);
  644.       }
  645.     }
  646.     // Examples shows how to define variable for auto suggest
  647.     var autoSuggest = {
  648.       queries : [ {
  649.         name : "How to integrate?",
  650.         content : "How to integrate Applozic SDK?"
  651.       }, {
  652.         name : "Android",
  653.         content : "https://www.applozic.com/docs/android-chat-sdk.html"
  654.       }, {
  655.         name : "iOS",
  656.         content : "https://www.applozic.com/docs/ios-chat-sdk.html"
  657.       }, {
  658.         name : "Web Plugin",
  659.         content : "https://www.applozic.com/docs/web-chat-plugin.html"
  660.       } ],
  661.       templates : [ {
  662.         name : "I am busy. I will call you later",
  663.         content : "I am busy. I will call you later"
  664.       }, {
  665.         name : "I'm in a meeting.",
  666.         content : "I'm in a meeting."
  667.       }, {
  668.         name : "Where are You?",
  669.         content : "Where are You?"
  670.       }, {
  671.         name : "Please reply ASAP. It's Urgent.",
  672.         content : "Please reply ASAP. It's Urgent."
  673.       }, {
  674.         name : "I'm on my way home",
  675.         content : "I'm on my way home"
  676.       }, {
  677.         name : "I'm coming",
  678.         content : "I'm coming"
  679.       } ]
  680.     }
  681.     // Function to initialize auto suggest plugin on message textbox
  682.     /*        function initAutoSuggestions() {
  683.      $('#mck-text-box').atwho({
  684.      at: "#queries",
  685.      insertTpl: '${content}',
  686.      displayTpl: '<li>${name} <small>${content}</small></li>',
  687.      data: autoSuggest.queries
  688.      }).atwho({
  689.      at: "@templates",
  690.      insertTpl: '${content}',
  691.      displayTpl: '<li>${name} <small>${content}</small></li>',
  692.      data: autoSuggest.templates
  693.      }).atwho({
  694.      at: "#templates",
  695.      insertTpl: '${content}',
  696.      displayTpl: '<li>${name} <small>${content}</small></li>',
  697.      data: autoSuggest.templates
  698.      });
  699.      } */
  700.  
  701.     $(document)
  702.         .ready(
  703.             function() {
  704.               //Function to initialize plugin
  705.               $applozic.fn
  706.                   .applozic({
  707.                     userId : 'demouser',
  708.                     userName : 'Demo User',
  709.                     appId : 'applozic-sample-app',
  710.                     accessToken: 'demouser',
  711.                     ojq : $original,
  712.                     obsm : oModal,
  713.                     accessToken :'',          //optional, leave it blank for testing purpose, read this if you want to add additional security by verifying password from your server https://www.applozic.com/docs/configuration.html#access-token-url
  714.                     //  authenticationTypeId: 1,    //1 for password verification from Applozic server and 0 for access Token verification from your server
  715.                     //  autoTypeSearchEnabled : false,
  716.                     //  messageBubbleAvator: true,
  717.                     notificationIconLink : "https://www.applozic.com/resources/images/applozic_icon.png",
  718.                     readConversation : readMessage, // readMessage function defined above
  719.                     onInit : onInitialize, //callback function execute on plugin initialize
  720.                     maxAttachmentSize : 25, //max attachment size in MB
  721.                     desktopNotification : true,
  722.                     locShare : true,
  723.                     topicBox : true,
  724.                     googleApiKey : "AIzaSyDKfWHzu9X7Z2hByeW4RRFJrD9SizOzZt4", // replace it with your Google API key
  725.                   // initAutoSuggestions : initAutoSuggestions //  function to enable auto suggestions
  726.                   });
  727.  
  728.               // var contactjson = {"contacts": [{"userId": "user1", "displayName": "Devashish", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png"}, {"userId": "user2", "displayName": "Adarsh", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png"}, {"userId": "user3", "displayName": "Shanki", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png"}]};
  729.               // To load contact list use below function and pass contacts json in format shown above in variable 'contactjson'.
  730.               // $applozic.fn.applozic('loadContacts', contactjson);
  731.             });
  732.   </script>
  733.  
  734.  
  735. </template>
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!