Skip to content

Hidden optional #2

@knuopen

Description

@knuopen

Hello, I'm student of Kiev National Taras Shevchenko university and now I'm using your project for generating interactive map of our campus.
I'm get some problem with hidden marks, because I want to see all marks when one mark are hover and hidden all marks when I read information about place.
I found solution in adding new prototype functionality for Point:

Point.prototype.myHide = function() {
    lunar.addClass(this.el , 'point--myhide');
}
Point.prototype.removemyHide = function() {
    lunar.removeClass(this.el, 'point--myhide');
}
Point.prototype.show = function() {
    lunar.removeClass(this.el, 'point--hide');
    lunar.removeClass(this.el, 'point--myhide');
};

and then changed the appearance of functions onActive and onClick:

onActive : function() {
        // Add class active (scales up the pin and changes the fill color).
    lunar.addClass(self.points[pos].el, 'point--active');
    // Hide all other points.
    self._pointsAction('myHide', pos);
    // Show tooltip.
    var tooltip = self.tooltips[pos];
    tooltip.classList.add('point-tooltip--current');
        // Position tooltip.
    var rect = self.points[pos].el.getBoundingClientRect(),
            bounds = self.el.getBoundingClientRect();
    tooltip.style.left = rect.left - bounds.left + rect.width/2 + 'px';
    tooltip.style.top = rect.top - bounds.top + rect.height + 'px';
}
onClick : function() {
    self.currentPoint = pos;
    lunar.removeClass(self.points[pos].el, 'point--active');
    // Hide the current point (and all other points).
    self._pointsAction('hide');
    self._pointsAction('removemyHide');
    // Hide tooltip.
    self.tooltips[pos].classList.remove('point-tooltip--current');
    // Stop mousemove event on Points.
    self._pointsAction('pause');
    // Show Point´s bgEl.
    self.points[pos].bgEl.style.opacity = 1;
    // Show content.
    self.pointsContentWrapper.classList.add('points-content--open');
    self.contents[pos].classList.add('point-content--current');
}

I think it is somewhat better

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions