Created
January 20, 2017 16:30
-
-
Save dpawluk/2c7b16e5479b6f5716816d0d45df542b to your computer and use it in GitHub Desktop.
redaction_v2 snippet showing dynamic view event handling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" type="text/css" rel="stylesheet"/> | |
| <link href="./css/styles.css" type="text/css" rel="stylesheet"/> | |
| <script | |
| src="https://code.jquery.com/jquery-3.1.1.min.js" | |
| integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" | |
| crossorigin="anonymous"> | |
| </script> | |
| <script | |
| src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" | |
| type="text/javascript"> | |
| </script> | |
| <script | |
| type="text/javascript" | |
| src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" > | |
| </script> | |
| <script | |
| type="text/javascript" | |
| src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" > | |
| </script> | |
| <script | |
| type="text/javascript" | |
| src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js" > | |
| </script> | |
| </head> | |
| <body> | |
| <div id="app_nav"> | |
| <ul> | |
| <li> | |
| <a class="active" href="#">Text</a> | |
| </li> | |
| <li> | |
| <a href="#">Attachments</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div id="view_container"> | |
| </div> | |
| <!-- https://github.com/zendesk/zendesk_app_framework_sdk --> | |
| <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script> | |
| <script> | |
| // Initialise the Zendesk JavaScript API client | |
| // https://developer.zendesk.com/apps/docs/agent/zaf_v2 | |
| var dynamicEvents = { | |
| "text_handlers":[ | |
| { | |
| "event_name": "click", | |
| "event_target": ".btn-text-redact", | |
| "callback": handleTextSubmission | |
| } | |
| ] | |
| } | |
| var client = ZAFClient.init(); | |
| client.invoke('resize', { width: '300px', height: '250px' }); | |
| client.on('app.registered', init); | |
| client.on('click.btn-text-redact', handleTextSubmission); | |
| function init(){ | |
| var test_title = "This is a test title"; | |
| var viewData = {}; | |
| var templateUrl = "./templates/text_redact.hbs"; | |
| var handlers = dynamicEvents.text_handlers; | |
| switchView(templateUrl, viewData, handlers); | |
| }; | |
| function handleComments(data){ | |
| var comment_list = data['ticket.comments']; | |
| console.log(comment_list); | |
| }; | |
| function handleTextSubmission(event){ | |
| console.log(event); | |
| }; | |
| function switchView(templateUrl, viewData, handlers){ | |
| var target = $("#view_container"); | |
| $(target).empty().html("<img class='spinner' src='./images/spinner.gif' />"); | |
| $.ajax(templateUrl).done(function(data){ | |
| var template = Handlebars.compile(data); | |
| var html_data = template(viewData); | |
| $(target).empty().html(html_data); | |
| attachHandlers(handlers); | |
| }); | |
| }; | |
| function generatePreview(redactObj){ | |
| //here we create the modal html to insert then fire popModal with the post compiled template/data | |
| }; | |
| function attachHandlers(handler_array){ | |
| handler_array.forEach(function(o){ | |
| $(o.event_target).on(o.event_name, o.callback); | |
| }); | |
| //attach handlers to elements based on the viewData | |
| }; | |
| function popModal(html){ | |
| client.invoke('instances.create', { | |
| location: 'modal', | |
| url: 'assets/modal.html' | |
| }).then(function(modalContext) { | |
| // The modal is on the screen now! | |
| var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid); | |
| client.on('modalReady', function(){ | |
| modalClient.trigger('drawData', html); | |
| }); | |
| modalClient.on('modal.close', function() { | |
| // The modal has been closed. | |
| }); | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment