1jQuery(document).ready(function($){ 2 3 MB_BUTTON_STYLES = []; 4 5 MB_BASIC_STYLES = JSON.parse(mbp_button_styles.basic); 6 MB_PREMIUM_STYLES = JSON.parse(mbp_button_styles.premium); 7 MB_CUSTOM_STYLES = JSON.parse((mbp_button_styles.custom && mbp_button_styles.custom != 'null') ? mbp_button_styles.custom : '[]'); 8 9 MB_BUTTON_STYLES = MB_BASIC_STYLES.concat(MB_PREMIUM_STYLES).concat(MB_CUSTOM_STYLES); 10 11 12 MBRenderer = function(){ 13 14 var self = this; 15 16 self.getPresetSettingsByName = function(preset){ 17 var buttonStyle = $.grep(MB_BUTTON_STYLES, function(buttonStyle){ 18 return buttonStyle.name.toLowerCase() == preset.toLowerCase(); 19 }); 20 21 if(buttonStyle && buttonStyle[0]){ 22 return buttonStyle[0].settings; 23 } 24 else{ 25 return false; 26 } 27 } 28 29 self.renderButtonStylesOnPage = function(){ 30 31 var buttonElements = $('.mb-button'); 32 33 var styleBlock = self.getStyleBlockForButtonElements(buttonElements, 'mb-styles'); 34 var fontBlock = self.getFontBlockForButtonElements(buttonElements, 'mb-fonts'); 35 36 //remove current style block if already exists 37 if($('#mb-styles')){ 38 $('#mb-styles').remove(); 39 } 40 //remove current font block if already exists 41 if($('#mb-fonts')){ 42 $('#mb-fonts').remove(); 43 } 44 45 //Entire Page 46 $('head').append(styleBlock); 47 $('head').append(fontBlock); 48 } 49 50 self.renderButtonStylesInTinyMCE = function(){ 51 52 var allIframeElementsOnPage = $('iframe'); 53 54 $.each(allIframeElementsOnPage, function(index, element){ 55 56 var iframe = $(element); 57 58 if( 59 ( 60 iframe && 61 iframe.attr('src') && 62 iframe.attr('src').indexOf('http://') == -1 && 63 iframe.attr('src').indexOf('https://') == -1 && 64 iframe.attr('src').indexOf('.com') == -1 && 65 iframe.attr('src').indexOf('.org') == -1 && 66 iframe.attr('src').indexOf('.net') == -1 && 67 iframe.attr('src').indexOf('.co') == -1 && 68 iframe.attr('src').indexOf('.io') == -1 &&/*not an extensive list, but should suffice especially with http and https also there*/ 69 iframe.attr('src').indexOf('chrome-extension') == -1 70 ) || 71 (iframe && !iframe.attr('src')) 72 ){ 73 74 //iframe's domain is local or it doesn't have a domain/src tag 75 //find buttons & set up styles for this iframe 76 77 var buttonElements = iframe.contents().find('.mb-button'); 78 79 var styleBlock = self.getStyleBlockForButtonElements(buttonElements, 'mb-tiny-mce-styles'); 80 var fontBlock = self.getFontBlockForButtonElements(buttonElements, 'mb-tiny-mce-fonts'); 81 82 //remove current style block if already exists 83 if(iframe.contents().find('#mb-tiny-mce-styles')){ 84 iframe.contents().find('#mb-tiny-mce-styles').remove(); 85 } 86 //remove current font block if already exists 87 if(iframe.contents().find('#mb-tiny-mce-styles')){ 88 iframe.contents().find('#mb-tiny-mce-fonts').remove(); 89 } 90 91 //IFrame 92 iframe.contents().find('head').append(styleBlock); 93 iframe.contents().find('head').append(fontBlock); 94 95 } 96 }); 97 } 98 99 self.renderButtonStylesInContainer = function(containerName){ 100 var buttonElements = $("#" + containerName + ' .mb-button'); 101 102 var styleBlock = self.getStyleBlockForButtonElements(buttonElements, containerName + '-styles'); 103 var fontBlock = self.getFontBlockForButtonElements(buttonElements, containerName + '-fonts'); 104 105 //remove current style block if already exists 106 if($('#' + containerName + '-styles')){ 107 $('#' + containerName + '-styles').remove(); 108 } 109 //remove current font block if already exists 110 if($('#' + containerName + '-fonts')){ 111 $('#' + containerName + '-fonts').remove(); 112 } 113 114 //MBModal 115 $('head').append(styleBlock); 116 $('head').append(fontBlock); 117 } 118 119 self.getFontBlockForButtonElements = function(buttonElements, fontBlockId){ 120 121 var buttonFonts = ''; 122 123 $.each(buttonElements, function(index, buttonElement){ 124 125 var font; 126 var weight; 127 128 //if button is preset style 129 if($(buttonElement).attr('mb-data-preset')){ 130 var presetStyles = self.getPresetSettingsByName($(buttonElement).attr('mb-data-preset')); 131 132 font = presetStyles.textFont; 133 weight = presetStyles.textFontWeight; 134 } 135 else{ 136 /*If font or weight isn't specified, return*/ 137 if(!$(buttonElement).attr('mb-data-text-font') || !$(buttonElement).attr('mb-data-text-font-we
137ight')){ 138 return true; 139 } 140 141 font = $(buttonElement).attr('mb-data-text-font'); 142 weight = $(buttonElement).attr('mb-data-text-font-weight'); 143 } 144 145 if(!font || !weight){ 146 return true; 147 } 148 149 //replace spaces with "+" to format correctly for google fonts script 150 font = font.replace(' ', '+'); 151 152 buttonFonts += font + ':' + weight + '|'; 153 }); 154 155 //if button fonts is blank, add Open+Sans to prevent throwing error on page 156 if(buttonFonts == ''){ 157 buttonFonts += 'Open+Sans:400|'; 158 } 159 160 var subsets = (mbp_settings && mbp_settings.extended_language_support == 'enable') ? 'latin,latin-ext' : 'latin'; 161 162 return "<link id=" + (fontBlockId ? fontBlockId : 'mb-fonts') + " href='//fonts.googleapis.com/css?family=" + buttonFonts + "&subset=" + subsets + "' rel='stylesheet' type='text/css'>"; 163 } 164 self.getStyleBlockForButtonElements = function(buttonElements, styleBlockId){ 165 166 var buttons = []; 167 168 $.each(buttonElements, function(index, button){ 169 170 var jQueryButton = $(button); 171 172 var newButton = {}; 173 174 newButton.id = jQueryButton.attr('id'); 175 newButton.element = button; 176 177 /*If loading from preset, use the preset's styles*/ 178 if(jQueryButton.attr('mb-data-preset')){ 179 180 newButton.preset = jQueryButton.attr('mb-data-preset'); 181 182 var presetStyles = self.getPresetSettingsByName(jQueryButton.attr('mb-data-preset')); 183 184 newButton.primaryColor = presetStyles.primaryColor; 185 newButton.secondaryColor = presetStyles.secondaryColor; 186 newButton.backgroundStyle = presetStyles.backgroundStyle; 187 newButton.borderStyle = presetStyles.borderStyle; 188 newButton.textFont = presetStyles.textFont; 189 newButton.textFontWeight = presetStyles.textFontWeight; 190 newButton.lineHeight = presetStyles.lineHeight; 191 newButton.letterSpacing = presetStyles.letterSpacing; 192 } 193 else{ 194 newButton.primaryColor = jQueryButton.attr('mb-data-primary-color'); 195 newButton.secondaryColor = jQueryButton.attr('mb-data-secondary-color'); 196 newButton.backgroundStyle = jQueryButton.attr('mb-data-background-style'); 197 newButton.borderStyle = jQueryButton.attr('mb-data-border-style'); 198 newButton.textFont = jQueryButton.attr('mb-data-text-font'); 199 newButton.textFontWeight = jQueryButton.attr('mb-data-text-font-weight'); 200 newButton.lineHeight = jQueryButton.attr('mb-data-line-height'); 201 newButton.letterSpacing = jQueryButton.attr('mb-data-letter-spacing'); 202 } 203 204 //this is set regardless of if button is preset or custom 205 newButton.buttonWidthType = jQueryButton.attr('mb-data-button-width-type'); 206 newButton.buttonWidthAmount = jQueryButton.attr('mb-data-button-width-amount'); 207 208 buttons.push(newButton); 209 210 }); 211 212 var styleBlock = '<style id="' + (styleBlockId ? styleBlockId : 'mb-styles') + '">'; 213 214 $.each(buttons, function(index, button){ 215 /*Default Styles*/ 216 217 /*If button doesn't have ID, we have no way off associating the styles w/ this button. return before adding anything to style block.*/ 218 if(!button.id){ 219 return; 220 } 221 222 /*Normal Styles*/ 223 styleBlock += '#' + button.id + '{'; 224 styleBlock += self.getStylesForButon(button, 'normal'); 225 styleBlock += '}' 226 227 /*Hovered Styles*/ 228 styleBlock += '#' + button.id + ':hover{'; 229 styleBlock += self.getStylesForButon(button, 'hover'); 230 styleBlock += '}'; 231 }); 232 233 styleBlock += '</style>'; 234 235 return styleBlock; 236 } 237 238 /*Get the normal state style block text for a button*/ 239 self.getStylesForButon = function(button, state){ 240 241 var styles = ''; 242 243 if(button.backgroundStyle || true){//ALWAYS APPLY BACKGROUND STYLE
244 styles += self.getCSSForBackgroundStyle(button.backgroundStyle, state, button.primaryColor, button.secondaryColor); 245 } 246 if(button.borderStyle){ 247 styles += self.getCSSForBorderStyle(button.borderStyle, button.primaryColor, button.secondaryColor); 248 } 249 if(button.textFont){ 250 styles += self.getCSSForTextFont(button.textFont); 251 } 252 if(button.textFontWeight){ 253 styles += self.getCSSForTextFontWeight(button.textFontWeight); 254 } 255 if(button.shadowStyle){ 256 styles += self.getCSSForShadowStyle(button.shadowStyle); 257 } 258 if(button.lineHeight){ 259 styles += self.getCSSForLineHeight(button.lineHeight); 260 } 261 if(button.letterSpacing){ 262 styles += self.getCSSForLetterSpacing(button.letterSpacing); 263 } 264 if(button.buttonWidthType){ 265 styles += self.getCSSForButtonWidth(button.buttonWidthType, button.buttonWidthAmount); 266 } 267 268 return styles; 269 } 270 271 /*Get the hover state style block text for a button*/ 272 self.getHoverStateStylesForButon = function(button){ 273 if(button.preset){ 274 //get all modifications from JS, then apply 275 } 276 else{ 277 //apply all modifications individually 278 if(button.backgroundStyle){
279 return self.getHoverCSSForBackgroundStyle(button.backgroundStyle, button.primaryColor, button.secondaryColor); 280 } 281 } 282 } 283 284 self.getCSSForTextFont = function(textFont){ 285 return 'font-family: "' + textFont + '";'; 286 } 287 self.getCSSForTextFontWeight = function(textFontWeight){ 288 return 'font-weight:' + parseInt(textFontWeight) + ';'; 289 } 290 self.getCSSForLineHeight = function(lineHeight){ 291 return 'line-height: ' + lineHeight + ';'; 292 } 293 self.getCSSForLetterSpacing = function(letterSpacing){ 294 return 'letter-spacing: ' + letterSpacing + 'em;'; 295 } 296 self.getCSSForButtonWidth = function(buttonWidthType, buttonWidthAmount){ 297 298 if(!buttonWidthType || buttonWidthType == 'Auto'){ 299 return ''; 300 } 301 else if(buttonWidthType == 'Full Width'){ 302 return 'width:100%;box-sizing:border-box;margin:0 !important;text-align:center;'; 303 } 304 else if(buttonWidthType == 'Fixed'){ 305 var amount = ''; 306 307 if(buttonWidthAmount.indexOf('%') > -1){ 308 amount = buttonWidthAmount; 309 } 310 else if(buttonWidthAmount.indexOf('px') > -1){ 311 amount = buttonWidthAmount; 312 } 313 else{ 314 amount = parseInt(buttonWidthAmount) ? (parseInt(buttonWidthAmount) + 'px') : '100%'; 315 } 316 317 return 'width: ' + amount + ';box-sizing:border-box;margin:0 !important;text-align:center;'; 318 319 } 320 else{ 321 return ''; 322 } 323 } 324 325 //Available Styles: traditional, minimal, raised 326 self.getCSSForBorderStyle = function(borderStyle){ 327 if(borderStyle == 'thick'){ 328 return self.getCSSForBorderStyleThick(); 329 } 330 else if(borderStyle == 'thin'){ 331 return self.getCSSForBorderStyleThin(); 332 } 333 else if(borderStyle == 'bottom'){ 334 return self.getCSSForBorderStyleBottom(); 335 } 336 else{ 337 return '' 338 } 339 } 340 341 self.getCSSForBorderStyleThick = function(){ 342 var css = ''; 343 344 css += 'border:.20em solid rgba(0,0,0,.05);'; 345 css += 'border-top:.10em solid rgba(255,255,255,.10);'; 346 347 return css; 348 } 349 self.getCSSForBorderStyleThin = function(){ 350 var css = ''; 351 352 css += 'border:.10em solid rgba(0,0,0,.20);'; 353 354 return css; 355 } 356 self.getCSSForBorderStyleBottom = function(){ 357 var css = ''; 358 359 css += 'border-bottom:.20em solid rgba(0,0,0,.25);'; 360 361 //can't do this because it messes up the "to bottom right" angled gradient 362 //css += 'border-top:.20em solid transparent;';//to offset bottom padding for border 363 364 return css; 365 } 366 367 368 //Available Styles: traditional, under, minimal, uniform 369 self.getCSSForShadowStyle = function(shadowStyle){ 370 if(shadowStyle == 'traditional'){ 371 return self.getCSSForShadowStyleTraditional(); 372 } 373 else if(shadowStyle == 'under'){ 374 return self.getCSSForShadowStyleUnder(); 375 } 376 else if(shadowStyle == 'minimal'){ 377 return self.getCSSForShadowStyleMinimal(); 378 } 379 else if(shadowStyle == 'uniform'){ 380 return self.getCSSForShadowStyleUniform(); 381 } 382 else{ 383 return '' 384 } 385 } 386 387 self.getCSSForShadowStyleTraditional = function(){ 388 return 'box-shadow: .1em .1em .5em .1em rgba(0,0,0,.25);'; 389 } 390 self.getCSSForShadowStyleUnder = function(){ 391 return 'box-shadow: 0 .4em .4em -.2em rgba(0,0,0,.25);'; 392 } 393 self.getCSSForShadowStyleMinimal = function(){ 394 return 'box-shadow: 0 .1em #FFFFFF inset, 0 .1em .3em rgba(34, 25, 25, 0.4);'; 395 //return 'box-shadow: .1em .1em .5em .1em rgba(0,0,0,.25);'; 396 } 397 self.getCSSForShadowStyleUniform = function(){ 398 return 'box-shadow: 0 0 .2em 0 #B3B3B3;'; 399 return 'box-shadow: .1em .1em .5em .1em rgba(0,0,0,.25);'; 400 } 401 402 //Available Styles: solid, lineargradient, topheavygradient, angledgradient, radialgradient
403 self.getCSSForBackgroundStyle = function(backgroundStyle, state, primaryColor, secondaryColor){ 404 if(backgroundStyle == 'solid' || backgroundStyle == '' || !backgroundStyle){ 405 return self.getCSSForBackgroundStylePlain(state, primaryColor); 406 } 407 else if(backgroundStyle == 'lineargradient'){ 408 return self.getCSSForBackgroundStyleLinearGradient(state, primaryColor, secondaryColor); 409 } 410 else if(backgroundStyle == 'lineargloss'){ 411 return self.getCSSForBackgroundStyleLinearGloss(state, primaryColor, secondaryColor); 412 } 413 else if(backgroundStyle == 'topheavygradient'){ 414 return self.getCSSForBackgroundStyleTopHeavyGradient(state, primaryColor, secondaryColor); 415 } 416 else if(backgroundStyle == 'angledgradient'){ 417 return self.getCSSForBackgroundStyleAngledGradient(state, primaryColor, secondaryColor); 418 } 419 else if(backgroundStyle == 'angledgloss'){ 420 return self.getCSSForBackgroundStyleAngledGloss(state, primaryColor, secondaryColor); 421 } 422 else if(backgroundStyle == 'outline'){ 423 return self.getCSSForBackgroun
423dStyleOutline(state, primaryColor); 424 } 425 else{ 426 return ''; 427 } 428 } 429 430 self.getCSSForBackgroundStylePlain = function(state, primaryColor){ 431 var css = ''; 432 433 if(state == 'normal'){ 434 css += 'background: linear-gradient(to bottom,' + primaryColor + ', ' + primaryColor + ');'; 435 } 436 else if(state == 'hover'){ 437 css += 'background: linear-gradient(to bottom,' + self.adjustColor(primaryColor, -5) + ', ' + self.adjustColor(primaryColor, -5) + ');'; 438 } 439 440 return css; 441 } 442 443 self.getCSSForBackgroundStyleAngledGradient = function(state, primaryColor, secondaryColor){ 444 445 var css = ''; 446 447 if(state == 'normal'){ 448 css += 'background: -webkit-linear-gradient(to bottom right,' + primaryColor + ',' + secondaryColor + ');'; 449 css += 'background: linear-gradient(to bottom right,' + primaryColor + ', ' + secondaryColor + ');'; 450 } 451 else if(state == 'hover'){ 452 css += 'background: -webkit-linear-gradient(to bottom right,' + self.adjustColor(primaryColor, -5) + ',' + self.adjustColor(secondaryColor, -5) + ');'; 453 css += 'background: linear-gradient(to bottom right,' + self.adjustColor(primaryColor, -5) + ', ' + self.adjustColor(secondaryColor, -5) + ');'; 454 } 455 456 return css; 457 } 458
459 self.getCSSForBackgroundStyleAngledGloss = function(state, primaryColor, secondaryColor){ 460 461 var css = ''; 462 463 if(state == 'normal'){ 464 css += 'background: linear-gradient(to bottom right,' + primaryColor + ' 0%, ' + self.adjustColor(primaryColor, 20) + ' 50%, ' + self.adjustColor(primaryColor, 15) + ' 51%, ' + secondaryColor + ' 100%);'; 465 } 466 else if(state == 'hover'){ 467 css += 'background: linear-gradient(to bottom right,' + self.adjustColor(primaryColor, -5) + ' 0%, ' + self.adjustColor(primaryColor, 15) + ' 50%, ' + self.adjustColor(primaryColor, 10) + ' 51%, ' + self.adjustColor(secondaryColor, -5) + ' 100%);'; 468 } 469 470 return css; 471 } 472 473 self.getCSSForBackgroundStyleLinearGradient = function(state, primaryColor, secondaryColor){ 474 var css = ''; 475 476 if(state == 'normal'){ 477 css += 'background: -webkit-linear-gradient(' + primaryColor + ',' + secondaryColor + ');' /* Chrome10+,Safari5.1+ */ 478 css += 'background: linear-gradient(' + primaryColor + ', ' + secondaryColor + ');'; 479 } 480 else if(state == 'hover'){ 481 css += 'background: -webkit-linear-gradient(' + self.adjustColor(primaryColor, -5) + ',' + self.adjustColor(secondaryColor, -5) + ');' /* Chrome10+,Safari5.1+ */ 482 css += 'background: linear-gradient(' + self.adjustColor(primaryColor, -5) + ', ' + self.adjustColor(secondaryColor, -5) + ');'; 483 } 484 485 return css; 486 } 487
488 self.getCSSForBackgroundStyleLinearGloss = function(state, primaryColor, secondaryColor){ 489 490 var css = ''; 491 492 if(state == 'normal'){ 493 css += 'background: linear-gradient(to bottom,' + self.adjustColor(primaryColor, 10) + ' 0%, ' + self.adjustColor(primaryColor, 0) + ' 50%, ' + self.adjustColor(primaryColor, -5) + ' 51%, ' + secondaryColor + ' 100%);'; 494 } 495 else if(state == 'hover'){ 496 css += 'background: linear-gradient(to bottom,' + self.adjustColor(primaryColor, 5) + ' 0%, ' + self.adjustColor(primaryColor, -5) + ' 50%, ' + self.adjustColor(primaryColor, -10) + ' 51%, ' + self.adjustColor(secondaryColor, -5) + ' 100%);'; 497 } 498 499 return css; 500 } 501 502 self.getCSSForBackgroundStyleTopHeavyGradient = function(state, primaryColor, secondaryColor){ 503 var css = ''; 504 505 if(state == 'normal'){ 506 css += 'background: -webkit-linear-gradient(top,' + primaryColor + ' 50%,' + secondaryColor + ' 100%);'; /* W3C */ 507 } 508 else if(state == 'hover'){ 509 css += 'background: -webkit-linear-gradient(top,' + self.adjustColor(primaryColor, -5) + ' 50%,' + self.adjustColor(secondaryColor, -5) + ' 100%);'; /* W3C */ 510 } 511 512 513 return css; 514 } 515 516 self.getHoverCSSForAngledGradient = function(primaryColor, secondaryColor){ 517 518 var css = ''; 519 520 css += 'background: -webkit-linear-gradient(160deg,' + self.adjustColor(primaryColor, -5) + ',' + self.adjustColor(secondaryColor, -5) + ');' /* Chrome10+,Safari5.1+ */ 521 css += 'background: linear-gradient(160deg,' + self.adjustColor(primaryColor, -5) + ', ' + self.adjustColor(secondaryColor, -5) + ');'; 522 523 return css; 524 } 525
526 self.getCSSForBackgroundStyleOutline = function(state, primaryColor){ 527 var css = ''; 528 529 if(state == 'normal'){ 530 css += 'background:transparent !important;'; 531 css += 'color: ' + primaryColor + ' !important;'; 532 css += 'border:.15em solid ' + primaryColor + ';'; 533 } 534 else if(state == 'hover'){ 535 css += 'background:transparent !important;'; 536 css += 'color: ' + self.adjustColor(primaryColor, 10) + ' !important;'; 537 css += 'border:.15em solid ' + self.adjustColor(primaryColor, 10) + ';'; 538 } 539 540 return css; 541 } 542 543 /*http://www.sitepoint.com/javascript-generate-lighter-darker-color/*/ 544 self.adjustColor = function(hex, percentage){ 545 // validate hex string 546 hex = String(hex).replace(/[^0-9a-f]/gi, ''); 547 if (hex.length < 6) { 548 hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; 549 } 550 percentage = percentage || 0; 551 552 // convert to decimal and change luminosity 553 var rgb = "#", c, i; 554 for (i = 0; i < 3; i++) { 555 c = parseInt(hex.substr(i*2,2), 16); 556 c = Math.round(Math.min(Math.max(0, c + (c * (percentage / 100))), 255)).toString(16); 557 rgb += ("00"+c).substr(c.length); 558 } 559 560 return rgb; 561 } 562 563 return self; 564 } 565 566 mbr = new MBRenderer(); 567 568 mbr.renderButtonStylesOnPage(); 569 570 //This is called by TinyMCE afterRender function 571 //mbr.renderButtonStylesInTinyMCE(); 572 573 //This is called when needed 574 //mbr.renderButtonStylesInModal(); 575 576});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.