%PDF- %PDF-
Direktori : /home2/vacivi36/intranet.vacivitta.com.br/static/js/humhub/ |
Current File : //home2/vacivi36/intranet.vacivitta.com.br/static/js/humhub/humhub.ui.showMore.js |
humhub.module('ui.showMore', function (module, require, $) { var additions = require('ui.additions'); var DEFAULT_COLLAPSE_AT = 380; var CollapseContent = function (node, options) { this.options = options || {}; this.$ = node instanceof $ ? node : $(node); this.collapseAt = this.$.data('collapse-at') || DEFAULT_COLLAPSE_AT; this.options.readMoreText = this.$.data('read-more-text') || module.text('readMore'); this.options.readLessText = this.$.data('read-less-text') || module.text('readLess'); this.init(); }; CollapseContent.prototype.init = function () { var that = this; this.$.imagesLoaded(function() { that.check(); }); }; CollapseContent.prototype.check = function () { var that = this; var height = this.$.outerHeight(); this.$collapseButton = this.$.siblings('.showMore'); // If the first or second node is we add some more space to our collapseAt var $firstChild = this.$.children(':first'); var $secondChild = $firstChild.next(); if($firstChild.is('.oembed_snippet') || $secondChild.is('.oembed_snippet')) { var collapseCandidate = this.$.find('.oembed_snippet:first').outerHeight() + 40; this.collapseAt = (collapseCandidate > this.collapseAt) ? collapseCandidate : this.collapseAt; } var diff = height - this.collapseAt; // If height expands the max height we init the collapse post logic if (height > this.collapseAt && diff > 70) { if (!this.$collapseButton.length) { this.$.after($(module.templates.showMore)); this.$collapseButton = this.$.siblings('.showMore'); this.$gradient = this.$.siblings('.showMoreGradient'); this.$gradient.children().css({background: 'linear-gradient(rgba(251,251,251,0), '+determineBackground(this.$)+')'}); } // Init collapse button this.$collapseButton.add(this.$gradient).on('click', function (evt) { evt.preventDefault(); if (that.$.data('state') === 'collapsed') { that.expand(); } else { that.collapse(); } }).show(); // Set init state if (this.$.data('state') !== 'expanded') { this.collapse(); } else { this.expand(); } } }; var determineBackground = function($node) { var bc; var defColor = '#ffff'; if(!$node || !$node.length) { return defColor; } while (isTransparent(bc = $node.css("background-color"))) { if ($node.is("body")) { return defColor; } $node = $node.parent(); } return bc; }; var isTransparent = function(color) { switch ((color || "").replace(/\s+/g, '').toLowerCase()) { case "transparent": case "": case "rgba(0,0,0,0)": return true; default: return false; } }; CollapseContent.prototype.collapse = function () { this.$.css({'display': 'block', 'max-height': this.collapseAt + 'px'}); this.$collapseButton.html('<i class="fa fa-arrow-down"></i> ' + this.options.readMoreText); this.$.data('state', 'collapsed'); this.$gradient.show(); }; CollapseContent.prototype.expand = function () { this.$.css('max-height', ''); this.$collapseButton.html('<i class="fa fa-arrow-up"></i> ' + this.options.readLessText); this.$.data('state', 'expanded'); this.$gradient.hide(); }; var init = function () { additions.register('showMore', '[data-ui-show-more]', function ($match) { $match.each(function () { new CollapseContent(this); }); }); }; module.templates = { showMore: '<div class="showMoreGradient" style="position:relative;cursor:pointer"><div style="bottom: 0;height: 40px;position: absolute;z-index: 30;width: 100%;"></div></div><a class="showMore" href="#" style="display:block;margin: 5px 0;"></a>' }; module.export({ init: init, sortOrder: 100, CollapseContent: CollapseContent }); });