//lets see if the panel will be off the screen
//get the actual width of the page and store it
- p.bodyWidth = window.outerWidth;
- var actualBodyWidth;
++ p.bodyWidth = window.innerWidth;
if (document.getElementsByClassName('row')[0]) {
- actualBodyWidth = document.getElementsByClassName('row')[0].clientWidth;
- } else {
- actualBodyWidth = window.innerWidth;
+ p.bodyWidth = document.getElementsByClassName('row')[0].clientWidth;
}
- var actualMarginWidth = (window.innerWidth - actualBodyWidth) / 2;
- var actualBoundary = actualBodyWidth;
-
- if (!this.hasClass('mega')) {
- //miss top
- if (t.offset().top <= this.outerHeight()) {
- p.missTop = true;
- actualBoundary = window.innerWidth - actualMarginWidth;
- p.leftRightFlag = true;
- }
+ return p;
+ },
+ _position_bottom : function(d,t,s,p) {
+ if(d.outerWidth() > t.outerWidth()) {
//miss right
- if (t.offset().left + this.outerWidth() > t.offset().left + actualMarginWidth && t.offset().left - actualMarginWidth > this.outerWidth()) {
- p.missRight = true;
- p.missLeft = false;
+ if (p.left + d.outerWidth() > p.bodyWidth) {
+ //miss left
+ if(p.left - (d.outerWidth() - t.outerWidth()) < 0) {
+ // set triggered right if the dropdown won't fit inside the first .row
+ // in either the left or right orientation.
+ p.triggeredRight = true;
+ p.missLeft = true;
+ } else {
+ p.missRight = true;
+ }
}
+ }
- //miss left
- if (t.offset().left - this.outerWidth() <= 0) {
- p.missLeft = true;
- p.missRight = false;
+ if (t.outerWidth() > d.outerWidth() && s.pip == 'center') {
+ p.offset = (t.outerWidth() - d.outerWidth()) / 2;
+ }
+ else if (p.triggeredRight) {
+ if(d.outerWidth() < p.bodyWidth) {
+ p.offset = (p.bodyWidth - p.left) - d.outerWidth();
+ } else {
+ p.offset = -p.left;
}
}
+ else if (p.missRight || self.rtl) {
+ p.offset = -d.outerWidth() + t.outerWidth();
+ } else {
+ p.offset = 0;
+ }
return p;
},
top : function (t, s) {
var self = Foundation.libs.dropdown,
- p = self.dirs._base.call(this, t);
+ p = self.dirs._base.call(this, t),
+ offsetTop = -this.outerHeight();
+
+ p = self.dirs._position_bottom(this,t,s,p);
this.addClass('drop-top');
-
+
- if (p.missTop == true) {
- p.top = p.top + t.outerHeight() + this.outerHeight();
+ //miss top
+ if (t.offset().top <= this.outerHeight()) {
+ p.missTop = true;
+ p.leftRightFlag = true;
this.removeClass('drop-top');
+ offsetTop = t.outerHeight();
}
- if (p.missRight == true) {
- p.left = p.left - this.outerWidth() + t.outerWidth();
- }
-
- if (t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) {
- self.adjust_pip(this, t, s, p);
- }
-
- if (Foundation.rtl) {
- return {left : p.left - this.outerWidth() + t.outerWidth(),
- top : p.top - this.outerHeight()};
+ if (self.rtl || t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) {
+ self.adjust_pip(this,t,s,p);
}
- return {left : p.left, top : p.top - this.outerHeight()};
+ return {left : p.left + p.offset, top : p.top + offsetTop};
},
bottom : function (t, s) {
},
right : function (t, s) {
- var p = Foundation.libs.dropdown.dirs._base.call(this, t);
+ var self = Foundation.libs.dropdown,
+ p = self.dirs._base.call(this, t);
+
+ p.offset = t.outerWidth();
this.addClass('drop-right');
-
+
- if (p.missRight == true) {
- p.left = p.left - this.outerWidth();
+ //miss right
+ if (p.left + this.outerWidth() + t.outerWidth() > p.bodyWidth) {
+ p.missRight = true;
+ p.missLeft = false;
p.top = p.top + t.outerHeight();
this.removeClass('drop-right');
+ p = self.dirs._position_bottom(this,t,s,p);
+ self.adjust_pip(this,t,s,p);
} else {
p.triggeredRight = true;
+ self.adjust_pip_vertical(this,t,s,p);
}
-
+
var self = Foundation.libs.dropdown;
- return {left : p.left + p.offset, top : p.top};
+ if (t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) {
+ self.adjust_pip(this, t, s, p);
+ }
+
+ return {left : p.left + t.outerWidth(), top : p.top};
}
},
// Insert rule to style psuedo elements
- adjust_pip : function (dropdown,target,settings,position) {
+ adjust_pip : function (dropdown, target, settings, position) {
var sheet = Foundation.stylesheet,
- pip_offset_base = 8 - position.offset;
+ pip_offset_base = 8;
if (dropdown.hasClass(settings.mega_class)) {
- pip_offset_base = position.left + (target.outerWidth() / 2) - 8;
- } else if (this.small()) {
- pip_offset_base += position.left - 8;
+ pip_offset_base = position.left + (target.outerWidth()/2) - 8;
+ }
+ else if (this.small()) {
+ pip_offset_base = position.left;
+ if (settings.pip == 'center') {
+ pip_offset_base += (target.outerWidth()/2) - 15;
+ }
+ }
+ else if (settings.pip == 'center') {
+ if(target.outerWidth() < dropdown.outerWidth()){
+ pip_offset_base = (target.outerWidth()/2) - position.offset - 7;
+ } else {
+ pip_offset_base = (dropdown.outerWidth()/2) - 7;
+ }
+ }
+ else if (position.missRight) {
+ pip_offset_base += target.outerWidth() - 30;
}
this.rule_idx = sheet.cssRules.length;
sel_after = '.f-dropdown.open:after',
css_before = 'left: ' + pip_offset_base + 'px;',
css_after = 'left: ' + (pip_offset_base - 1) + 'px;';
-
+
- if (position.missRight == true) {
- pip_offset_base = dropdown.outerWidth() - 23;
- sel_before = '.f-dropdown.open:before',
- sel_after = '.f-dropdown.open:after',
- css_before = 'left: ' + pip_offset_base + 'px;',
- css_after = 'left: ' + (pip_offset_base - 1) + 'px;';
+ if (sheet.insertRule) {
+ sheet.insertRule([sel_before, '{', css_before, '}'].join(' '), this.rule_idx);
+ sheet.insertRule([sel_after, '{', css_after, '}'].join(' '), this.rule_idx + 1);
+ } else {
+ sheet.addRule(sel_before, css_before, this.rule_idx);
+ sheet.addRule(sel_after, css_after, this.rule_idx + 1);
}
+ },
+
+ adjust_pip_vertical : function (dropdown,target,settings,position) {
+ var sheet = Foundation.stylesheet,
+ pip_offset_base = 10,
+ pip_halfheight = 14;
- //just a case where right is fired, but its not missing right
- if (position.triggeredRight == true) {
- sel_before = '.f-dropdown.open:before',
- sel_after = '.f-dropdown.open:after',
- css_before = 'left:-12px;',
- css_after = 'left:-14px;';
+ if (settings.pip == 'center') {
+ pip_offset_base = (target.outerHeight() - pip_halfheight) / 2;
}
+ this.rule_idx = sheet.cssRules.length;
+
+ //default
+ var sel_before = '.f-dropdown.open:before',
+ sel_after = '.f-dropdown.open:after',
+ css_before = 'top: ' + pip_offset_base + 'px;',
+ css_after = 'top: ' + (pip_offset_base - 1) + 'px;';
+
if (sheet.insertRule) {
sheet.insertRule([sel_before, '{', css_before, '}'].join(' '), this.rule_idx);
sheet.insertRule([sel_after, '{', css_after, '}'].join(' '), this.rule_idx + 1);