CustomerFAQZoom.tt

# --
# OTOBO is a web-based ticketing system for service organisations.
# --
# Copyright (C) 2001-2019 OTRS AG, https://otrs.com/
# Copyright (C) 2019-2025 Rother OSS GmbH, https://otobo.io/
# --
# This program is free software: you can redistribute it and/or modify it under
# the terms of the GNU General Public License as published by the Free Software
# Foundation, either version 3 of the License, or (at your option) any later version.
# This program is distributed in the hope that it will be useful, but WITHOUT
# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
# FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
# --
## nofilter(TidyAll::Plugin::OTOBO::TT::ScriptUsage)

<div id="oooContent">

    <div id="oooHeader">
        <div>
            <h1>[% Translate("FAQ Explorer") | html %]</h1>
            <div class="BreadCrumb">
[% RenderBlockStart("FAQPathCategoryElement") %]
                <a href="[% Env("Baselink") %]Action=CustomerFAQExplorer;CategoryID=[% Data.CategoryID | uri %]">
                    <h3 class='ooog'>[% Translate(Data.Name) | html %]</h3>
                </a>
[% RenderBlockEnd("FAQPathCategoryElement") %]
[% RenderBlockStart("FAQPathItemElement") %]
                <h3 class='ooog'>[% Data.Title | html %]</h3>
[% RenderBlockEnd("FAQPathItemElement") %]
            </div>
        </div>
        <div id="oooSearchBox">
            <form action="[% Env("CGIHandle") %]" method="post" name="compose" role="search" aria-label="[% Translate('FAQ Search') | html %]">
                <input type="hidden" name="Action" value="CustomerFAQExplorer"/>
                <input type="hidden" name="Subaction" value="Search"/>

                <h3 class='ooog'>
                    <i class="ooofo ooofo-search"></i>
                    <input type="search" name="What" id="oooSearch" title="[% Translate('FAQ Search') | html %]" accesskey="f"/>
                    <span id='oooSearchLabel'>[% Translate('FAQ Search') | html %]</span>
                </h3>
            </form>
        </div>
#            <ul id="FAQOptions">
#                <li>
#                    <a href="[% Env("Baselink") %]Action=CustomerFAQPrint;ItemID=[% Data.ItemID | uri %]" class="Print AsPopup" title="[% Translate("Print") | html %]">
#                        <i class="fa fa-print"></i>
#                        <span>[% Translate("Print") | html %]</span>
#                    </a>
#                </li>
#            </ul>
    </div>

    <div id="oooMainBox">

        <div class='WidgetSimple'>
            <h2 title="[% Data.Title | html %]">
                [% Data.Title | html %]
            </h2>

            <ul id="Messages">
[% RenderBlockStart("AttachmentHeader") %]
                <li class="Customer Visible">
                    <div class="MessageHeader">
                        <h3>[% Translate("Attachments") | html %]:</h3>
                        <div class="Clear"></div>
                    </div>
                    <div class="Attachments">
[% RenderBlockStart("AttachmentRow") %]
                        <i class="fa fa-paperclip"></i>
                        <span class="DownloadAttachment" title="[% Translate("Download Attachment") | html %]">
                            <a href="[% Env("Baselink") %]Action=[% Env("Action") %];Subaction=DownloadAttachment;ItemID=[% Data.ItemID | uri %];FileID=[% Data.FileID | uri %]">
                                [% Data.Filename | html %]
                            </a>
                            , [% Data.Filesize | html %]
                        </span>
                        <br/>
[% RenderBlockEnd("AttachmentRow") %]
                    </div>
                </li>
[% RenderBlockEnd("AttachmentHeader") %]

#[% RenderBlockStart("BrowserLinkMessage") %]
## Show info, that links within the iframe must be clicked with strg/cmd/shift (depending on the used browser and os)
## to open the links in a new window without the security permissions given to the iframe
#            <li>
#                <div class="FAQMessageBrowser">
#                    <p>
#        [% Translate("To open links in the following description blocks, you might need to press Ctrl or Cmd or Shift key while clicking the link (depending on your browser and OS).") | html %]
#                    </p>
#                    <a class="Close" title="[% Translate("Close this message") | html %]" href="#"><i class="fa fa-times"></i></a>
#                </div>
#            </li>
#[% RenderBlockEnd("BrowserLinkMessage") %]

[% RenderBlockStart("FAQContent") %]
                <li class="Customer Visible">
                    <div class="MessageHeader">
                        <h3>[% Translate(Data.Caption) | html %]:</h3>
                        <div class="Clear"></div>
                    </div>
                    <input type="hidden" value="true" name="FieldState">
[% RenderBlockStart("FAQContentHTML") %]
# execute IFrame JS asynchronously. Otherwise it could happen before our API was loaded
# the following JS code must be within the template, otherwise it could happen, that also this code itself is not loaded yet
<script>
function CheckIFrameHeight(IFrameID) {
    if (typeof FAQ === 'object' && typeof FAQ.Customer === 'object' && typeof FAQ.Customer.FAQZoom === 'object') {
        FAQ.Customer.FAQZoom.IframeAutoHeight($('#' + IFrameID));
    }
    else {
        window.setTimeout(function () {
            CheckIFrameHeight(IFrameID);
        }, 500);
    }
}
</script>
                    <div class="MessageBody">
# Use the HTML5 sandbox attribute to prevent plugins and scripts from being executed in the browser.
# Append session info to URL because IE will not send cookies.
# Set 'allow-popups' to allow IE10+ to open links. ref: http://www.w3.org/html/wg/wiki/ChangeProposals/sandbox_allow_popups
                        <iframe sandbox="allow-same-origin allow-popups ms-allow-popups allow-popups-to-escape-sandbox" class="FAQField" id="IframeFAQ[% Data.Field | html %]" onload="window.setTimeout( function (){ CheckIFrameHeight('IframeFAQ[% Data.Field | html %]'); }, 500);" src="[% Env("Baselink") %]Action=CustomerFAQZoom;Subaction=HTMLView;ItemID=[% Data.ItemID | html %];Field=[% Data.Field | html %];[% Env("SessionName") | html %]=[% Env("SessionID") | html %]"></iframe>
                    </div>
[% RenderBlockEnd("FAQContentHTML") %]
[% RenderBlockStart("FAQContentPlain") %]
                    <div class="ArticleFAQContent">
                        <div class="message">
                            [% Data.Content %]
                        </div>
                    </div>
[% RenderBlockEnd("FAQContentPlain") %]
                </li>
[% RenderBlockEnd("FAQContent") %]

            </ul>
        </div>

            <div id="ZoomSidebar">
                <div class="MessageHeader">
                    <h3>[% Translate("FAQ Information") | html %]</h3>
                    <div class="Clear"></div>
                </div>
                <ul id="Metadata">
                    <li><span class="Key">[% Translate("Article Number") | html %]:</span> <span>[% Data.Number | html %]</span></li>
                    <li><span class="Key">[% Translate("Category") | html %]:</span> <span title="[% Translate(Data.CategoryName) | html %]">[% Translate(Data.CategoryName) | html %]</span></li>

                    <li class="KeywordsContainer">
                        <span class="Key">[% Translate("Keywords") | html %]:</span>
[% RenderBlockStart("Keywords") %]
                        <span class="Keyword" title="[% Translate("Search for articles with keyword") | html %]: [% Data.Keyword | html %]">
                            <a href="[% Env("Baselink") %]Action=CustomerFAQExplorer;Subaction=Search;Keyword=[% Data.Keyword | uri %]">[% Data.Keyword | html %]</a>
                        </span>
[% RenderBlockEnd("Keywords") %]
                    </li>
                    <li><span class="Key">[% Translate("State") | html %]:</span> <span title="[% Translate(Data.State) | html %]">[% Translate(Data.State) | html %]</span></li>
[% RenderBlockStart("Language") %]
                    <li><span class="Key">[% Translate("Language") | html %]:</span> <span title="[% Translate(Data.Language) | html %]">[% Translate(Data.Language) | html %]</span></li>
[% RenderBlockEnd("Language") %]

# show faq dynamic fields
[% RenderBlockStart("FAQDynamicField") %]
                    <li>
                        <span class="Key">[% Translate(Data.Label) | html %]:</span>
                        <span title="[% Data.Title | html %]">[% Data.Value %]</span>
                    </li>
[% RenderBlockEnd("FAQDynamicField") %]
# example of how to use fixed dynamic field blocks for customizations
# Note: Field1 and Field2 are the names of the fields and had to be replaced with the actual
# field names
#[% RenderBlockStart("FAQDynamicField_Field1") %]
#                <li>
#                    <span class="Key">[% Translate(Data.Label) | html %]:</span>
#                    <span title="[% Data.Title1 | html %]">[% Data.Value %]</span>
#                </li>
#[% RenderBlockEnd("FAQDynamicField_Field1") %]
#[% RenderBlockStart("FAQDynamicField_Field2") %]
#                <li>
#                    <span class="Key">[% Translate(Data.Label) | html %]:</span>
#                    <span title="[% Data.Title2 | html %]">[% Data.Value %]</span>
#                </li>
#[% RenderBlockEnd("FAQDynamicField_Field2") %]

[% RenderBlockStart("ViewRating") %]
                    <li>
                        <span class="Key RatingLabel">[% Translate("Rating") | html %]:</span>
[% RenderBlockStart("RateStars") %]
                        <span class="RateStar"><i class="fa fa-star"></i></span>
[% RenderBlockEnd("RateStars") %]
[% RenderBlockStart("RateStarsCount") %]
                        <span class="RateStarText" title="[% Data.Stars | html %] [% Translate("out of 5") | html %]">
                            [% Data.Stars | html %] [% Translate("out of 5") | html %]
                        </span>
[% RenderBlockEnd("RateStarsCount") %]
                    </li>
[% RenderBlockEnd("ViewRating") %]

[% RenderBlockStart("ViewVotes") %]
                    <li><span class="Key">[% Translate("Votes") | html %]:</span> <span title="[% Data.Votes | html %]">[% Data.Votes | html %]</span></li>
[% RenderBlockEnd("ViewVotes") %]
                </ul>
            </div>

[% RenderBlockStart("FAQVoting") %]
        <form action="[% Env("CGIHandle") %]" method="post" enctype="multipart/form-data" name="FAQVote" class="PreventMultipleSubmits">
            <div class="VotingContainer">
                <div class="VotingBox Visible">
                    <div id="FAQVoting" class="FAQVoting">
                        <div class="MessageHeader">
                            <h3>[% Translate("Rating") | html %]:</h3>
                            <div class="Clear"></div>
                        </div>
                        <div id="Messenger">
                            <div class="SpacingTop"></div>
                            <span class="VotingQuestion">[% Translate("How helpful was this article? Please give us your rating and help to improve the FAQ Database. Thank You!") | html %]</span>
                            <div class="SpacingTop"></div>
                            <div>
                                <span class="RateLabelBefore ooog">[% Translate("not helpful") | html %]</span>
                            </div>

[% RenderBlockStart("FAQVotingRateRow") %]
                            <div id="RateButton[% Data.Value %]">
                                <span class="RateButton RateUnChecked">
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star"></i>
                                    [% Data.Title | html %]
                                </span>
                            </div>
[% RenderBlockEnd("FAQVotingRateRow") %]

                            <div>
                                <span class="RateLabelAfter ooog">[% Translate("very helpful") | html %]</span>
                            </div>
                            <input type="hidden" name="Action" value="CustomerFAQZoom"/>
                            <input type="hidden" name="Subaction" value="Vote"/>
                            <input type="hidden" name="CategoryID" value="[% Data.CategoryID | html %]"/>
                            <input type="hidden" name="ItemID" value="[% Data.ItemID | html %]"/>
                            <div class="ActionRow VotingActionRow">
                                <button type="submit"  id="RateSubmitButton" class="Hidden oooXS" value="[% Translate("Submit") | html %]">[% Translate("Submit") | html %]</button>
                                <input type="hidden" name="Rate" value="[% Data.SelectedRate | html %]"id="RateValue"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
[% RenderBlockEnd("FAQVoting") %]

    </div>
</div>