arielgk
6/13/2015 - 2:10 AM

mqueryjs jQueryPlugin

mqueryjs jQueryPlugin

/**
* jquery.mqueryjs.js master
*/
  (function($) {
      $.fn.mqueryjs = function(options) {
          var settings = $.extend({
              // These are the defaults.
              'type': 'screen',
              'token': 'only',
              'unit': 'px',
              'container': 'body',
              'zones': {
                  'small': {
                      'min': 0,
                      'max': 320
                  },

                  'medium': {
                      'min': 321,
                      'max': 600
                  },
                  'large': {
                      'min': 601,
                      'max': 1024
                  },
              },
          }, options);

          var ble = '';
          $.each(settings.zones, function(key, value) {

              ble += createMq(value.min, value.max, key, settings);
              //console.log(ble);
          });
          $('<style type="text/css">' + ble + '</style>').appendTo($('head'));
          createDivs(settings);

      };

      function createMq(min, max, zone, settings) {
          var mq = '';
          mq = '@media ' + settings.token + ' ' + settings.type + ' and ';

          if (min !== undefined) {
              mq += '(min-width:' + min + settings.unit + ')';
          }
          if (min !== undefined && max !== undefined) {
              mq += ' and ';
          }
          if (max !== undefined) {
              mq += '(max-width:' + max + settings.unit + ')';
          }
          mq += '{';
          $.each(settings.zones, function(key, value) {
              if (key != zone) {
                  mq += '.mqueryjs-' + key + '{display:none;}';
              } else {
                  mq += '.mqueryjs-' + key + '{display:block;}';
              }
          });
          mq += '}';
          return mq;
      }


      function createDivs(settings) {
        $('.mqueryjs-hidden').remove();
          $('body').append('<div  class="mqueryjs-hidden"></div>');
          $.each(settings.zones, function(key, value) {
              var diva = document.createElement("div");
              $('.mqueryjs-hidden').append(diva);
              var $thisDiv = $('.mqueryjs-hidden').find('div').last('div').addClass('debugsize mqueryjs-' + key);
              $thisDiv.html(key);
          });
      }

      $.fn.mqueryJsIsZone = function(size) {
          $('.debugsize').each(function() {
              if ($(this).css('display').toLowerCase() == 'block') {
                  var sizee = $(this).attr('class').split('-').pop();
                  if (size) {
                      if (size == sizee) {
                          rn = true;
                      } else {
                          rn = false;
                      }
                  } else {
                      rn = sizee;
                  }
              }
          });
          return rn;
      };
      $.fn.mqueryJsZoneList = function() {
          var sizz = [];
          $('.debugsize').each(function() {
              sizz.push($(this).attr('class').split('-').pop());
          });
          return sizz;
      }

      $.fn.mqueryJsZoneCurrentIndex = function(rnString) {
          var sizeIndex;
          var sizeString;
          $('.debugsize').each(function(index, item) {
              if ($(this).css('display').toLowerCase() == 'block') {
                  sizeIndex = index;
                  sizeString = $(this).attr('class').split('-').pop();
              }
          });
          if (rnString) {
              return sizeString;

          } else {
              return sizeIndex;
          }
      }
  }(jQuery));