Video Framing Sliders - for YouTube

Gives new tools for youtbe playback
换行
// ==UserScript==
// @name         Video Framing Sliders - for YouTube
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Gives new tools for youtbe playback
// @author       RGSoftware
// @include     *.youtube.*/watch?v=*
// @grant        none
// @runat        document-body
// @locale       en-us
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
// ==/UserScript==

/*
.:Notes:.
I didn't want to use Jquery, but then I did a little. But too lazy to rewrite the vanilla javascript in jquery
*/

tools = {

    createElement: function(parent, id, eletype, value, style, className, textClassName, onclickFunc){

        parent                  = document.getElementById(parent);
        var e                   = document.createElement(eletype);
        e.className             = className;
        e.onclick               = onclickFunc === null ? '' : onclickFunc;
        parent.appendChild(e);
        var label               = document.createElement('span');
        label.innerHTML         = value;
        label.className         = textClassName;

        e.setAttribute('style', style);
        e.appendChild(label);

        return e; // return handle
    },

    toggle: false,
    toggleTools : function(motherEle, toolsDiv){

        tools.toggle = !tools.toggle;
        /*
        var x = document.getElementById(e);
        var z = document.getElementById(toolsDiv);
        */
        var animSpeed = 500;
        var e = $("#"+toolsDiv);

        if (tools.toggle){

            e.animate({height: "150px"}, animSpeed);
            /*
             $("#"+motherEle).animate({minHeight: "300px"}, animSpeed);
             x.setAttribute("style", "min-height:300px");
             z.style.height = "150px";
            */
        }else{
            e.animate({height: "0px"}, animSpeed);
            /*
            $("#"+motherEle).animate({minHeight: "150px"}, animSpeed);
            z.style.height = "0px"
            x.setAttribute("style", "min-height:150px");
            */

        }
    },
    createElementAlt : function(elementType, data, type, className, style, id, parent){

        var e  = document.createElement(elementType);
        parent = document.getElementById(parent);

        switch (elementType.toUpperCase()){

            case "INPUT":

                e.setAttribute('type', type);
                e.value     = data;
                break;

            case "BUTTON":

                e.value     = data;
                break;

            case "SPAN":

                e.innerHTML = data;
                break;
        }

        e.id        = id;
        e.innerHTML = data;
        e.value     = data;
        e.className = className;
        e.setAttribute('style', style);
        parent.appendChild(e);

    },
};

/*Some constants, infos*/
var youtube = {
    btnStyle1 : 'yt-uix-button yt-uix-button-size-default yt-uix-button-opacity yt-uix-button-has-icon no-icon-markup pause-resume-autoplay action-panel-trigger action-panel-trigger-share   yt-uix-tooltip',
    btnStyle2 : 'yt-uix-button yt-uix-button-size-default yt-uix-button-opacity yt-uix-button-has-icon no-icon-markup pause-resume-autoplay yt-uix-menu-trigger yt-uix-tooltip',
};


/* Main elements creation */

//div
tools.createElementAlt("div", '', '', '', 'height:0px; overflow:hidden;', 'myDiv', 'watch-header'); //watch8-secondary-actions //height:153px; width:843px;
var toolsDiv = document.getElementById('myDiv');

var toggleToolsBtn = tools.createElement("watch8-secondary-actions", "myBtn", "button", "Show Tools", "", youtube.btnStyle1, "t-uix-button-content", null);
toggleToolsBtn.onclick = function(){tools.toggleTools('watch-header','myDiv');};
/*
item 1 - label
tools.createElementAlt('span', 'Scale X', '', '', '', 'scaleXSliderLabel', 'myDiv');
item 1 - Scale X Slider
tools.createElementAlt('input', '1', 'range', '', '', 'scaleXSlider', 'myDiv');
item 2 - label
tools.createElementAlt('span', 'Scale Y', '', '', '', 'scaleYSliderLabel', 'myDiv');
item 2 - Scale Y Slider
tools.createElementAlt('input', '1', 'range', '', '', 'scaleYSlider', 'myDiv');
item 3 - lock Scale checkbox
tools.createElementAlt('input', '', 'checkbox', '', '', 'lockScaleCheckbox', 'myDiv');
item 3 - lock Scale checkbox label
tools.createElementAlt('label', 'Lock Scale X+Y', '', '', '', 'LabelForCheckbox', 'myDiv');
*/

function ElementWithLabel(elementType, text, type, className, style, id, parent){

    this.elementType  = elementType;
    this.text         = text;
    this.type         = type;
    this.className    = className;
    this.style        = style;
    this.elementId    = id;
    this.labelId      = id+'-container';
    this.parent       = parent;
    //create elements first!
    tools.createElementAlt('span', this.text, '', '', '', this.labelId, this.parent); //LABEL WRAP
    tools.createElementAlt(this.elementType, '', this.type, this.className, this.style, this.elementId, this.labelId); //CHECKBOX
    //now you can return the element 'handle'
    this.labelElement = document.getElementById(this.labelId);
    this.element      = document.getElementById(this.elementId);

}

function slider(labeltext, id, parent, min, max, step, startValue){

    this.id               = id;
    this.parent           = parent;
    this.labeltext        = labeltext;
    this.min              = min;
    this.max              = max;
    this.step             = step;
    this.startValue       = startValue;
    this.create           = createSlider(this.labeltext, this.id, this.parent, this.startValue);
    this.setDefaults      = setDefaults(this.id, this.min, this.max, this.step);
    this.element          = document.getElementById(this.id);
    this.getPercentLabel  = this.id + "Percent";
    this.percentage       = this.element.value + "%";
    this.updateLabel      = function(){sliderSeeked(this.getPercentLabel, this.id);};
    // this.resetValue       = function(){resetValue(this.id);};

    this.element.ondblclick = function(){
        resetValue(this.id, startValue);
    };
    // setDefaults(this.id, -5, 5, 0.01);
}


function createSlider(labeltext, id, parent, startVal){

    var cstyle = "position:relative; top:-6px; padding:5px;"; //middle align top:-11px;
    var contParent = id+"-container";
    tools.createElementAlt('div', '', '','', 'border: 1px solid black;', contParent, parent);                       //Container
    tools.createElementAlt('span', labeltext, '', '', cstyle, id+"label", contParent);                              //Label
    tools.createElementAlt('input', startVal, 'range', '', 'width:150px;', id, contParent);                         //Slider
    tools.createElementAlt('span', startVal+"%", '', '', cstyle, id+"Percent", contParent);                         //PercentLabel
}

function sliderSeeked(percentlbl, sliderEle){

    var slider = document.getElementById(sliderEle);
    var sVal = parseFloat(slider.value).toFixed(2);
    document.getElementById(percentlbl).innerHTML = + sVal + "%"; 
}

function resetValue(e, startVal){
    var slider = document.getElementById(e);
    slider.value = startVal;   
}

function setDefaults(e, min, max, step){
    var x  = document.getElementById(e);
    x.max  = max;
    x.min  = min;
    x.step = step;
}

//slider(labeltext, id, parent)
var sliderX = new slider("Scale X", "scaleXSlider", "myDiv", -5, 5, 0.01, 1);
sliderX.element.onmousemove = function(){
    var sVal = parseFloat(sliderX.element.value).toFixed(2);
    sliderX.updateLabel();
    video.scaleX(sVal);

    if (lockScaleCheckbox.element.checked === true){
        video.scaleY(sVal);
        sliderY.element.value = sVal; 
        sliderY.updateLabel();
    }
};

var sliderY = new slider("Scale Y", "scaleYSlider", "myDiv", -5, 5, 0.01, 1);
sliderY.element.onmousemove = function(){
    var sVal = parseFloat(sliderY.element.value).toFixed(2);
    sliderY.updateLabel();
    video.scaleY(sVal);

    if (lockScaleCheckbox.element.checked === true){
        video.scaleX(sVal);
        sliderX.element.value = sVal;
        sliderX.updateLabel();
    }
};

//function ElementWithLabel(elementType, text, type, className, style, id, parent){
var lockScaleCheckbox = new ElementWithLabel('input', 'Lock Scale', 'checkbox', '','', 'scaleLock-checkbox', 'myDiv');

//if (lockScaleCheckbox.element.checked === true){
//  video.scaleY(sVal); sliderY.element.value = sVal; sliderY.updateLabel(); //LOCKED TEST ONLY
//}

//tools.createCheckboxWithLabel('input', 'lock scale', 'checkbox', '', '', 'scaleLock-checkbox', 'myDiv');


var sliderTranslateX = new slider("Translate X", "translateXSlider", "myDiv", -1000, 1000, 1, 0);
sliderTranslateX.element.onmousemove = function(){
    var sVal = parseFloat(sliderTranslateX.element.value).toFixed(2);
    sliderTranslateX.updateLabel();
    video.translateX(sVal);
};

var sliderTranslateY = new slider("Translate Y", "translateYSlider", "myDiv", -1000, 1000, 1, 0);
sliderTranslateY.element.onmousemove = function(){
    var sVal = parseFloat(sliderTranslateY.element.value).toFixed(2);
    sliderTranslateY.updateLabel();
    video.translateY(sVal);
};


//matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
var video = {
    g_scaleX: 1,
    g_scaleY: 1,
    g_skewX: 0,
    g_skewY: 0,
    g_translateX: 0,
    g_translateY: 0,

    matrix2d: function(){
        var vid = document.getElementsByClassName(video.className)[0];
        vid.setAttribute('style', 'transform:matrix(' + this.g_scaleX +
                         "," + this.g_skewY + 
                         "," + this.g_skewX + 
                         "," + this.g_scaleY + 
                         "," + this.g_translateX + 
                         "," + this.g_translateY + ')');
    },

    className: 'html5-video-container',

    scaleX : function(_scaleX){
        this.g_scaleX = _scaleX;
        video.matrix2d();
    },

    scaleY : function(_scaleY){
        this.g_scaleY = _scaleY;
        video.matrix2d();
    },

    translateX : function(_translateX){
        this.g_translateX = _translateX;
        video.matrix2d();
    },
    translateY : function(_translateY){
        this.g_translateY = _translateY;
        video.matrix2d();
    },
};


//var lfchkbx = document.getElementById('LabelForCheckbox');
//lfchkbx.setAttribute('for', 'lockScaleCheckbox');

//var scaleChkbx = document.getElementById('lockScaleCheckbox');
//scaleChkbx.checked = true;
欢迎访问Greasy Fork镜像
