{"id":705,"date":"2009-05-18T12:35:18","date_gmt":"2009-05-18T18:35:18","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=705"},"modified":"2015-02-25T12:47:55","modified_gmt":"2015-02-25T18:47:55","slug":"getting-flexcal-to-work-with-the-theme-switcher","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/05\/18\/getting-flexcal-to-work-with-the-theme-switcher\/","title":{"rendered":"Getting <code>flexcal<\/code> to Work With the Theme Switcher"},"content":{"rendered":"<p>Just checking. No reason it shouldn't work with the jQuery UI <a href=\"https:\/\/github.com\/harborhoffer\/Super-Theme-Switcher\">themeswitcher<\/a>. The slot machine animation has a white background, which looks off with some themes. The text color for the dates unfortunately is (by the CSS specificity rules) overridden by the <em>blog's<\/em> text color, so dark themes are near unreadable.<\/p>\r\n<script type=\"text\/javascript\"\r\n  src=\"\/inc\/themeswitcher\/jquery.themeswitcher.js\">\r\n<\/script>\r\n<script src=\"\/inc\/jquery.ui.subclass.js\"><\/script>\r\n<script src=\"\/inc\/jquery.textpopup.js\"><\/script>\r\n<script src=\"\/inc\/jquery.flexcal.js\"><\/script>\r\n<script>\r\n  $('<link rel=stylesheet href=\"\/inc\/flexcal.css\" \/>').appendTo('head');\r\n<\/script>\r\n<script type=\"text\/javascript\" src=\"\/inc\/jquery.cycle.all.min.js\"><\/script>\r\n<script>\r\n$.widget('bililite.inlineflexcal', $.bililite.flexcal, {\r\n  _init: function(){\r\n    this.show();\r\n  },\r\n  options: {\r\n    position: {at: 'top', my: 'top'},\r\n    trigger: '',\r\n  }, \r\n  show: function(){\r\n    this._super();\r\n    this.element.height(this.box().height());\r\n  },\r\n  commit: function(d){\r\n\tthis.d = d;\r\n\tthis.box().find('td a').removeClass('ui-state-active');\r\n\tthis.box().find('td a[rel=\"'+$.bililite.flexcal.date2string(d)+'\"]').addClass('ui-state-active');\r\n\tthis.element.val(this.format(d));\r\n\tthis._trigger('commit', 0, d);\r\n  }\r\n});\r\n\r\n\/\/ largely copied from the $.fn.cycle code \r\nfunction cycle(opts) { \r\n    var curr = opts.elements.eq(opts.currSlide), next = opts.elements.eq(1-opts.currSlide), fwd = !(opts.rev ^ opts.l10n.isRTL); \r\n    opts.lastSlide = opts.currSlide; \/\/ shuffle needs to know this \r\n    opts.slideCount = 2; \r\n    opts.cssAfter = { left: 0, top: 0 , opacity: 1}; \r\n    opts.cssBefore = opts.animIn = opts.animOut = {}; \r\n    opts.speedIn = opts.speedIn || opts.speed, \r\n    opts.speedOut = opts.speedOut || opts.speed, \r\n    opts.easeIn = opts.easeIn || opts.easing, \r\n    opts.easeOut = opts.easeOut || opts.easing; \r\n    $.fn.cycleW = opts.$cont.width(); $.fn.cycleH = opts.$cont.height(); \/\/ hack to fool the cycle transitions \r\n    $.fn.cycle.transitions[opts.fx](opts.$cont, opts.elements, opts); \/\/ set up the transition. fx must be a valid transition name \r\n    $.each(opts.before, function(i,o) { \r\n        o.apply(next, [curr, next, opts, fwd]); \r\n    }); \r\n  \/\/ stage the after callacks \r\n    var after = function() { \r\n        $.each(opts.after, function(i,o) { \r\n            o.apply(next, [curr, next, opts, fwd]); \r\n        }); \r\n    }; \r\n \r\n    if (opts.fxFn){ \/\/ fx function provided? \r\n        opts.fxFn(curr, next, opts, after, fwd); \r\n    }else{ \r\n        next.css(opts.cssBefore); \r\n        var fn = function() { \r\n            next.animate(opts.animIn, opts.speedIn, opts.easeIn, after) \r\n        }; \r\n        curr.animate(opts.animOut, opts.speedOut, opts.easeOut, function() { \r\n            curr.css(opts.cssAfter); \r\n            if (!opts.sync) fn(); \r\n        }); \r\n        if (opts.sync) fn(); \r\n    } \r\n}; \r\n\r\n$(document).ready(function(){\r\n\r\n$('#inlineslots').inlineflexcal({\r\n\ttransition: function(o){ \r\n\t\tvar pane = o.elements.eq(1-o.currSlide), origTable = pane.find('table');\r\n\t\to.elements.eq(o.currSlide).css({zIndex: 1}).animate({top: -o.$cont.height()}, 'normal', 'easeInBack');\r\n\t\tpane.css({top: o.$cont.height(), zIndex: 2}).show().animate({top: 0}, 'normal', 'easeInBack', function(){\r\n\t\t\t\/\/ make two identical tables without headers and position them correctly (lined up with the bottom)\r\n\t\t\tvar spinners = tableSpinners (origTable, o.gif);\r\n\t\t\tvar tables = origTable.clone().add(origTable.clone()).appendTo(pane).\r\n\t\t\t\tfind('caption').remove().end().\r\n\t\t\t\tcss({bottom: 0 , marginBottom: 0, zIndex: 101}).hide();\r\n\t\t\tfunction dropOne(){\r\n\t\t\t\tif (spinners.length == 0){\r\n\t\t\t\t\ttables.remove();\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tvar spinner = spinners.eq(Math.floor(Math.random()*spinners.length));\r\n\t\t\t\tvar h = spinner.height();\r\n\t\t\t\tvar left = spinner.offset().left - origTable.offset().left;\r\n\t\t\t\tvar right = left + spinner.width();\r\n\t\t\t\tspinners = spinners.not(spinner.remove());\r\n\t\t\t\torigTable.animate({foo: 0}, { \/\/ the {foo:0} seems necessary because we need to animate some property, even if it isn't real\r\n\t\t\t\t\tduration: o.duration,\r\n\t\t\t\t\teasing: 'easeOutElastic',\r\n\t\t\t\t\tstep: function(now, fx){\r\n\t\t\t\t\t\tif (fx.state == 0){\r\n\t\t\t\t\t\t\ttables.show();\r\n\t\t\t\t\t\t\tfx.start = now = 0; \r\n\t\t\t\t\t\t\tfx.end = 3*h; \r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\ttables.eq(0).css(offsetColumn(right, left, h, now));\r\n\t\t\t\t\t\ttables.eq(1).css(offsetColumn(right, left, h, now-h));\r\n\t\t\t\t\t},\r\n\t\t\t\t\tcomplete: dropOne\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tsetTimeout (dropOne, o.duration);\r\n\t\t})\r\n\t}, \r\n\tspeed: 0,\r\n\thideOnOutsideClick: false,\r\n\ttransitionOptions: {\r\n\t\tduration: 1500,\r\n\t\tgif: '\/images\/ani-bw.gif'\r\n\t}\r\n});\r\n\r\nfunction tableSpinners(t, gif){\r\n\tvar topRow = t.find('tr:first td, tr:first th'), botRow = t.find('tr:last td'), ret = [];\r\n\tfor(var i = 0; i < topRow.length; ++i){\r\n\t\tvar topCell = topRow.eq(i), botCell = botRow.eq(i);\r\n\t\tret.push($('<img>').appendTo('body').css(topCell.offset()).\r\n\t\t\tcss({\r\n\t\t\t\tpaddingTop: '2px',\r\n\t\t\t\tpaddingBottom: '2px',\r\n\t\t\t\tposition: 'absolute', \r\n\t\t\t\twidth: botCell.outerWidth(true), \r\n\t\t\t\t\/\/ hack to avoid Firefox table height bug\r\n\t\t\t\theight: t.find('tbody').height()+t.find('thead').height(),\r\n\t\t\t\tzIndex: 101\r\n\t\t\t}).\r\n\t\t\tattr('src', gif)[0]);\r\n\t}\r\n\treturn $(ret);\r\n}\r\n\r\n\/\/ create a css object with bottom = b and clip set to rect(0 r h l) pixels, with\r\n\/\/ the top and bottom of that rect offset by b so the clip rect is fixed on the screen\r\n\/\/ and offsetting b if it is out of the range -h..h\r\nfunction offsetColumn (r, l, h, b){\r\n\tb = b%(2*h)-h; \/\/ move b into range\r\n\treturn {bottom: b, clip: ['rect(',b,'px ',r,'px ',b+h,'px ',l,'px)'].join('')};\r\n}\r\n\r\nvar opts = {\r\n\ttransition: cycle,\r\n\ttransitionOptions: {fx: 'fade', sync: true, speed: 600},\r\n\thideOnOutsideClick: false,\r\n\tspeed: 0,\r\n\tcalendars: ['First', 'Second']\r\n};\r\n\r\n$('<label> Sync: <input type=\"checkbox\" checked=\"checked\"><\/label>').insertBefore('#flexcalcycle').bind('change', function(){\r\n\topts.transitionOptions.sync = !!$(this).find('input').attr('checked');\r\n\t$('#flexcalcycle').inlineflexcal('destroy').inlineflexcal(opts);\t\r\n});\r\n\r\nvar easingSelect = $('<select>;').insertBefore('#flexcalcycle').bind('change', function(){\r\n\topts.transitionOptions.easing = $(this).val();\r\n\t$('#flexcalcycle').inlineflexcal('destroy').inlineflexcal(opts);\t\r\n});\r\nfor (var e in $.easing){\r\n\teasingSelect.append($('<option>').text(e));\r\n};\r\nvar fxSelect = $('<select>').insertBefore('#flexcalcycle').bind('change', function(){\r\n\topts.transitionOptions.fx = $(this).val();\r\n\t$('#flexcalcycle').inlineflexcal('destroy').inlineflexcal(opts);\t\r\n});\r\nfor (var t in $.fn.cycle.transitions){\r\n\tfxSelect.append($('<option>').text(t));\r\n};\r\n\r\n$('#flexcalcycle').inlineflexcal(opts);\r\n$('#flexcalcycle, #inlineslots').inlineflexcal('show')\r\n$('#switcher').themeswitcher({\r\n  imgpath: '\/inc\/themeswitcher\/images\/',\r\n  onSelect: function() { $('#flexcalcycle, #inlineslots').inlineflexcal('hide').inlineflexcal('show')}\r\n});\r\n\r\n});\r\n\r\n<\/script>\r\n<div id=\"switcher\"><\/div>\r\n<h4>Slot Machine Transition<\/h4>\r\n<div id=\"inlineslots\"><\/div>\r\n<h4>Cycle Transitions<\/h4>\r\n<div id=\"flexcalcycle\"><\/div>\r\n","protected":false},"excerpt":{"rendered":"Just checking. No reason it shouldn't work with the jQuery UI themeswitcher. The slot machine animation has a white background, which looks off with some themes. The text color for the dates unfortunately is (by the CSS specificity rules) overridden by the blog's text color, so dark themes are near unreadable. Slot Machine Transition Cycle [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/705"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":112,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":3521,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions\/3521"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}