API tools faq
paste
Advertisement
Guest User

Layout toggle demo (June 14, 2022)

a guest
Jun 14th, 2022
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Grid and list layout toggle demo</title>
  5.     <meta name="author" content="Elominius from Wikiversity">
  6.  
  7.     <!-- necessary to render the interpuncts correctly in older browser versions -->
  8.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  9.  
  10.     <!-- compatibility -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div class="toggle_grid_list_buttons">
  17.     <!-- "Toggle to grid view" button initially  hidden -->
  18.     <button onclick="toggleView_demo();" style="display:none;">Toggle to grid view</button>
  19.     <button onclick="toggleView_demo();">Toggle to list view</button>
  20. </div>
  21.  
  22. <ul class="item_container grid">
  23.     <li>
  24.         <div class="thumbnail_wrapper">
  25.             <div class="thumbnail_container">
  26.                 <!-- a picture would go here -->
  27.                 <span class="thumbnail_duration">6:38</span>
  28.             </div>
  29.         </div>
  30.         <div class="info_wrapper">
  31.             <div class="title_container" title="This is a title.">
  32.                 <!-- fake hyperlink colour for illustration purposes -->
  33.                 <span class=fake_URL>This is a title.</span>
  34.             </div>
  35.             <div class="status_container">
  36.                 <!-- non-breaking spaces after numbers -->
  37.                 by <span class="channel_name fake_URL" title="312,147&nbsp;subscribers">VideoCreator</span> <span class="subscriber_count list_show">(312,147&nbsp;subscribers)</span> • <time class="upload_date" datetime="2022-06-12T10:11:16" title="June 12, 2022 &#10;10:11:16 (UTC)">2&nbsp;weeks ago</time> • <span class="view_count" title="56,887 views since 24 hours">1,013,237&nbsp;views</span> • <span class="rating" title="106,228 likes, &#10;3187 dislikes">97% liked</span>
  38.             </div>
  39.             <div class="description_container list_show">
  40.                 This is the description. It can only be seen in list view. It does not matter if it contains too much text for the space, since excess text can be hidden or extend downwards.
  41.             </div>
  42.         </div>
  43.     </li>
  44. </ul>
  45.  
  46. <!-- This "type" attribute serves as a label for the source code, and is not necessary in modern browsers. Same with "text/javascript". -->
  47. <style type="text/css">
  48. /* font pack */
  49. body { font-family: 'noto sans', ubuntu, 'segoe ui', futura, arial, helvetica, 'trebuchet ms', tahoma, verdana, sans-serif; }
  50.  
  51. /* shared style */
  52. .item_container {
  53.     list-style: none;
  54.     padding-right: 1em;
  55.  
  56. }
  57. .thumbnail_container {
  58.     width:256px; height:144px;
  59.     position: relative; /* necessary to keep .thumbnail_duration inside thumbnail */
  60.     border: 2px solid grey;
  61.     margin-right: 1em;
  62.     margin-bottom: 0.5em;
  63.     background-color: lightblue; /* placeholder */
  64.     border-radius: 5px;
  65. }
  66.  
  67. .title_container { font-size:20pt; }
  68. .fake_URL { color:#48C; } /* for illustration */
  69. .status_container { font-size:10pt; color:#555; padding-bottom:5pt; }
  70. .description_container {
  71.     display:block;
  72.     /* description height limit */
  73.     max-height:5em; /* 5 lines */
  74.     overflow-y: hidden; /* hide excess text */
  75.     /* end line with ellipsis for newer browsers */
  76.     /* display: -webkit-box;
  77.     text-overflow:ellipsis;
  78.     -webkit-box-orient: vertical;
  79.     -webkit-line-clamp: 5; */
  80. }
  81.  
  82. .thumbnail_duration {
  83.     display: inline-block;
  84.     position: absolute;
  85.     background-color: rgba(0,0,0,0.5);
  86.     padding:0 4px;
  87.     bottom:0; right:0;
  88.     border-radius: 5px; /* fallback */
  89.     border-radius: 5px 0 3px 0;
  90. }
  91.  
  92.     /* only visible in specific modes */
  93. .grid_show { display: none; }
  94. .list_show { display: none; }
  95.  
  96. /* grid view */
  97. .item_container.grid .grid_show { display: inline; }
  98.     /* moves title closer to video above than below to clarify that it belongs to the former */
  99. .item_container.grid .status_container { padding-bottom: 15pt; }
  100. .item_container.grid .thumbnail_container { margin-bottom: 0; }
  101.  
  102. .item_container.grid li {
  103.     /* limit width per item */
  104.     display: inline-block;
  105.     width: 256px;
  106.     margin-right:1em;
  107.  
  108. }
  109.  
  110.     /* hide description – obsolete due to .list_show */
  111. /* .item_container.grid .description_container { display:none; } */
  112.  
  113.  
  114. /* list view */
  115. .item_container.list .list_show { display: inline; }
  116. .item_container.list .description_container {
  117.     display:block;
  118.     width:calc(100% - 300px); /* limit width to avoid breaking underneath */
  119. }
  120. .item_container.list li { display:block; clear:both; } /* extend over entire row */
  121. .item_container.list .thumbnail_wrapper {
  122.     display: inline-block;
  123.     width: 256px;
  124.     float:left;
  125.     margin-right: 1em;
  126. }
  127.  
  128. .item_container.list .info_wrapper {
  129.     /* Deactivated due to possibility of it getting below the thumbnail. Might be necessary on older browsers, but would require fixed width. */
  130.     /* display: inline-block; */
  131.     /* width: 256px; */
  132. }
  133.  
  134. /* responsive width - puts information below thumbnail on narrow displays (optional) */
  135. @media (max-width: 720px) {
  136.   .item_container.list .thumbnail_wrapper { float:none; }
  137.   .item_container.list .description_container { width: 100%; }
  138. }
  139.  
  140. /* dark theme (optional) */
  141. body { background-color:#222; color:#eee; }
  142. .status_container { color:#aaa; }
  143. </style>
  144.  
  145. <script type="text/javascript">
  146. // put item container into shortcut variable
  147. var item_container = document.getElementsByClassName("item_container")[0];
  148. var first_item = item_container.getElementsByTagName("li")[0];
  149. var toggle_grid_list_buttons = document.getElementsByClassName("toggle_grid_list_buttons")[0].getElementsByTagName("button");
  150.  
  151.  
  152. // set view
  153. function setView(mode) {
  154.     // if none set, default to grid
  155.     if (item_container.className.search("grid")+item_container.className.search("list") == -2) {
  156.         item_container.className="item_container grid";
  157.         document.cookie = "view_mode=grid";
  158.     }
  159.  
  160.     switch(mode) {
  161.         case "list":
  162.             // replaces the "grid" class with "list"
  163.             item_container.className = item_container.className.replace('grid','list');
  164.  
  165.             // hides "toggle to list view" button and shows "toggle to grid view" button
  166.             toggle_grid_list_buttons[0].style.display="block";
  167.             toggle_grid_list_buttons[1].style.display="none";
  168.  
  169.             // stores view mode into cookie
  170.             document.cookie = "view_mode=list";
  171.             break;
  172.         case "grid":
  173.             // replaces the "list" class with "grid"
  174.             item_container.className = item_container.className.replace('list','grid');
  175.  
  176.             // hides "toggle to grid view" button and shows "toggle to list view" button
  177.             toggle_grid_list_buttons[0].style.display="none";
  178.             toggle_grid_list_buttons[1].style.display="block";
  179.  
  180.             // stores view mode into cookie
  181.             document.cookie = "view_mode=grid";
  182.             break;
  183.     }
  184. }
  185.  
  186. // toggle view
  187. function toggleView_demo(mode) {
  188.     if (
  189.         // checks if grid mode is activated by looking for the word "grid" in the class
  190.         item_container.className.search("grid") > -1
  191.     ) {
  192.         setView("list");
  193.     } else if (
  194.         // checks for list mode
  195.         item_container.className.search("list") > -1
  196.     ) {
  197.         setView("grid");
  198.     } else {
  199.         // add "grid" class by default
  200.         item_container.className+=" grid";
  201.         document.cookie = "view_mode=grid";
  202.     }
  203. }
  204.  
  205. // Cookie function dependencies
  206. function setCookie(cname, cvalue, exdays) {
  207.   var d = new Date();
  208.   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  209.   var expires = "expires="+d.toUTCString();
  210.   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  211. }
  212.  
  213. function getCookie(cname) {
  214.   var name = cname + "=";
  215.   var ca = document.cookie.split(';');
  216.   for(var i = 0; i < ca.length; i++) {
  217.    var c = ca[i];
  218.    while (c.charAt(0) == ' ') {
  219.      c = c.substring(1);
  220.    }
  221.    if (c.indexOf(name) == 0) {
  222.      return c.substring(name.length, c.length);
  223.    }
  224.  }
  225.  return "";
  226. }
  227.  
  228.  
  229. // check configuration (note: only Firefox stores cookies for locally opened HTML files.)
  230. if ( getCookie("view_mode") == "grid" ) setView("grid");
  231. if ( getCookie("view_mode") == "list" ) setView("list");
  232.  
  233.  
  234. // Description width fallback for older browsers – uncomment and optionally convert to "onresize" if necessary.
  235. /*
  236. document.body.appendChild( document.createElement("style") );
  237. var description_width_fallback = document.body.lastChild;
  238. document.body.lastChild.className="description_width_fallback"; // label for page inspector
  239.  
  240. window.addEventListener('resize', function(event) {
  241.     if ( item_container.className.search("list") > -1 ) {
  242.         description_width_fallback.innerHTML = ".item_container.list .description_container { width: " + (first_item.offsetWidth-400) +"px; }";
  243.     }
  244. }, true);
  245. */
  246.  
  247. // Multiply list items for illustrative purposes – the following code would not be implemented on an actual web site.
  248. var li_1_content = first_item.innerHTML;
  249. var color_list = ['darkred', 'green', 'blue', 'yellow', 'orange', 'darkorange', 'darkgreen', 'darkseagreen', 'lightyellow', 'lightblue', 'lightskyblue', 'lightgreen', 'teal', 'turquoise', 'darkturquoise', 'mediumturquoise', 'lightcoral', 'antiquewhite', 'aqua', 'aquamarine', 'purple', 'violet', 'darkviolet', 'indigo', '#38F', 'lightseagreen', 'deepskyblue', 'steelblue', 'royalblue', 'beige', 'ivory', 'gray', 'slategray', 'darkslategray', 'wheat', 'gold', 'silver', 'brown', 'olive', 'lime', 'limegreen', 'greenyellow', 'yellowgreen', 'seagreen', 'crimson'];
  250. var count = 0;
  251.  
  252. for (
  253.     count = 0; // start counter
  254.     count < Math.floor(10+Math.random()*40); // repeat 10 to 50 times
  255.     count++ // count up
  256.     ) {
  257.     item_container.appendChild( document.createElement("li") );
  258.     item_container.lastChild.innerHTML=li_1_content;
  259.     // random color
  260.     var random_number = Math.floor(Math.random()*(color_list.length));
  261.     item_container.lastChild.querySelector(".thumbnail_container").style.backgroundColor=color_list[random_number];
  262. }
  263. </script>
  264.  
  265. </body>
  266. </html>
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!