first commit

wp-content/themes/solarify/js/plugins.js

@@ -0,0 +1,50 @@
+"use strict";
+//Plugin for adding CSS classes depending from element width
+//adding CSS classes for elements that needs different styles depending on they widht
+(function ( $ ) {
+   
+	$.fn.addWidthClass = function( options ) {
+	   
+		// Default options.
+		var settings = $.extend({
+			breakpoints: [200,400,600,1000,1200]
+		}, options );
+
+		//string which contains all of the possible CSS classes (needs for remove classes on windows resizing)
+		var availableClassesString = '';
+		for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
+			availableClassesString += " " + "width-lt-" + settings.breakpoints[i] + " " + "width-gt-" + settings.breakpoints[i];
+		};
+
+		return this.each(function(){
+			var $this = jQuery(this);
+			var newClassesString = '';
+			for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
+				if( $this.width() <= settings.breakpoints[i] ) {
+					newClassesString += ' width-lt-' + settings.breakpoints[i]
+
+				} else {
+					newClassesString += ' width-gt-' + settings.breakpoints[i]
+				}
+			};
+			$this.addClass(newClassesString);
+
+			//processing window resize event
+			jQuery(window).on('resize', function(){
+				//removing all classes
+				newClassesString = '';
+				$this.removeClass(availableClassesString);
+
+				for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
+					if( $this.width() <= settings.breakpoints[i] ) {
+						newClassesString += ' width-lt-' + settings.breakpoints[i]
+
+					} else {
+						newClassesString += ' width-gt-' + settings.breakpoints[i]
+					}
+				};
+				$this.addClass(newClassesString);
+			});
+		});
+};
+}( jQuery ));