diff --git a/src/App.js b/src/App.js index 526a74b..c5a12aa 100644 --- 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(); diff --git a/src/Configuration.js b/src/Configuration.js index b68c558..e7c30a1 100644 --- 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`); - } - } + } \ No newline at end of file diff --git a/src/ConfigurationHTML.js b/src/ConfigurationHTML.js index 6f08d81..8a2e692 100644 --- a/src/ConfigurationHTML.js +++ b/src/ConfigurationHTML.js @@ -35,6 +35,12 @@ export default class ConfigurationHTML { ${CheckboxHTML.create('darkMode', Preferences.get('darkMode'))} Modo oscuro + + +
diff --git a/src/DarkMode.js b/src/DarkMode.js new file mode 100644 index 0000000..ad60cf4 --- /dev/null +++ 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); + } + +} \ No newline at end of file diff --git a/src/EnlargeImages.js b/src/EnlargeImages.js new file mode 100644 index 0000000..8971420 --- /dev/null +++ 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); + } + +} \ No newline at end of file diff --git a/src/IconSvg.js b/src/IconSvg.js index 8f61bb6..0b58034 100644 --- a/src/IconSvg.js +++ b/src/IconSvg.js @@ -1,5 +1,5 @@ export default class IconSvg { - static TICK = ``; + static TICK = ``; } \ No newline at end of file diff --git a/src/Item.js b/src/Item.js index d50bff1..377a26c 100644 --- 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() { diff --git a/src/ItemHTML.js b/src/ItemHTML.js index 61dfbbb..1498d9e 100644 --- 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 += `
`; + + html += `
`; 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) { diff --git a/src/Menu.js b/src/Menu.js index 5d69cc2..9daa548 100644 --- 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(); diff --git a/src/Preferences.js b/src/Preferences.js index 22ab375..93b1998 100644 --- 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, diff --git a/src/Styles.js b/src/Styles.js index 9b0b3f4..eb4b1c1 100644 --- 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;