미디어위키, 각주 툴팁(미리보기) 만들기

마래바2019.10.31 20:11조회 수 43댓글 0

미디어위키 기능 가운데 각주 내용을 프리뷰(Preview), 툴팁이 나오도록 설정하는 방법이다.

먼저 몇가지 인터페이스 문서를 만들어야 한다.

 

1. 먼저 소도구 문서 작성

아래 문서를 생성하고

h ttps://airtravelinfo.kr/w iki/index.php/미디어위키:Gadgets-definition

아래 내용을 입력하고 문서 저장

* ReferenceTooltips[ResourceLoader|default]|ReferenceTooltips-ko.js|ReferenceTooltips.css

 

2. 1번에서 작성한 문서를 통해 2개 문서를 다시 작성

■ h ttps://airtravelinfo.kr/w iki/index.php/미디어위키:Gadget-ReferenceTooltips.css

/* Drawer css start */
.mode-drawer #reference-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: -webkit-transform .25s, opacity .25s, visibility 0s .25s;
    -ms-transition: -ms-transform .25s, opacity .25s, visibility 0s .25s;
    transition: transform .25s, opacity .25s, visibility 0s .25s;
    -webkit-transform: translate(0,100px);
    -ms-transform: translate(0,100px);
    transform: translate(0,100px);
    border: 1px solid #e1e8ed;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, .4);
}

.mode-drawer #reference-drawer.visible {
    -webkit-transition: -webkit-transform .25s, opacity .25s;
    -ms-transition: -ms-transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    visibility: visible;
}

.mode-drawer #reference-drawer .settings-icon {
    display: none;
}
/* Drawer css end */

/* Tooltip css */
.mode-tooltip #reference-drawer {
    position: absolute;
    display: none;
    opacity: 0;
    font-size : 0.9em;
    max-width: 300px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,.375);
    z-index: 10000;
}

.mode-tooltip #reference-drawer .close-icon {
    display: none;
}

/* common css */
#reference-drawer {
    padding: 10px 15px;
    background: #fcfcfc;
}

#reference-origin {
    padding-right: 8px;
}

#reference-settings {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    margin-top: -100px;
    margin-left: -150px;
    padding: 10px;
    background: white;
    box-shadow: 0 0 6px gray;
    z-index: 1003;
}

#reference-settings .content {
    height: 150px;
}

#reference-settings .content label > input {
    margin-right: 4px;
}

#reference-settings .foot {
    text-align: right;
}

#reference-settings .foot input {
    margin-left: 4px;
}

#reference-drawer .settings-icon {
    margin: -5px -8px 0 5px;
    float: right;
    width: 14px;
    height: 14px;
    background: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Cog%2C_Web_Fundamentals.svg/14px-Cog%2C_Web_Fundamentals.svg.png);
    pointer: cursor;
}

#reference-drawer .close-icon {
    float: right;
    width: 16px;
    height: 16px;
    background: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/24px-VisualEditor_-_Icon_-_Close.svg.png);
    background-position: -4px -4px;
}
 

 

■ h ttps://airtravelinfo.kr/w iki/index.php/미디어위키:Gadget-ReferenceTooltips-ko.js 문서 작성해 아래 내용 저장

 

var isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
var drawer, origin, content;
function showDrawer(id, name, orgId) {
    origin.attr("href", id);
    origin.attr("data-origin", orgId.replace(/\./g, "\\."));
    origin.text(name);
    content.html($(id.replace(/\./g, "\\.") + " > .reference-text").html());
    drawer.addClass("visible");
}

function getSettings(key, type) {
    if ("localStorage" in window) {
        if (type === "boolean") {
            return (window.localStorage[key] === "true");
        } else {
            return window.localStorage[key];
        }
    } else {
        var value = "; " + document.cookie;
        var parts = value.split("; " + key + "=");
        if (parts.length == 2) {
            if (type === "boolean") {
                return (parts.pop().split(";").shift() === "true");
            } else {
                return parts.pop().split(";").shift();
            }
        }
    }
}

function setSettings(key, value) {
    if ("localStorage" in window) {
        window.localStorage[key] = value;
    } else {
        var now = new Date();
        var time = now.getTime();
        var expireTime = time + (10 * 365 * 24 * 24);
        now.setTime(expireTime);
        document.cookie = key + "=" + value + ";expires=" + now.toGMTString() +";path=/";
    }
}

function initSettings() {
    if (document.getElementById("reference-settings")) {
        $("#reference-settings").show();
        return;
    }
    var setbox = $("<form>").attr("id", "reference-settings").append(
        $("<div>").addClass("content").append(
            $("<label>").append(
                $("<input>").attr({"type": "checkbox", "name": "showRefOnHover", "checked": getSettings("showRefOnHover", "boolean")}),
                "갖다 대서 주석을 띄웁니다."
            )
        ),
        $("<div>").addClass("foot").append(
            $("<input>").attr({"type": "button", "value": "취소"}).click(function() {
                $("#reference-settings").hide();
            }),
            $("<input>").addClass("save-settings").attr({"type": "submit", "value": "저장"})
        )
    ).submit(function(e) {
        e.preventDefault();
        setSettings("showRefOnHover", $(this).find("[name=showRefOnHover]").is(":checked"));
        location.reload();
    });
    $(document.body).append(setbox);
}

function showTooltip(elem) {
    showDrawer(elem.parentNode.getAttribute("href"), elem.textContent, elem.parentNode.parentNode.getAttribute("id"));
    drawer.show();
    drawer.css({ top: ($(elem).offset().top - drawer.outerHeight()), left: $(elem).offset().left });
    drawer.stop().animate({opacity: 1}, 100);
}

function hideTooltip() {
    drawer.removeClass("visible");
    drawer.animate({opacity: 0}, 100, function() { $(this).hide(); });
}

$(document).ready(function($) {
    if (getSettings("showRefOnHover") === undefined) {
        setSettings("showRefOnHover", true);
    }
    if (isMobile) {
        $(document.body).addClass("mode-drawer");
    } else {
        $(document.body).addClass("mode-tooltip");
    }
    /* create drawer */
    drawer = $("<div>").attr("id", "reference-drawer");
    origin = $("<a>").attr("id", "reference-origin").click(function() {
        $('html, body').animate({scrollTop: ($($(this).attr("href")).offset().top - 60)}, 400);
    });
    content = $("<span>").attr("id", "reference-drawer-text");
    var settingsIcon = $("<span>").addClass("settings-icon").click(function() {
        initSettings();
    });
    var closeDrawer = $("<span>").addClass("close-icon").click(function() {
        drawer.removeClass("visible");
    });
    drawer.append(settingsIcon);
    drawer.append(closeDrawer);
    drawer.append(origin);
    drawer.append(content);
    $(document.body).append(drawer);
    
    $(document).click(function(e) {
        if (!$(e.target).closest("#reference-drawer").length)  {
            if (!isMobile) {
                hideTooltip();
            } else {
                drawer.removeClass("visible");
            }
        }
    }).scroll(function(e) {
        if ("ontouchstart" in window && isMobile) {
            drawer.removeClass("visible");
        }
    });
    $(".reference a").each(function() {
        var span = document.createElement("span");
        span.className = "reference-hooker";
        span.appendChild(this.childNodes[0]);
        this.appendChild(span);
    });
    if (getSettings("showRefOnHover", "boolean") && !isMobile) {
        drawer.hover(function(e) {
            showTooltip($("#" + origin.attr("data-origin") + " .reference-hooker").get(0));
        }, function(e) {
            hideTooltip();
        });
        $(".reference-hooker").hover(function(e) {
            showTooltip(this);
        }, function(e) {
            hideTooltip();
        });
    }
    $(".reference-hooker").click(function(e) {
        if (isMobile) {
            e.preventDefault();
            e.stopPropagation();
            showDrawer(this.parentNode.getAttribute("href"), this.textContent, this.parentNode.parentNode.getAttribute("id"));
            drawer.addClass("visible");
        } else if (!getSettings("showRefOnHover", "boolean")) {
            e.preventDefault();
            e.stopPropagation();
            showTooltip(this);
        }
    });
});
 

 

이렇게 설정하면 각주 번호에 마우스를 올릴 때 각주 내용이 툴팁으로 나타난다.

 

tooltip.jpg

 

 

    • 글자 크기
미디어위키 업그레이드 관련 composer 설치 및 업데이트 테이블, 아이프레임 가로 스크롤

댓글 달기 WYSIWYG 사용

글쓴이 비밀번호
번호 제목 날짜
HOT 에어프레미아 지향 '장거리 하이브리드' 콘셉트 먼저 적용한 집에어 2020.10.12
HOT 파키스탄항공, 가짜 조종사 비행 정지 이어 비리 직원 50여 명 해고 2020.10.05
HOT 아시아나, 목적지 없는 A380 비행 상품 ·· 일석이조 노려1 2020.09.24
HOT 남미 공항에서 만나는 한글 안내판 ·· 경제 발전, 문화 확산과 코로나 방역 2020.09.21
HOT 이스타항공 재매각 ·· SM등 다수 기업 관심 2020.09.14
공지 게시글과 항공위키 연계 관련하여 2018.02.15
공지 해외여행(항공) 준비할 것과 여행 팁 (총정리) 2015.03.12
47 SQL 쿼리 이용 검색, 바꾸기 2020.06.17
46 미디어위키 사이트맵(sitemap) 생성 2020.06.10
45 미디어위키, 소도구(Gadget) 기능 2020.04.24
44 미디어위키, 사용자 css 구성 2020.04.24
43 미디어위키, 공지사항 표시 2020.04.21
42 미디어위키, 위지윅 에디터 2020.04.15
41 미디어위키 업그레이드 관련 composer 설치 및 업데이트 2019.11.01
미디어위키, 각주 툴팁(미리보기) 만들기 2019.10.31
39 테이블, 아이프레임 가로 스크롤 2019.07.14
38 Ckeditor 4 툴바 Configuration 2019.06.08
37 일정 수 이상 신고받은 댓글 블라인드 처리하기 2019.04.27
36 [미디어위키] 리버티 스킨 메뉴 설정 방법 2018.11.26
35 [미디어위키] 업그레이드 방법 2018.11.18
34 연관글 애드온 출력 위치 마음대로 조정하기 2018.08.13
33 [미디어위키] 로고 변경 2018.04.20
32 임의 섬네일 랜덤으로 표출하는 방법 2018.03.06
31 본문에서 img 태그 읽어서 광고 display 유무 조절 2018.03.02
30 특정 게시글에서 광고 제거하기 2018.02.24
29 모바일 기기에서 작동 조건문으로 제어하는 방법 2018.02.07
28 확장자 없는 외부 이미지 호스팅 시 섬네일 생성 테스트 2018.01.23
27 게시판마다 다른 조건 결과 작동하기(광고 노출 등) 2018.01.22
26 [미디어위키] 애드센스 적용 방법 2017.09.01
25 미디어위키 사용자별 권한 설정 방법 2017.04.22
24 ckeditor 편집화면 보기(view) 및 소스(source) 폰트 변경 2017.02.18
23 첨부 파일 아이콘 출력 안하기 2017.02.15
22 referer 모듈, 애드온 때문에 SNS 공유 안되는 현상 2016.06.03
21 MAC에서 홈페이지 게시판 내용이 일부만 보입니다. 2016.05.21
20 [미디어위키] 저작권리 하단부 편집 2015.12.08
19 글 본문 보기(View) 및 편집(Edit) 상태에서의 글꼴, 문단 등 유형 변경하기 2015.04.28
18 iframe (지도) 등을 모바일에서 자동 리사이징 하기 2015.03.02