jordandelozier / wysibb

WYSIWYG BBcode editor
http://www.wysibb.com
246 stars 86 forks source link

Full screen mode #95

Open liminspace opened 9 years ago

liminspace commented 9 years ago

Please, add button "full screen mode".

ZeoNish commented 9 years ago

+++

ZeoNish commented 9 years ago

Please, add buttom "full screen mode".

Nikey646 commented 9 years ago

Here is a self-implement solution for anyone looking, requires Screenfull.js

To add it, add fullscreen somewhere into your Option's buttons element. After that you need to add the following code into your allButtons element of the Options object.

fullscreen: {
    title: "Fullscreen",
    buttonText: "Fullscreen",
    cmd: function() {
        if (screenfull.enabled) {
            screenfull.toggle($('.wysibb')[0]);
        }
    }
}

Edit: Webkit/Blink is stupid, and firefox is master race. To make the editor appear the same across most browsers you will also required this CSS.

:-webkit-full-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    object-fit: fill;
}

:-moz-full-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    object-fit: fill;
}

:-ms-fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    object-fit: fill;
}

:fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    object-fit: fill;
}

It handles all 3 prefixes and the normal fullscreen css property to future proof it css wise.