From 5ab1a3dce30ecdc07e80c4eb606829ee653f8d56 Mon Sep 17 00:00:00 2001 From: Charles Labas Date: Thu, 17 Nov 2016 11:17:44 -0500 Subject: [PATCH 1/2] Fixed banner color CSS rules and added an option for enabling them --- classification.css | 15 +++++++------- jquery.classification.js | 42 +++++++++++++++++++++++++--------------- ozp-classification.js | 12 ++++++++++-- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/classification.css b/classification.css index 3fe76c1..25085a5 100644 --- a/classification.css +++ b/classification.css @@ -10,29 +10,28 @@ color: #f9f9f9; background-color: #4f5457; } -/* -.U-FOUO { + +.U-FOUO.classBanner { background-color: #009900; } -.Conf { +.Conf.classBanner { background-color: #0000FF; } -.Secret { +.Secret.classBanner { background-color: #FF0000; } -.TopSecret-Orange { +.TopSecret-Orange.classBanner { background-color: #FF6600; } -.TopSecret-Yellow { +.TopSecret-Yellow.classBanner { background-color: #FFFF00; color: black; } -.Dynamic { +.Dynamic.classBanner { background-color: #000000; } -*/ diff --git a/jquery.classification.js b/jquery.classification.js index d8e43c1..edb3d9e 100644 --- a/jquery.classification.js +++ b/jquery.classification.js @@ -3,10 +3,10 @@ /** * jQuery.classification.js - * + * * This is a jQuery plugin that creates classification banners on an HTML document. * - * This plugin is used by a call to the jQuery function and can be chained. It takes string + * This plugin is used by a call to the jQuery function and can be chained. It takes string * parameters that are methods, or it can take a configuration object with your desired settings. * The plugin works by injecting divs onto the body element. * Ex: $(document).classification({ dynamic: true, level: 'S-2P' }) @@ -129,13 +129,13 @@ /** * @cfg $.fn.classification.defaults {Object} * Classification plugin default settings. - * + * * @cfg $.fn.classification.defaults.dynamic {Boolean} [dynamic = false] * True if you want to display "Dynamic page" in the banner. - * + * * @cfg $.fn.classification.level {String} [level = 'U-FOUO'] * A string representing the classification level, any compartments, and dissemination. - * + * * @cfg $.fn.classification.defaults.dynamicBanner {Boolean} [dynamicBanner = false] * True if a separate banner is needed for dynamic content. * @@ -146,7 +146,8 @@ dynamic: false, level: 'U-FOUO', dynamicBanner: false, - tsOrange: false + tsOrange: false, + colorBanners: false }; /** @@ -162,8 +163,9 @@ var txt = settings.level; var level = txt.charAt(0); var bannerText = text[txt]; + var bannerClass = 'classBanner'; - // If no dynamic banner is desired and dynamic text is desired ... + // If no dynamic banner is desired and dynamic text is desired ... if (!settings.dynamicBanner && settings.dynamic) { // then we concat the dynamic text to the level text - to make one banner. bannerText = dText + ' ' + text[txt]; @@ -175,23 +177,31 @@ if (settings.tsOrange) { tsColor = 'Orange' } - head = $(divText).addClass('classBanner TopSecret-' + tsColor).html(bannerText); - foot = $(divText).addClass('classBanner TopSecret-' + tsColor).html(bannerText); + + if (settings.colorBanners) { + bannerClass += ' TopSecret-' + tsColor; + } break; case 'S': - head = $(divText).addClass('classBanner Secret').html(bannerText); - foot = $(divText).addClass('classBanner Secret').html(bannerText); + if (settings.colorBanners) { + bannerClass += ' Secret'; + } break; case 'C': - head = $(divText).addClass('classBanner Conf').html(bannerText); - foot = $(divText).addClass('classBanner Conf').html(bannerText); + if (settings.colorBanners) { + bannerClass += ' Conf'; + } break; case 'U': - head = $(divText).addClass('classBanner U-FOUO').html(bannerText); - foot = $(divText).addClass('classBanner U-FOUO').html(bannerText); + if (settings.colorBanners) { + bannerClass += ' U-FOUO'; + } break; } + head = $(divText).addClass(bannerClass).html(bannerText); + foot = $(divText).addClass(bannerClass).html(bannerText); + // Add header var $body = $('body'); $body.prepend(head); @@ -216,4 +226,4 @@ }; -})(jQuery); // Pass jQuery ad the parameter to use the $ shortcut without conflict \ No newline at end of file +})(jQuery); // Pass jQuery ad the parameter to use the $ shortcut without conflict diff --git a/ozp-classification.js b/ozp-classification.js index bcc0666..bd38918 100644 --- a/ozp-classification.js +++ b/ozp-classification.js @@ -6,7 +6,15 @@ angular.module('ozpClassification', []) return { restrict: 'A', link: function(scope, element, attrs) { - element.classification({ level: attrs.ozpClassification }); + var options = { + level: attrs.ozpClassification + }; + + if (!angular.isUndefined(attrs.ozpColorBanners)) { + options.colorBanners = attrs.ozpColorBanners; + } + + element.classification(options); } }; - }); \ No newline at end of file + }); From cf1cb4a6c956ef5301a8355c252d0b1c649fe520 Mon Sep 17 00:00:00 2001 From: Charles Labas Date: Fri, 18 Nov 2016 09:16:32 -0500 Subject: [PATCH 2/2] Updated documentation to reflect new colorBanners option --- README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index bf7e5be..1ce5dde 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,13 @@ The core of these utilities is the jQuery plugin, contained in `jquery.classific ```javascript $(function(){ - $(document).classification({ - level: "U" + $(document).classification({ + level: "U" }); }); ``` -### Settings +### Settings The plugin settings and defaults are: ```javascript var defaults = settings = { @@ -26,7 +26,9 @@ var defaults = settings = { // If dynamic above is true, do we want two bars to represent the classification dynamicBanner: false, // What color should "Top Secret" be? Default is yellow, orange if this is true - tsOrange: false + tsOrange: false, + // Banner backgrounds are not colored by default; set to true to color by classification level + colorBanners: false }; ``` @@ -43,6 +45,12 @@ You are then able to attach a classification to the body tag: ... ``` +Set the `ozp-color-banners` attribute to true to enable colored banner backgrounds: + +```html +... +``` + ## Bower You can use the plugin or directive with Bower. Install with `bower install ozone-development/ozp-classification`.