Fun w/jQuery UI's Dialog Box

by deanpeters

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://www.mcclatchydc.com/mistatic/javascripts/MI.js"></script>
<script src="http://www.mcclatchydc.com/mistatic/javascripts/MI_Cookie.js"></script>
<script src="http://www.mcclatchydc.com/mistatic/javascripts/ceebox.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<h2>My Test</h2>
<div id="ceebox-container"></div>
<p>End of Test</p>

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
 


<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
 

<script id="tablet-iphone-ads" type="text/html">
    <div>
        <p>Did you know {{siteName}} offers a free app that delivers real-time breaking news and content specifically designed for your {{deviceType}}?</p>
        <p>You can download and install it now from the {{storeName}}.</p>
    </div>
</script>

CSS

.ui-dialog-buttonpane button .ui-button-text {
   font-size: 75%;
}

JavaScript

var calloutData = {
   "name": "McClatchy DC",
   "callout": {
      "ipad": {
         "adCopy": "Did you know McClatchy DC offers a free app that delivers real-time breaking news and content specifically designed for your iPad?",
         "callToAction": "You can download and install it now from the iTunes Store.",
         "storeUrl": "http://foo.bar.com",
         "yesButton": "Download the iPad App Now",
         "noButton": "No Thank You"
      },
      "android": {
         "adCopy": "Did you know McClatchy DC offers a free app that delivers real-time breaking news and content specifically designed for your Android Tablet?",
         "callToAction": "You can download and install it now from Google Play.",
         "storeUrl": "http://foo.bar.com",
         "yesButton": "Download the Android Tablet App Now",
         "noButton": "No Thank You"
      }
   }
}
console.log("calloutData => ", calloutData.callout.ipad);


var base = ({});
base.timeStamp = Math.round(new Date().getTime()/60000);//epoch minutes
base.cookieName = 'mi_tablet_nag';
base.cookie = new mi.Cookie(document, base.cookieName);
base.cookie.load();
base.cookie['last-response'] = false;
base.cookie['last-response-time'] = base.timeStamp;
base.cookie['last-response-count'] = 0;
base.cookie.store();

var app = mi.App();
// mi.loadPageInfo();
// mi.viewConfs();
console.log("base ==> ", app);

var foo = function(arg) {
    console.log("FOO!", arg);
}


base.siteName = "The News Tribune";
base.deviceType =  "iPad";
base.storeName = "iTunes Store";


var myDiag = $("#tablet-iphone-ads").html();
$myDiag = $(myDiag
           .replace('{{siteName}}', base.siteName)
           .replace('{{deviceType}}', base.deviceType)
           .replace('{{storeName}}', base.storeName));
// console.log("myT ==> ", myDiag,...