/** * Add SEO percentage meter which shows the SEO rating of a content object. * * The `.seoUiSeoGaugeWidget()` method adds a visual percentage meter for the SEO quality to a DOM node. * * You can supply the option `"seoQuality"` together with a number from 0 to 100 which sets the shown SEO quality. * It is possible to change this value later using the "setPercentage" function. * * There is a small status image behind the meter which indicates whether the SEO percentage is 0 or not. You * can hide this image using the `"showStatusImage"` option on creation or later using the "showStatusImage" * function. * * ### Examples * Programatically apply .seoUiSeoGaugeWidget() to a div DOM node. * * JavaScript: * * de_epages('#SEOGaugeWidget') * .seoUiSeoGaugeWidget({ * seoQuality: 25, * showStatusImage : true, * caption : 'SEO:' * }); * * HTML: * * <div id="SEOGaugeWidget"></div> * * Apply .seoUiSeoGaugeWidget() to a div DOM node via ep-metaparse. * * HTML: * * <div id="SEOGaugeWidget" class="ep-metaparse de_epages.seoUiSeoGaugeWidget({'seoQuality' : 25 })"></div> * * * @class jQuery.ui.seoUiSeoGaugeWidget * * @uses de_epages * @uses jQuery.ui.widget * @uses jQuery.tmpl * @since 6.12.0 */ /** * @cfg {Integer} seoQuality SEO quality factor. */ /** * @cfg {Boolean} showStatusImage Show status image or not. */ /** * @cfg {String} caption Text to be displayed next to the meter bar. */ /** * See `jQuery.ui.seoUiSeoGaugeWidget` for details. * * @param {Object} [options] A map of additional options pass to the method. * @param {Integer} seoQuality SEO quality factor. * @param {Boolean} showStatusImage Show status image or not. * @param {String} caption Text to be displayed next to the meter bar. * * @method seoUiSeoGaugeWidget * @member jQuery * * @since 6.12.0 */ /* * @copyright Copyright 2006-2011, epages GmbH, All Rights Reserved. * * @module de_epages.seo.ui.seoGaugeWidget */ define( "de_epages/seo/ui/seogaugewidget", [ "jquery", "de_epages", "$tmpl!./seogaugewidget", "jquery/ui/widget" ], function( $, de_epages, tmplSeoGaugeWidget ){ $.widget( "ui.seoUiSeoGaugeWidget", { options: { seoQuality: 0, // SEO quality attribute of the object [ 0 .. 100 ]. 0 means no SEO check has been done yet. showStatusImage: true, caption : 'SEO:', deactivated : false }, _create: function() { this._applyTmpl(); }, _applyTmpl: function() { var percentage = this.options.seoQuality; var percentageClass; if(percentage < 33) { percentageClass = 'red'; } else if(percentage < 66) { percentageClass = 'orange'; } else if(percentage < 100) { percentageClass = 'yellow'; } else { percentageClass = 'green'; } var statusClass; if(this.options.deactivated) { statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusDeactivated'; } else if(percentage === 0) { statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusUnknown'; } else { statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusKnown'; } this.element.empty().append( tmplSeoGaugeWidget( [{ statusClass : statusClass, caption : this.options.caption, percentage : percentage, percentageClass : percentageClass, statusDisplay : this.options.showStatusImage ? '' : 'HideElement' }]) ); }, /** * Shows or hides the status image. * * @param {Boolean} state Show or hide the status image. * * @method showStatusImage * @member jQuery.ui.seoUiSeoGaugeWidget * * @since 6.12.0 */ showStatusImage: function(state) { this.options.showStatusImage = state; this._applyTmpl(); }, /** * Changes the SEO quality factor. * * @param {Integer} newValue SEO quality factor. * * @method setPercentage * @member jQuery.ui.seoUiSeoGaugeWidget * * @since 6.12.0 */ setPercentage: function(newValue) { this.options.seoQuality = newValue; this._applyTmpl(); }, setDeactivated: function(newValue) { this.options.deactivated = newValue; this._applyTmpl(); } }); return de_epages; });