You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

projectdoc Toolbox

Renders a vertical banner on the left side of a Confluence page with information fetched from a projectdoc service.

Identifier
de.smartics.userscripts.confluence.vertical-banner-projectdoc
Type
Repository
Since
1.0

The script renders a vertical banner with the subject defined for the space on the left side of every page.

The banner contains text if the padding of the page is larger than the given threshold. If not, the banner is only a few pixel wide in the specified color.

The script renders class attributes that can be used to alter the styles applied to the banner.

Code

The code of the script for reference.

vertical-banner.js
/*
 * Copyright 2019-2020 Kronseder & Reiner GmbH, smartics
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

"use strict";

AJS.toInit(function () {
  const bannerWidthWithLabel = 32;
  const bannerWidthWithoutLabel = 6;

  const $main = AJS.$("#main");
  if ($main.length) {
    const fetchLabel = function () {
      return AJS.params.spaceName;
    }
    const fetchColors = function () {
      return ["blueviolet", "white"];
    }

    const paddingLeft = parseInt($main.css("padding-left").replace('px', ''));
    const minWidth = paddingLeft > bannerWidthWithLabel ? bannerWidthWithLabel : bannerWidthWithoutLabel;
    const $sidebarContainer = AJS.$("#sidebar-container");
    if ($sidebarContainer.length) {
      const $banner = AJS.$("<div id=\"userscripts-vertical-banner\"></div>\n");

      const colors = fetchColors();

      $banner.css({
        "background-color": colors[0],
        "visibility": "visible",
        "z-index": "100",
        "min-width": minWidth + "px",
        "max-width": minWidth + "px",
        "min-height": "-webkit-fill-available",
        "margin-left": "0",
        "margin-top": "0",
        "position": "absolute",
        "display": "block",
        "top": "0",
        "left": "0"
      });

      if (minWidth == bannerWidthWithLabel) {
        const $label = AJS.$("<div id=\"userscripts-vertical-banner-label\"></div>\n");
        const label = fetchLabel();
        $label.text(label);
        $label.css({
          "font": "bold 12px Sans-Serif",
          "color": colors[1],
          "letter-spacing": "2px",
          "text-transform": "uppercase",
          "line-height": "24px",
          "transform-origin": "0 0",
          "transform": "rotate(-90deg)",
          "width": "30em",
          "height": "100%",
          "margin-left": "5px",
          "margin-top": "400px",
          "z-index": "200px",
          "position": "sticky"
        });
        $banner.append($label);
      }

      $sidebarContainer.append($banner);
    }
  }
});

Details

More information on using this userscript.

Banner Rendering

If the page provides enough padding, the banner contains the name of space. If the padding is too thin, only a thin line is rendered.

Screenshot showing the banner with the space name on the left. Screenshot showing the banner without a label on the left.

Style Sheet

There is a CSS style sheet to be used as a template to configure the banner.

vertical-banner-projectdoc.css
/**
 * Copyright 2019-2020 Kronseder & Reiner GmbH, smartics
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
#userscripts-vertical-banner {
    background-color: blueviolet;

    visibility: visible;
    display: block;
    position: absolute;
    z-index: 100;
    min-height: -webkit-fill-available;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: 0;
}

#userscripts-vertical-banner.projectdoc-small {
    min-width: 6px;
    max-width: 6px;
}

#userscripts-vertical-banner.projectdoc-large {
    min-width: 32px;
    max-width: 32px;
}

#userscripts-vertical-banner-label {
    color: white;
    font: bold 12px Sans-Serif;
    letter-spacing: 2px;
    line-height: 24px;
    text-transform: uppercase;
    transform-origin: 0 0;
    transform: rotate(-90deg);

    position: sticky;
    z-index: 200;
    width: 30em;
    height: 100%;
    margin-top: 400px;
    margin-left: 5px;
}

Modify the CSS rules according to your needs. Add these rules either to the global space stylesheet or to the stylesheet of a single space.

 

For more information on using CSS with Confluence, please refer to Styling Confluence with CSS

Configuration of Userscript

Typically the banner is not required for every space of a Confluence site. To activate the script for specific spaces, the userscripts administrator may define a space category, like banner, to be set.

Screenshot of the REST API Browser with the configuration for this userscript.

Configure the space category via the Space Tools.

Screenshot with Space Details on Space Tools.

Once the categories contain a category 'banner', as specified in the activation record via activation-space-categories, the banner will be shown on every page of that space.

  • No labels