import { gMainApp, gUrlParams } from "./MainApp.js" ;
import { makeImagesZoomable } from "./utils.js" ;
// --------------------------------------------------------------------
gMainApp.component( "rule-info", {
props: [ "ruleInfo" ],
data() { return {
closeRuleInfoImageUrl: gImagesBaseUrl + "cross.png", //eslint-disable-line no-undef
ruleInfoTransitionName: gUrlParams.get("no-animations") ? "" : "ruleinfo-slide",
} ; },
// FUDGE! We want the "close" button to stay in the top-right corner of the rule info popup as the user
// scrolls around. If we put it in together with the content itself, with an absolute position, it scrolls
// with the content, so we place it outside the content, with an absolute position, and a larger z-index.
// It doesn't look so good when the v-scrollbar appears, but we can live with that.
template: `
`,
beforeUpdate() {
// hide the close button until the "enter" transition has completed
$( this.$refs.closeRuleInfoButton ).hide() ;
},
methods: {
onAfterEnterRuleInfoTransition() {
// FUDGE! We have to wait until the rule info popup is open before we can check
// if it has a v-scrollbar or not, and hence where we should put the close button.
this.$nextTick( () => {
let ruleInfo = this.$refs.ruleInfo ;
let closeButton = this.$refs.closeRuleInfoButton ;
if ( ruleInfo.clientHeight >= ruleInfo.scrollHeight )
$(closeButton).css( "right", "6px" ) ;
else {
// FUDGE! The v-scrollbar is visible, so we move the "close" button left a bit.
// This adjustment won't update if the pane is resized, but we can live with that.
$(closeButton).css( "right", "18px" ) ;
}
$(closeButton).fadeIn( 200 ) ;
} ) ;
},
},
} ) ;
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gMainApp.component( "qa-entry", {
props: [ "qaEntry" ],
data() { return {
questionImageUrl: gImagesBaseUrl + "question.png", //eslint-disable-line no-undef
infoImageUrl: gImagesBaseUrl + "info.png", //eslint-disable-line no-undef
answerImageUrl: gImagesBaseUrl + "answer.png", //eslint-disable-line no-undef
} ; },
template: `
`,
mounted() {
// make any images that are part of the Q+A entry zoomable
makeImagesZoomable( $(this.$el) ) ;
},
methods: {
makeQAImageUrl( fname ) {
// return the URL to an image associated with a Q+A entry
return gGetQAImageUrl.replace( "FNAME", fname ) ; //eslint-disable-line no-undef
},
},
} ) ;
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gMainApp.component( "annotation", {
props: [ "anno" ],
data() { return {
annoType: this.anno.sr_type || this.anno.ri_type,
} ; },
template: `
{{anno.ruleid || '(no rule ID)'}}
`,
methods: {
makeIconImageUrl() {
if ( this.annoType )
return gImagesBaseUrl + this.annoType+".png" ; //eslint-disable-line no-undef
else
return null ;
},
},
} ) ;