Adding EnlargeMode.

Some refactor and fixes.
2022-10-20 00:36:54 +02:00
parent 17f9668e22
commit 54e46e3d84
11 changed files with 149 additions and 33 deletions
--- a/src/App.js
+++ b/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();
--- a/src/Configuration.js
+++ b/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`);
-        }
-    }
+

 }
--- a/src/ConfigurationHTML.js
+++ b/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'>
--- a/src/DarkMode.js
+++ b/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);
+    }
+
+}
--- a/src/EnlargeImages.js
+++ b/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);
+    }
+
+}
--- a/src/IconSvg.js
+++ b/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>`;

 }
--- a/src/Item.js
+++ b/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;
-        return this.additionalInfo.includes('interior');
+        const text = 'interior';
+        if (this.additionalInfo && this.additionalInfo.includes(text)) return true;
+        if (this._descriptionIncludes(text)) return true;
+        return false;
    }

    _extractGarage() {
--- a/src/ItemHTML.js
+++ b/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) {
-            return this._createMissing('Ascensor');
-        }
-
-        if (item.hasLift) {
+        if (item.isNoLift) {
+            return this._createError('Ascensor');
+        } else if (item.hasLift) {
            return this._createSuccess('Ascensor');
        }
-        return this._createError('Ascensor');
+        return this._createMissing('Ascensor');
    }

    static _shouldCheckLift(item) {
--- a/src/Menu.js
+++ b/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();
--- a/src/Preferences.js
+++ b/src/Preferences.js
@@ -44,6 +44,7 @@ export default class Preferences {
        return {
            enabled: true,
            darkMode: true,
+            enlargeImages: false,

            currentMoney: 0,
            'max-price': 120_000,
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -40,7 +40,12 @@ export default class Styles {

        .${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME}:last-of-type {
            border-bottom: none;
-          }
+        }
+
+        .${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME} svg {
+            position: relative;
+            top: 2px;            
+        }

        .${ItemHTML.INFORMATION_CLASS_NAME} {
            display: flex;
@@ -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;