From 585b693d16de2e8e3ea203354d0b93a9abc4bafd Mon Sep 17 00:00:00 2001 From: Benjamin Jones Date: Fri, 19 Oct 2012 19:36:56 -0700 Subject: added injected/jquery-plugins.js --- contexts/data/fiveui/background.js | 6 +- contexts/data/fiveui/injected/injected.css | 6 +- contexts/data/fiveui/injected/jquery-plugins.js | 159 ++++++++++++++++++++++++ 3 files changed, 168 insertions(+), 3 deletions(-) create mode 100644 contexts/data/fiveui/injected/jquery-plugins.js (limited to 'contexts/data') diff --git a/contexts/data/fiveui/background.js b/contexts/data/fiveui/background.js index dd95ed3..6786db8 100644 --- a/contexts/data/fiveui/background.js +++ b/contexts/data/fiveui/background.js @@ -147,7 +147,8 @@ fiveui.Background.prototype.pageLoad = function(tabId, url, data) { var computeScripts = goog.array.concat( [ this.dataLoader('lib/jquery/jquery-1.7.1.min.js') , this.dataLoader('fiveui/injected/prelude.js') - , this.dataLoader('lib/jshash/md5.js') ], + , this.dataLoader('lib/jshash/md5.js') + , this.dataLoader('fiveui/injected/jquery-plugins.js') ], dependencies, [ this.dataLoader('fiveui/injected/fiveui-injected-compute.js') @@ -160,7 +161,8 @@ fiveui.Background.prototype.pageLoad = function(tabId, url, data) { this.dataLoader('lib/jquery/jquery-1.7.1.min.js'), this.dataLoader('lib/jquery/jquery-ui-1.8.17.custom.min.js'), this.dataLoader('fiveui/injected/prelude.js'), - this.dataLoader('fiveui/injected/fiveui-injected-ui.js') + this.dataLoader('fiveui/injected/fiveui-injected-ui.js'), + this.dataLoader('fiveui/injected/jquery-plugins.js') ]); this.loadScripts(tabId, uiScripts, false, data); } diff --git a/contexts/data/fiveui/injected/injected.css b/contexts/data/fiveui/injected/injected.css index 100963e..8137083 100644 --- a/contexts/data/fiveui/injected/injected.css +++ b/contexts/data/fiveui/injected/injected.css @@ -19,7 +19,11 @@ * limitations under the License. */ -.uic-problem {} +.uic-problem { + background-color: rgba(255, 0, 0, 0.3); + border: 2px solid; + border-color: red; +} /* p.solid {border-style: solid; } */ /* p.double {border-style: double; } */ diff --git a/contexts/data/fiveui/injected/jquery-plugins.js b/contexts/data/fiveui/injected/jquery-plugins.js new file mode 100644 index 0000000..2a9b76f --- /dev/null +++ b/contexts/data/fiveui/injected/jquery-plugins.js @@ -0,0 +1,159 @@ +/* + * Module : injected/jquery-plugins.js + * Copyright : (c) 2011-2012, Galois, Inc. + * + * Maintainer : + * Stability : Provisional + * Portability: Portable + * + * 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. + */ + +if (typeof goog != 'undefined') { + goog.provide('fiveui.jqueryPlugins'); +} + +/** + * FiveUI jQuery plugins + * + * This module provides several useful jQuery plugins related to checking and reporting + * UI consistency issues. + * + * @namespace + */ +fiveui.jqueryPlugins = fiveui.jqueryPlugins || {}; + +/** + * Provide a short alias for fiveui.query along the lines of the jQuery $ alias + */ +var $5 = fiveui.query; + +/** + * Simple proof of concept plugin + */ +fiveui.jqueryPlugins.myPlugin = function () { + return this.css("border-style", "solid").css("border-color", "red"); +} + +/** + * Wrapper for the :contains('text') selector + */ +fiveui.jqueryPlugins.hasText = function (text) { + return this.filter(":contains('" + text + "')") +} + +/** + * Color checker plugin + * + * Note: This is a special case of fiveui.jqueryPlugins.cssIsNot, i.e. + * $(..).notColorSet(set) == $(..).cssIsNot("color", set, fiveui.color.colorToHex) + */ +fiveui.jqueryPlugins.notColorSet = function (cset) { + var allowable = {}; + for (i = 0; i < cset.length; i += 1) { allowable[cset[i]] = true; } // array -> object + return this.filter(function (index) { + var color = fiveui.color.colorToHex($(this).css("color")); // .css("color") returns rgb(...) + return !(color in allowable); + }); +} + +/* + * General CSS propetry checker plugin + * + * @param{string} prop CSS property selector + * @param{string, array} set allowable values (either a string or an array of strings) + * @param{function} fn (optional) Function to apply to return values of $(this).css(prop) + * fn defaults to the identity function. + * + * @return{jQuery} jQuery object + */ +fiveui.jqueryPlugins.cssIsNot = function (prop, set, fn) { + var allowable = {}; + fn = fn || function (x) { return x; }; // default is Id + + if (typeof set == "string") { + allowable[fn(set)] = true; + } + else { // assume `set` is an array of strings + for (i = 0; i < set.length; i += 1) { allowable[fn(set[i])] = true; } // array -> object + } + return this.filter(function (index) { + var cssProp = fn($(this).css(prop)); + return !(cssProp in allowable); + }); +} + +/* + * Send a report to FiveUI reporting a problem with each element in the + * jQuery object. + * + * @param{string} msg Message to report + */ +fiveui.jqueryPlugins.report = function (msg) { + this.each(function (i, elt) { + report(msg, elt); // NOTE: this doesn't work. report() is not in scope here! + }); +} + +/* + * Visually highlight elements in the jQuery object (mostly for debugging purposes). + * + * @param{string} borderHint Highlighted border color, defaults to "red" + */ +fiveui.jqueryPlugins.highlight = function (borderHint) { + borderHint = borderHint || "red"; // Default is "red" + return this.css("background-color", "rgba(255, 0, 0, 0.3)") + .css("border-style", "solid") + .css("border-color", borderHint); +} + +/* + * Returns a list of css properties that element in the jQuery + * object have. This is useful for analysis of a given page when + * writing guielines. + * + * @param{string} prop CSS property to be inspected + * + * @return{object} A frequence map { "property": frequency } + */ +fiveui.jqueryPlugins.propDist = function (prop) { + res = {}; + this.each(function (i, elt) { + p = $(elt).css(prop) + if (p in res) { + res[p] += 1; + } + else { + res[p] = 1; + } + }); + console.log("Distribution of property: " + prop); + for (p in res) { + console.log(" " + p + ": " + res[p]); + } + return null; +} + + +// register the plugins +fiveui.jqueryPlugins.init = function () { + for (fn in fiveui.jqueryPlugins) { + f = fiveui.jqueryPlugins[fn]; + if (jQuery.isFunction(f) && fn != "init") { + jQuery.fn[fn] = fiveui.jqueryPlugins[fn]; + } + } +} +fiveui.jqueryPlugins.init(); + +/* :vim makecmd="make -C ../../../" */ -- cgit v1.2.3