API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 25th, 2013
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.86 KB | None | 0 0
raw download clone embed print report
  1. <menutitle>Bootstrap - Movie Card 2up with Filter</menutitle>
  2. <<MC HTML Page>>
  3. <<header>>
  4.     <title>Movie List - <<moviecount>> titles</title>
  5.     <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
  6.     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" >
  7.     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8.     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  9.     <script type="text/javascript">
  10.         function ucwords(str) {
  11.             return (str + '').replace(/^([a-z])|[\s_]+([a-z])/g, function ($1) {
  12.                 return $1.toUpperCase();
  13.             })
  14.         };
  15.         var movieList = {
  16.             titleList: {},
  17.             genreList: {},
  18.             filterTitle: [],
  19.             filterGenre: {
  20.                 and: [],
  21.                 not: []
  22.             },
  23.             movies: {}, // object containing jQuery collection of movies
  24.             dom: {
  25.                 ul_filterTitle: {},
  26.                 ul_filterGenre: {},
  27.                 div_loading: {},
  28.                 div_loadingMessage: {}
  29.             },
  30.             functions: {
  31.                 showLoading: function(message) {
  32.                     movieList.dom.div_loadingMessage.html(message);
  33.                     var w = $(window).width(), h = $(window).height();
  34.                     movieList.dom.div_loading.height(h).width(w);
  35.                     movieList.dom.div_loadingMessage.css('margin-top', (h / 2)+'px');
  36.                     movieList.dom.div_loading.show();
  37.                 },
  38.                 hideLoading: function() {
  39.                     movieList.dom.div_loading.hide();
  40.                 },
  41.                 toggleFilter: function(type, filter) {
  42.                     movieList.functions.showLoading('FILTERING');
  43.                     var icon = filter.children('i');
  44.                     var filterText = filter.attr('data-filter');
  45.                     if (type == 'title') {
  46.                         switch (icon.prop('class')) {
  47.                             case 'icon-plus-sign':
  48.                                 icon.prop('class', 'icon-minus-sign');
  49.                                 movieList.filterTitle.push(filterText);
  50.                                 break;
  51.                             case 'icon-minus-sign':
  52.                                 icon.prop('class', 'icon-plus-sign');
  53.                                 for (var k in movieList.filterTitle) {
  54.                                     if (movieList.filterTitle[k] == filterText) {
  55.                                         movieList.filterTitle.splice(k, 1);
  56.                                     }
  57.                                 }
  58.                                 break;
  59.                         }
  60.                     } else {
  61.                         switch (icon.prop('class')) {
  62.                             case 'icon-question-sign':
  63.                                 icon.prop('class', 'icon-plus-sign');
  64.                                 movieList.filterGenre.and.push(filterText);
  65.                                 break;
  66.                             case 'icon-plus-sign':
  67.                                 icon.prop('class', 'icon-minus-sign');
  68.                                 for (var k in movieList.filterGenre.and) {
  69.                                     if (movieList.filterGenre.and[k] == filterText) {
  70.                                         movieList.filterGenre.and.splice(k, 1);
  71.                                     }
  72.                                 }
  73.                                 movieList.filterGenre.not.push(filterText);
  74.                                 break;
  75.                             case 'icon-minus-sign':
  76.                                 icon.prop('class', 'icon-question-sign');
  77.                                 for (var k in movieList.filterGenre.not) {
  78.                                     if (movieList.filterGenre.not[k] == filterText) {
  79.                                         movieList.filterGenre.not.splice(k, 1);
  80.                                     }
  81.                                 }
  82.                                 break;
  83.                         }
  84.                     }
  85.                     var show = movieList.movies;
  86.                     for (var f in movieList.filterTitle) {
  87.                         show = show.not(movieList.titleList[movieList.filterTitle[f]]);
  88.                     }
  89.                     for (var g in movieList.filterGenre.and) {
  90.                         var show2 = $.extend(true, {}, show);
  91.                         show2.each(function(i, e) {
  92.                             if (movieList.genreList[movieList.filterGenre.and[g]].index(e) == -1) {
  93.                                 show = show.not(e);
  94.                             }
  95.                         });
  96.                     }
  97.                     for (var g in movieList.filterGenre.not) {
  98.                         var show2 = $.extend(true, {}, show);
  99.                         show2.each(function(i, e) {
  100.                             if (movieList.genreList[movieList.filterGenre.not[g]].index(e) != -1) {
  101.                                 show = show.not(e);
  102.                             }
  103.                         });
  104.                     }
  105.                     hide = movieList.movies.not(show);
  106.                     show.show();
  107.                     hide.hide();
  108.                     movieList.functions.hideLoading();
  109.                 }
  110.             }
  111.         };
  112.         $(function(){
  113.             for (var d in movieList.dom) {
  114.                 movieList.dom[d] = $('#'+d);
  115.             }
  116.             movieList.movies = $('.movie');
  117.             movieList.dom.ul_filterTitle.on('click', 'li', function(e) {
  118.                 movieList.functions.toggleFilter('title', $(this));
  119.             });
  120.             movieList.dom.ul_filterGenre.on('click', 'li', function(e) {
  121.                 movieList.functions.toggleFilter('genre', $(this));
  122.             });
  123.             movieList.movies.each(function(i, e){
  124.                 var that = $(this);
  125.                 var firstLetter = $(e).attr('data-title').substr(0, 1).toLowerCase();
  126.                 if (firstLetter.search(/[0-9]/) == -1) {
  127.                     if (!movieList.titleList.hasOwnProperty(firstLetter)) {
  128.                         movieList.titleList[firstLetter] = $();
  129.                         movieList.filterTitle.push(firstLetter);
  130.                     }
  131.                     movieList.titleList[firstLetter] = movieList.titleList[firstLetter].add(that);
  132.                 } else {
  133.                     if (!movieList.titleList.hasOwnProperty('0-9')) {
  134.                         movieList.titleList['0-9'] = $();
  135.                         movieList.filterTitle.push('0-9');
  136.                     }
  137.                     movieList.titleList['0-9'] = movieList.titleList['0-9'].add(that);
  138.                 }
  139.                 $(e).attr('data-genre').split('/').forEach(function(g){
  140.                     g = g.trim().toLowerCase();
  141.                     if (!movieList.genreList.hasOwnProperty(g)) {
  142.                         movieList.genreList[g] = $();
  143.                     }
  144.                     movieList.genreList[g] = movieList.genreList[g].add(that);
  145.                 });
  146.             });
  147.             // Populate filter options
  148.             for (letter in movieList.titleList) {
  149.                 movieList.dom.ul_filterTitle.append('<li data-filter="'+letter+'"><i class="icon-minus-sign"></i>'+letter.toUpperCase()+'</li>');
  150.             }
  151.             for (genre in movieList.genreList) {
  152.                 movieList.dom.ul_filterGenre.append('<li data-filter="'+genre+'"><i class="icon-question-sign"></i>'+ucwords(genre)+'</li>');
  153.             }
  154.             var maxWidth = 0;
  155.             movieList.dom.ul_filterGenre.children('li').each(function(i, e){
  156.                 var that = $(this);
  157.                 if (that.width() > maxWidth) { maxWidth = that.width() + 10; }
  158.             });
  159.             movieList.dom.ul_filterGenre.children('li').width(maxWidth);
  160.             movieList.functions.toggleFilter('title', movieList.dom.ul_filterTitle.children('li').first());
  161.         });
  162.     </script>
  163.     <style type="text/css">
  164.         @charset "utf-8";
  165.         body {
  166.             font-size: 12px;
  167.             font-family: 'Open Sans', sans-serif;
  168.             margin: 20px auto;;
  169.             overflow-y: scroll;
  170.             width: 960px;
  171.         }
  172.         #movieCollection {
  173.             margin: auto;
  174.         }
  175.         #movieCollection .movie {
  176.             position: relative;
  177.             margin: 0 10px 20px 10px;
  178.             background: #f0f0f0;
  179.         }
  180.         #movieCollection .movie .title {
  181.             text-align: left;
  182.             color: #ffffff;
  183.             background: #000000;
  184.             font-size: 1.3em;
  185.             font-weight: 700;
  186.             line-height: 1.3em;
  187.             padding: 4px;
  188.         }
  189.         #movieCollection .movie .title a {
  190.             color: inherit;
  191.         }
  192.         #movieCollection .movie img {
  193.             margin-right: 5px;
  194.         }
  195.         #movieCollection .movie .description {
  196.             height: 175px;
  197.             display: table;
  198.             position: relative;
  199.         }
  200.         #movieCollection .movie .description dl {
  201.             overflow: auto;
  202.             margin-top: 0;
  203.             margin-bottom: 0;
  204.         }
  205.         #movieCollection .movie .description .descLabel,
  206.         #movieCollection .movie .description dl dt  {
  207.             width: 50px;
  208.             padding-right: 5px;
  209.         }
  210.         #movieCollection .movie .description dl dd {
  211.             margin-left: 55px;
  212.         }
  213.         #movieCollection .movie .description .descLabel {
  214.             display: inline-block;
  215.             text-align: right;
  216.         }
  217.         #movieCollection .movie .description .top {
  218.             height: 150px;
  219.         }
  220.         #movieCollection .movie .description .bottom {
  221.             position: absolute;
  222.             bottom: 0;
  223.             width: 100%;
  224.             height: 20px;
  225.             padding-bottom: 5px;
  226.         }
  227.         #movieCollection .movie .description .bottom .runtime {
  228.             padding-right: 5px;
  229.         }
  230.         #movieCollection .movie .description .rating {
  231.             display: inline-block;
  232.             width: 50px;
  233.         }
  234.         #div_loading {
  235.             position: absolute;
  236.             top: 0;
  237.             left: 0;
  238.             background: #000000;
  239.             color: #ffffff;
  240.             font-size: 10em;
  241.             opacity: 0.8;
  242.             text-align: center;
  243.             z-index: 1;
  244.             font-weight: 700;
  245.         }
  246.         .filter {
  247.             display: block;
  248.             overflow: hidden;
  249.             position: relative;
  250.             padding: 5px 0 5px 80px;
  251.             margin: 5px 0;
  252.             background: #e0e0e0;
  253.             font-weight: 700;
  254.         }
  255.         .filter ul {
  256.             display: block;
  257.             list-style: none;
  258.             margin: 0;
  259.             text-align: left;
  260.         }
  261.         .filter ul li {
  262.             display: inline-block;
  263.             cursor: pointer;
  264.             margin: 2px 4px;
  265.             text-align: left;
  266.         }
  267.         .filter ul li i {
  268.             margin-right: 2px;
  269.         }
  270.         .filter .filterTitle {
  271.             font-size: 2em;
  272.             height: 100%;
  273.             left: 5px;
  274.             top: 0;
  275.             position: absolute;
  276.         }
  277.         .verticalCenterOuter {
  278.             overflow: hidden;
  279.             display: table;
  280.             height: 100%;
  281.         }
  282.         .verticalCenterMiddle {
  283.             display: table-cell;
  284.             vertical-align: middle;
  285.             width: 100%;
  286.             position: static;
  287.         }
  288.         .verticalCenterInner {
  289.             position: static;
  290.         }
  291.     </style>
  292. <</header>>
  293. <<body>>
  294.     <div id="div_loading"><div id="div_loadingMessage"></div></div>
  295.     <div id="filterOptions">
  296.         <div class="filter"><div class="filterTitle"><div class="verticalCenterOuter"><div class="verticalCenterMiddle"><div class="verticalCenterInner">Title</div></div></div></div><ul id="ul_filterTitle"></ul></div>
  297.         <div class="filter"><div class="filterTitle"><div class="verticalCenterOuter"><div class="verticalCenterMiddle"><div class="verticalCenterInner">Genre</div></div></div></div><ul id="ul_filterGenre"></ul></div>
  298.     </div>
  299.     <div id="movieCollection" class="row">
  300.         <<media_item>>
  301.         <div class="movie span6" data-genre="<<moviegenre>>" data-title="<<title>>">
  302.             <div class="title strong"><<title>> (<<movieyear>>)<a href="<<imdb_url>>">IMDB</a></div>
  303.             <img class="pull-left" src="<<createimage:175>>" />
  304.             <div class="description">
  305.                 <div class="top">
  306.                     <dl class="dl-horizontal">
  307.                         <dt><strong>Stars:</strong></dt><dd><<stars>></dd>
  308.                         <dt><strong>Genre:</strong></dt><dd><<moviegenre>></dd>
  309.                     </dl>
  310.                     <div class="descLabel"><strong>Outline:</strong></div><<nfo:outline>>
  311.                 </div>
  312.                 <div class="bottom">
  313.                     <div class="rating"><strong><<rating>></strong>/10</div><strong>Cert: </strong><abbr title="<<nfo:mpaa>>"><<nfo:mpaa:30>></abbr>
  314.                     <div class="runtime pull-right"><<runtime>></div>
  315.                 </div>
  316.             </div>
  317.         </div>
  318.         <</media_item>>
  319.     </div>
  320. <</body>>
  321. <<footer>><</footer>>
  322. <</MC HTML Page>>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!