@pimaonline/pimaonline-themepack 2.1.5
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +113 -0
- package/dist/css/main.css +1 -0
- package/dist/css/plugins/font-awesome.css +1 -0
- package/dist/css/routes.css +3 -0
- package/dist/img/theme-images/culinary/black-marble.png +0 -0
- package/dist/img/theme-images/culinary/concrete-light.png +0 -0
- package/dist/img/theme-images/culinary/dark-marble.png +0 -0
- package/dist/img/theme-images/culinary/steel-stainless-rotate.jpg +0 -0
- package/dist/img/theme-images/culinary/wood.jpg +0 -0
- package/dist/img/theme-images/health-information-tech/hit-bkg.jpg +0 -0
- package/dist/img/theme-images/journalism/bg.jpg +0 -0
- package/dist/img/theme-images/machine/bg-diamond-plate.jpg +0 -0
- package/dist/img/theme-images/music/half_note.svg +5 -0
- package/dist/img/theme-images/music/music_brackets.png +0 -0
- package/dist/img/theme-images/music/treble-cleft.png +0 -0
- package/dist/img/theme-images/resort/fleur-de-lis.png +0 -0
- package/dist/img/theme-images/resort/flourish-left.svg +32 -0
- package/dist/img/theme-images/resort/flourish-main.svg +37 -0
- package/dist/img/theme-images/resort/flourish-right.svg +31 -0
- package/dist/img/theme-images/resort/hotel-wallpaper.png +0 -0
- package/dist/img/theme-images/resort/separator.svg +15 -0
- package/dist/img/theme-images/resort/stripes-light.png +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-calendar.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-desk-with-laptop.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-empty-classroom.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-empty-road.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-fingers-interacting-tablet.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-fingers-typing.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-hand-signing-document.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-student-shopping.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-students-on-computer.jpg +0 -0
- package/dist/img/theme-images/theme-banners/bannerimage-students-on-grass.jpg +0 -0
- package/dist/img/theme-images/widgets/separator.svg +17 -0
- package/dist/img/theme-images/writing/bg-composition-notebook.jpg +0 -0
- package/dist/img/theme-images/writing/bg-writing.jpg +0 -0
- package/dist/js/jumpTo.js +4 -0
- package/dist/js/scripts.js +209 -0
- package/dist/js/scripts2.js +205 -0
- package/dist/plugins/fancybox/_notes/dwsync.xml +1 -0
- package/dist/plugins/fancybox/blank.gif +0 -0
- package/dist/plugins/fancybox/fancybox-example.html +52 -0
- package/dist/plugins/fancybox/fancybox.css +73 -0
- package/dist/plugins/fancybox/fancybox_loading.gif +0 -0
- package/dist/plugins/fancybox/fancybox_loading@2x.gif +0 -0
- package/dist/plugins/fancybox/fancybox_overlay.png +0 -0
- package/dist/plugins/fancybox/fancybox_sprite.png +0 -0
- package/dist/plugins/fancybox/fancybox_sprite@2x.png +0 -0
- package/dist/plugins/fancybox/helpers/_notes/dwsync.xml +1 -0
- package/dist/plugins/fancybox/helpers/fancybox_buttons.png +0 -0
- package/dist/plugins/fancybox/helpers/jquery.fancybox-buttons.css +97 -0
- package/dist/plugins/fancybox/helpers/jquery.fancybox-buttons.js +122 -0
- package/dist/plugins/fancybox/helpers/jquery.fancybox-media.js +201 -0
- package/dist/plugins/fancybox/helpers/jquery.fancybox-thumbs.css +55 -0
- package/dist/plugins/fancybox/helpers/jquery.fancybox-thumbs.js +165 -0
- package/dist/plugins/fancybox/jquery.fancybox.css +275 -0
- package/dist/plugins/fancybox/jquery.fancybox.js +2018 -0
- package/dist/plugins/fancybox/jquery.fancybox.pack.js +46 -0
- package/dist/plugins/flashcards/README.md +135 -0
- package/dist/plugins/flashcards/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/config.rb +24 -0
- package/dist/plugins/flashcards/css/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/css/style.css +216 -0
- package/dist/plugins/flashcards/flashcards-example.html +66 -0
- package/dist/plugins/flashcards/images/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/images/icon-back.svg +1 -0
- package/dist/plugins/flashcards/images/icon-flip.svg +1 -0
- package/dist/plugins/flashcards/images/icon-next.svg +1 -0
- package/dist/plugins/flashcards/index.html +90 -0
- package/dist/plugins/flashcards/js/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/js/flash_cards.min.js +12 -0
- package/dist/plugins/flashcards/js/plugins/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/js/plugins/flash_cards.js +62 -0
- package/dist/plugins/flashcards/js/plugins/jquery.cycle.js +1148 -0
- package/dist/plugins/flashcards/js/vendor/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/js/vendor/jquery-1.7.2.js +9404 -0
- package/dist/plugins/flashcards/js/vendor/jquery-1.7.2.min.js +4 -0
- package/dist/plugins/flashcards/js/vendor/modernizr-2.5.3.min.js +4 -0
- package/dist/plugins/flashcards/resources/fonts/flash_cards/_notes/dwsync.xml +1 -0
- package/dist/plugins/flashcards/resources/fonts/flash_cards/flash_cards.eot +0 -0
- package/dist/plugins/flashcards/resources/fonts/flash_cards/flash_cards.svg +21 -0
- package/dist/plugins/flashcards/resources/fonts/flash_cards/flash_cards.ttf +0 -0
- package/dist/plugins/flashcards/resources/fonts/flash_cards/flash_cards.woff +0 -0
- package/dist/plugins/floating-particles/floating-particles.js +68 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-brands-400.eot +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-brands-400.svg +3570 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-brands-400.ttf +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-brands-400.woff +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-brands-400.woff2 +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-regular-400.eot +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-regular-400.svg +803 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-regular-400.ttf +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-regular-400.woff +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-regular-400.woff2 +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-solid-900.eot +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-solid-900.svg +4700 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-solid-900.ttf +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-solid-900.woff +0 -0
- package/dist/plugins/font-awesome-icons/webfonts/fa-solid-900.woff2 +0 -0
- package/dist/plugins/global-homepage-overrides/global-homepage-overrides.css +539 -0
- package/dist/plugins/global-homepage-overrides/global-homepage-overrides.html +18 -0
- package/dist/plugins/global-homepage-overrides/global-homepage-overrides.js +53 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-advising.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-apps.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-counseling.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-d2l.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-email.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-nettutor.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-register.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-research-help.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-survey.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-tech-support.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-testing-center.png +0 -0
- package/dist/plugins/global-homepage-overrides/img/quicklinks-icons/ql-tutoring.png +0 -0
- package/dist/plugins/preview-banner/preview-banner.css +126 -0
- package/dist/plugins/preview-banner/preview-banner.html +17 -0
- package/dist/plugins/preview-banner/preview-banner.js +57 -0
- package/package.json +44 -0
@@ -0,0 +1,46 @@
|
|
1
|
+
/*! fancyBox v2.1.7 fancyapps.com | fancyapps.com/fancybox/#license */
|
2
|
+
(function(t,J,f,x){var L=f("html"),q=f(t),p=f(J),b=f.fancybox=function(){b.open.apply(this,arguments)},K=navigator.userAgent.match(/msie/i),D=null,u=J.createTouch!==x,v=function(a){return a&&a.hasOwnProperty&&a instanceof f},r=function(a){return a&&"string"===f.type(a)},G=function(a){return r(a)&&0<a.indexOf("%")},m=function(a,c){var d=parseInt(a,10)||0;c&&G(a)&&(d*=b.getViewport()[c]/100);return Math.ceil(d)},y=function(a,b){return m(a,b)+"px"};f.extend(b,{version:"2.1.7",defaults:{padding:15,margin:20,
|
3
|
+
width:800,height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,pixelRatio:1,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!u,fitToView:!0,aspectRatio:!1,topRatio:.5,leftRatio:.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},
|
4
|
+
keys:{next:{13:"left",34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
|
5
|
+
(K?' allowtransparency="true"':"")+"></iframe>",error:'<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',closeBtn:'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',next:'<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',prev:'<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>',loading:'<div id="fancybox-loading"><div></div></div>'},openEffect:"fade",
|
6
|
+
openSpeed:250,openEasing:"swing",openOpacity:!0,openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",nextEffect:"elastic",nextSpeed:250,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:250,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:!0,title:!0},onCancel:f.noop,beforeLoad:f.noop,afterLoad:f.noop,beforeShow:f.noop,afterShow:f.noop,beforeChange:f.noop,beforeClose:f.noop,afterClose:f.noop},group:{},opts:{},
|
7
|
+
previous:null,coming:null,current:null,isActive:!1,isOpen:!1,isOpened:!1,wrap:null,skin:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(a,c){if(a&&(f.isPlainObject(c)||(c={}),!1!==b.close(!0)))return f.isArray(a)||(a=v(a)?f(a).get():[a]),f.each(a,function(d,e){var k={},g,l,h,n,m;"object"===f.type(e)&&(e.nodeType&&(e=f(e)),v(e)?(k={href:e.data("fancybox-href")||e.attr("href"),title:f("<div/>").text(e.data("fancybox-title")||
|
8
|
+
e.attr("title")||"").html(),isDom:!0,element:e},f.metadata&&f.extend(!0,k,e.metadata())):k=e);g=c.href||k.href||(r(e)?e:null);l=c.title!==x?c.title:k.title||"";n=(h=c.content||k.content)?"html":c.type||k.type;!n&&k.isDom&&(n=e.data("fancybox-type"),n||(n=(n=e.prop("class").match(/fancybox\.(\w+)/))?n[1]:null));r(g)&&(n||(b.isImage(g)?n="image":b.isSWF(g)?n="swf":"#"===g.charAt(0)?n="inline":r(e)&&(n="html",h=e)),"ajax"===n&&(m=g.split(/\s+/,2),g=m.shift(),m=m.shift()));h||("inline"===n?g?h=f(r(g)?
|
9
|
+
g.replace(/.*(?=#[^\s]+$)/,""):g):k.isDom&&(h=e):"html"===n?h=g:n||g||!k.isDom||(n="inline",h=e));f.extend(k,{href:g,type:n,content:h,title:l,selector:m});a[d]=k}),b.opts=f.extend(!0,{},b.defaults,c),c.keys!==x&&(b.opts.keys=c.keys?f.extend({},b.defaults.keys,c.keys):!1),b.group=a,b._start(b.opts.index)},cancel:function(){var a=b.coming;a&&!1===b.trigger("onCancel")||(b.hideLoading(),a&&(b.ajaxLoad&&b.ajaxLoad.abort(),b.ajaxLoad=null,b.imgPreload&&(b.imgPreload.onload=b.imgPreload.onerror=null),a.wrap&&
|
10
|
+
a.wrap.stop(!0,!0).trigger("onReset").remove(),b.coming=null,b.current||b._afterZoomOut(a)))},close:function(a){b.cancel();!1!==b.trigger("beforeClose")&&(b.unbindEvents(),b.isActive&&(b.isOpen&&!0!==a?(b.isOpen=b.isOpened=!1,b.isClosing=!0,f(".fancybox-item, .fancybox-nav").remove(),b.wrap.stop(!0,!0).removeClass("fancybox-opened"),b.transitions[b.current.closeMethod]()):(f(".fancybox-wrap").stop(!0).trigger("onReset").remove(),b._afterZoomOut())))},play:function(a){var c=function(){clearTimeout(b.player.timer)},
|
11
|
+
d=function(){c();b.current&&b.player.isActive&&(b.player.timer=setTimeout(b.next,b.current.playSpeed))},e=function(){c();p.unbind(".player");b.player.isActive=!1;b.trigger("onPlayEnd")};!0===a||!b.player.isActive&&!1!==a?b.current&&(b.current.loop||b.current.index<b.group.length-1)&&(b.player.isActive=!0,p.bind({"onCancel.player beforeClose.player":e,"onUpdate.player":d,"beforeLoad.player":c}),d(),b.trigger("onPlayStart")):e()},next:function(a){var c=b.current;c&&(r(a)||(a=c.direction.next),b.jumpto(c.index+
|
12
|
+
1,a,"next"))},prev:function(a){var c=b.current;c&&(r(a)||(a=c.direction.prev),b.jumpto(c.index-1,a,"prev"))},jumpto:function(a,c,d){var e=b.current;e&&(a=m(a),b.direction=c||e.direction[a>=e.index?"next":"prev"],b.router=d||"jumpto",e.loop&&(0>a&&(a=e.group.length+a%e.group.length),a%=e.group.length),e.group[a]!==x&&(b.cancel(),b._start(a)))},reposition:function(a,c){var d=b.current,e=d?d.wrap:null,k;e&&(k=b._getPosition(c),a&&"scroll"===a.type?(delete k.position,e.stop(!0,!0).animate(k,200)):(e.css(k),
|
13
|
+
d.pos=f.extend({},d.dim,k)))},update:function(a){var c=a&&a.originalEvent&&a.originalEvent.type,d=!c||"orientationchange"===c;d&&(clearTimeout(D),D=null);b.isOpen&&!D&&(D=setTimeout(function(){var e=b.current;e&&!b.isClosing&&(b.wrap.removeClass("fancybox-tmp"),(d||"load"===c||"resize"===c&&e.autoResize)&&b._setDimension(),"scroll"===c&&e.canShrink||b.reposition(a),b.trigger("onUpdate"),D=null)},d&&!u?0:300))},toggle:function(a){b.isOpen&&(b.current.fitToView="boolean"===f.type(a)?a:!b.current.fitToView,
|
14
|
+
u&&(b.wrap.removeAttr("style").addClass("fancybox-tmp"),b.trigger("onUpdate")),b.update())},hideLoading:function(){p.unbind(".loading");f("#fancybox-loading").remove()},showLoading:function(){var a,c;b.hideLoading();a=f(b.opts.tpl.loading).click(b.cancel).appendTo("body");p.bind("keydown.loading",function(a){27===(a.which||a.keyCode)&&(a.preventDefault(),b.cancel())});b.defaults.fixed||(c=b.getViewport(),a.css({position:"absolute",top:.5*c.h+c.y,left:.5*c.w+c.x}));b.trigger("onLoading")},getViewport:function(){var a=
|
15
|
+
b.current&&b.current.locked||!1,c={x:q.scrollLeft(),y:q.scrollTop()};a&&a.length?(c.w=a[0].clientWidth,c.h=a[0].clientHeight):(c.w=u&&t.innerWidth?t.innerWidth:q.width(),c.h=u&&t.innerHeight?t.innerHeight:q.height());return c},unbindEvents:function(){b.wrap&&v(b.wrap)&&b.wrap.unbind(".fb");p.unbind(".fb");q.unbind(".fb")},bindEvents:function(){var a=b.current,c;a&&(q.bind("orientationchange.fb"+(u?"":" resize.fb")+(a.autoCenter&&!a.locked?" scroll.fb":""),b.update),(c=a.keys)&&p.bind("keydown.fb",
|
16
|
+
function(d){var e=d.which||d.keyCode,k=d.target||d.srcElement;if(27===e&&b.coming)return!1;d.ctrlKey||d.altKey||d.shiftKey||d.metaKey||k&&(k.type||f(k).is("[contenteditable]"))||f.each(c,function(c,k){if(1<a.group.length&&k[e]!==x)return b[c](k[e]),d.preventDefault(),!1;if(-1<f.inArray(e,k))return b[c](),d.preventDefault(),!1})}),f.fn.mousewheel&&a.mouseWheel&&b.wrap.bind("mousewheel.fb",function(c,e,k,g){for(var d=f(c.target||null),h=!1;d.length&&!(h||d.is(".fancybox-skin")||d.is(".fancybox-wrap"));)h=
|
17
|
+
(h=d[0])&&!(h.style.overflow&&"hidden"===h.style.overflow)&&(h.clientWidth&&h.scrollWidth>h.clientWidth||h.clientHeight&&h.scrollHeight>h.clientHeight),d=f(d).parent();0!==e&&!h&&1<b.group.length&&!a.canShrink&&(0<g||0<k?b.prev(0<g?"down":"left"):(0>g||0>k)&&b.next(0>g?"up":"right"),c.preventDefault())}))},trigger:function(a,c){var d,e=c||b.coming||b.current;if(e){f.isFunction(e[a])&&(d=e[a].apply(e,Array.prototype.slice.call(arguments,1)));if(!1===d)return!1;e.helpers&&f.each(e.helpers,function(c,
|
18
|
+
d){if(d&&b.helpers[c]&&f.isFunction(b.helpers[c][a]))b.helpers[c][a](f.extend(!0,{},b.helpers[c].defaults,d),e)})}p.trigger(a)},isImage:function(a){return r(a)&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSWF:function(a){return r(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(a){var c={},d,e;a=m(a);d=b.group[a]||null;if(!d)return!1;c=f.extend(!0,{},b.opts,d);d=c.margin;e=c.padding;"number"===f.type(d)&&(c.margin=[d,d,d,d]);"number"===f.type(e)&&(c.padding=
|
19
|
+
[e,e,e,e]);c.modal&&f.extend(!0,c,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,mouseWheel:!1,keys:null,helpers:{overlay:{closeClick:!1}}});c.autoSize&&(c.autoWidth=c.autoHeight=!0);"auto"===c.width&&(c.autoWidth=!0);"auto"===c.height&&(c.autoHeight=!0);c.group=b.group;c.index=a;b.coming=c;if(!1===b.trigger("beforeLoad"))b.coming=null;else{e=c.type;d=c.href;if(!e)return b.coming=null,b.current&&b.router&&"jumpto"!==b.router?(b.current.index=a,b[b.router](b.direction)):!1;b.isActive=!0;if("image"===
|
20
|
+
e||"swf"===e)c.autoHeight=c.autoWidth=!1,c.scrolling="visible";"image"===e&&(c.aspectRatio=!0);"iframe"===e&&u&&(c.scrolling="scroll");c.wrap=f(c.tpl.wrap).addClass("fancybox-"+(u?"mobile":"desktop")+" fancybox-type-"+e+" fancybox-tmp "+c.wrapCSS).appendTo(c.parent||"body");f.extend(c,{skin:f(".fancybox-skin",c.wrap),outer:f(".fancybox-outer",c.wrap),inner:f(".fancybox-inner",c.wrap)});f.each(["Top","Right","Bottom","Left"],function(a,b){c.skin.css("padding"+b,y(c.padding[a]))});b.trigger("onReady");
|
21
|
+
if("inline"===e||"html"===e){if(!c.content||!c.content.length)return b._error("content")}else if(!d)return b._error("href");"image"===e?b._loadImage():"ajax"===e?b._loadAjax():"iframe"===e?b._loadIframe():b._afterLoad()}},_error:function(a){f.extend(b.coming,{type:"html",autoWidth:!0,autoHeight:!0,minWidth:0,minHeight:0,scrolling:"no",hasError:a,content:b.coming.tpl.error});b._afterLoad()},_loadImage:function(){var a=b.imgPreload=new Image;a.onload=function(){this.onload=this.onerror=null;b.coming.width=
|
22
|
+
this.width/b.opts.pixelRatio;b.coming.height=this.height/b.opts.pixelRatio;b._afterLoad()};a.onerror=function(){this.onload=this.onerror=null;b._error("image")};a.src=b.coming.href;!0!==a.complete&&b.showLoading()},_loadAjax:function(){var a=b.coming;b.showLoading();b.ajaxLoad=f.ajax(f.extend({},a.ajax,{url:a.href,error:function(a,d){b.coming&&"abort"!==d?b._error("ajax",a):b.hideLoading()},success:function(c,d){"success"===d&&(a.content=c,b._afterLoad())}}))},_loadIframe:function(){var a=b.coming,
|
23
|
+
c=f(a.tpl.iframe.replace(/\{rnd\}/g,(new Date).getTime())).attr("scrolling",u?"auto":a.iframe.scrolling).attr("src",a.href);f(a.wrap).bind("onReset",function(){try{f(this).find("iframe").hide().attr("src","//about:blank").end().empty()}catch(d){}});a.iframe.preload&&(b.showLoading(),c.one("load",function(){f(this).data("ready",1);u||f(this).bind("load.fb",b.update);f(this).parents(".fancybox-wrap").width("100%").removeClass("fancybox-tmp").show();b._afterLoad()}));a.content=c.appendTo(a.inner);a.iframe.preload||
|
24
|
+
b._afterLoad()},_preloadImages:function(){var a=b.group,c=b.current,d=a.length,e=c.preload?Math.min(c.preload,d-1):0,f,g;for(g=1;g<=e;g+=1)f=a[(c.index+g)%d],"image"===f.type&&f.href&&((new Image).src=f.href)},_afterLoad:function(){var a=b.coming,c=b.current,d,e,k,g,l;b.hideLoading();if(a&&!1!==b.isActive)if(!1===b.trigger("afterLoad",a,c))a.wrap.stop(!0).trigger("onReset").remove(),b.coming=null;else{c&&(b.trigger("beforeChange",c),c.wrap.stop(!0).removeClass("fancybox-opened").find(".fancybox-item, .fancybox-nav").remove());
|
25
|
+
b.unbindEvents();d=a.content;e=a.type;k=a.scrolling;f.extend(b,{wrap:a.wrap,skin:a.skin,outer:a.outer,inner:a.inner,current:a,previous:c});g=a.href;switch(e){case "inline":case "ajax":case "html":a.selector?d=f("<div>").html(d).find(a.selector):v(d)&&(d.data("fancybox-placeholder")||d.data("fancybox-placeholder",f('<div class="fancybox-placeholder"></div>').insertAfter(d).hide()),d=d.show().detach(),a.wrap.bind("onReset",function(){f(this).find(d).length&&d.hide().replaceAll(d.data("fancybox-placeholder")).data("fancybox-placeholder",
|
26
|
+
!1)}));break;case "image":d=a.tpl.image.replace(/\{href\}/g,g);break;case "swf":d='<object id="fancybox-swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="movie" value="../../cards/source/'+g+'"></param>',l="",f.each(a.swf,function(a,b){d+='<param name="'+a+'" value="'+b+'"></param>';l+=" "+a+'="'+b+'"'}),d+='<embed src="../../cards/source/'+g+'" type="application/x-shockwave-flash" width="100%" height="100%"'+l+"></embed></object>"}v(d)&&d.parent().is(a.inner)||a.inner.append(d);b.trigger("beforeShow");
|
27
|
+
a.inner.css("overflow","yes"===k?"scroll":"no"===k?"hidden":k);b._setDimension();b.reposition();b.isOpen=!1;b.coming=null;b.bindEvents();if(!b.isOpened)f(".fancybox-wrap").not(a.wrap).stop(!0).trigger("onReset").remove();else if(c.prevMethod)b.transitions[c.prevMethod]();b.transitions[b.isOpened?a.nextMethod:a.openMethod]();b._preloadImages()}},_setDimension:function(){var a=b.getViewport(),c=0,d,e=b.wrap,k=b.skin,g=b.inner,l=b.current;d=l.width;var h=l.height,n=l.minWidth,w=l.minHeight,p=l.maxWidth,
|
28
|
+
q=l.maxHeight,u=l.scrolling,r=l.scrollOutside?l.scrollbarWidth:0,z=l.margin,A=m(z[1]+z[3]),t=m(z[0]+z[2]),x,B,v,E,C,H,D,F,I;e.add(k).add(g).width("auto").height("auto").removeClass("fancybox-tmp");z=m(k.outerWidth(!0)-k.width());x=m(k.outerHeight(!0)-k.height());B=A+z;v=t+x;E=G(d)?(a.w-B)*m(d)/100:d;C=G(h)?(a.h-v)*m(h)/100:h;if("iframe"===l.type){if(I=l.content,l.autoHeight&&I&&1===I.data("ready"))try{I[0].contentWindow.document.location&&(g.width(E).height(9999),H=I.contents().find("body"),r&&H.css("overflow-x",
|
29
|
+
"hidden"),C=H.outerHeight(!0))}catch(M){}}else if(l.autoWidth||l.autoHeight)g.addClass("fancybox-tmp"),l.autoWidth||g.width(E),l.autoHeight||g.height(C),l.autoWidth&&(E=g.width()),l.autoHeight&&(C=g.height()),g.removeClass("fancybox-tmp");d=m(E);h=m(C);F=E/C;n=m(G(n)?m(n,"w")-B:n);p=m(G(p)?m(p,"w")-B:p);w=m(G(w)?m(w,"h")-v:w);q=m(G(q)?m(q,"h")-v:q);H=p;D=q;l.fitToView&&(p=Math.min(a.w-B,p),q=Math.min(a.h-v,q));B=a.w-A;t=a.h-t;l.aspectRatio?(d>p&&(d=p,h=m(d/F)),h>q&&(h=q,d=m(h*F)),d<n&&(d=n,h=m(d/
|
30
|
+
F)),h<w&&(h=w,d=m(h*F))):(d=Math.max(n,Math.min(d,p)),l.autoHeight&&"iframe"!==l.type&&(g.width(d),h=g.height()),h=Math.max(w,Math.min(h,q)));if(l.fitToView)if(g.width(d).height(h),e.width(d+z),a=e.width(),A=e.height(),l.aspectRatio)for(;(a>B||A>t)&&d>n&&h>w&&!(19<c++);)h=Math.max(w,Math.min(q,h-10)),d=m(h*F),d<n&&(d=n,h=m(d/F)),d>p&&(d=p,h=m(d/F)),g.width(d).height(h),e.width(d+z),a=e.width(),A=e.height();else d=Math.max(n,Math.min(d,d-(a-B))),h=Math.max(w,Math.min(h,h-(A-t)));r&&"auto"===u&&h<C&&
|
31
|
+
d+z+r<B&&(d+=r);g.width(d).height(h);e.width(d+z);a=e.width();A=e.height();c=(a>B||A>t)&&d>n&&h>w;d=l.aspectRatio?d<H&&h<D&&d<E&&h<C:(d<H||h<D)&&(d<E||h<C);f.extend(l,{dim:{width:y(a),height:y(A)},origWidth:E,origHeight:C,canShrink:c,canExpand:d,wPadding:z,hPadding:x,wrapSpace:A-k.outerHeight(!0),skinSpace:k.height()-h});!I&&l.autoHeight&&h>w&&h<q&&!d&&g.height("auto")},_getPosition:function(a){var c=b.current,d=b.getViewport(),e=c.margin,f=b.wrap.width()+e[1]+e[3],g=b.wrap.height()+e[0]+e[2],e={position:"absolute",
|
32
|
+
top:e[0],left:e[3]};c.autoCenter&&c.fixed&&!a&&g<=d.h&&f<=d.w?e.position="fixed":c.locked||(e.top+=d.y,e.left+=d.x);e.top=y(Math.max(e.top,e.top+(d.h-g)*c.topRatio));e.left=y(Math.max(e.left,e.left+(d.w-f)*c.leftRatio));return e},_afterZoomIn:function(){var a=b.current;a&&((b.isOpen=b.isOpened=!0,b.wrap.css("overflow","visible").addClass("fancybox-opened").hide().show(0),b.update(),(a.closeClick||a.nextClick&&1<b.group.length)&&b.inner.css("cursor","pointer").bind("click.fb",function(c){f(c.target).is("a")||
|
33
|
+
f(c.target).parent().is("a")||(c.preventDefault(),b[a.closeClick?"close":"next"]())}),a.closeBtn&&f(a.tpl.closeBtn).appendTo(b.skin).bind("click.fb",function(a){a.preventDefault();b.close()}),a.arrows&&1<b.group.length&&((a.loop||0<a.index)&&f(a.tpl.prev).appendTo(b.outer).bind("click.fb",b.prev),(a.loop||a.index<b.group.length-1)&&f(a.tpl.next).appendTo(b.outer).bind("click.fb",b.next)),b.trigger("afterShow"),a.loop||a.index!==a.group.length-1)?b.opts.autoPlay&&!b.player.isActive&&(b.opts.autoPlay=
|
34
|
+
!1,b.play(!0)):b.play(!1))},_afterZoomOut:function(a){a=a||b.current;f(".fancybox-wrap").trigger("onReset").remove();f.extend(b,{group:{},opts:{},router:!1,current:null,isActive:!1,isOpened:!1,isOpen:!1,isClosing:!1,wrap:null,skin:null,outer:null,inner:null});b.trigger("afterClose",a)}});b.transitions={getOrigPosition:function(){var a=b.current,c=a.element,d=a.orig,e={},f=50,g=50,l=a.hPadding,h=a.wPadding,n=b.getViewport();!d&&a.isDom&&c.is(":visible")&&(d=c.find("img:first"),d.length||(d=c));v(d)?
|
35
|
+
(e=d.offset(),d.is("img")&&(f=d.outerWidth(),g=d.outerHeight())):(e.top=n.y+(n.h-g)*a.topRatio,e.left=n.x+(n.w-f)*a.leftRatio);if("fixed"===b.wrap.css("position")||a.locked)e.top-=n.y,e.left-=n.x;return e={top:y(e.top-l*a.topRatio),left:y(e.left-h*a.leftRatio),width:y(f+h),height:y(g+l)}},step:function(a,c){var d,e,f=c.prop;e=b.current;var g=e.wrapSpace,l=e.skinSpace;if("width"===f||"height"===f)d=c.end===c.start?1:(a-c.start)/(c.end-c.start),b.isClosing&&(d=1-d),e="width"===f?e.wPadding:e.hPadding,
|
36
|
+
e=a-e,b.skin[f](m("width"===f?e:e-g*d)),b.inner[f](m("width"===f?e:e-g*d-l*d))},zoomIn:function(){var a=b.current,c=a.pos,d=a.openEffect,e="elastic"===d,k=f.extend({opacity:1},c);delete k.position;e?(c=this.getOrigPosition(),a.openOpacity&&(c.opacity=.1)):"fade"===d&&(c.opacity=.1);b.wrap.css(c).animate(k,{duration:"none"===d?0:a.openSpeed,easing:a.openEasing,step:e?this.step:null,complete:b._afterZoomIn})},zoomOut:function(){var a=b.current,c=a.closeEffect,d="elastic"===c,e={opacity:.1};d&&(e=this.getOrigPosition(),
|
37
|
+
a.closeOpacity&&(e.opacity=.1));b.wrap.animate(e,{duration:"none"===c?0:a.closeSpeed,easing:a.closeEasing,step:d?this.step:null,complete:b._afterZoomOut})},changeIn:function(){var a=b.current,c=a.nextEffect,d=a.pos,e={opacity:1},f=b.direction,g;d.opacity=.1;"elastic"===c&&(g="down"===f||"up"===f?"top":"left","down"===f||"right"===f?(d[g]=y(m(d[g])-200),e[g]="+=200px"):(d[g]=y(m(d[g])+200),e[g]="-=200px"));"none"===c?b._afterZoomIn():b.wrap.css(d).animate(e,{duration:a.nextSpeed,easing:a.nextEasing,
|
38
|
+
complete:b._afterZoomIn})},changeOut:function(){var a=b.previous,c=a.prevEffect,d={opacity:.1},e=b.direction;"elastic"===c&&(d["down"===e||"up"===e?"top":"left"]=("up"===e||"left"===e?"-":"+")+"=200px");a.wrap.animate(d,{duration:"none"===c?0:a.prevSpeed,easing:a.prevEasing,complete:function(){f(this).trigger("onReset").remove()}})}};b.helpers.overlay={defaults:{closeClick:!0,speedOut:200,showEarly:!0,css:{},locked:!u,fixed:!0},overlay:null,fixed:!1,el:f("html"),create:function(a){var c;a=f.extend({},
|
39
|
+
this.defaults,a);this.overlay&&this.close();c=b.coming?b.coming.parent:a.parent;this.overlay=f('<div class="fancybox-overlay"></div>').appendTo(c&&c.length?c:"body");this.fixed=!1;a.fixed&&b.defaults.fixed&&(this.overlay.addClass("fancybox-overlay-fixed"),this.fixed=!0)},open:function(a){var c=this;a=f.extend({},this.defaults,a);this.overlay?this.overlay.unbind(".overlay").width("auto").height("auto"):this.create(a);this.fixed||(q.bind("resize.overlay",f.proxy(this.update,this)),this.update());a.closeClick&&
|
40
|
+
this.overlay.bind("click.overlay",function(a){if(f(a.target).hasClass("fancybox-overlay"))return b.isActive?b.close():c.close(),!1});this.overlay.css(a.css).show()},close:function(){q.unbind("resize.overlay");this.el.hasClass("fancybox-lock")&&(f(".fancybox-margin").removeClass("fancybox-margin"),this.el.removeClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));f(".fancybox-overlay").remove().hide();f.extend(this,{overlay:null,fixed:!1})},update:function(){var a="100%",b;this.overlay.width(a).height("100%");
|
41
|
+
K?(b=Math.max(J.documentElement.offsetWidth,J.body.offsetWidth),p.width()>b&&(a=p.width())):p.width()>q.width()&&(a=p.width());this.overlay.width(a).height(p.height())},onReady:function(a,b){var d=this.overlay;f(".fancybox-overlay").stop(!0,!0);d||this.create(a);a.locked&&this.fixed&&b.fixed&&(b.locked=this.overlay.append(b.wrap),b.fixed=!1);!0===a.showEarly&&this.beforeShow.apply(this,arguments)},beforeShow:function(a,b){b.locked&&!this.el.hasClass("fancybox-lock")&&(!1!==this.fixPosition&&f("*:not(object)").filter(function(){return"fixed"===
|
42
|
+
f(this).css("position")&&!f(this).hasClass("fancybox-overlay")&&!f(this).hasClass("fancybox-wrap")}).addClass("fancybox-margin"),this.el.addClass("fancybox-margin"),this.scrollV=q.scrollTop(),this.scrollH=q.scrollLeft(),this.el.addClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));this.open(a)},onUpdate:function(){this.fixed||this.update()},afterClose:function(a){this.overlay&&!b.coming&&this.overlay.fadeOut(a.speedOut,f.proxy(this.close,this))}};b.helpers.title={defaults:{type:"float",
|
43
|
+
position:"bottom"},beforeShow:function(a){var c=b.current,d=c.title,e=a.type;f.isFunction(d)&&(d=d.call(c.element,c));if(r(d)&&""!==f.trim(d)){c=f('<div class="fancybox-title fancybox-title-'+e+'-wrap">'+d+"</div>");switch(e){case "inside":e=b.skin;break;case "outside":e=b.wrap;break;case "over":e=b.inner;break;default:e=b.skin,c.appendTo("body"),K&&c.width(c.width()),c.wrapInner('<span class="child"></span>'),b.current.margin[2]+=Math.abs(m(c.css("margin-bottom")))}c["top"===a.position?"prependTo":
|
44
|
+
"appendTo"](e)}}};f.fn.fancybox=function(a){var c,d=f(this),e=this.selector||"",k=function(g){var l=f(this).blur(),h=c,k,m;g.ctrlKey||g.altKey||g.shiftKey||g.metaKey||l.is(".fancybox-wrap")||(k=a.groupAttr||"data-fancybox-group",m=l.attr(k),m||(k="rel",m=l.get(0)[k]),m&&""!==m&&"nofollow"!==m&&(l=e.length?f(e):d,l=l.filter("["+k+'="'+m+'"]'),h=l.index(this)),a.index=h,!1!==b.open(l,a)&&g.preventDefault())};a=a||{};c=a.index||0;e&&!1!==a.live?p.undelegate(e,"click.fb-start").delegate(e+":not('.fancybox-item, .fancybox-nav')",
|
45
|
+
"click.fb-start",k):d.unbind("click.fb-start").bind("click.fb-start",k);this.filter("[data-fancybox-start=1]").trigger("click");return this};p.ready(function(){var a,c;f.scrollbarWidth===x&&(f.scrollbarWidth=function(){var a=f('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo("body"),b=a.children(),b=b.innerWidth()-b.height(99).innerWidth();a.remove();return b});f.support.fixedPosition===x&&(f.support.fixedPosition=function(){var a=f('<div style="position:fixed;top:20px;"></div>').appendTo("body"),
|
46
|
+
b=20===a[0].offsetTop||15===a[0].offsetTop;a.remove();return b}());f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(t).width();L.addClass("fancybox-lock-test");c=f(t).width();L.removeClass("fancybox-lock-test");f("<style type='text/css'>.fancybox-margin{margin-right:"+(c-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);
|
@@ -0,0 +1,135 @@
|
|
1
|
+
# Flash Cards
|
2
|
+
Simple, animated, and imageless flash cards using HTML/CSS/jQuery.
|
3
|
+
|
4
|
+
## Features
|
5
|
+
|
6
|
+
* Easily tweaked appearance <small>(requires [SASS](http://sass-lang.com)/[Compass](http://compass-style.org) or old-fashioned overrides)</small>
|
7
|
+
<small>Simply edit variables in [_flash_cards.scss](/curtisblackwell/flash_cards/blob/master/css/_flash_cards.scss) to update dimensions and colors.</small>
|
8
|
+
* Simple markup
|
9
|
+
<small>The deck is a list and the cards are list items with a div for each side.</small>
|
10
|
+
* No images
|
11
|
+
<small>Cards are 100% CSS, and buttons are an icon font consisting only of the icons used.</small>
|
12
|
+
|
13
|
+
## Dependencies
|
14
|
+
* jQuery
|
15
|
+
* [jQuery Cycle](http://jquery.malsup.com/cycle)
|
16
|
+
* [Modernizr](http://modernizr.com) (<small>If you want the 3D transforms fallback</small>)
|
17
|
+
|
18
|
+
## Browser Support
|
19
|
+
This has been tested only in Chrome <small>(21.0.1155.2 dev)</small> and Firefox <small>(12.0)</small>.
|
20
|
+
|
21
|
+
I plan to support all major browsers, but I haven't had the need yet.
|
22
|
+
|
23
|
+
## Setup & Usage
|
24
|
+
1. ### Put the files in place.
|
25
|
+
|
26
|
+
<table>
|
27
|
+
<thead>
|
28
|
+
<th>Files</th>
|
29
|
+
<th>Location</th>
|
30
|
+
</thead>
|
31
|
+
<tbody>
|
32
|
+
<tr>
|
33
|
+
<td>
|
34
|
+
<b>If you're using <a href="http://sass-lang.com/">SASS</a>/<a href="http://compass-style.org/">Compass</a>:</b><br>
|
35
|
+
<code>_flash_cards.scss</code> and <code>_fonts.scss</code><br>
|
36
|
+
<b>If you're not using SASS/Compass:</b><br>
|
37
|
+
<code>style.css</code>
|
38
|
+
</td>
|
39
|
+
<td>
|
40
|
+
<br>
|
41
|
+
Your SASS directory<br><br>
|
42
|
+
Your CSS directory
|
43
|
+
</td>
|
44
|
+
</tr>
|
45
|
+
<tr>
|
46
|
+
<td>The contents of the <code>js</code> folder</td>
|
47
|
+
<td>Your javascript directory</td>
|
48
|
+
</tr>
|
49
|
+
<tr>
|
50
|
+
<td><code>resources</code></td>
|
51
|
+
<td>Your root</td>
|
52
|
+
</tr>
|
53
|
+
</tbody>
|
54
|
+
</table>
|
55
|
+
|
56
|
+
2. ### Include necessary code.
|
57
|
+
#### .css
|
58
|
+
If you're SASSin' and Compassin' it up, `@import "flash_cards";` into your `.scss`. If not, use `style.css`.
|
59
|
+
|
60
|
+
#### .js (and font)
|
61
|
+
Place the following in your `<head>`:
|
62
|
+
|
63
|
+
<link href="http://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet" type="text/css">
|
64
|
+
<script src="path/to/modernizr-2.5.3.min.js"></script>
|
65
|
+
|
66
|
+
and the following before `</body>`:
|
67
|
+
|
68
|
+
<script src="path/to/flash_cards.min.js"></script>
|
69
|
+
|
70
|
+
3. ### The Markup
|
71
|
+
#### The Deck
|
72
|
+
The deck is a list with an id of deck. Each card is a list item containing a div for each side,
|
73
|
+
each div contains a paragraph.
|
74
|
+
|
75
|
+
<ul id="deck">
|
76
|
+
<li class="card">
|
77
|
+
|
78
|
+
<div class="side_one">
|
79
|
+
<p>How many licks does it take to get to the center of a Tootsie Pop?</p>
|
80
|
+
</div>
|
81
|
+
|
82
|
+
<div class="side_two">
|
83
|
+
<p>The world may never know.</p>
|
84
|
+
</div>
|
85
|
+
|
86
|
+
</li>
|
87
|
+
</ul>
|
88
|
+
|
89
|
+
#### The Navigation
|
90
|
+
The navigation uses an icon font put together using [IcoMoon](http://keyamoon.com/icomoon/app/),
|
91
|
+
so it contains only the necessary characters to keep file size down.
|
92
|
+
|
93
|
+
The markup follows Jon Hicks' [data-icon method](http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes).
|
94
|
+
|
95
|
+
<div id="nav_deck">
|
96
|
+
<span class="icon" id="prev" data-icon="<"><span class="visuallyhidden">Previous</span></span>
|
97
|
+
<span class="icon" id="flipper" data-icon="/"><span class="visuallyhidden">Flip</span></span>
|
98
|
+
<span class="icon" id="next" data-icon=">"><span class="visuallyhidden">Next</span></span>
|
99
|
+
</div>
|
100
|
+
|
101
|
+
#### The Keyboard Shortcuts
|
102
|
+
I created a table to display the available keyboard shortcuts, accessible via clicking an element with an id of icon
|
103
|
+
or hitting the forward-slash/question mark key.
|
104
|
+
|
105
|
+
<div id="keyboard_shortcuts">
|
106
|
+
<h1>Keyboard Shortcuts</h1>
|
107
|
+
<table>
|
108
|
+
<tbody>
|
109
|
+
<tr>
|
110
|
+
<td>Previous Card</td>
|
111
|
+
<td>←</td>
|
112
|
+
</tr>
|
113
|
+
<tr>
|
114
|
+
<td>Next Card</td>
|
115
|
+
<td>→</td>
|
116
|
+
</tr>
|
117
|
+
<tr>
|
118
|
+
<td>Flip Card</td>
|
119
|
+
<td>↑ <span class="or">/</span> ↓ <span class="or">/</span> Return <span class="or">/</span> Space</td>
|
120
|
+
</tr>
|
121
|
+
<tr>
|
122
|
+
<td>Show/Hide Keyboard Shortcuts</td>
|
123
|
+
<td>?</td>
|
124
|
+
</tr>
|
125
|
+
</tbody>
|
126
|
+
</table>
|
127
|
+
</div>
|
128
|
+
|
129
|
+
<div class="icon" id="keyboard_shortcuts_toggle" data-icon="k"><span class="visuallyhidden">Keyboard Shortcuts</span></div>
|
130
|
+
|
131
|
+
## Icons not displaying properly?
|
132
|
+
Check the paths to the font files in `_fonts.scss` or `style.css`.
|
133
|
+
|
134
|
+
## License
|
135
|
+
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Flash Cards</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://curtisblackwell.github.io/flash_cards/" property="cc:attributionName" rel="cc:attributionURL">Curtis Blackwell</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
|
@@ -0,0 +1 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# Require any additional compass plugins here.
|
2
|
+
|
3
|
+
# Set this to the root of your project when deployed:
|
4
|
+
http_path = "/"
|
5
|
+
css_dir = "css"
|
6
|
+
sass_dir = "css"
|
7
|
+
images_dir = "img"
|
8
|
+
javascripts_dir = "js"
|
9
|
+
|
10
|
+
# You can select your preferred output style here (can be overridden via the command line):
|
11
|
+
output_style = :compressed
|
12
|
+
|
13
|
+
# To enable relative paths to assets via compass helper functions. Uncomment:
|
14
|
+
# relative_assets = true
|
15
|
+
|
16
|
+
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
17
|
+
# line_comments = false
|
18
|
+
|
19
|
+
|
20
|
+
# If you prefer the indented syntax, you might want to regenerate this
|
21
|
+
# project again passing --syntax sass, or you can uncomment this:
|
22
|
+
# preferred_syntax = :sass
|
23
|
+
# and then run:
|
24
|
+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
@@ -0,0 +1 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
@@ -0,0 +1,216 @@
|
|
1
|
+
.flashcards {
|
2
|
+
margin: 10px auto;
|
3
|
+
max-width: 370px;
|
4
|
+
position: relative;
|
5
|
+
}
|
6
|
+
@media screen and (min-width:730px) {
|
7
|
+
.flashcards {
|
8
|
+
max-width: 500px;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
#deck {
|
12
|
+
height: 300px;
|
13
|
+
list-style: none;
|
14
|
+
margin: 15px auto;
|
15
|
+
padding: 0;
|
16
|
+
position: relative;
|
17
|
+
text-align: center;
|
18
|
+
width: 100%;
|
19
|
+
}
|
20
|
+
@media screen and (min-width:730px) {
|
21
|
+
#deck {
|
22
|
+
height: 300px;
|
23
|
+
list-style: none;
|
24
|
+
margin: 15px auto;
|
25
|
+
padding: 0;
|
26
|
+
position: relative;
|
27
|
+
text-align: center;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
#deck:hover {
|
31
|
+
cursor: pointer;
|
32
|
+
}
|
33
|
+
.card {
|
34
|
+
background-color: rgba(255, 255, 255, 1) !important;
|
35
|
+
color: rgba(34, 2, 0, 1);
|
36
|
+
display: none;
|
37
|
+
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
|
38
|
+
height: 300px;
|
39
|
+
line-height: 60px;
|
40
|
+
position: relative;
|
41
|
+
width: 100%;
|
42
|
+
-webkit-perspective: 1600;
|
43
|
+
perspective: 1600;
|
44
|
+
}
|
45
|
+
.card:first-child {
|
46
|
+
display: block;
|
47
|
+
}
|
48
|
+
.side_one, .side_two {
|
49
|
+
-webkit-backface-visibility: hidden;
|
50
|
+
backface-visibility: hidden;
|
51
|
+
background-color: #fff;
|
52
|
+
background-size: 500px 30px;
|
53
|
+
background-position: 50%;
|
54
|
+
border: 1px solid rgba(0, 0, 0, .2);
|
55
|
+
height: inherit;
|
56
|
+
position: absolute;
|
57
|
+
-webkit-transition: all 0.4s ease-in-out;
|
58
|
+
-moz-transition: all 0.4s ease-in-out;
|
59
|
+
-ms-transition: all 0.4s ease-in-out;
|
60
|
+
-o-transition: all 0.4s ease-in-out;
|
61
|
+
transition: all 0.4s ease-in-out;
|
62
|
+
width: inherit;
|
63
|
+
}
|
64
|
+
.current .side_one, .current.flip .side_two {
|
65
|
+
-webkit-box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.3);
|
66
|
+
-moz-box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.3);
|
67
|
+
box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.3);
|
68
|
+
}
|
69
|
+
.current.flip .side_one {
|
70
|
+
-webkit-box-shadow: none;
|
71
|
+
-moz-box-shadow: none;
|
72
|
+
box-shadow: none;
|
73
|
+
}
|
74
|
+
.side_one {
|
75
|
+
-webkit-transform: rotateX(0deg);
|
76
|
+
transform: rotateX(0deg);
|
77
|
+
-webkit-transform-style: preserve-3d;
|
78
|
+
transform-style: preserve-3d;
|
79
|
+
z-index: 900;
|
80
|
+
}
|
81
|
+
.flip .side_one {
|
82
|
+
-webkit-transform: rotateX(180deg);
|
83
|
+
transform: rotateX(180deg);
|
84
|
+
}
|
85
|
+
.side_two {
|
86
|
+
-webkit-transform: rotateX(-180deg);
|
87
|
+
transform: rotateX(-180deg);
|
88
|
+
-webkit-transform-style: preserve-3d;
|
89
|
+
transform-style: preserve-3d;
|
90
|
+
z-index: 800;
|
91
|
+
}
|
92
|
+
.flip .side_two {
|
93
|
+
-webkit-transform: rotateX(0deg);
|
94
|
+
transform: rotateX(0deg);
|
95
|
+
z-index: 1000;
|
96
|
+
}
|
97
|
+
.card p {
|
98
|
+
display: table-cell;
|
99
|
+
font-size: 1em;
|
100
|
+
height: 300px;
|
101
|
+
vertical-align: middle;
|
102
|
+
width: 500px;
|
103
|
+
}
|
104
|
+
#nav_deck {
|
105
|
+
color: rgba(51, 3, 0, 1);
|
106
|
+
display: flex;
|
107
|
+
justify-content: center;
|
108
|
+
position: relative;
|
109
|
+
text-align: center;
|
110
|
+
}
|
111
|
+
.icon {
|
112
|
+
cursor: pointer;
|
113
|
+
flex-basis: 25%;
|
114
|
+
}
|
115
|
+
.icon:before {
|
116
|
+
content: attr(data-icon);
|
117
|
+
font-family: 'Flash Cards';
|
118
|
+
visibility: visible;
|
119
|
+
}
|
120
|
+
.icon button {
|
121
|
+
background-color: rgba(255, 255, 255, 1);
|
122
|
+
border: none;
|
123
|
+
color: #333;
|
124
|
+
cursor: pointer;
|
125
|
+
margin: 0;
|
126
|
+
padding: 0;
|
127
|
+
width: 32px;
|
128
|
+
}
|
129
|
+
.icon button:hover {
|
130
|
+
background-color: rgba(255, 255, 255, 1);
|
131
|
+
}
|
132
|
+
.icon button img {
|
133
|
+
margin: 0;
|
134
|
+
}
|
135
|
+
.icon button img:hover {
|
136
|
+
-webkit-filter: brightness(80%);
|
137
|
+
}
|
138
|
+
.visuallyhidden {
|
139
|
+
border: 0;
|
140
|
+
clip: rect(0 0 0 0);
|
141
|
+
height: 1px;
|
142
|
+
margin: -1px;
|
143
|
+
overflow: hidden;
|
144
|
+
padding: 0;
|
145
|
+
position: absolute;
|
146
|
+
width: 1px;
|
147
|
+
}
|
148
|
+
#keyboard_shortcuts {
|
149
|
+
background: rgba(0, 0, 0, 1);
|
150
|
+
bottom: 0;
|
151
|
+
display: none;
|
152
|
+
left: 0;
|
153
|
+
padding: 20px;
|
154
|
+
position: absolute;
|
155
|
+
z-index: 99999;
|
156
|
+
}
|
157
|
+
#keyboard_shortcuts h1 {
|
158
|
+
text-align: center
|
159
|
+
}
|
160
|
+
#keyboard_shortcuts td {
|
161
|
+
padding: 15px;
|
162
|
+
text-align: left;
|
163
|
+
width: 300px;
|
164
|
+
}
|
165
|
+
#keyboard_shortcuts td:first-child {
|
166
|
+
text-align: right
|
167
|
+
}
|
168
|
+
.or {
|
169
|
+
color: rgba(34, 2, 0, 1);
|
170
|
+
padding: 0 10px;
|
171
|
+
}
|
172
|
+
#keyboard_shortcuts_toggle {
|
173
|
+
cursor: pointer;
|
174
|
+
position: absolute;
|
175
|
+
right: 25px;
|
176
|
+
top: 25px;
|
177
|
+
}
|
178
|
+
#keyboard_shortcuts_toggle:before {
|
179
|
+
background: #0080ff;
|
180
|
+
-webkit-background-clip: padding;
|
181
|
+
-moz-background-clip: padding;
|
182
|
+
background-clip: padding-box;
|
183
|
+
-webkit-border-radius: 20px;
|
184
|
+
-moz-border-radius: 20px;
|
185
|
+
-ms-border-radius: 20px;
|
186
|
+
-o-border-radius: 20px;
|
187
|
+
border-radius: 20px;
|
188
|
+
border: 1px solid #fff;
|
189
|
+
color: #fff;
|
190
|
+
font-size: 25px;
|
191
|
+
height: 20px;
|
192
|
+
padding: 5px;
|
193
|
+
width: 20px;
|
194
|
+
}
|
195
|
+
.no-csstransforms3d .flip .side_one, .no-csstransforms3d .side_two {
|
196
|
+
opacity: 0;
|
197
|
+
-webkit-transition: all 0.4s ease-in-out;
|
198
|
+
-moz-transition: all 0.4s ease-in-out;
|
199
|
+
-ms-transition: all 0.4s ease-in-out;
|
200
|
+
-o-transition: all 0.4s ease-in-out;
|
201
|
+
transition: all 0.4s ease-in-out;
|
202
|
+
}
|
203
|
+
.no-csstransforms3d .flip .side_two {
|
204
|
+
opacity: 1;
|
205
|
+
-webkit-transition: all 0.4s ease-in-out;
|
206
|
+
-moz-transition: all 0.4s ease-in-out;
|
207
|
+
-ms-transition: all 0.4s ease-in-out;
|
208
|
+
-o-transition: all 0.4s ease-in-out;
|
209
|
+
transition: all 0.4s ease-in-out;
|
210
|
+
}
|
211
|
+
.card:first-child .side_two {
|
212
|
+
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
|
213
|
+
}
|
214
|
+
ul#deck li:before {
|
215
|
+
content: none;
|
216
|
+
}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<title>Flashcards Example</title>
|
5
|
+
<meta charset="UTF-8">
|
6
|
+
<!--[if lt IE 9]>
|
7
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
8
|
+
<![endif]-->
|
9
|
+
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
10
|
+
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Lora:400,700&display=swap" rel="stylesheet">
|
11
|
+
<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/css/themes/cards/styles.css">
|
12
|
+
<link rel="stylesheet" type="text/css" href="css/custom.css">
|
13
|
+
<!--Flashcards CSS-->
|
14
|
+
<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/css/style.css">
|
15
|
+
</head>
|
16
|
+
<body>
|
17
|
+
<div id="main">
|
18
|
+
<header class="header"> <img src="https://via.placeholder.com/1920x600" alt="decorative image of a woman's hand typing on a computer">
|
19
|
+
<div class="text-container">
|
20
|
+
<h1>Flashcards Example</h1>
|
21
|
+
</div>
|
22
|
+
</header>
|
23
|
+
<div class="content-body">
|
24
|
+
<div class="flashcards" id="flipper">
|
25
|
+
<ul id="deck">
|
26
|
+
<li class="card">
|
27
|
+
<div class="side_one">
|
28
|
+
<p>Abstract Word</p>
|
29
|
+
</div>
|
30
|
+
<div class="side_two">
|
31
|
+
<p>Words that refer to ideas or concepts that are removed from material reality. </p>
|
32
|
+
</div>
|
33
|
+
</li>
|
34
|
+
<li class="card">
|
35
|
+
<div class="side_one">
|
36
|
+
<p>Axiology</p>
|
37
|
+
</div>
|
38
|
+
<div class="side_two">
|
39
|
+
<p>A part of worldview; refers to an individual or group's value system. </p>
|
40
|
+
</div>
|
41
|
+
</li>
|
42
|
+
<li class="card">
|
43
|
+
<div class="side_one">
|
44
|
+
<p>Channel</p>
|
45
|
+
</div>
|
46
|
+
<div class="side_two">
|
47
|
+
<p>The means through which the message travels. </p>
|
48
|
+
</div>
|
49
|
+
</li>
|
50
|
+
</ul>
|
51
|
+
<div id="nav_btn">
|
52
|
+
<button class="icon-prev" id="prev"></button>
|
53
|
+
<button class="icon-flip"></button>
|
54
|
+
<button class="icon-next" id="next"></button>
|
55
|
+
</div>
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
</div>
|
59
|
+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
60
|
+
<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/js/scripts.js"></script>
|
61
|
+
<!--Modernizr for Flashcards-->
|
62
|
+
<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/vendor/modernizr-2.5.3.min.js"></script>
|
63
|
+
<!--Flashcards JS-->
|
64
|
+
<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/flash_cards.min.js"></script>
|
65
|
+
</body>
|
66
|
+
</html>
|
@@ -0,0 +1 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#3043ef;}</style></defs><title>icons</title><path class="cls-1" d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm4.71,50.78L18,32.07,34.76,13.22l5.59,5L28.28,31.77,42,45.49Z"/></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#3043ef;}</style></defs><title>icons</title><path class="cls-1" d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM51.2,46l-3-3.26A18.95,18.95,0,0,1,13.8,35h7.33a11.71,11.71,0,0,0,22,2.22l-3.16-3.41H51.2ZM43.87,29a11.71,11.71,0,0,0-21.95-2.22l3.16,3.41H13.8V18l3,3.25A19,19,0,0,1,51.2,29Z"/></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#3043ef;}</style></defs><title>icons</title><path class="cls-1" d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM29.24,50.78l-5.59-5L35.72,32.23,22,18.51l5.29-5.29L46,31.93Z"/></svg>
|
@@ -0,0 +1,90 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
3
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
4
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
5
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
6
|
+
<head>
|
7
|
+
<meta charset="utf-8">
|
8
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
9
|
+
|
10
|
+
<title>Flash Cards</title>
|
11
|
+
<meta name="description" content="Simple, animated, and imageless flash cards using HTML/CSS/jQuery.">
|
12
|
+
<meta name="author" content="Curtis Blackwell… sorta.">
|
13
|
+
|
14
|
+
<meta name="viewport" content="width=device-width">
|
15
|
+
<link rel="stylesheet" href="css/style.css">
|
16
|
+
<link href="http://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet" type="text/css">
|
17
|
+
<script src="js/vendor/modernizr-2.5.3.min.js"></script>
|
18
|
+
</head>
|
19
|
+
<body>
|
20
|
+
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
|
21
|
+
|
22
|
+
<h1><a href="https://github.com/curtisblackwell/flash_cards">Flash Cards</a> <small>by <a href="https://github.com/curtisblackwell">curtisblackwell</a></small></h1>
|
23
|
+
|
24
|
+
<ul id="deck">
|
25
|
+
<li class="card">
|
26
|
+
<div class="side_one">
|
27
|
+
<p>Hello</p>
|
28
|
+
</div>
|
29
|
+
<div class="side_two">
|
30
|
+
<p>안녕하세요</p>
|
31
|
+
</div>
|
32
|
+
</li>
|
33
|
+
|
34
|
+
<li class="card">
|
35
|
+
<div class="side_one">
|
36
|
+
<p>How many licks does it take to get to the center of a Tootsie Pop?</p>
|
37
|
+
</div>
|
38
|
+
<div class="side_two">
|
39
|
+
<p>The world may never know.</p>
|
40
|
+
</div>
|
41
|
+
</li>
|
42
|
+
|
43
|
+
<li class="card">
|
44
|
+
<div class="side_one">
|
45
|
+
<p>Have you been an un-American?</p>
|
46
|
+
</div>
|
47
|
+
<div class="side_two">
|
48
|
+
<p>Ooh-ooh-hoo-ooh!</p>
|
49
|
+
</div>
|
50
|
+
</li>
|
51
|
+
</ul>
|
52
|
+
|
53
|
+
<div id="nav_deck">
|
54
|
+
<span class="icon" id="prev" data-icon="<"><span class="visuallyhidden">Previous</span></span>
|
55
|
+
<span class="icon" id="flipper" data-icon="/"><span class="visuallyhidden">Flip</span></span>
|
56
|
+
<span class="icon" id="next" data-icon=">"><span class="visuallyhidden">Next</span></span>
|
57
|
+
</div>
|
58
|
+
|
59
|
+
<div id="keyboard_shortcuts">
|
60
|
+
<h1>Keyboard Shortcuts</h1>
|
61
|
+
<table>
|
62
|
+
<tbody>
|
63
|
+
<tr>
|
64
|
+
<td>Previous Card</td>
|
65
|
+
<td>←</td>
|
66
|
+
</tr>
|
67
|
+
<tr>
|
68
|
+
<td>Next Card</td>
|
69
|
+
<td>→</td>
|
70
|
+
</tr>
|
71
|
+
<tr>
|
72
|
+
<td>Flip Card</td>
|
73
|
+
<td>↑ <span class="or">/</span> ↓ <span class="or">/</span> Return <span class="or">/</span> Space</td>
|
74
|
+
</tr>
|
75
|
+
<tr>
|
76
|
+
<td>Show/Hide Keyboard Shortcuts</td>
|
77
|
+
<td>?</td>
|
78
|
+
</tr>
|
79
|
+
</tbody>
|
80
|
+
</table>
|
81
|
+
</div>
|
82
|
+
|
83
|
+
<div class="icon" id="keyboard_shortcuts_toggle" data-icon="k"><span class="visuallyhidden">Keyboard Shortcuts</span></div>
|
84
|
+
|
85
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
86
|
+
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
|
87
|
+
|
88
|
+
<script src="js/flash_cards.min.js"></script>
|
89
|
+
</body>
|
90
|
+
</html>
|
@@ -0,0 +1 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8" ?>
|