Adding EnlargeMode.

Some refactor and fixes.

src/App.js

@@ -12,9 +12,6 @@ export default class App {
         Preferences.init();
         
         Styles.add(Styles.APP_STYLES, 'midefos-idealista-app-styles');
-        if (Preferences.get('darkMode')) {
-            Styles.add(Styles.DARK_MODE, 'midefos-idealista-dark-mode');
-        }
     
         new Menu();
         new Configuration();

src/Configuration.js

@@ -1,4 +1,6 @@
 import ConfigurationHTML from "./ConfigurationHTML.js";
+import DarkMode from "./DarkMode.js";
+import EnlargeImages from "./EnlargeImages.js";
 import Event from "./Event.js";
 import Information from "./Information.js";
 import Log from "./Log.js";
@@ -8,16 +10,34 @@ export default class Configuration {
 
     constructor() {
         document.querySelector('#main-header').innerHTML += ConfigurationHTML.create();
-        this._initEvents();
+        this._bindEvents();
 
-        this._initData();
+        this._init();
     }
 
-    _initEvents() {
+    static toggle() {
+        const container = document.querySelector(ConfigurationHTML.CONTAINER_SELECTOR);
+        if (getComputedStyle(container).display === 'none') {
+            container.style.display = 'block';
+            Log.debug(`Opened configuration`);
+        } else {
+            container.style.display = 'none';
+            Log.debug(`Closed configuration`);
+        }
+    }
+
+    static update() {
+        DarkMode.apply();
+        EnlargeImages.apply();
+    }
+
+    _bindEvents() {
         Event.click(ConfigurationHTML.SAVE_CONFIG_SELECTOR, () => {
             Preferences.save(this._extractConfiguration());
             Information.create();
+
             Configuration.toggle();
+            Configuration.update();
         });
 
         Event.change('#max-price-per-meter', (element) => {
@@ -26,9 +46,11 @@ export default class Configuration {
         });
     }
 
-    _initData() {
+    _init() {
         const maxPricePerMeter = document.querySelector('#max-price-per-meter');
         this._updateItemMeterPrices(maxPricePerMeter.value);
+
+        Configuration.update();
     }
 
     _updateItemMeterPrices(pricePerMeter) {
@@ -43,6 +65,7 @@ export default class Configuration {
         return {
             enabled: container.querySelector('#enabled').checked,
             darkMode: container.querySelector('#darkMode').checked,
+            enlargeImages: container.querySelector('#enlargeImages').checked,
             currentMoney: container.querySelector('#currentMoney').value,
             'max-price': container.querySelector('#max-price').value,
             'max-price-per-meter': container.querySelector('#max-price-per-meter').value,
@@ -63,15 +86,6 @@ export default class Configuration {
         }
     }
 
-    static toggle() {
+
-        const container = document.querySelector(ConfigurationHTML.CONTAINER_SELECTOR);
-        if (getComputedStyle(container).display === 'none') {
-            container.style.display = 'block';
-            Log.debug(`Opened configuration`);
-        } else {
-            container.style.display = 'none';
-            Log.debug(`Closed configuration`);
-        }
-    }
 
 }

src/ConfigurationHTML.js

@@ -35,6 +35,12 @@ export default class ConfigurationHTML {
                     ${CheckboxHTML.create('darkMode', Preferences.get('darkMode'))}
                     <span>Modo oscuro</span>
                 </label>
+
+                <label>
+                    ${CheckboxHTML.create('enlargeImages', Preferences.get('enlargeImages'))}
+                    <span>Modo imagen grande</span>
+            </label>
+
             </div>
             
             <div class='midefos-idealista-card'>

src/DarkMode.js

@@ -0,0 +1,20 @@
+import Preferences from "./Preferences.js";
+import Styles from "./Styles.js";
+
+export default class DarkMode {
+
+    static STYLES_KEY = 'midefos-idealista-dark-mode';
+
+    static apply() {
+        if (Preferences.get('darkMode')) {
+            this._addDarkMode();
+        } else {
+            Styles.remove(this.STYLES_KEY);
+        }
+    }
+
+    static _addDarkMode() {
+        Styles.add(Styles.DARK_MODE, this.STYLES_KEY);
+    }
+
+}

src/EnlargeImages.js

@@ -0,0 +1,20 @@
+import Preferences from "./Preferences.js";
+import Styles from "./Styles.js";
+
+export default class EnlargeImages {
+
+    static STYLES_KEY = 'midefos-idealista-enlarge-images';
+
+    static apply() {
+        if (Preferences.get('enlargeImages')) {
+            this._addEnlargeImages();
+        } else {
+            Styles.remove(this.STYLES_KEY);
+        }
+    }
+
+    static _addEnlargeImages() {
+        Styles.add(Styles.ENLARGE_IMAGES, this.STYLES_KEY);
+    }
+
+}

src/IconSvg.js

@@ -1,5 +1,5 @@
 export default class IconSvg {
 
-    static TICK = `<svg style="color: rgb(51, 209, 122);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" zoomAndPan="magnify" viewBox="0 0 30 30.000001" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656 " clip-rule="nonzero" fill="#33d17a"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#33d17a" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125 " fill-opacity="1" fill-rule="nonzero"></path></g></svg>`;
+    static TICK = `<svg style="color: rgb(51, 209, 122);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656 " clip-rule="nonzero" fill="#33d17a"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#33d17a" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125 " fill-opacity="1" fill-rule="nonzero"></path></g></svg>`;
 
 }

src/Item.js

@@ -4,6 +4,7 @@ import Locations from './Locations.js';
 export default class Item {
 
     static NAME_SELECTOR = '.item-link';
+    static DESCRIPTION_SELECTOR = '.item-description';
     static PRICE_SELECTOR = '.item-price';
     static GARAGE_SELECTOR = '.item-parking';
 
@@ -15,6 +16,7 @@ export default class Item {
         this._node = htmlNode;
 
         this.name = this._extractName();
+        this.description = this._extractDescription();
         this.locationName = this._extractLocationName();
 
         this.price = this._extractPrice();
@@ -22,8 +24,12 @@ export default class Item {
         this.priceMeter = this._extractPriceMeter();
 
         this.additionalInfo = this._extractAdditionalInfo();
+        
         this.hasGarage = this._extractGarage();
+
         this.hasLift = this._extractLift();
+        this.isNoLift = this._extractIsNoLift();
+
         this.isExterior = this._extractExterior();
         this.isInterior = this._extractInterior();
     }
@@ -84,10 +90,18 @@ export default class Item {
         return this.name.toLowerCase().includes(name.toLowerCase());
     }
 
+    _descriptionIncludes(description) {
+        return this.description.toLowerCase().includes(description.toLowerCase());
+    }
+
     _extractName() {
         return this._node.querySelector(Item.NAME_SELECTOR).textContent;
     }
 
+    _extractDescription() {
+        return this._node.querySelector(Item.DESCRIPTION_SELECTOR).textContent;
+    }
+
     _extractLocationName() {
         if (this.name.lastIndexOf(',') != -1) {
             return this.name
@@ -145,14 +159,23 @@ export default class Item {
         return this.additionalInfo.includes('con ascensor');
     }
 
-    _extractExterior() {
+    _extractIsNoLift() {
         if (!this.additionalInfo) return false;
-        return this.additionalInfo.includes('exterior');
+        return this.additionalInfo.includes('sin ascensor');
+    }
+
+    _extractExterior() {
+        const text = 'exterior';
+        if (this.additionalInfo && this.additionalInfo.includes(text)) return true;
+        if (this._descriptionIncludes(text)) return true;
+        return false;
     }
 
     _extractInterior() {
-        if (!this.additionalInfo) return false;
+        const text = 'interior';
-        return this.additionalInfo.includes('interior');
+        if (this.additionalInfo && this.additionalInfo.includes(text)) return true;
+        if (this._descriptionIncludes(text)) return true;
+        return false;
     }
 
     _extractGarage() {

src/ItemHTML.js

@@ -33,11 +33,11 @@ export default class ItemHTML {
             return this.ERROR_CLASS_NAME;
         }
 
-        if (this._shouldCheckLift(item) && !item.hasLift) {
+        if (this._shouldCheckLift(item) && item.isNoLift) {
             return this.ERROR_CLASS_NAME;
         }
 
-        if (this._shouldCheckExterior(item) && !item.isExterior) {
+        if (this._shouldCheckExterior(item) && item.isInterior) {
             return this.ERROR_CLASS_NAME;
         }
         return this.SUCCESS_CLASS_NAME;
@@ -49,6 +49,9 @@ export default class ItemHTML {
         html += this._createPercentagesPriceHTML(item);
         html += this._createPriceHTML(item);
         html += this._createPriceMeterHTML(item);
+        html += `</div>`;
+
+        html += `<div class='${this.INFORMATION_CONTAINER_CLASS_NAME}'>`;
         html += this._createGarageHTML(item);
         html += this._createLiftHTML(item);
         html += this._createExteriorHTML(item);
@@ -159,14 +162,12 @@ export default class ItemHTML {
             return ``;
         }
 
-        if (!item.additionalInfo) {
+        if (item.isNoLift) {
-            return this._createMissing('Ascensor');
+            return this._createError('Ascensor');
-        }
+        } else if (item.hasLift) {
-
-        if (item.hasLift) {
             return this._createSuccess('Ascensor');
         }
-        return this._createError('Ascensor');
+        return this._createMissing('Ascensor');
     }
 
     static _shouldCheckLift(item) {

src/Menu.js

@@ -9,7 +9,7 @@ export default class Menu {
     constructor() {
         if (this._shouldNotLoad()) return;
 
-        const mainContent = document.querySelector('#main-content');
+        const mainContent = document.querySelector('#main-content, #side-content');
         mainContent.innerHTML = MenuHTML.create() + mainContent.innerHTML;
 
         this._initEvents();

src/Preferences.js

@@ -44,6 +44,7 @@ export default class Preferences {
         return {
             enabled: true,
             darkMode: true,
+            enlargeImages: false,
 
             currentMoney: 0,
             'max-price': 120_000,

src/Styles.js

@@ -42,6 +42,11 @@ export default class Styles {
             border-bottom: none;
         }
 
+        .${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME} svg {
+            position: relative;
+            top: 2px;            
+        }
+
         .${ItemHTML.INFORMATION_CLASS_NAME} {
             display: flex;
             flex-direction: column;
@@ -157,7 +162,7 @@ export default class Styles {
             color: white;
         }
 
-        .id-logo {
+        .id-logo, .id-logo img {
             filter: invert();
         }
         
@@ -170,6 +175,35 @@ export default class Styles {
         }
     `;
 
+    static ENLARGE_IMAGES = `
+        .item-multimedia {
+            width: 60%;
+        }
+
+        .item-info-container {
+            width: 40%;
+        }
+
+        .item-multimedia,
+        .item-gallery,
+        .item-gallery .mask-wrapper {
+            height: 300px;
+        }
+
+        .rs-gallery .item-gallery {
+            height: unset;
+        }
+
+        .description {
+            height: auto;
+        }
+
+        .description p.ellipsis {
+            display: block;
+            position: unset;
+        }
+    `;
+
     static add(style, id = null) {
         if (id && document.querySelector(`#${id}`)) return;