Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

consider migration for old infowindow templates

See original GitHub issue

when working on infowindows: type in tabmenu (https://github.com/CartoDB/cartodb/pull/7972) I spotted when selecting an old infowindow (i.e. “infowindow_light_header_orange”) in old editor will make new builder crash

as a temporal mitigation for this I added the templates but I think it’s time to consider a migration for several reasons, mostly:

as old templates won’t exist in the carousel (see attached) it wouldn’t appear selected, when color template should appear selected
for consistency reasons, color template is still named “infowindow_light_header_blue”, that’s definitely not the best name

I’d propose set the template html for the infowindow_light_header_green, infowindow_light_header_orange, infowindow_light_header_yellow occurences, so it would appear as custom template

and rename infowindow_light_header_blue to infowindow_color

finally remove the legacy templates

/cc @juanignaciosl @xavijam

Issue Analytics

State:
Created 7 years ago
Comments:11 (11 by maintainers)

Top GitHub Comments

1reaction

matallocommented, Jun 21, 2016

from an actual case scenario, infowindows with:

"template_name":"infowindow_light_header_blue"

migrate to

...
"headerColor":{"color":{"fixed":"#35AAE5","opacity":1},"template_name":"infowindow_color","template":"<div class=\"CDB-infowindow CDB-infowindow--light js-infowindow\">\n  <div class=\"CDB-infowindow-close js-close\"></div>\n  <div class=\"CDB-infowindow-container\">\n    <div class=\"CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header\" style=\"background: #35AAE5;\">\n      {{#loading}}\u2026{{/loading}}\n      <ul class=\"CDB-infowindow-list\">\n        {{#content.fields}}\n          {{^index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}<h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>{{/title}}\n              {{#value}}<h4 class=\"CDB-infowindow-title {{#type}}{{ type }}{{/type}}\">{{{ value }}}</h1>{{/value}}\n            </li>\n            {{^value}}{{/value}}\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-infowindow-inner js-inner\">\n      {{#loading}}\n        <div class=\"CDB-Loader js-loader is-visible\"></div>\n      {{/loading}}\n      <ul class=\"CDB-infowindow-list js-content\">\n        {{#content.fields}}\n          {{#index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}\n                <h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>\n              {{/title}}\n              {{#value}}\n                <h4 class=\"CDB-infowindow-title\">{{{ value }}}</h4>\n              {{/value}}\n              {{^value}}\n                <h4 class=\"CDB-infowindow-title\">NULL</h4>\n              {{/value}}\n            </li>\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-hook\">\n      <div class=\"CDB-hook-inner\"></div>\n    </div>\n  </div>\n</div>\n",
...

"template_name":"infowindow_light_header_green"

migrate to

...
"headerColor":{"color":{"fixed":"#7FC97F","opacity":1},"template_name":"infowindow_color","template":"<div class=\"CDB-infowindow CDB-infowindow--light js-infowindow\">\n  <div class=\"CDB-infowindow-close js-close\"></div>\n  <div class=\"CDB-infowindow-container\">\n    <div class=\"CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header\" style=\"background: #7FC97F;\">\n      {{#loading}}\u2026{{/loading}}\n      <ul class=\"CDB-infowindow-list\">\n        {{#content.fields}}\n          {{^index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}<h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>{{/title}}\n              {{#value}}<h4 class=\"CDB-infowindow-title {{#type}}{{ type }}{{/type}}\">{{{ value }}}</h1>{{/value}}\n            </li>\n            {{^value}}{{/value}}\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-infowindow-inner js-inner\">\n      {{#loading}}\n        <div class=\"CDB-Loader js-loader is-visible\"></div>\n      {{/loading}}\n      <ul class=\"CDB-infowindow-list js-content\">\n        {{#content.fields}}\n          {{#index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}\n                <h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>\n              {{/title}}\n              {{#value}}\n                <h4 class=\"CDB-infowindow-title\">{{{ value }}}</h4>\n              {{/value}}\n              {{^value}}\n                <h4 class=\"CDB-infowindow-title\">NULL</h4>\n              {{/value}}\n            </li>\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-hook\">\n      <div class=\"CDB-hook-inner\"></div>\n    </div>\n  </div>\n</div>\n",
...

"template_name":"infowindow_light_header_orange"

migrate to

...
"headerColor":{"color":{"fixed":"#E68165","opacity":1},"template_name":"infowindow_color","template":"<div class=\"CDB-infowindow CDB-infowindow--light js-infowindow\">\n  <div class=\"CDB-infowindow-close js-close\"></div>\n  <div class=\"CDB-infowindow-container\">\n    <div class=\"CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header\" style=\"background: #E68165;\">\n      {{#loading}}\u2026{{/loading}}\n      <ul class=\"CDB-infowindow-list\">\n        {{#content.fields}}\n          {{^index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}<h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>{{/title}}\n              {{#value}}<h4 class=\"CDB-infowindow-title {{#type}}{{ type }}{{/type}}\">{{{ value }}}</h1>{{/value}}\n            </li>\n            {{^value}}{{/value}}\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-infowindow-inner js-inner\">\n      {{#loading}}\n        <div class=\"CDB-Loader js-loader is-visible\"></div>\n      {{/loading}}\n      <ul class=\"CDB-infowindow-list js-content\">\n        {{#content.fields}}\n          {{#index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}\n                <h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>\n              {{/title}}\n              {{#value}}\n                <h4 class=\"CDB-infowindow-title\">{{{ value }}}</h4>\n              {{/value}}\n              {{^value}}\n                <h4 class=\"CDB-infowindow-title\">NULL</h4>\n              {{/value}}\n            </li>\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-hook\">\n      <div class=\"CDB-hook-inner\"></div>\n    </div>\n  </div>\n</div>\n",
...

"template_name":"infowindow_light_header_yellow"

migrate to

...
"headerColor":{"color":{"fixed":"#E5C13D","opacity":1},"template_name":"infowindow_color","template":"<div class=\"CDB-infowindow CDB-infowindow--light js-infowindow\">\n  <div class=\"CDB-infowindow-close js-close\"></div>\n  <div class=\"CDB-infowindow-container\">\n    <div class=\"CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header\" style=\"background: #E5C13D;\">\n      {{#loading}}\u2026{{/loading}}\n      <ul class=\"CDB-infowindow-list\">\n        {{#content.fields}}\n          {{^index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}<h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>{{/title}}\n              {{#value}}<h4 class=\"CDB-infowindow-title {{#type}}{{ type }}{{/type}}\">{{{ value }}}</h1>{{/value}}\n            </li>\n            {{^value}}{{/value}}\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-infowindow-inner js-inner\">\n      {{#loading}}\n        <div class=\"CDB-Loader js-loader is-visible\"></div>\n      {{/loading}}\n      <ul class=\"CDB-infowindow-list js-content\">\n        {{#content.fields}}\n          {{#index}}\n            <li class=\"CDB-infowindow-listItem\">\n              {{#title}}\n                <h5 class=\"CDB-infowindow-subtitle\">{{title}}</h5>\n              {{/title}}\n              {{#value}}\n                <h4 class=\"CDB-infowindow-title\">{{{ value }}}</h4>\n              {{/value}}\n              {{^value}}\n                <h4 class=\"CDB-infowindow-title\">NULL</h4>\n              {{/value}}\n            </li>\n          {{/index}}\n        {{/content.fields}}\n      </ul>\n    </div>\n    <div class=\"CDB-hook\">\n      <div class=\"CDB-hook-inner\"></div>\n    </div>\n  </div>\n</div>\n",
...

now parsed, if you’re curious, also the html for the template 😂

template_name: 'infowindow_color',
template: '...',
headerColor: {
  color: {
    fixed: '#35AAE5',
    opacity: 1
  }
}

<div class="CDB-infowindow CDB-infowindow--light js-infowindow">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header" style="background: #35AAE5;">
      {{#loading}}…{{/loading}}
      <ul class="CDB-infowindow-list">
        {{#content.fields}}
          {{^index}}
            <li class="CDB-infowindow-listItem">
              {{#title}}<h5 class="CDB-infowindow-subtitle">{{title}}</h5>{{/title}}
              {{#value}}<h4 class="CDB-infowindow-title {{#type}}{{ type }}{{/type}}">{{{ value }}}</h1>{{/value}}
            </li>
            {{^value}}{{/value}}
          {{/index}}
        {{/content.fields}}
      </ul>
    </div>
    <div class="CDB-infowindow-inner js-inner">
      {{#loading}}
        <div class="CDB-Loader js-loader is-visible"></div>
      {{/loading}}
      <ul class="CDB-infowindow-list js-content">
        {{#content.fields}}
          {{#index}}
            <li class="CDB-infowindow-listItem">
              {{#title}}
                <h5 class="CDB-infowindow-subtitle">{{title}}</h5>
              {{/title}}
              {{#value}}
                <h4 class="CDB-infowindow-title">{{{ value }}}</h4>
              {{/value}}
              {{^value}}
                <h4 class="CDB-infowindow-title">NULL</h4>
              {{/value}}
            </li>
          {{/index}}
        {{/content.fields}}
      </ul>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>

the rest of the templates (“infowindow_light”, “infowindow_dark”, “infowindow_header_with_image”) wouldn’t need to be migrated

1reaction

xavijamcommented, Jun 21, 2016

Nope, it should migrate it to:

{
…
  template_name: 'infowindow_color',
  color: 'orange',
…
}

BTW, are we using color as the attribute for the header color @matallo or @alonsogarciapablo?

Top Results From Across the Web

Custom infowindow migration misses some details importing ...

Custom-HTML infowindows and legends may import somewhat successfully, but likely styling and width and other factors will be ...

Problem updating infowindow - carto - GIS Stack Exchange

First of all I'll show my code. I create the layer options and then I get my sublayer. I set its options and...

Info Windows | Maps JavaScript API - Google Developers

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has...

ruby on rails - Gmaps4Rails json request Template is missing ...

When the migration is complete, you will access your Teams at stackoverflowteams.com, and they will no longer appear in the left sidebar on...

Custom InfoWindow - WP Go Maps

1) Can I develop my own custom info window template? 2) Is it possible to target an area outside of the map so...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

consider migration for old infowindow templates

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

Migrate to Dropbox API v2

[Vector] Mobile rendering is (very) slow with default cartocss and polygons