{"action":"created","issue":{"url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/667","repository_url":"https://api.github.com/repos/ga-wdi-boston/capstone-project","labels_url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/667/labels{/name}","comments_url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/667/comments","events_url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/667/events","html_url":"https://github.com/ga-wdi-boston/capstone-project/issues/667","id":235659917,"number":667,"title":"Rendering map plugin in html","user":{"login":"eliottenos","id":26254104,"avatar_url":"https://avatars3.githubusercontent.com/u/26254104?v=3","gravatar_id":"","url":"https://api.github.com/users/eliottenos","html_url":"https://github.com/eliottenos","followers_url":"https://api.github.com/users/eliottenos/followers","following_url":"https://api.github.com/users/eliottenos/following{/other_user}","gists_url":"https://api.github.com/users/eliottenos/gists{/gist_id}","starred_url":"https://api.github.com/users/eliottenos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eliottenos/subscriptions","organizations_url":"https://api.github.com/users/eliottenos/orgs","repos_url":"https://api.github.com/users/eliottenos/repos","events_url":"https://api.github.com/users/eliottenos/events{/privacy}","received_events_url":"https://api.github.com/users/eliottenos/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":28,"created_at":"2017-06-13T19:10:26Z","updated_at":"2017-06-15T01:37:12Z","closed_at":null,"body":"I've downloaded files required for the map plugin that Im using and requiring it from index.html\r\n\r\nDocs say I need to implement the below in order to call the map files.  I've pu tin my index.html but is not rendering on localhost.  Would it make sure to add it all to a handlebars file and then call it from view.js upon sign in success?\r\n\r\n```html\r\n<script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>\r\n    <script type=\"text/javascript\" src=\"https://cssmapsplugin.com/5/jquery.cssmap.min.js\"></script>\r\n    <script type=\"text/javascript\">\r\n$(document).ready(function(){\r\n\r\n// CSSMap;\r\n$(\"#map-europe\").CSSMap({\r\n  \"size\": 1450,\r\n  \"tooltips\": \"floating-top-center\",\r\n  \"responsive\": \"auto\",\r\n  \"multipleClick\": {\r\n    \"enable\": true,\r\n    \"searchUrl\": \"search.php\",\r\n    \"searchLink\": \"Search\",\r\n    \"searchLinkVar\": \"region\",\r\n    \"separator\": \"+\",\r\n    \"hideSearchLink\": false,\r\n    \"clicksLimit\": 0\r\n  }\r\n});\r\n// END OF THE CSSMap;\r\n<!-- CSSMap - Europe -->\r\n<div id=\"map-europe\">\r\n <ul class=\"europe\">\r\n  <li class=\"eu1\"><a href=\"#albania\">Albania</a></li>\r\n  <li class=\"eu2\"><a href=\"#andorra\">Andorra</a></li>\r\n  <li class=\"eu3\"><a href=\"#austria\">Austria</a></li>\r\n  <li class=\"eu4\"><a href=\"#belarus\">Belarus</a></li>\r\n  <li class=\"eu5\"><a href=\"#belgium\">Belgium</a></li>\r\n  <li class=\"eu6\"><a href=\"#bosnia-and-herzegovina\">Bosnia and Herzegovina</a></li>\r\n  <li class=\"eu7\"><a href=\"#bulgaria\">Bulgaria</a></li>\r\n  <li class=\"eu8\"><a href=\"#croatia\">Croatia</a></li>\r\n  <li class=\"eu9\"><a href=\"#cyprus\">Cyprus</a></li>\r\n  <li class=\"eu10\"><a href=\"#czech-republic\">Czech Republic</a></li>\r\n  <li class=\"eu11\"><a href=\"#denmark\">Denmark</a></li>\r\n  <li class=\"eu12\"><a href=\"#estonia\">Estonia</a></li>\r\n  <li class=\"eu13\"><a href=\"#france\">France</a></li>\r\n  <li class=\"eu14\"><a href=\"#finland\">Finland</a></li>\r\n  <li class=\"eu15\"><a href=\"#georgia\">Georgia</a></li>\r\n  <li class=\"eu16\"><a href=\"#germany\">Germany</a></li>\r\n  <li class=\"eu17\"><a href=\"#greece\">Greece</a></li>\r\n  <li class=\"eu18\"><a href=\"#hungary\">Hungary</a></li>\r\n  <li class=\"eu19\"><a href=\"#iceland\">Iceland</a></li>\r\n  <li class=\"eu20\"><a href=\"#ireland\">Ireland</a></li>\r\n  <li class=\"eu21\"><a href=\"#san-marino\">San Marino</a></li>\r\n  <li class=\"eu22\"><a href=\"#italy\">Italy</a></li>\r\n  <li class=\"eu23\"><a href=\"#kosovo\">Kosovo</a></li>\r\n  <li class=\"eu24\"><a href=\"#latvia\">Latvia</a></li>\r\n  <li class=\"eu25\"><a href=\"#liechtenstein\">Liechtenstein</a></li>\r\n  <li class=\"eu26\"><a href=\"#lithuania\">Lithuania</a></li>\r\n  <li class=\"eu27\"><a href=\"#luxembourg\">Luxembourg</a></li>\r\n  <li class=\"eu28\"><a href=\"#macedonia\">Macedonia <abbr title=\"The Former Yugoslav Republic of Macedonia\">(F.Y.R.O.M.)</abbr></a></li>\r\n  <li class=\"eu29\"><a href=\"#malta\">Malta</a></li>\r\n  <li class=\"eu30\"><a href=\"#moldova\">Moldova</a></li>\r\n  <li class=\"eu31\"><a href=\"#monaco\">Monaco</a></li>\r\n  <li class=\"eu32\"><a href=\"#montenegro\">Montenegro</a></li>\r\n  <li class=\"eu33\"><a href=\"#netherlands\">Netherlands</a></li>\r\n  <li class=\"eu34\"><a href=\"#norway\">Norway</a></li>\r\n  <li class=\"eu35\"><a href=\"#poland\">Poland</a></li>\r\n  <li class=\"eu36\"><a href=\"#portugal\">Portugal</a></li>\r\n  <li class=\"eu37\"><a href=\"#romania\">Romania</a></li>\r\n  <li class=\"eu38\"><a href=\"#russian-federation\">Russian Federation</a></li>\r\n  <li class=\"eu39\"><a href=\"#serbia\">Serbia</a></li>\r\n  <li class=\"eu40\"><a href=\"#slovakia\">Slovakia</a></li>\r\n  <li class=\"eu41\"><a href=\"#slovenia\">Slovenia</a></li>\r\n  <li class=\"eu42\"><a href=\"#spain\">Spain</a></li>\r\n  <li class=\"eu43\"><a href=\"#sweden\">Sweden</a></li>\r\n  <li class=\"eu44\"><a href=\"#switzerland\">Switzerland</a></li>\r\n  <li class=\"eu45\"><a href=\"#turkey\">Turkey</a></li>\r\n  <li class=\"eu46\"><a href=\"#ukraine\">Ukraine</a></li>\r\n  <li class=\"eu47\"><a href=\"#united-kingdom\">United Kingdom</a></li>\r\n<!--\r\n  <li class=\"eu48\"><a href=\"#england\">England</a></li>\r\n  <li class=\"eu49\"><a href=\"#isle-of-man\">Isle of Man</a></li>\r\n  <li class=\"eu50\"><a href=\"#northern-ireland\">Northern Ireland</a></li>\r\n  <li class=\"eu51\"><a href=\"#scotland\">Scotland</a></li>\r\n  <li class=\"eu52\"><a href=\"#wales\">Wales</a></li>\r\n-->\r\n </ul>\r\n</div>\r\n<!-- END OF THE CSSMap - Europe -->\r\n\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/comments/308604015","html_url":"https://github.com/ga-wdi-boston/capstone-project/issues/667#issuecomment-308604015","issue_url":"https://api.github.com/repos/ga-wdi-boston/capstone-project/issues/667","id":308604015,"user":{"login":"eliottenos","id":26254104,"avatar_url":"https://avatars3.githubusercontent.com/u/26254104?v=3","gravatar_id":"","url":"https://api.github.com/users/eliottenos","html_url":"https://github.com/eliottenos","followers_url":"https://api.github.com/users/eliottenos/followers","following_url":"https://api.github.com/users/eliottenos/following{/other_user}","gists_url":"https://api.github.com/users/eliottenos/gists{/gist_id}","starred_url":"https://api.github.com/users/eliottenos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eliottenos/subscriptions","organizations_url":"https://api.github.com/users/eliottenos/orgs","repos_url":"https://api.github.com/users/eliottenos/repos","events_url":"https://api.github.com/users/eliottenos/events{/privacy}","received_events_url":"https://api.github.com/users/eliottenos/received_events","type":"User","site_admin":false},"created_at":"2017-06-15T01:37:12Z","updated_at":"2017-06-15T01:37:12Z","body":"view.js\r\n```js\r\n// const store = require('./store')\r\n// const CSSMap = require('../../vendor/cssmap-europe/jquery.cssmap.min.js')\r\n\r\n//\r\n// VIEW INITIALIZERS\r\n//\r\n\r\n// initView()\r\n// initializes view containers and event handlers\r\n\r\nconst initView = () => {\r\n  // render private view to navbar-div\r\n  renderView('.navbar-div', 'nav-public')\r\n  // console.log('hit render view')\r\n  // user sign up / sign in forms\r\n  renderView('.content-div', 'form-auth')\r\n  // add event handlers for view contoller elements\r\n  addHandlers()\r\n}\r\n\r\n//\r\n// VIEW RENDERING FUNCTIONS\r\n//\r\n\r\n// renderView(element, hbsFile, params)\r\n// renders the template and replaces the element\r\n\r\nconst renderView = (element, hbsFile, params) => {\r\n  const template = require(`./templates/${hbsFile}.handlebars`)\r\n  const content = template(params)\r\n  $(element).html(content)\r\n}\r\n\r\n// replaceView(element, hbsFile, params)\r\n// renders the template and replaces the element\r\n\r\nconst replaceView = (element, hbsFile, params) => {\r\n  const template = require(`./templates/${hbsFile}.handlebars`)\r\n  const content = template(params)\r\n  $(element).replaceWith(content)\r\n}\r\n\r\n// appendView(element, filepath, params)\r\n// renders the template and appends it to the element\r\n\r\nconst appendView = (element, hbsFile, params) => {\r\n  const template = require(`./templates/${hbsFile}.handlebars`)\r\n  const content = template(params)\r\n  $(element).append(content)\r\n}\r\n\r\n// prependView(element, filepath, params)\r\n// renders the template and appends it to the element\r\n\r\nconst prependView = (element, hbsFile, params) => {\r\n  const template = require(`./templates/${hbsFile}.handlebars`)\r\n  const content = template(params)\r\n  $(element).prepend(content)\r\n}\r\n\r\n// clearView(element)\r\n// clears the html from the specified element\r\n\r\nconst clearView = (element) => {\r\n  $(element).html('')\r\n}\r\n\r\n//\r\n// PUBLIC AND PRIVATE MODES\r\n//\r\n\r\n// setPublicMode()\r\n// set public mode for navbar and content area\r\n\r\nconst setPublicMode = () => {\r\n  // closeAlert()\r\n  renderView('.navbar-div', 'nav-public')\r\n  renderView('.content-div', 'form-auth')\r\n  clearView('.temp-div')\r\n}\r\n\r\nconst setPrivateMode = () => {\r\n  // closeAlert()\r\n  renderView('.navbar-div', 'nav-private')\r\n  renderView('.content-div2', 'locations')\r\n  // $(document).ready(function () {\r\n  // // CSSMap\r\n    $('#map-europe').CSSMap({\r\n      'size': 1450,\r\n      'tooltips': 'floating-top-center',\r\n      'responsive': 'auto',\r\n      'multipleClick': {\r\n        'enable': true,\r\n        'searchUrl': 'search.php',\r\n        'searchLink': 'Search',\r\n        'searchLinkVar': 'region',\r\n        'separator': '' + '',\r\n        'hideSearchLink': false,\r\n        'clicksLimit': 0\r\n      }\r\n    })\r\n  // })\r\n  renderView('.content-div', 'map-europe')\r\n}\r\n\r\n//\r\n// VALIDATION & ALERT METHODS\r\n//\r\n\r\n// formAlert(form, field)\r\n// triggers form input validation alert\r\n\r\nconst formAlert = (form, field) => {\r\n  clearFormAlerts(form)\r\n  // apply alert classes to specfic input\r\n  $(field).closest('.form-group').addClass('has-warning has-feedback')\r\n  // add alert icon to specific input\r\n  $(field).closest('.input-group').find('.form-control').after(`<span class=\"glyphicon glyphicon-warning-sign form-control-feedback\"></span>`)\r\n  // show help text for specific input\r\n  $(field).closest('.form-group').find('.help-block').show()\r\n}\r\n\r\n// clearFormFields(form)\r\n// clear all values from form fields\r\n\r\nconst clearForm = (form) => {\r\n  // clear form field alerts\r\n  clearFormAlerts(form)\r\n  // clear field values\r\n  $(form).find('.form-control').val('')\r\n}\r\n\r\n// clearFormAlerts(form)\r\n// clear all feedback classes and icons from form fields\r\n\r\nconst clearFormAlerts = (form) => {\r\n  // clear all alert classes from inputs\r\n  $(form).find('.form-group').removeClass('has-warning has-feedback')\r\n  // remove all alert class icons from inputs\r\n  $(form).find('.form-group .form-control-feedback').remove()\r\n  // hide any visible help text\r\n  $(form).find('.help-block').hide()\r\n}\r\n\r\n// showAlert(mode, message)\r\n// displays global alert box for info or warning\r\n\r\nconst showAlert = (mode, message) => {\r\n  // convert mode label to bootstrap class\r\n  mode = (mode === 'error') ? 'danger' : 'info'\r\n  // if there's already an alert\r\n  if ($('.alert').length) {\r\n    // replace the existing alert\r\n    replaceView('.alert', 'alert', { mode: mode, message: message })\r\n  } else {\r\n    // insert a new alert\r\n    prependView('.content-div', 'alert', { mode: mode, message: message })\r\n  }\r\n}\r\n\r\n// closeError()\r\n// close global error box but not info alerts\r\n\r\nconst closeError = () => {\r\n  $('.alert-danger').alert('close')\r\n}\r\n\r\n// closeAlert()\r\n//  close all global alert boxes\r\n\r\nconst closeAlert = () => {\r\n  $('.alert').alert('close')\r\n}\r\n\r\n// showChangePasswordSuccess()\r\n// password changed successfully\r\n\r\nconst showChangePasswordSuccess = () => {\r\n  // collapse change password dropdown\r\n  $('#change-password-nav').dropdown('toggle')\r\n  $('.navbar-collapse').collapse('hide')\r\n  // clear change password form fields\r\n  $('#change-password input').val('')\r\n  // display successful alert message\r\n  showAlert('info', 'Your password is changed. Hope you remember it.')\r\n}\r\n\r\n// showChangePasswordFailure()\r\n// password change failed\r\n\r\nconst showChangePasswordFailure = () => {\r\n  // collapse change password dropdown\r\n  $('#change-password-nav').dropdown('toggle')\r\n  $('.navbar-collapse').collapse('hide')\r\n  // clear change password form fields\r\n  $('#change-password input').val('')\r\n  // display successful alert message\r\n  showAlert(`error`, `For highly complex reasons, your password couldn't be changed.`)\r\n}\r\n\r\nconst addHandlers = () => {\r\n  // DROPDOWN MENU EVENTS\r\n  // add animation to dropdown expand\r\n  $('.navbar-div').on('show.bs.dropdown', '.dropdown', (event) => {\r\n    $(event.target).find('.dropdown-menu').first().stop(true, true).slideDown(250)\r\n  })\r\n\r\n  // add animation to dropdown collapse\r\n  $('.navbar-div').on('hide.bs.dropdown', '.dropdown', (event) => {\r\n    event.preventDefault()\r\n    $(event.target).find('.dropdown-menu').first().stop(true, true).slideUp(\r\n      250, () => {\r\n        // close dropdown menu\r\n        $('.dropdown').removeClass('open')\r\n        $('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false')\r\n        // clear fields\r\n        clearForm($(event.target).find('.form').val('id'))\r\n      })\r\n  })\r\n}\r\n\r\nmodule.exports = {\r\n  initView,\r\n  setPublicMode,\r\n  setPrivateMode,\r\n  showAlert,\r\n  formAlert,\r\n  clearForm,\r\n  clearFormAlerts,\r\n  closeError,\r\n  closeAlert,\r\n  showChangePasswordSuccess,\r\n  showChangePasswordFailure,\r\n  appendView\r\n}\r\n```"}}
{"actor":{"display_login":"eliottenos"}}