templates/art41_sample1/script.responsive.js

   1 /* Created by Artisteer v4.1.0.59688 */
   2 /*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:false, browser:true, jquery:false */
   3 /*global jQuery */
   4
   5 var responsiveDesign = {
   6     isResponsive: false,
   7     isDesktop: false,
   8     isTablet: false,
   9     isPhone: false,
  10     windowWidth: 0,
  11     responsive: (function ($) {
  12         "use strict";
  13         return function () {
  14             var html = $("html");
  15             this.windowWidth = $(window).width();
  16             var triggerEvent = false;
  17
  18             var isRespVisible = $("#art-resp").is(":visible");
  19             if (isRespVisible && !this.isResponsive) {
  20                 html.addClass("responsive").removeClass("desktop");
  21                 this.isResponsive = true;
  22                 this.isDesktop = false;
  23                 triggerEvent = true;
  24             } else if (!isRespVisible && !this.isDesktop) {
  25                 html.addClass("desktop").removeClass("responsive responsive-tablet responsive-phone");
  26                 this.isResponsive = this.isTablet = this.isPhone = false;
  27                 this.isDesktop = true;
  28                 triggerEvent = true;
  29             }
  30
  31             if (this.isResponsive) {
  32                 if ($("#art-resp-t").is(":visible") && !this.isTablet) {
  33                     html.addClass("responsive-tablet").removeClass("responsive-phone");
  34                     this.isTablet = true;
  35                     this.isPhone = false;
  36                     triggerEvent = true;
  37                 } else if ($("#art-resp-m").is(":visible") && !this.isPhone) {
  38                     html.addClass("responsive-phone").removeClass("responsive-tablet");
  39                     this.isTablet = false;
  40                     this.isPhone = true;
  41                     triggerEvent = true;
  42                 }
  43             }
  44
  45             if (triggerEvent) {
  46                 $(window).trigger("responsive", this);
  47             }
  48
  49             $(window).trigger("responsiveResize", this);
  50         };
  51     })(jQuery),
  52     initialize: (function ($) {
  53         "use strict";
  54         return function () {
  55             $("<div id=\"art-resp\"><div id=\"art-resp-m\"></div><div id=\"art-resp-t\"></div></div>").appendTo("body");
  56             var resizeTimeout;
  57             $(window).resize(function () {
  58                 clearTimeout(resizeTimeout);
  59                 resizeTimeout = setTimeout(function () { responsiveDesign.responsive(); }, 25);
  60             });
  61             $(window).trigger("resize");
  62         };
  63     })(jQuery)
  64 };
  65
  66 function responsiveAbsBg(responsiveDesign, el, bg) {
  67     "use strict";
  68     if (bg.length === 0)
  69         return;
  70
  71     var desktopBgTop = bg.attr("data-bg-top");
  72     var desktopBgHeight = bg.attr("data-bg-height");
  73
  74     if (responsiveDesign.isResponsive) {
  75         if (typeof desktopBgTop === "undefined" || desktopBgTop === false) {
  76             bg.attr("data-bg-top", bg.css("top"));
  77             bg.attr("data-bg-height", bg.css("height"));
  78         }
  79
  80         var elTop = el.offset().top;
  81         var elHeight = el.outerHeight();
  82         bg.css("top", elTop + "px");
  83         bg.css("height", elHeight + "px");
  84     } else if (typeof desktopBgTop !== "undefined" && desktopBgTop !== false) {
  85         bg.css("top", desktopBgTop);
  86         bg.css("height", desktopBgHeight);
  87         bg.removeAttr("data-bg-top");
  88         bg.removeAttr("data-bg-height");
  89     }
  90 }
  91
  92 var responsiveImages = (function ($) {
  93     "use strict";
  94     return function (responsiveDesign) {
  95         $("img[width]").each(function () {
  96             var img = $(this), newWidth = "", newMaxWidth = "", newHeight = "";
  97             if (responsiveDesign.isResponsive) {
  98                 newWidth = "auto";
  99                 newHeight = "auto";
 100                 newMaxWidth = "100%";
 101
 102                 var widthAttr = img.attr("width");
 103                 if (widthAttr !== null && typeof (widthAttr) === "string" && widthAttr.indexOf("%") === -1) {
 104                     newWidth = "100%";
 105                     newMaxWidth = parseInt($.trim(widthAttr), 10) + "px";
 106                 }
 107             }
 108             img.css("width", newWidth).css("max-width", newMaxWidth).css("height", newHeight);
 109         });
 110     };
 111 })(jQuery);
 112
 113 var responsiveVideos = (function ($) {
 114     "use strict";
 115     return function (responsiveDesign) {
 116         $("iframe,object,embed").each(function () {
 117             var obj = $(this);
 118             var container = obj.parent(".art-responsive-embed");
 119             if (responsiveDesign.isResponsive) {
 120                 if (container.length !== 0)
 121                     return;
 122                 container = $("<div class=\"art-responsive-embed\">").insertBefore(obj);
 123                 obj.appendTo(container);
 124             } else if (container.length > 0) {
 125                 obj.insertBefore(container);
 126                 container.remove();
 127             }
 128         });
 129     };
 130 })(jQuery);
 131
 132 var responsiveTextblocks = (function ($) {
 133     "use strict";
 134     return function (slider, responsiveDesign) {
 135         slider.find(".art-textblock").each(function () {
 136             if (parseInt(slider.attr("data-width"), 10) === 0) {
 137                 return true;
 138             }
 139             var tb = $(this);
 140             var c = slider.width() / slider.attr("data-width");
 141             tb.css({
 142                 "height": "",
 143                 "width": "",
 144                 "top": "",
 145                 "margin-left": ""
 146             });
 147             if (responsiveDesign.isResponsive) {
 148                 var tbHeight = parseInt(tb.css("height"), 10);
 149                 var tbWidth = parseInt(tb.css("width"), 10);
 150                 var tbTop = parseInt(tb.css("top"), 10);
 151                 var tbMargin = parseInt(tb.css("margin-left"), 10);
 152                 tb.add(tb.children()).css({
 153                     "height": tbHeight * c,
 154                     "width": tbWidth * c
 155                 });
 156                 tb.css("top", tbTop * c);
 157                 tb.attr("style", function (i, s) { return s + "margin-left: " + (tbMargin * c) + "px !important"; });
 158             }
 159         });
 160     };
 161 })(jQuery);
 162
 163 var responsiveSlider = (function ($) {
 164     "use strict";
 165     return function (responsiveDesign) {
 166         $(".art-slider").each(function () {
 167             var s = $(this);
 168
 169             responsiveTextblocks(s, responsiveDesign);
 170
 171             if (!responsiveDesign.isResponsive) {
 172                 s.removeAttr("style");
 173                 return;
 174             }
 175
 176             // set size
 177             var initialWidth = s.attr("data-width");
 178             var initialHeight = s.attr("data-height");
 179             var c = s.width() / initialWidth;
 180             var h = c * initialHeight;
 181             s.css("height", h + "px");
 182
 183             // set slider
 184             var obj = s.data("slider");
 185             if (obj && obj.settings.helper) {
 186                 var inner = s.find(".art-slider-inner");
 187                 obj.settings.helper.updateSize(inner, { width: initialWidth, height: initialHeight });
 188             }
 189         });
 190     };
 191 })(jQuery);
 192
 193 var responsiveCollages = (function ($) {
 194     "use strict";
 195     return function (responsiveDesign) {
 196         $(".art-collage").each(function () {
 197             var collage = $(this);
 198             var parent = collage.closest(":not(.image-caption-wrapper, .art-collage)");
 199             var parentWidth = parent.width();
 200             var collageWidth = collage.width();
 201             var sliderOriginalWidth = collage.children(".art-slider").attr("data-width");
 202             if (responsiveDesign.isResponsive && collageWidth > parentWidth) {
 203                 collage
 204                     .add(collage.find(".art-slider"))
 205                     .add(collage.closest(".image-caption-wrapper"))
 206                     .css("width", "100%");
 207             } else if (!responsiveDesign.isResponsive || collageWidth > sliderOriginalWidth) {
 208                 collage
 209                     .add(collage.find(".art-slider"))
 210                     .add(collage.closest(".image-caption-wrapper"))
 211                     .css("width", "");
 212             }
 213         });
 214     };
 215 })(jQuery);
 216
 217 var responsiveNavigator = (function ($) {
 218     "use strict";
 219     return function (responsiveDesign) {
 220         $(".art-slider").each(function () {
 221             var slider = $(this);
 222             var sliderWidth = slider.width();
 223             var nav = slider.siblings(".art-slidenavigator");
 224             if (nav.length) {
 225                 if (responsiveDesign.isResponsive) {
 226                     // left offset
 227                     var left = nav.attr("data-left");
 228                     // (margin = containerWidth - (objectPosition + objectWidth)) < 0
 229                     var margin = sliderWidth - sliderWidth * parseFloat(left) / 100 - nav.outerWidth(false);
 230                     if (margin < 0) {
 231                         nav.css("margin-left", margin);
 232                     }
 233                     // top
 234                     var sliderHeight = slider.css("height");
 235                     // reset top to original value
 236                     nav.css("top", "");
 237                     // newTop = oldTop - (sliderOrinalHeight - sliderCurrentHeight)
 238                     var offset = parseInt(nav.attr("data-offset") || 0, 10);
 239                     nav.css("top", parseInt(nav.css("top"), 10) - (slider.attr("data-height") - parseInt(sliderHeight, 10)) + offset);
 240                 } else {
 241                     nav.removeAttr("data-offset");
 242                     nav.removeAttr("style");
 243                 }
 244             }
 245         });
 246     };
 247 })(jQuery);
 248
 249 jQuery(window).bind("responsive", (function ($) {
 250     "use strict";
 251     return function (event, responsiveDesign) {
 252         responsiveImages(responsiveDesign);
 253         responsiveVideos(responsiveDesign);
 254
 255         if ($.browser.msie && $.browser.version <= 8) return;
 256
 257         if (responsiveDesign.isResponsive) {
 258             $(window).on("responsiveResize.slider", function () {
 259                 responsiveSlideshow(responsiveDesign);
 260             });
 261         } else {
 262             $(window).trigger("responsiveResize.slider");
 263             $(window).off("responsiveResize.slider");
 264         }
 265     };
 266 })(jQuery));
 267
 268 function responsiveSlideshow(responsiveDesign) {
 269     "use strict";
 270     responsiveCollages(responsiveDesign); // must be first
 271     responsiveSlider(responsiveDesign);
 272     responsiveNavigator(responsiveDesign);
 273 }
 274
 275
 276
 277
 278
 279
 280 var responsiveHeader = (function ($) {
 281     "use strict";
 282     return function(responsiveDesign) {
 283         var header = $("header.art-header");
 284         var headerSlider = header.find(".art-slider");
 285
 286         if (headerSlider.length) {
 287             var firstSlide = headerSlider.find(".art-slide-item").first();
 288             var slidebg = firstSlide.css("background-image").split(",");
 289             var previousSibling = headerSlider.prev();
 290             var sliderNav = headerSlider.siblings(".art-slidenavigator");
 291             if (slidebg.length && responsiveDesign.isResponsive) {
 292                 header.css("background-image", slidebg[slidebg.length - 1]);
 293                 // if prev is menu in header
 294                 if (previousSibling.is("nav.art-nav")) {
 295                     sliderNav.attr("data-offset", previousSibling.height());
 296                 }
 297             } else {
 298                 sliderNav.removeAttr("data-offset");
 299                 header.removeAttr("style");
 300             }
 301         }
 302     };
 303 })(jQuery);
 304
 305 jQuery(window).bind("responsiveResize", (function ($) {
 306     "use strict";
 307     return function (event, responsiveDesign) {
 308         responsiveAbsBg(responsiveDesign, $(".art-header"), $("#art-header-bg"));
 309     };
 310 })(jQuery));
 311
 312 jQuery(window).bind("responsive", (function ($) {
 313     "use strict";
 314     return function (event, responsiveDesign) {
 315         if ($.browser.msie && $.browser.version <= 8) return;
 316
 317         if (responsiveDesign.isResponsive) {
 318             $(window).on("responsiveResize.header", function () {
 319                 responsiveHeader(responsiveDesign);
 320             });
 321         } else {
 322             $(window).trigger("responsiveResize.header");
 323             $(window).off("responsiveResize.header");
 324         }
 325     };
 326 })(jQuery));
 327
 328 var responsiveNavFit = (function ($) {
 329     "use strict";
 330     return function (responsiveDesign) {
 331         var nav = $("nav.art-nav");
 332         var isDesktopNav = true;
 333         var isResponsiveNav = false;
 334         if (responsiveDesign.isResponsive) {
 335             if (!nav.hasClass("responsive-nav")) {
 336                 var itemsWidth = 0;
 337                 var menu = nav.find(".art-hmenu");
 338                 menu.children("li").each(function() {
 339                     itemsWidth += $(this).outerWidth(true);
 340                 });
 341
 342                 if (menu.width() < itemsWidth || responsiveDesign.isPhone) {
 343                     nav.attr("data-restore-width", responsiveDesign.windowWidth).addClass("responsive-nav").removeClass("desktop-nav");
 344                     isResponsiveNav = true;
 345                     isDesktopNav = false;
 346                 }
 347             } else {
 348                 var desktopRestoreWidth = parseInt(nav.attr("data-restore-width"), 10) || 0;
 349                 if (desktopRestoreWidth !== 0 && responsiveDesign.windowWidth <= desktopRestoreWidth) {
 350                     isResponsiveNav = true;
 351                     isDesktopNav = false;
 352                 }
 353             }
 354         }
 355
 356         if (isDesktopNav) {
 357             nav.removeClass("responsive-nav").addClass("desktop-nav").removeAttr("data-restore-width");
 358         }
 359
 360         $(window).trigger("responsiveNav", {isDesktopNav: isDesktopNav, isResponsiveNav: isResponsiveNav});
 361     };
 362 })(jQuery);
 363
 364 jQuery(window).bind("responsiveResize", (function ($) {
 365     "use strict";
 366     return function (event, responsiveDesign) {
 367         responsiveAbsBg(responsiveDesign, $("nav.art-nav"), $("#art-hmenu-bg"));
 368         responsiveNavFit(responsiveDesign);
 369     };
 370 })(jQuery));
 371
 372
 373 var responsiveNav = (function ($) {
 374     "use strict";
 375     return function (responsiveDesign) {
 376         var nav = $("nav.art-nav"), header, headerMarginTop;
 377         if (responsiveDesign.isResponsive && nav.parents(".art-header").length > 0) {
 378             header = $(".art-header");
 379             var otherElement = header.children("*:not(nav.art-nav):first");
 380             if (otherElement.length > 0)
 381                 nav.insertBefore(otherElement);
 382         }
 383     };
 384 })(jQuery);
 385
 386 jQuery(window).bind("responsive", function (event, responsiveDesign) {
 387     "use strict";
 388     responsiveNav(responsiveDesign);
 389 });
 390
 391
 392
 393 var responsiveLayoutCell = (function ($) {
 394     "use strict";
 395     return function (responsiveDesign) {
 396         $(".art-content .art-content-layout-row,.art-footer .art-content-layout-row").each(function () {
 397             var row = $(this);
 398             var rowChildren = row.children(".art-layout-cell");
 399             if (rowChildren.length > 1) {
 400                 if (responsiveDesign.isTablet) {
 401                     rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
 402                         if ((i + 1) % 2 === 0) {
 403                             $(this).after("<div class=\"cleared responsive-cleared\">");
 404                         }
 405                     });
 406                 } else {
 407                     rowChildren.removeClass("responsive-tablet-layout-cell");
 408                     row.children(".responsive-cleared").remove();
 409                 }
 410             }
 411         });
 412     };
 413 })(jQuery);
 414
 415 jQuery(window).bind("responsive", function (event, responsiveDesign) {
 416     "use strict";
 417     responsiveLayoutCell(responsiveDesign);
 418 });
 419
 420
 421 var responsiveLayoutCell = (function ($) {
 422     "use strict";
 423     return function (responsiveDesign) {
 424         $(".art-content .art-content-layout-row,.art-footer .art-content-layout-row").each(function () {
 425             var row = $(this);
 426             var rowChildren = row.children(".art-layout-cell");
 427             if (rowChildren.length > 1) {
 428                 if (responsiveDesign.isTablet) {
 429                     rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
 430                         if ((i + 1) % 2 === 0) {
 431                             $(this).after("<div class=\"cleared responsive-cleared\">");
 432                         }
 433                     });
 434                 } else {
 435                     rowChildren.removeClass("responsive-tablet-layout-cell");
 436                     row.children(".responsive-cleared").remove();
 437                 }
 438             }
 439         });
 440     };
 441 })(jQuery);
 442
 443 jQuery(window).bind("responsive", function (event, responsiveDesign) {
 444     "use strict";
 445     responsiveLayoutCell(responsiveDesign);
 446 });
 447
 448
 449
 450
 451 jQuery(responsiveDesign.initialize);