Adding EnlargeMode.
Some refactor and fixes.
This commit is contained in:
parent
17f9668e22
commit
54e46e3d84
@ -12,9 +12,6 @@ export default class App {
|
|||||||
Preferences.init();
|
Preferences.init();
|
||||||
|
|
||||||
Styles.add(Styles.APP_STYLES, 'midefos-idealista-app-styles');
|
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 Menu();
|
||||||
new Configuration();
|
new Configuration();
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
import ConfigurationHTML from "./ConfigurationHTML.js";
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
import DarkMode from "./DarkMode.js";
|
||||||
|
import EnlargeImages from "./EnlargeImages.js";
|
||||||
import Event from "./Event.js";
|
import Event from "./Event.js";
|
||||||
import Information from "./Information.js";
|
import Information from "./Information.js";
|
||||||
import Log from "./Log.js";
|
import Log from "./Log.js";
|
||||||
@ -8,16 +10,34 @@ export default class Configuration {
|
|||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
document.querySelector('#main-header').innerHTML += ConfigurationHTML.create();
|
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, () => {
|
Event.click(ConfigurationHTML.SAVE_CONFIG_SELECTOR, () => {
|
||||||
Preferences.save(this._extractConfiguration());
|
Preferences.save(this._extractConfiguration());
|
||||||
Information.create();
|
Information.create();
|
||||||
|
|
||||||
Configuration.toggle();
|
Configuration.toggle();
|
||||||
|
Configuration.update();
|
||||||
});
|
});
|
||||||
|
|
||||||
Event.change('#max-price-per-meter', (element) => {
|
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');
|
const maxPricePerMeter = document.querySelector('#max-price-per-meter');
|
||||||
this._updateItemMeterPrices(maxPricePerMeter.value);
|
this._updateItemMeterPrices(maxPricePerMeter.value);
|
||||||
|
|
||||||
|
Configuration.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateItemMeterPrices(pricePerMeter) {
|
_updateItemMeterPrices(pricePerMeter) {
|
||||||
@ -43,6 +65,7 @@ export default class Configuration {
|
|||||||
return {
|
return {
|
||||||
enabled: container.querySelector('#enabled').checked,
|
enabled: container.querySelector('#enabled').checked,
|
||||||
darkMode: container.querySelector('#darkMode').checked,
|
darkMode: container.querySelector('#darkMode').checked,
|
||||||
|
enlargeImages: container.querySelector('#enlargeImages').checked,
|
||||||
currentMoney: container.querySelector('#currentMoney').value,
|
currentMoney: container.querySelector('#currentMoney').value,
|
||||||
'max-price': container.querySelector('#max-price').value,
|
'max-price': container.querySelector('#max-price').value,
|
||||||
'max-price-per-meter': container.querySelector('#max-price-per-meter').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`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
@ -35,6 +35,12 @@ export default class ConfigurationHTML {
|
|||||||
${CheckboxHTML.create('darkMode', Preferences.get('darkMode'))}
|
${CheckboxHTML.create('darkMode', Preferences.get('darkMode'))}
|
||||||
<span>Modo oscuro</span>
|
<span>Modo oscuro</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
${CheckboxHTML.create('enlargeImages', Preferences.get('enlargeImages'))}
|
||||||
|
<span>Modo imagen grande</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='midefos-idealista-card'>
|
<div class='midefos-idealista-card'>
|
||||||
|
20
src/DarkMode.js
Normal file
20
src/DarkMode.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
20
src/EnlargeImages.js
Normal file
20
src/EnlargeImages.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
export default class IconSvg {
|
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>`;
|
||||||
|
|
||||||
}
|
}
|
31
src/Item.js
31
src/Item.js
@ -4,6 +4,7 @@ import Locations from './Locations.js';
|
|||||||
export default class Item {
|
export default class Item {
|
||||||
|
|
||||||
static NAME_SELECTOR = '.item-link';
|
static NAME_SELECTOR = '.item-link';
|
||||||
|
static DESCRIPTION_SELECTOR = '.item-description';
|
||||||
static PRICE_SELECTOR = '.item-price';
|
static PRICE_SELECTOR = '.item-price';
|
||||||
static GARAGE_SELECTOR = '.item-parking';
|
static GARAGE_SELECTOR = '.item-parking';
|
||||||
|
|
||||||
@ -15,6 +16,7 @@ export default class Item {
|
|||||||
this._node = htmlNode;
|
this._node = htmlNode;
|
||||||
|
|
||||||
this.name = this._extractName();
|
this.name = this._extractName();
|
||||||
|
this.description = this._extractDescription();
|
||||||
this.locationName = this._extractLocationName();
|
this.locationName = this._extractLocationName();
|
||||||
|
|
||||||
this.price = this._extractPrice();
|
this.price = this._extractPrice();
|
||||||
@ -22,8 +24,12 @@ export default class Item {
|
|||||||
this.priceMeter = this._extractPriceMeter();
|
this.priceMeter = this._extractPriceMeter();
|
||||||
|
|
||||||
this.additionalInfo = this._extractAdditionalInfo();
|
this.additionalInfo = this._extractAdditionalInfo();
|
||||||
|
|
||||||
this.hasGarage = this._extractGarage();
|
this.hasGarage = this._extractGarage();
|
||||||
|
|
||||||
this.hasLift = this._extractLift();
|
this.hasLift = this._extractLift();
|
||||||
|
this.isNoLift = this._extractIsNoLift();
|
||||||
|
|
||||||
this.isExterior = this._extractExterior();
|
this.isExterior = this._extractExterior();
|
||||||
this.isInterior = this._extractInterior();
|
this.isInterior = this._extractInterior();
|
||||||
}
|
}
|
||||||
@ -84,10 +90,18 @@ export default class Item {
|
|||||||
return this.name.toLowerCase().includes(name.toLowerCase());
|
return this.name.toLowerCase().includes(name.toLowerCase());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_descriptionIncludes(description) {
|
||||||
|
return this.description.toLowerCase().includes(description.toLowerCase());
|
||||||
|
}
|
||||||
|
|
||||||
_extractName() {
|
_extractName() {
|
||||||
return this._node.querySelector(Item.NAME_SELECTOR).textContent;
|
return this._node.querySelector(Item.NAME_SELECTOR).textContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_extractDescription() {
|
||||||
|
return this._node.querySelector(Item.DESCRIPTION_SELECTOR).textContent;
|
||||||
|
}
|
||||||
|
|
||||||
_extractLocationName() {
|
_extractLocationName() {
|
||||||
if (this.name.lastIndexOf(',') != -1) {
|
if (this.name.lastIndexOf(',') != -1) {
|
||||||
return this.name
|
return this.name
|
||||||
@ -145,14 +159,23 @@ export default class Item {
|
|||||||
return this.additionalInfo.includes('con ascensor');
|
return this.additionalInfo.includes('con ascensor');
|
||||||
}
|
}
|
||||||
|
|
||||||
_extractExterior() {
|
_extractIsNoLift() {
|
||||||
if (!this.additionalInfo) return false;
|
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() {
|
_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() {
|
_extractGarage() {
|
||||||
|
@ -33,11 +33,11 @@ export default class ItemHTML {
|
|||||||
return this.ERROR_CLASS_NAME;
|
return this.ERROR_CLASS_NAME;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._shouldCheckLift(item) && !item.hasLift) {
|
if (this._shouldCheckLift(item) && item.isNoLift) {
|
||||||
return this.ERROR_CLASS_NAME;
|
return this.ERROR_CLASS_NAME;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._shouldCheckExterior(item) && !item.isExterior) {
|
if (this._shouldCheckExterior(item) && item.isInterior) {
|
||||||
return this.ERROR_CLASS_NAME;
|
return this.ERROR_CLASS_NAME;
|
||||||
}
|
}
|
||||||
return this.SUCCESS_CLASS_NAME;
|
return this.SUCCESS_CLASS_NAME;
|
||||||
@ -49,6 +49,9 @@ export default class ItemHTML {
|
|||||||
html += this._createPercentagesPriceHTML(item);
|
html += this._createPercentagesPriceHTML(item);
|
||||||
html += this._createPriceHTML(item);
|
html += this._createPriceHTML(item);
|
||||||
html += this._createPriceMeterHTML(item);
|
html += this._createPriceMeterHTML(item);
|
||||||
|
html += `</div>`;
|
||||||
|
|
||||||
|
html += `<div class='${this.INFORMATION_CONTAINER_CLASS_NAME}'>`;
|
||||||
html += this._createGarageHTML(item);
|
html += this._createGarageHTML(item);
|
||||||
html += this._createLiftHTML(item);
|
html += this._createLiftHTML(item);
|
||||||
html += this._createExteriorHTML(item);
|
html += this._createExteriorHTML(item);
|
||||||
@ -159,14 +162,12 @@ export default class ItemHTML {
|
|||||||
return ``;
|
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._createSuccess('Ascensor');
|
||||||
}
|
}
|
||||||
return this._createError('Ascensor');
|
return this._createMissing('Ascensor');
|
||||||
}
|
}
|
||||||
|
|
||||||
static _shouldCheckLift(item) {
|
static _shouldCheckLift(item) {
|
||||||
|
@ -9,7 +9,7 @@ export default class Menu {
|
|||||||
constructor() {
|
constructor() {
|
||||||
if (this._shouldNotLoad()) return;
|
if (this._shouldNotLoad()) return;
|
||||||
|
|
||||||
const mainContent = document.querySelector('#main-content');
|
const mainContent = document.querySelector('#main-content, #side-content');
|
||||||
mainContent.innerHTML = MenuHTML.create() + mainContent.innerHTML;
|
mainContent.innerHTML = MenuHTML.create() + mainContent.innerHTML;
|
||||||
|
|
||||||
this._initEvents();
|
this._initEvents();
|
||||||
|
@ -44,6 +44,7 @@ export default class Preferences {
|
|||||||
return {
|
return {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
darkMode: true,
|
darkMode: true,
|
||||||
|
enlargeImages: false,
|
||||||
|
|
||||||
currentMoney: 0,
|
currentMoney: 0,
|
||||||
'max-price': 120_000,
|
'max-price': 120_000,
|
||||||
|
@ -42,6 +42,11 @@ export default class Styles {
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME} svg {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.${ItemHTML.INFORMATION_CLASS_NAME} {
|
.${ItemHTML.INFORMATION_CLASS_NAME} {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -157,7 +162,7 @@ export default class Styles {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.id-logo {
|
.id-logo, .id-logo img {
|
||||||
filter: invert();
|
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) {
|
static add(style, id = null) {
|
||||||
if (id && document.querySelector(`#${id}`)) return;
|
if (id && document.querySelector(`#${id}`)) return;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user