Permalink
Browse files

Merge branch 'open-source-site' of https://github.com/mobify/mobifyjs

…into open-source-site
  • Loading branch information...
mobifydave committed Aug 1, 2012
2 parents bfa5b5d + ddc1679 commit 3c474bf5db1c681d18c62b211c0614f6d24b406f
@@ -4,74 +4,99 @@ var Mobify = window.Mobify = window.Mobify || {}
, $ = Mobify.$ = Mobify.$ || window.$ || window.Zepto || window.jQuery;
// This prefix is inserted before all class references for conflict avoidance.
-// For example, default close class will be m-close. You can override this property
-// globally by setting it on Mobify.UI object. You can also override it per-invocation
-// by passing an alternate value inside options object:
+// For example, default close class will be m-close. You can override this
+// property globally by setting it on Mobify.UI object. You can also override
+// it per-invocation by passing an alternate value inside options object:
// $('...').zoomable({classPrefix: 'qb-'})
Mobify.UI = Mobify.UI || { classPrefix: 'm-' };
var $ = window.Mobify ? Mobify.$ : window.$;
Mobify.UI.Zoomable = (function() {
var defaults = {
- stage: undefined // Element inside which zoomed in content should be rendered. Defaults to document body.
- , classNames: { // Look for (or generate) elements with these class names.
- zooming : 'zooming'
- , close : 'close'
- , control: 'zoomableControl'
- , canvas: 'zoomableCanvas'
- , thumb: 'zoomableThumb'
- , full: 'zoomableFull'
- }
- , ratio: 2.0 // Viewport width is multiplied by this value to determine zoomed in width
- , seekImage: true // Ascend DOM level from trigger element to find nearest image to use as thumbnail. If set to false, no ascent would take place, and only images within initial context will be considered.
- , clickCloses: true // Whether clicking anywhere on zoomed in image will stop zooming
- , activationEvent: 'click' // Override to use alternate event for all zoomable control interactions
- , canvasStyle: { // Default style applied to canvas. Overriding replaces the whole object.
- position: 'absolute'
- , width: '100%'
- , height: '100%'
- , overflow: 'auto'
- }
- , imageStyle: { // Default style applied to images within canvas. Overriding replaces the whole object.
- position: 'absolute'
- , top: '0'
- , left: '0'
- , maxWidth: 'none'
- , maxHeight: 'none'
- }
- , stageHTML: function() { // Generator for HTML of zoomed in view. If overriding, you can call old function via Mobify.UI.Zoomable.defaults.stageHTML.call(this)
- return '<div class="' + this._getClass('canvas') + '"><img class="'
- + this._getClass('thumb') + '"><img class="'
- + this._getClass('full') + '"></div>';
- }
- , globalStyle: function() { // Generator for global CSS (ignored if zoomable content injected into non-body element). If overriding, you can call old function via Mobify.UI.Zoomable.defaults.globalStyle.call(this)
- var zooming = '.' + this._getClass('zooming');
- return zooming + ' { overflow: hidden; }'
- + zooming + ' > * { display: none !important; }'
- + zooming + ' > .' + this._getClass('control') + ' { display: block !important; }';
- }
- };
-
- var Zoomable = function(element, options) {
- this.options = $.extend({}, Zoomable.defaults, options);
- this.options.classNames = $.extend(defaults.classNames, this.options.classNames);
- this.options.imageStyle.width = 100 * this.options.ratio + '%';
- if (!this.options.stage) {
- this.options.stage = $('body');
- this.options.global = true;
+ // Element inside which zoomed in content should be rendered.
+ // Defaults to the document body.
+ stage: undefined
+ // Look for (or generate) elements with these class names.
+ , classNames: {
+ zooming : 'zooming'
+ , close : 'close'
+ , control: 'zoomableControl'
+ , canvas: 'zoomableCanvas'
+ , thumb: 'zoomableThumb'
+ , full: 'zoomableFull'
+ }
+ // Viewport width is multiplied by this value to determine zoomed in width.
+ , ratio: 2.0
+ // Ascend DOM level from trigger element to find nearest image to use
+ // as thumbnail. If set to false, no ascent would take place, and only
+ // images within initial context will be considered.
+ , seekImage: true
+ // Whether clicking anywhere on zoomed in image will stop zooming.
+ , clickCloses: true
+ // Override to use alternate event for all zoomable control interactions.
+ , activationEvent: 'click'
+ // Default style applied to canvas. Overriding replaces the whole object.
+ , canvasStyle: {
+ position: 'absolute'
+ , width: '100%'
+ , height: '100%'
+ , overflow: 'auto'
+ }
+ // Default style applied to images within canvas. Overriding replaces the whole object.
+ , imageStyle: {
+ position: 'absolute'
+ , top: '0'
+ , left: '0'
+ , maxWidth: 'none'
+ , maxHeight: 'none'
+ }
+ // Generator for HTML of zoomed in view. If overriding, you can call
+ // the old function via Mobify.UI.Zoomable.defaults.stageHTML.call(this)
+ , stageHTML: function() {
+ return '<div class="' + this._getClass('canvas') + '"><img class="'
+ + this._getClass('thumb') + '"><img class="'
+ + this._getClass('full') + '"></div>';
+ }
+ // Generator for global CSS (ignored if zoomable content injected into
+ // non-body element). If overriding, you can call old function via
+ // Mobify.UI.Zoomable.defaults.globalStyle.call(this)
+ , globalStyle: function() {
+ var zooming = '.' + this._getClass('zooming');
+ return zooming + ' { overflow: hidden; }'
+ + zooming + ' > * { display: none !important; }'
+ + zooming + ' > .' + this._getClass('control') + ' { display: block !important; }';
+ }
}
- this.$element = $(element);
- this.bind();
- };
+ // stage: where the thing is inserted
+ // element: the zoomable
+
+ , Zoomable = function(element, options) {
+ this.options = $.extend({}, Zoomable.defaults, options);
+ this.options.classNames = $.extend(defaults.classNames, this.options.classNames);
+ this.options.imageStyle.width = 100 * this.options.ratio + '%';
+
+ // If no stage was proivded, use the body.
+ if (!this.options.stage) {
+ this.options.stage = $('body');
+ this.options.global = true;
+ }
+
+ this.$element = $(element);
+ this.bind();
+ };
Zoomable.defaults = defaults;
Zoomable.prototype.unbind = function() {
return this.bind(true);
};
+ /**
+ * Construct the elements for the module.
+ *
+ */
Zoomable.prototype.makeElems = function() {
this.$stage = this.options.stage;
this.$canvas = $(this.options.stageHTML.call(this)).addClass(this._getClass('control'));
@@ -80,12 +105,25 @@ Mobify.UI.Zoomable = (function() {
this.$thumb = this.$canvas.find('.' + this._getClass('thumb')).css(this.options.imageStyle);
this.$full = this.$canvas.find('.' + this._getClass('full')).css(this.options.imageStyle);
- if (this.options.clickCloses) this.$canvas.first().addClass(this._getClass('close'));
+ if (this.options.clickCloses) {
+ this.$canvas.first().addClass(this._getClass('close'));
+ }
if (this.options.global) {
if (!$('style[data-zoomable="' + this._getClass('zooming') + '"]').length) {
- var style = document.createElement('style');
- style.innerHTML = this.options.globalStyle.call(this);
+
+ var style = document.createElement('style')
+ , css = this.options.globalStyle.call(this);
+
+ // Yes, we really need to do this for IE8.
+ style.setAttribute('type', 'text/css');
+
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+
$('head')[0].appendChild(style);
}
} else {
@@ -113,17 +151,23 @@ Mobify.UI.Zoomable = (function() {
this.$element.trigger('close.zoomable');
};
- Zoomable.prototype.open = function(ev) {
- ev.preventDefault();
+ Zoomable.prototype.open = function(event) {
+ event.preventDefault();
if (this.isOpen) return;
this.isOpen = true;
this.$element.trigger('opening.zoomable');
if (!this.$stage) this.makeElems();
- var leftRatio = 0.5, topRatio = 0.5, $img = $(ev.target), $link, $parent, src;
- if (ev.target.tagName !== "IMG") {
+ var leftRatio = 0.5
+ , topRatio = 0.5
+ , $img = $(event.target)
+ , $link
+ , $parent
+ , src;
+
+ if (event.target.tagName !== "IMG") {
var $parents = this.$element;
if (this.options.seekImage) {
$parents = $parents.add(this.$element.parents());
@@ -137,15 +181,18 @@ Mobify.UI.Zoomable = (function() {
}
}
} else {
- leftRatio = ev.offsetX / $img.prop('offsetWidth');
- topRatio = ev.offsetY / $img.prop('offsetHeight');
+ leftRatio = event.offsetX / $img.prop('offsetWidth');
+ topRatio = event.offsetY / $img.prop('offsetHeight');
}
$link = $img.filter('[href]').add($img.parent('[href]'));
src = $link.attr('href') || $img.attr('src');
this.$thumb.attr('src', $img.attr('src'));
this.$full.attr('src', src);
- if (this.options.global) this.oldScrollTop = document.body.scrollTop;
+
+ if (this.options.global) {
+ this.oldScrollTop = document.body.scrollTop;
+ }
this.$stage.append(this.$canvas);
this.$stage.addClass(this._getClass('zooming'));
@@ -166,8 +213,6 @@ Mobify.UI.Zoomable = (function() {
thus.$element.trigger('open.zoomable');
})
-
-
};
Zoomable.prototype.bindClose = function(op) {
@@ -23,19 +23,23 @@
<li><a href="{{ site.baseurl }}/modules/accordion/#methods">Methods</a></li>
<li><a href="{{ site.baseurl }}/modules/accordion/#browser-compatibility">Browser Compatibility</a></li>
</ul>
- </li>
- <li>
+ </li>
+ <!--
+
+ <li>
<a href="{{ site.baseurl }}/modules/zoomable">Zoomable</a>
<ul class="hide-inactive">
- <li><a href="{{ site.baseurl }}/modules/zoomable-examples">Examples</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#usage">Usage</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable-examples/">Examples</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#methods">Methods</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#configuration">Configuration</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#classes">Classes</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#default-styles">Default Styles</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#events">Events</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#limitations">Limitations</a></li>
</ul>
- </li>
+ </li>
+
+ -->
</ul>
</div>
{% endactive_links %}
@@ -21,12 +21,17 @@ <h3>Accordion</h3>
<p>An expanding accordion menu for two-level nav systems.</p>
</a>
</li>
+ <!--
+
<li class="zoomable">
<a href="{{ site.baseurl }}/modules/zoomable">
<h3>Zoomable</h3>
- <p>{description needed}</p>
+ <p>A module for showing and panning through large images in a touchscreen-friendly way.</p>
</a>
</li>
+
+ -->
+
<!--
<li class="coming-soon">
View
@@ -31,30 +31,30 @@ A configurable rotating content carousel for displaying images or
arbitrary content.
<div class="m-carousel m-carousel-example-4 m-center m-fluid">
- <div class="m-carousel-inner">
- <div class="m-item">
- <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
- </div>
- <div class="m-item">
- <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
- </div>
- <div class="m-item">
- <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
- </div>
- <div class="m-item">
- <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+ <div class="m-carousel-inner">
+ <div class="m-item">
+ <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+ </div>
+ <div class="m-item">
+ <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+ </div>
+ <div class="m-item">
+ <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+ </div>
+ <div class="m-item">
+ <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+ </div>
+ <div class="m-item">
+ <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+ </div>
</div>
- <div class="m-item">
- <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+ <div class="m-carousel-controls m-carousel-bulleted">
+ <a href="#" data-slide="1">1</a>
+ <a href="#" data-slide="2">2</a>
+ <a href="#" data-slide="3">3</a>
+ <a href="#" data-slide="4">4</a>
+ <a href="#" data-slide="5">5</a>
</div>
- </div>
- <div class="m-carousel-controls m-carousel-bulleted">
- <a class="carousel-control right" href="#myCarousel" data-slide="1">1</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="2">2</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="3">3</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="4">4</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="5">5</a>
- </div>
</div>
<div class="btn-container">
View
@@ -7,12 +7,11 @@ title: Mobify.js Modules
A library of customizable user interface modules built for mobile-first
and tested across a wide range of devices, while also providing a seamless
-desktop experience. They can be used as standalone components or with any
+desktop experience. They can be used standalone or or with a
Mobify.js-powered site.
-All modules require either the [Zepto](http://zeptojs.com/) or [jQuery](http://jquery.com/) library.
-
-All modules available on [GitHub](https://github.com/mobify/mobifyjs/modules) and published under an [MIT license]({{ site.baseurl }}/license/):
-
-
+All modules require either the [Zepto](http://zeptojs.com/) or
+[jQuery](http://jquery.com/) JavaScript libraries.
+All modules available on [GitHub](https://github.com/mobify/mobifyjs)
+and published under an [MIT license]({{ site.baseurl }}/license/):
Oops, something went wrong.

0 comments on commit 3c474bf

Please sign in to comment.