Bookmark Widget (v2.7) Selected Color

[JasonStanton__GISP]

I am trying to add a background color to the selected bookmark in the v2.7 widget.  In the v2.4 widget I added the following code to "common.css", but now this is not working.  

      .jimu-img-node.jimu-state-selected{

           background-color: #86b186;

      }

Does anyone have any ideas?

Jason

[RobertScheitlin__GISP · Accepted solution]

Jason,

  In 2.7 Card style bookmarks there is no selected class that is added on click of a bookmark. You will have to add two css rules to the common.css and code to the CustomBookmarks.js and WebmapBookmarks.js files

Css rules:

.jimu-img-node.jimu-float-leading.clearFix.selected{
  padding-top: 5px;
  background-color: #86b186;
}

.jimu-img-node.jimu-float-leading.clearFix{
  padding-top: 5px;
}‍‍‍‍‍‍‍‍

WebmapBookmarks.js:

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, SpatialReference,
    BaseWidget, _TemplatedMixin, utils, query) {
....

      _onBookmarkClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CustomBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/sniff',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  './ItemNode',
  'jimu/dijit/ImageChooser',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, has,
    SpatialReference, BaseWidget, _TemplatedMixin, utils,
    ItemNode, ImageChooser, query) {
....
      _onNodeBoxClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JasonStanton__GISP]

Thanks for the help Robert!  I really appreciate it!

Jason

[JasonStanton__GISP]

Robert,

I just realized that how I added/replaced the code in CustomBookmarks.js and WebmapBookmarks.js caused the bookmark widget to not work.  I am adding 'dojo/query' under define and query after function.  I am not sure if I should be strictly adding the _onBookmarkClick and _onNodeBoxClick code (and if so where), or if I am replacing current code (and exactly what code I am replacing).  I tired a few variations which all failed.

Can you please help me?

[RobertScheitlin__GISP]

Jason,

   You are just adding the dojo/query require to each file and then adding the new

        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');‍‍‍‍

code to the _onNodeBoxClick functions.

[JasonStanton__GISP]

I SWEAR I tried that, but I must not have been using my brain when I did.  It works fine now.  THANK YOU!

[JasonStanton__GISP]

Robert,

Any idea how to update the 2.13 version to change the background color on the selected bookmark?

Jason

[RobertScheitlin__GISP]

Jason,

   Not much has changed they only added an additional module to the define array...

CustomBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/sniff',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  './ItemNode',
  'jimu/dijit/ImageChooser',
  'libs/Sortable',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, has,
    SpatialReference, BaseWidget, _TemplatedMixin, utils,
    ItemNode, ImageChooser, Sortable, query) {
...
      _onNodeBoxClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

WebmapBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  'libs/Sortable',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, SpatialReference,
    BaseWidget, _TemplatedMixin, utils, Sortable, query) {
...

      _onBookmarkClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JasonStanton__GISP]

Thanks!  Not sure what I was doing wrong, but it works now!