☰

Analvids/LegalPorno Enhancer

Adds extra functionality to Analvids (formerly known as LegalPorno) and Pornbox. Easily filter out unwanted categories. Also adds tags on top of every scene.

As of 2021-12-22. See the latest version.

  1. // ==UserScript==
  2. // @name        Analvids/LegalPorno Enhancer
  3. // @namespace   https://www.analvids.com/forum/viewtopic.php?f=96&t=24238
  4. // @description Adds extra functionality to Analvids (formerly known as LegalPorno) and Pornbox. Easily filter out unwanted categories. Also adds tags on top of every scene.
  5. // @match       http*://*.analvids.com/*
  6. // @exclude     http*://account.analvids.com/*
  7. // @match       http*://*pornbox.com/*
  8. // @exclude     http*://forum.pornbox.com/*
  9. // @version     1.2.15
  10. // @grant       GM_getValue
  11. // @grant       GM_setValue
  12. // @grant       GM_addStyle
  13. // @run-at      document-start
  14. // ==/UserScript==
  15.  
  16. const is_lp = !!window.location.href.match(/(analvids|pornworld)/);
  17.  
  18. let glo_filters = {
  19.   studios: {
  20.     'Giorgio Grandi': true,
  21.     'Gonzo.com': true,
  22.     'NRX-Studio': true,
  23.     "Giorgio's Lab": true,
  24.     'Yummy estudio': true,
  25.     'Busted T-Girls': true,
  26.     'VK Studio': true,
  27.     'Black in White': true,
  28.     'N&F studio': true,
  29.     XfreaX: true,
  30.     'Interracial Vision': true,
  31.     'Angelo Godshack Original': true,
  32.     'Sineplex SOS': true,
  33.     'Sineplex CZ': true,
  34.     'PISSING E ANAL FANTASY': true,
  35.     'LATIN TEENS productions': true,
  36.     'Natasha Teen Productions': true,
  37.     'Mambo Perv': true,
  38.     'American Anal': true,
  39.     'Rock Corp': true,
  40.     'TheWonderToys Training Studio': true,
  41.     'Vira Gold Films': true,
  42.     'Anal Maniacs by Lady Dee': true,
  43.     'Eden does': true,
  44.     'Pineapples Studio': true,
  45.     'Porn World': false,
  46.     'Show Everything': false,
  47.   },
  48.   categories: {
  49.     Piss: true,
  50.     'Piss Drink': true,
  51.     Fisting: true,
  52.     Prolapse: true,
  53.     Trans: true,
  54.   },
  55. };
  56.  
  57. const studio_colors = {
  58.   'Gonzo.com': { bg: '#e9000093', text: '#ffeeee' },
  59.   'Giorgio Grandi': { bg: '#2313d393', text: '#EEE' },
  60.   'Interracial Vision': { bg: '#24242493', text: '#e6e6e6' },
  61.   'American Anal': { bg: '#0C532693', text: '#d1f3e8' },
  62.   "Giorgio's Lab": { bg: '#3DB8DC93', text: '#EEEEEE' },
  63.   'NRX-Studio': { bg: '#24f6d093', text: '#424d4b' },
  64.   'N&F studio': { bg: '#1091c493', text: '#EEEEEE' },
  65.   'Yummy estudio': { bg: '#0a11e493', text: '#ffff25' },
  66.   'Busted T-Girls': { bg: '#BDF61993', text: '#3485A6' },
  67.   'VK Studio': { bg: '#d7fbaa93', text: '#3a531b' },
  68.   'Black in White': { bg: '#EEEEEE93', text: '#000000' },
  69.   'N&F studio': { bg: '#8D15CA93', text: '#EEEEEE' },
  70.   XfreaX: { bg: '#93076A93', text: '#EEEEEE' },
  71.   'Angelo Godshack Original': { bg: '#6ba2d493', text: '#EEEEEE' },
  72.   'Sineplex SOS': { bg: '#9C44EE93', text: '#EEEEEE' },
  73.   'Sineplex CZ': { bg: '#8A0EB393', text: '#EEEEEE' },
  74.   'PISSING E ANAL FANTASY': { bg: '#ff5e0093', text: '#fbf275' },
  75.   'LATIN TEENS productions': { bg: '#1AFB5493', text: '#555555' },
  76.   'Natasha Teen Productions': { bg: '#EE178893', text: '#EEEEEE' },
  77.   'Mambo Perv': { bg: '#C729A593', text: '#EEEEEE' },
  78.   'Rock Corp': { bg: '#6D164493', text: '#83C650' },
  79.   'TheWonderToys Training Studio': { bg: '#ACEACF93', text: '#5F546A' },
  80.   'Vira Gold Films': { bg: '#F7AF7C93', text: '#662a35' },
  81.   'Anal Maniacs by Lady Dee': { bg: '#4B703993', text: '#EEEEEE' },
  82.   'Eden does': { bg: '#378B0393', text: '#EEEEEE' },
  83.   'Pineapples Studio': { bg: '#674ABA93', text: '#EEEEEE' },
  84.   'Porn World': { bg: '#C1015A93', text: '#E2E316' },
  85. };
  86.  
  87. // Uncomment the following line to reset global filters
  88. // GM_setValue('user_filters', JSON.stringify(glo_filters));
  89.  
  90. validateUserFilters = filters => {
  91.   if (!filters.studios || !filters.categories) return false;
  92.   if (
  93.     Object.keys(filters.studios).length !==
  94.     Object.keys(glo_filters.studios).length
  95.   )
  96.     return false;
  97.   if (
  98.     Object.keys(filters.categories).length !==
  99.     Object.keys(glo_filters.categories).length
  100.   )
  101.     return false;
  102.   if (
  103.     Object.keys(filters.categories)
  104.       .sort()
  105.       .some(
  106.         (val, idx) => val !== Object.keys(glo_filters.categories).sort()[idx]
  107.       )
  108.   )
  109.     return false;
  110.   if (
  111.     Object.keys(filters.studios)
  112.       .sort()
  113.       .some((val, idx) => val !== Object.keys(glo_filters.studios).sort()[idx])
  114.   )
  115.     return false;
  116.   return true;
  117. };
  118.  
  119. try {
  120.   const user_config = GM_getValue('user_filters');
  121.   if (!user_config)
  122.     throw new Error('No user filters found. Using default ones.');
  123.   user_filters = JSON.parse(user_config);
  124.   if (!validateUserFilters(user_filters))
  125.     throw new Error('Invalid user settings.');
  126.   glo_filters = user_filters;
  127. } catch (e) {}
  128.  
  129. const studios = {
  130.   Interracial: 'Interracial Vision',
  131.   'Hard Porn World': 'Porn World',
  132. };
  133.  
  134. const icon_categories = {
  135.   interracial: 'IR',
  136.   'double anal (DAP)': 'DAP',
  137.   fisting: 'Fisting',
  138.   prolapse: 'Prolapse',
  139.   transsexual: 'Trans',
  140.   trans: 'Trans',
  141.   'triple anal (TAP)': 'TAP',
  142.   piss: 'Piss',
  143.   squirting: 'Squirt',
  144.   '3+ on 1': '3+on1',
  145.   'double vaginal (DPP)': 'DPP',
  146.   'first time': '1st',
  147.   'triple penetration': 'TP',
  148.   '0% pussy': '0% Pussy',
  149.   'cum swallowing': 'Cum Swallow',
  150.   'piss drinking': 'Piss Drink',
  151.   'anal creampies': 'Anal Creampie',
  152.   '1 on 1': '1on1',
  153.   milf: 'Milf',
  154.   'facial cumshot': 'Facial',
  155. };
  156.  
  157. GM_addStyle(`
  158. .hiddenScene {
  159.   display: none !important;
  160. }
  161.  
  162. .hide_element {
  163.   display: none !important;
  164. }
  165.  
  166. .thumbnail-duration {
  167.   top: 0 !important;
  168.   right: 0 !important;
  169.   left: unset !important;
  170.   bottom: unset !important;
  171.   margin: 5px !important;
  172. }
  173.  
  174. .enhanced_categories_container {
  175.   width: 100%;
  176.   display: flex;
  177.   flex-wrap: wrap-reverse;
  178.   position: absolute;
  179.   bottom:0; left: 0;
  180.   z-index: 3;
  181.   padding: 3px 5px;
  182. }
  183.  
  184. .enchanced_icon {
  185.   border-radius: 3px;
  186.   background-color: #616161;
  187.   color: #eee;
  188.   opacity: 0.9;
  189.   padding: 2px 7px;
  190.   margin-right: 2px;
  191.   margin-top: 2px;
  192.   font-size: 13px;
  193. }
  194.  
  195. .enhanced--studio {
  196.   position: absolute;
  197.   top: 0;
  198.   left: 0;
  199.   z-index: 3;
  200.   display: flex;
  201.   margin: 4px 6px;
  202.   font-family: sans-serif;
  203.   font-weight: 600;
  204.   font-size: 0.98em;
  205.   background-color: #a76523c9;
  206.   border-radius: 3px;
  207.   padding: 2px 7px;
  208.   color: white;
  209.   // text-shadow: 1px 1px #00000080;
  210.   margin-right: 4px;
  211. }
  212.  
  213. .enhanced_views_label {
  214.   position: absolute;
  215.   top: 28px;
  216.   right: 5px;
  217.   font-size: 11px;
  218.   display: flex;
  219. }
  220.  
  221. .enhanced--views {
  222.   background-color: rgba(102,102,102,0.6);
  223.   padding: 2px 6px;
  224.   border-radius: 3px;
  225.   color: #fff;
  226.   display: flex;
  227.   height: 100%;
  228.   align-items: center;
  229.   justify-content: center;
  230. }
  231.  
  232. .enhanced--views > i {
  233.   margin-right: 5px;
  234. }
  235.  
  236. .item__img:hover > div {
  237.   display: none;
  238. }
  239.  
  240. .item__img-labels-bottom {
  241.   top: 3px;
  242.   right: 3px;
  243.   left: unset;
  244.   bottom: unset;
  245.   display: flex
  246. }
  247.  
  248. .img-label {
  249.   margin-top: unset;
  250.   margin-left: 2px;
  251. }
  252.  
  253. .item__img-labels {
  254.   display: flex;
  255.   flex-direction: row-reverse;
  256.   left: unset;
  257.   right: 3px;
  258.   top: 23px;
  259. }
  260.  
  261. /* Filter Css Begin */
  262. .filters_container_lp {
  263.   margin-left: -15px;
  264.   margin-right: -15px;
  265. }
  266.  
  267. .filters_container--main {
  268.   width: 100%;
  269.   display: flex;
  270.   justify-content: center;
  271.   background: linear-gradient(
  272.     0deg,
  273.     #babcbc 0%,
  274.     #dfe1e1 2%,
  275.     #dfe1e1 98%,
  276.     #babcbc 100%
  277.   );
  278. }
  279.  
  280. .filters_card {
  281.   margin: 0 25px;
  282.   padding-bottom: 15px;
  283.   display: flex;
  284.   flex-direction: column;
  285.   align-items: center;
  286.   position: relative;
  287. }
  288.  
  289. .filters_selections {
  290.   display: grid;
  291.   grid-template-columns: repeat(3, 1fr);
  292.   margin-bottom: 10px;
  293. }
  294.  
  295. .filters--divider {
  296.   width: 1px;
  297.   background-color: rgb(0, 0, 0, 0.25);
  298.   height: 50px;
  299.   margin-top: 15px;
  300.   align-self: center;
  301. }
  302.  
  303. .filters--selection {
  304.   padding: 1px 10px 0 0;
  305.   min-width: 140px;
  306.   display: flex;
  307.   align-items: center;
  308. }
  309.  
  310. .filters--selection > label,
  311. .filters--selection > input[type="checkbox"] {
  312.   margin: 0 2px 0 0;
  313.   font-weight: bold;
  314. }
  315.  
  316. .fitlers--header {
  317.   padding: 5px 0 5px 0;
  318.   align-self: center;
  319.   font-weight: bold;
  320. }
  321.  
  322. .enhanced_toggle {
  323.   background: -webkit-linear-gradient(
  324.     top,
  325.     #a9a9a9 0%,
  326.     #d97575 5%,
  327.     #563434 100%
  328.   ) !important;
  329.   // height: 100%;
  330.   border: 1px solid #722424 !important;
  331.   color: white;
  332.   padding: 7px 11px;
  333.   font-weight: 700;
  334.   border: none !important;
  335.   }
  336.  
  337. .enhanced_toggle_pb {
  338.   height: 100%;
  339.   padding: 7px 11px;
  340.   border-radius: 300px;
  341.   position: absolute;
  342.   margin-left: 4px;
  343. }
  344.  
  345. .enhanced_toggle_lp {
  346.   border-radius: 200px;
  347.   margin-left: 4px;
  348. }
  349.  
  350. .enhanced_toggle:hover {
  351.   cursor: pointer;
  352. }
  353.  
  354. .enhanced_toggle > i {
  355.   font-size: 12px;
  356. }
  357. /* Filter Css End */
  358.  
  359. .enhanced--sort {
  360.   display: grid;
  361.   grid-template-columns: 1fr 1fr;
  362.   justify-items: center;
  363.   grid-gap: 2px;
  364.   position: absolute;
  365.  
  366.   top: -4px;
  367.   right: 210px;
  368. }
  369.  
  370. .enhanced--sort--navbar {
  371.   right: 25px;
  372.   top: 6px;
  373. }
  374.  
  375. .enhanced--sort > span {
  376.   grid-column-end: span 2;
  377.   color: #fff;
  378.   
  379. }
  380.  
  381. .enhanced--sort > button {
  382.   width: 70px;
  383.   height: 23px;
  384.   justify-content: center;
  385.   align-items: center;
  386.   text-align: center;
  387.   padding: 0;
  388.   margin: 0;
  389. }
  390.  
  391. .page-section {
  392.   position: relative !important;
  393. }
  394. `);
  395.  
  396. const getSceneInfo = scene => {
  397.   const info = {
  398.     studio: null,
  399.     categories: null,
  400.     date: null,
  401.     views: null,
  402.   };
  403.  
  404.   info.studio = scene.querySelector(
  405.     '.rating-studio-name, a[href^="/application/studio/"]'
  406.   );
  407.   info.studio = info.studio ? info.studio.innerText : null;
  408.   if (studios[info.studio]) {
  409.     info.studio = studios[info.studio];
  410.   }
  411.   info.categories = [...scene.querySelectorAll('a[href*="niche/"]')]
  412.     .filter(cat => cat.innerText && icon_categories[cat.innerText])
  413.     .map(cat => icon_categories[cat.innerText])
  414.     .sort();
  415.   // info.categories = info.categories.filter(
  416.   //   cat => !(cat === 'Piss' && info.categories.includes('Piss Drink'))
  417.   // );
  418.   info.categories = Array.from(new Set(info.categories));
  419.  
  420.   const views = scene.querySelector('.rating-views');
  421.   const date = scene.querySelector('.glyphicon-calendar');
  422.  
  423.   if (views) {
  424.     info.views = parseInt(views.innerText.replace('VIEWS:', '').trim(), 10);
  425.   }
  426.   if (date) {
  427.     try {
  428.       info.date = new Date(
  429.         date.parentElement.innerText.replace('RELEASE:', '').trim()
  430.       );
  431.     } catch (e) {}
  432.   }
  433.  
  434.   return info;
  435. };
  436.  
  437. const formatViews = n => {
  438.   if (n >= 1e3 && n < 1e6) return +(n / 1e3).toFixed(0) + 'k';
  439.   if (n >= 1e6 && n < 1e9) return +(n / 1e6).toFixed(0) + 'm';
  440.   if (n >= 1e9 && n < 1e12) return +(n / 1e9).toFixed(0) + 'b';
  441.   // if (n >= 1e12) return +(n / 1e12).toFixed(1) + "T";
  442.   return n;
  443. };
  444.  
  445. const enhanceScene = scene => {
  446.   // Remove icons from thumnail. ("4k" and "new")
  447.   const icons = scene.querySelectorAll('.icon, .thumbnail-price');
  448.   for (const icon of icons) {
  449.     icon.classList.add('hide_element');
  450.   }
  451.  
  452.   const { studio, categories, views, date } = getSceneInfo(scene);
  453.  
  454.   if (studio) {
  455.     const studioLabel = document.createElement('div');
  456.     studioLabel.classList.add('enhanced--studio');
  457.     studioLabel.innerHTML = studio;
  458.  
  459.     if (studio_colors[studio]) {
  460.       studioLabel.style = `
  461.       background-color: ${studio_colors[studio]['bg']}; color: ${studio_colors[studio]['text']};
  462.       `;
  463.     }
  464.  
  465.     if (views) {
  466.       const viewsLabel = document.createElement('div');
  467.       viewsLabel.innerHTML = `
  468.       <div class='enhanced--views'><i class='fa fa-eye'></i>${formatViews(
  469.         views
  470.       )}</div>`;
  471.       viewsLabel.classList.add('enhanced_views_label');
  472.       if (scene.querySelector('.thumbnail-image')) {
  473.         scene.querySelector('.thumbnail-image').appendChild(viewsLabel);
  474.       }
  475.     }
  476.  
  477.     // studioLabel.classList.add('enhanced_title_tags');
  478.     scene
  479.       .querySelector('.thumbnail-image, .item__img')
  480.       .appendChild(studioLabel);
  481.   }
  482.   if (categories.length) {
  483.     const cat_div = document.createElement('div');
  484.     cat_div.classList.add('enhanced_categories_container');
  485.     for (const cat of categories) {
  486.       const icon = document.createElement('div');
  487.       icon.classList.add('enchanced_icon');
  488.       icon.innerHTML = cat;
  489.       cat_div.appendChild(icon);
  490.     }
  491.  
  492.     if (scene.querySelector('.thumbnail-image, .item__img')) {
  493.       scene.querySelector('.thumbnail-image, .item__img').appendChild(cat_div);
  494.     }
  495.   }
  496. };
  497.  
  498. const isStudioFiltered = studio => {
  499.   for (const key of Object.keys(glo_filters.studios)) {
  500.     if (studio && studio.includes(key) && glo_filters.studios[key])
  501.       return false;
  502.   }
  503.   return true;
  504. };
  505.  
  506. const isSceneFiltered = scene => {
  507.   const { studio, categories, views, date } = getSceneInfo(scene);
  508.  
  509.   if (!glo_filters.studios['Show Everything']) {
  510.     if (isStudioFiltered(studio)) return true;
  511.   }
  512.  
  513.   for (const key of Object.keys(glo_filters.categories)) {
  514.     if (categories && categories.includes(key) && !glo_filters.categories[key])
  515.       return true;
  516.   }
  517.  
  518.   return false;
  519. };
  520.  
  521. const filterScene = scene => {
  522.   if (isSceneFiltered(scene)) {
  523.     scene.classList.add('hiddenScene');
  524.   }
  525. };
  526.  
  527. const updateFilters = () => {
  528.   GM_setValue('user_filters', JSON.stringify(glo_filters));
  529.   const scenes = document.querySelectorAll('.thumbnail, .block-item');
  530.   for (const scene of scenes) {
  531.     if (scene.classList.contains('hiddenScene'))
  532.       scene.classList.remove('hiddenScene');
  533.     filterScene(scene);
  534.   }
  535. };
  536.  
  537. const getStudiosCheckboxes = () => {
  538.   return [
  539.     ...document.querySelectorAll(
  540.       'input[name="studios"]:not(input[id="Show Everything"])'
  541.     ),
  542.   ];
  543. };
  544.  
  545. const createFilterElement = () => {
  546.   const { studios, categories } = glo_filters;
  547.  
  548.   const studioHtml = Object.keys(studios).reduce(
  549.     (acc, studio) =>
  550.       (acc += `<div class="filters--selection">
  551.       <input type="checkbox" name="studios" id="${studio}"
  552.       ${studios[studio] ? 'checked="checked"' : ''}
  553.       ${
  554.         studios['Show Everything'] && studio !== 'Show Everything'
  555.           ? 'disabled=true"'
  556.           : ''
  557.       }
  558.       />
  559.       <label for="${studio}"
  560.       ${studio == 'Show Everything' ? 'style= "color:#f83600;"' : ''}>
  561.       ${studio}</label>
  562.     </div>`),
  563.     ''
  564.   );
  565.  
  566.   const categoriesHtml = Object.keys(categories).reduce(
  567.     (acc, cat) =>
  568.       (acc += `<div class="filters--selection">
  569.       <input type="checkbox" name="categories" id="${cat}"
  570.       ${categories[cat] ? 'checked="checked"' : ''}
  571.       />
  572.       <label for="${cat}">${cat}</label>
  573.     </div>`),
  574.     ''
  575.   );
  576.  
  577.   const form = document.createElement('form');
  578.   form.classList.add('filters_container', 'hide_element');
  579.   if (is_lp) form.classList.add('filters_container_lp');
  580.   form.innerHTML = `<div class="filters_container--main">
  581.     <div class="filters_card">
  582.       <div class="fitlers--header">Studios:</div>
  583.       <div class="filters_selections">
  584.         ${studioHtml}
  585.       </div>
  586.       <div>
  587.           <input type="button" value="Select All">
  588.           <input type="button" value="Clear">
  589.         </div>
  590.     </div>
  591.     <!--  -->
  592.     <div class="filters--divider"></div>
  593.     <!--  -->
  594.     <div class="filters_card">
  595.       <div class="fitlers--header">Categories:</div>
  596.       <div class="filters_selections">
  597.         ${categoriesHtml}
  598.       </div>
  599.     </div>
  600.     </div>`;
  601.  
  602.   form.addEventListener('click', e => {
  603.     if (!e.target.type) return;
  604.  
  605.     if (e.target.type == 'button') {
  606.       if (e.target.value === 'Select All') {
  607.         getStudiosCheckboxes().forEach(n => {
  608.           n.checked = true;
  609.         });
  610.  
  611.         Object.keys(glo_filters.studios).forEach(studio => {
  612.           if (studio === 'Show Everything') return;
  613.           glo_filters.studios[studio] = true;
  614.         });
  615.       }
  616.       if (e.target.value === 'Clear') {
  617.         getStudiosCheckboxes().forEach(n => {
  618.           n.checked = false;
  619.         });
  620.         Object.keys(glo_filters.studios).forEach(studio => {
  621.           glo_filters.studios[studio] = false;
  622.         });
  623.       }
  624.       // glo_filters[e.target.name][e.target.id] = e.target.checked;
  625.     }
  626.  
  627.     if (e.target.type == 'checkbox') {
  628.       glo_filters[e.target.name][e.target.id] = e.target.checked;
  629.     }
  630.  
  631.     if (e.target.id === 'Show Everything') {
  632.       getStudiosCheckboxes().forEach(el => {
  633.         el.disabled = !el.disabled;
  634.       });
  635.     }
  636.  
  637.     updateFilters();
  638.   });
  639.  
  640.   const lp_header = document.querySelector('.header');
  641.   const pb_header = document.querySelector('#wrap-container');
  642.  
  643.   if (lp_header) lp_header.insertBefore(form, lp_header.childNodes[2]);
  644.   if (pb_header) pb_header.insertBefore(form, pb_header.childNodes[0]);
  645.   createFilterToggle();
  646. };
  647.  
  648. const createFilterToggle = () => {
  649.   const toggleFilterBtn = document.createElement('button');
  650.   toggleFilterBtn.classList.add('enhanced_toggle');
  651.   toggleFilterBtn.classList.add(`enhanced_toggle_${is_lp ? 'lp' : 'pb'}`);
  652.  
  653.   toggleFilterBtn.innerHTML = `<i class="fa fa-filter"></i>`;
  654.  
  655.   toggleFilterBtn.addEventListener('click', () => {
  656.     const filters_container = document.querySelector('.filters_container');
  657.     if (filters_container) {
  658.       filters_container.classList.toggle('hide_element');
  659.     }
  660.   });
  661.  
  662.   const search_container = document.querySelector(
  663.     '.nav-search-container, .header-block:nth-of-type(3)'
  664.   );
  665.   is_lp ? (search_container.style = 'display: flex;') : null;
  666.   search_container.appendChild(toggleFilterBtn);
  667. };
  668.  
  669. const callback = mutationsList => {
  670.   for (let mutation of mutationsList) {
  671.     for (const node of mutation.addedNodes) {
  672.       if (node.nodeType === 1) {
  673.         if (node.nodeName === 'DIV') {
  674.           if (
  675.             node.classList.contains('block-item') ||
  676.             node.classList.contains('thumbnail')
  677.           ) {
  678.             enhanceScene(node);
  679.             filterScene(node);
  680.           }
  681.         }
  682.       }
  683.     }
  684.   }
  685. };
  686.  
  687. const config = { childList: true, subtree: true, attributes: true };
  688. const observer = new MutationObserver(callback);
  689. observer.observe(window.document, config);
  690.  
  691. const sortScenes = ({ date = false, views = false, asc = true } = {}) => {
  692.   const node = document.querySelector('.thumbnails');
  693.   [...node.children]
  694.     .sort((a, b) => {
  695.       const infoA = getSceneInfo(a);
  696.       const infoB = getSceneInfo(b);
  697.  
  698.       let order = -1;
  699.  
  700.       if (date) {
  701.         order = infoA.date > infoB.date ? -1 : 1;
  702.       } else if (views) {
  703.         order = infoA.views > infoB.views ? -1 : 1;
  704.       } else {
  705.         order = 0;
  706.       }
  707.  
  708.       if (a.classList.contains('button--load-more')) return 0;
  709.       if (b.classList.contains('button--load-more')) return 0;
  710.  
  711.       return !asc ? order : order * -1;
  712.     })
  713.     .map(scene => {
  714.       node.appendChild(scene);
  715.       node.appendChild(document.createTextNode(' '));
  716.     });
  717. };
  718.  
  719. const sortBtns = () => {
  720.   const sortDiv = document.createElement('div');
  721.   sortDiv.classList.add('enhanced--sort');
  722.   sortDiv.innerHTML = `
  723.   <span>Sort By:</span>
  724.   <button asc="false">Date</button>
  725.   <button asc="false">Views</button>
  726.   `;
  727.  
  728.   sortDiv.addEventListener('click', e => {
  729.     if (e.target.tagName === 'BUTTON') {
  730.       const asc = e.target.getAttribute('asc') === 'true';
  731.       e.target.setAttribute('asc', !asc);
  732.       const sortObj = { asc };
  733.       sortObj[e.target.innerText.toLowerCase()] = true;
  734.       sortScenes(sortObj);
  735.     }
  736.   });
  737.  
  738.   const navbar = document.querySelectorAll('.navbar > .container-fluid');
  739.   if (navbar.length) {
  740.     navbar[navbar.length - 1].appendChild(sortDiv);
  741.     sortDiv.classList.add('enhanced--sort--navbar');
  742.     return;
  743.   }
  744.  
  745.   const cont = document.querySelector('.page-section');
  746.   if (cont) {
  747.     sortDiv.children[0].style = 'color: #000;';
  748.     cont.appendChild(sortDiv);
  749.   }
  750. };
  751.  
  752. document.addEventListener('DOMContentLoaded', () => {
  753.   if (!is_lp && !document.querySelector('.nav-search-container')) return;
  754.   createFilterElement();
  755.   sortBtns();
  756.  
  757.   const nodes = document.querySelectorAll('.block-item, .thumbnail');
  758.   [...nodes].map(node => {
  759.     enhanceScene(node);
  760.     filterScene(node);
  761.   });
  762. });