jQuery DOM Insertion, Inside & Outside

Posted on 2018-08-01 by hoyo

如何控制插入內容相對於對象的位置

jQuery 插入內容時可以使用 append(), prepend(), before(), after() 四個函式，不同的函式插入的位置不同

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

<script>
    $('#aaa').before('<div>before 1</div>');
    $('#aaa').before('<div>before 2</div>');

    $('#aaa').after('<div>after 1</div>');
    $('#aaa').after('<div>after 2</div>');

    $('#aaa').append('<div>append 1</div>');
    $('#aaa').append('<div>append 2</div>');

    $('#aaa').prepend('<div>prepend 1</div>');
    $('#aaa').prepend('<div>prepend 2</div>');
</script>

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

$('#aaa').before('<div>before 1</div>');

$('#aaa').before('<div>before 2</div>');

$('#aaa').after('<div>after 1</div>');

$('#aaa').after('<div>after 2</div>');

$('#aaa').append('<div>append 1</div>');

$('#aaa').append('<div>append 2</div>');

$('#aaa').prepend('<div>prepend 1</div>');

$('#aaa').prepend('<div>prepend 2</div>');

</script>

—

682 total views

網頁或網頁內元素是否作用中 (可視)

Posted on 2017-06-09 by hoyo

$(function(){

    // 頁面作用才更新資料
    window.onfocus = function(){
        setInterval(function(){
            search();
        }, 10000);
    };
    window.onblur = function(){
        for (var i = 1; i < 9; i++) window.clearInterval(i);
    };
});

$(function(){

// 頁面作用才更新資料

window.onfocus = function(){

setInterval(function(){

search();

}, 10000);

};

window.onblur = function(){

for (var i = 1; i < 9; i++) window.clearInterval(i);

};

});

—

元素出現就作用

How to tell if a DOM element is visible in the current viewport?
http://jsfiddle.net/AndyE/d48Cv/1/
jquery.inview2

$('div').bind('inview', function(event, isInView) {
    if (isInView) {
        $(this).css('background-color', '#f00');
    } else {
        $(this).css('background-color', '#00f');
    }
});

$('div').bind('inview', function(event, isInView) {

if (isInView) {

$(this).css('background-color', '#f00');

} else {

$(this).css('background-color', '#00f');

}

});

—

元素完整出現才作用

<div style="width: 300px; height: 300px;">
    <p>C</p>
</div>
<hr/>

<script>
    $(window).scroll(function() {
        $('div:in-viewport(-320)').css({
            'background-color': '#f00',
            'color': '#151612'
        }).find('p').text('Now in viewport.');
    });
</script>

</div>

<hr/>

$(window).scroll(function() {

$('div:in-viewport(-320)').css({

'background-color': '#f00',

'color': '#151612'

}).find('p').text('Now in viewport.');

});

</script>

—

433 total views, 1 views today

網頁通知 HTML5 Notification

Posted on 2017-02-20 by hoyo

—

結論 (2021/7/8)

就算是因為測試原因，全部允許權限 Chrome 91 & Firefox 89 都不會動作。意思就是隨著時代改變，個人化設定逐漸成為常態後，就不需要搞這種大部分的人都會關閉，或是就算想使用也不見得能用的功能。

—

參考資源

HTML5 Notification 可以在允許通知的情況下，出現提醒的訊息，而且不需要盯著網頁，只要瀏覽器及通知的頁面開啟的狀態下即可使用。

使用前必須了解瀏覽器支援程度。

—

取得網頁通知權限

$(function(){

    if(Notification && Notification.permission !== "granted"){
        Notification.requestPermission(function(status){
            if(Notification.permission !== status){
                Notification.permission = status;
            }
        });
    }

});

$(function(){

if(Notification && Notification.permission !== "granted"){

Notification.requestPermission(function(status){

if(Notification.permission !== status){

Notification.permission = status;

}

});

}

});

頁面起始時詢問、取得通知權限

—

顯示通知

function notify(){
    if (Notification.permission === "granted") {
        var notification = new Notification("Hi there!");
    }
    else{
        alert('Hi there!');
    }
}

function notify(){

if (Notification.permission === "granted") {

var notification = new Notification("Hi there!");

}

else{

alert('Hi there!');

}

寫一個當需要通知時呼叫的功能，並且根據是否允許通知來執行訊息顯示方式

—

什麼時候通知？

接下來只要決定什麼時候執行顯示通知的方法即可。可以用 WebSocket 來達成即時，也可以用 setInterval() 定時執行檢查

—

完整範例

<!-- 手動執行 -->
<button onclick="notifyMe()">Notify me!</button>

<script>
    Notification.requestPermission(function(status){
        console.log('User Choice', status);
        if (status !== 'granted') {
            console.log('推播允許被拒絕了!');
        }
    });

    function notifyMe() {
        // Let's check if the browser supports notifications
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        }

        // Let's check whether notification permissions have already been granted
        else if (Notification.permission === "granted") {
            // If it's okay let's create a notification
            var notification = new Notification("Hi there!");
        }

        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== "denied") {
            Notification.requestPermission().then(function (permission) {
                // If the user accepts, let's create a notification
                if (permission === "granted") {
                    var notification = new Notification("Hi there!");
                }
            });
        }
    }

    // 每 2 秒執行一次
    setInterval(notifyMe, 2000);
</script>

<button onclick="notifyMe()">Notify me!</button>

Notification.requestPermission(function(status){

console.log('User Choice', status);

if (status !== 'granted') {

console.log('推播允許被拒絕了!');

}

});

function notifyMe() {

// Let's check if the browser supports notifications

if (!("Notification" in window)) {

alert("This browser does not support desktop notification");

}

// Let's check whether notification permissions have already been granted

else if (Notification.permission === "granted") {

// If it's okay let's create a notification

var notification = new Notification("Hi there!");

}

// Otherwise, we need to ask the user for permission

else if (Notification.permission !== "denied") {

Notification.requestPermission().then(function (permission) {

// If the user accepts, let's create a notification

if (permission === "granted") {

var notification = new Notification("Hi there!");

}

});

}

// 每 2 秒執行一次

setInterval(notifyMe, 2000);

</script>

通知的訊息是出現在系統上，不是顯示在瀏覽器中

—

145 total views

Canvas framework

Posted on 2016-11-24 by hoyo

—

應用

—

hoyo 自己的應用

需求為從主機載入一張圖之後，可以增加箭頭、文字、方框等基本的繪圖需求，編輯完成按儲存後要直接回存。

技術：HTML5 Canvas

使用工具：Fabric.js

參考

Add Delete button on element in Canvas Fabric JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-2.2.4.min.js"></script>
    <script src="../js/fabric.min.js"></script>
</head>
<body>

<canvas id="c" style="border: 1px solid #999;"></canvas>

<button onclick="addText()">增加文字</button>
<button onclick="addBlock()">增加方框</button>
<button onclick="addLine2()">增加箭頭</button>
<button onclick="saveImage()">儲存</button>

<script>
    var canvas = new fabric.Canvas('c');

    var HideControls = {
        'tl':true,
        'tr':false,
        'bl':true,
        'br':true,
        'ml':true,
        'mt':true,
        'mr':true,
        'mb':true,
        'mtr':true
    };

    var image = new Image();
    image.src = 'normal_3206.png';
    image.onload = function() {

        // create a wrapper around native canvas element (with id="c")
        canvas.setHeight(image.width).setWidth(image.height);

        canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {
            width: canvas.width,
            height: canvas.height,
            // Needed to position backgroundImage at 0/0
            originX: 'left',
            originY: 'top'
        });
    };

    canvas.renderAll();

    function addDeleteBtn(x, y){
        $(".deleteBtn").remove();
        var btnLeft = x-10;
        var btnTop = y-10;
        var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
        $(".canvas-container").append(deleteBtn);
    }

    canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('mouse:down',function(e){
        if(!canvas.getActiveObject())
        {
            $(".deleteBtn").remove();
        }
    });

    canvas.on('object:modified',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('object:scaling',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:moving',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:rotating',function(e){
        $(".deleteBtn").remove();
    });
    $(document).on('click',".deleteBtn",function(){
        if(canvas.getActiveObject())
        {
            canvas.remove(canvas.getActiveObject());
            $(".deleteBtn").remove();
        }
    });

    // ----------------------------------------

    function addBlock(){
        var rect = new fabric.Rect({
            stroke: 'rgb(255,0,0)',
            strokeWidth: 3,
            width: 100, height: 40,
            fill: false, left: 50, top: 50
        }).setControlsVisibility(HideControls);

        canvas.add(rect);
    }

    function addText() {
        var t = new fabric.IText('Tap and Type', {
            fontFamily: 'arial black',
            left: 100,
            top: 100
        });

        var textWithBackground = new fabric.IText('輸入文字', {
            left: 50,
            top: 50,
            textBackgroundColor: 'rgb(255,255,255)'
        }).setControlsVisibility(HideControls);
        canvas.add(textWithBackground);
    }

    function addLine2(){
        var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {
                    stroke: 'rgb(255,255,255)',
                    strokeWidth: 8,
                    fill: 'rgb(255,0,0)'
                }
        ).scaleToWidth(100).setControlsVisibility(HideControls);

        canvas.add(path);
    }

    // 送出處理後圖像給 PHP
    function saveImage() {
        request = new XMLHttpRequest();
        request.open('POST', 'c1.php', true);

        var $Json = {};
        $Json['image'] = canvas.toDataURL();
        $Json['id'] = 'aa111';
        request.send( JSON.stringify($Json) );
    }

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas = new fabric.Canvas('c');

var HideControls = {

'tl':true,

'tr':false,

'bl':true,

'br':true,

'ml':true,

'mt':true,

'mr':true,

'mb':true,

'mtr':true

};

var image = new Image();

image.src = 'normal_3206.png';

image.onload = function() {

// create a wrapper around native canvas element (with id="c")

canvas.setHeight(image.width).setWidth(image.height);

canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {

width: canvas.width,

height: canvas.height,

// Needed to position backgroundImage at 0/0

originX: 'left',

originY: 'top'

});

};

canvas.renderAll();

function addDeleteBtn(x, y){

$(".deleteBtn").remove();

var btnLeft = x-10;

var btnTop = y-10;

var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';

$(".canvas-container").append(deleteBtn);

}

canvas.on('object:selected',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('mouse:down',function(e){

if(!canvas.getActiveObject())

{

$(".deleteBtn").remove();

}

});

canvas.on('object:modified',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('object:scaling',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:moving',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:rotating',function(e){

$(".deleteBtn").remove();

});

$(document).on('click',".deleteBtn",function(){

if(canvas.getActiveObject())

{

canvas.remove(canvas.getActiveObject());

$(".deleteBtn").remove();

}

});

// ----------------------------------------

function addBlock(){

var rect = new fabric.Rect({

stroke: 'rgb(255,0,0)',

strokeWidth: 3,

width: 100, height: 40,

fill: false, left: 50, top: 50

}).setControlsVisibility(HideControls);

canvas.add(rect);

}

function addText() {

var t = new fabric.IText('Tap and Type', {

fontFamily: 'arial black',

left: 100,

top: 100

});

var textWithBackground = new fabric.IText('輸入文字', {

left: 50,

top: 50,

textBackgroundColor: 'rgb(255,255,255)'

}).setControlsVisibility(HideControls);

canvas.add(textWithBackground);

}

function addLine2(){

var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {

stroke: 'rgb(255,255,255)',

strokeWidth: 8,

fill: 'rgb(255,0,0)'

}

).scaleToWidth(100).setControlsVisibility(HideControls);

canvas.add(path);

}

// 送出處理後圖像給 PHP

function saveImage() {

request = new XMLHttpRequest();

request.open('POST', 'c1.php', true);

var $Json = {};

$Json['image'] = canvas.toDataURL();

$Json['id'] = 'aa111';

request.send( JSON.stringify($Json) );

}

</script>

</body>

</html>

—

847 total views

Web Audio API – 使用

Posted on 2016-10-28 by hoyo

參考

—

實作

使用 Canvas 繪圖

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div id="example">
    <audio id="player" class="hideIfNoApi" controls="controls" src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3" crossorigin="anonymous"> </audio>

    <div id="visualisation" class="hideIfNoApi"> </div>
</div>

<div id="visualizer_wrapper">
    <canvas id='canvas' width="702" height="350" style="border: 1px #eee solid;"></canvas>
</div>

<script>
    $(function () {
        context = new (window.AudioContext || window.webkitAudioContext)();
        
        // Create the analyser
        var analyser = context.createAnalyser();
        
        // https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize
        analyser.fftSize = 64;
        
        // Get the frequency data and update the visualisation
        function update() {
            var canvas = document.getElementById('canvas'),
                    cwidth = canvas.width,
                    cheight = canvas.height - 2,
                    meterWidth = 20, //width of the meters in the spectrum
                    gap = 2, //gap between meters
                    capHeight = 2,
                    capStyle = '#fff',
                    meterNum = 702 / (10 + 2), //count of the meters
                    capYPositionArray = []; //store the vertical position of hte caps for the preivous frame
            ctx = canvas.getContext('2d');
            gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(1, '#0f0');
            gradient.addColorStop(0.5, '#ff0');
            gradient.addColorStop(0, '#f00');

            var drawMeter = function() {
                var array = new Uint8Array(analyser.frequencyBinCount);
                
                analyser.getByteFrequencyData(array);
                ctx.clearRect(0, 0, cwidth, cheight);
                
                for (var i = 0; i < array.length; i++) {
                    var value = array[i];
                    if (capYPositionArray.length < Math.round(meterNum)) {
                        capYPositionArray.push(value);
                    }
                    ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
                    ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);
                }
                requestAnimationFrame(drawMeter);
            };
            
            requestAnimationFrame(drawMeter);
        }

        // Hook up the audio routing...
        // player -> analyser -> speakers
        // (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)
        $("#player").bind('canplay', function() {
            var source = context.createMediaElementSource(this);
            source.connect(analyser);
            analyser.connect(context.destination);

            update();
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

$(function () {

context = new (window.AudioContext || window.webkitAudioContext)();

// Create the analyser

var analyser = context.createAnalyser();

// https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize

analyser.fftSize = 64;

// Get the frequency data and update the visualisation

function update() {

var canvas = document.getElementById('canvas'),

cwidth = canvas.width,

cheight = canvas.height - 2,

meterWidth = 20, //width of the meters in the spectrum

gap = 2, //gap between meters

capHeight = 2,

capStyle = '#fff',

meterNum = 702 / (10 + 2), //count of the meters

capYPositionArray = []; //store the vertical position of hte caps for the preivous frame

ctx = canvas.getContext('2d');

gradient = ctx.createLinearGradient(0, 0, 0, 300);

gradient.addColorStop(1, '#0f0');

gradient.addColorStop(0.5, '#ff0');

gradient.addColorStop(0, '#f00');

var drawMeter = function() {

var array = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(array);

ctx.clearRect(0, 0, cwidth, cheight);

for (var i = 0; i < array.length; i++) {

var value = array[i];

if (capYPositionArray.length < Math.round(meterNum)) {

capYPositionArray.push(value);

}

ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look

ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);

}

requestAnimationFrame(drawMeter);

};

requestAnimationFrame(drawMeter);

}

// Hook up the audio routing...

// player -> analyser -> speakers

// (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)

$("#player").bind('canplay', function() {

var source = context.createMediaElementSource(this);

source.connect(analyser);

analyser.connect(context.destination);

update();

});

</script>

</body>

</html>

analyser.fftSize
設定值除以 2 就是陣列取樣數，預設 2048
analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 0
analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 128
requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
能量條的高度是根據 0-255 所繪製，所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

—

543 total views

RICOH THETA 網頁全景處理

Posted on 2016-05-13 by hoyo

參考

—

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

<head>
    <script type="text/javascript" src="utilities.js"></script>

    <style type="text/css" media="screen">
        * { outline : none; -moz-outline : none -moz-mac-focusring; }
        #source-img	  { position: absolute; left: -999em; }
        canvas        	{ position: absolute; float:center; top: -90px; }
        #screen	        	{ position: absolute; float:center; top: 0px; }
        #screen div     { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
            background: #fffff; }
        div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
            width: 630px; }
    </style>

    <script type="text/javascript">
        var YD = YAHOO.util.Dom,
                YE = YAHOO.util.Event;
        var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
                stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
            canvas = YD.get('cv');
            ctx = canvas.getContext('2d');
            canvas.width = 630;
            canvas.height = 815;
            canvas.style.width = '630px';
            canvas.style.height = '815px';
            stage = YD.get('screen-overlay');
            YE.on(stage, 'mousedown', startMoveBackground);
            YE.on(stage, 'mousemove', moveBackground);
            YE.on(stage, 'mouseout', stopMove);
            YE.on(stage, 'mouseup', stopMoveBackground);
            stagePos = YD.getXY(stage);
            stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
            img = YD.get('source-img');
            redraw(); }
        function startMoveBackground(e) {}
        function moveBackground(e) {
            dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
            if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
                if(moveDirection === 'left' || !moveDirection) {
                    clearInterval(moveInterval);
                    moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
            else
            { if(moveDirection === 'right' || !moveDirection) {
                clearInterval(moveInterval);
                moveInterval = setInterval(function() { moveLeft(); }, timeInt);
                moveDirection = 'left'; }}}
        function stopMove() {
            clearInterval(moveInterval);
            moveDirection = null; }
        function moveRight() {
            imgOffset += dist;
            redraw(); }
        function moveLeft() {
            imgOffset -= dist;
            redraw(); }
        function stopMoveBackground(e) {}
        function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
            if(typeof offset === 'undefined') offset = 0;
            var h = img.height,
                    w = (img.width - 2) / 2.5;
            var polarity = (pixelWidth > 0) ? 1 : -1;
            var widthFactor = Math.abs(pixelWidth) / w;
            var delta = Math.abs(pixelWidth);
            var dHeight, dWidth, dy, dx;
            var constant = Math.pow(100000, scalingFactor); //380;
            var firstInc = ((delta / 2) * (delta / 2)) / constant;
            for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
                (function(m) {
                    sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
                    ((inc * m + offset) % img.width) };})(n);
                sy = 0;
                sWidth = inc;
                sHeight = h;
                firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
                secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
                dHeight = (n < len / 2) ? firstHalf : secondHalf;
                dWidth = inc * widthFactor;
                dy = y + (h - dHeight) / 2;
                dx = x + (inc * n * widthFactor * polarity);
                data.push({
                    sx: sx,
                    sy: sy,
                    sWidth: sWidth,
                    sHeight: sHeight,
                    dx: dx,
                    dy: dy,
                    dWidth: dWidth,
                    dHeight: dHeight }); } }
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
        function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
            if(data.length === 0) {
                precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
            var slice, sx;
            for(var n = 0, len = data.length; n < len; n++) {
                slice = data[n];
                ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
                        slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
        YAHOO.util.Event.on(window, 'load', init);
    </script>
</head>

<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>

100

101

102

103

104

105

106

107

108

<head>

* { outline : none; -moz-outline : none -moz-mac-focusring; }

#source-img { position: absolute; left: -999em; }

canvas { position: absolute; float:center; top: -90px; }

#screen { position: absolute; float:center; top: 0px; }

#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;

background: #fffff; }

div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;

width: 630px; }

</style>

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event;

var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,

stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {

canvas = YD.get('cv');

ctx = canvas.getContext('2d');

canvas.width = 630;

canvas.height = 815;

canvas.style.width = '630px';

canvas.style.height = '815px';

stage = YD.get('screen-overlay');

YE.on(stage, 'mousedown', startMoveBackground);

YE.on(stage, 'mousemove', moveBackground);

YE.on(stage, 'mouseout', stopMove);

YE.on(stage, 'mouseup', stopMoveBackground);

stagePos = YD.getXY(stage);

stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];

img = YD.get('source-img');

redraw(); }

function startMoveBackground(e) {}

function moveBackground(e) {

dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;

if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {

if(moveDirection === 'left' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}

else

{ if(moveDirection === 'right' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveLeft(); }, timeInt);

moveDirection = 'left'; }}}

function stopMove() {

clearInterval(moveInterval);

moveDirection = null; }

function moveRight() {

imgOffset += dist;

redraw(); }

function moveLeft() {

imgOffset -= dist;

redraw(); }

function stopMoveBackground(e) {}

function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {

if(typeof offset === 'undefined') offset = 0;

var h = img.height,

w = (img.width - 2) / 2.5;

var polarity = (pixelWidth > 0) ? 1 : -1;

var widthFactor = Math.abs(pixelWidth) / w;

var delta = Math.abs(pixelWidth);

var dHeight, dWidth, dy, dx;

var constant = Math.pow(100000, scalingFactor); //380;

var firstInc = ((delta / 2) * (delta / 2)) / constant;

for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {

(function(m) {

sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +

((inc * m + offset) % img.width) };})(n);

sy = 0;

sWidth = inc;

sHeight = h;

firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;

secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;

dHeight = (n < len / 2) ? firstHalf : secondHalf;

dWidth = inc * widthFactor;

dy = y + (h - dHeight) / 2;

dx = x + (inc * n * widthFactor * polarity);

data.push({

sx: sx,

sy: sy,

sWidth: sWidth,

sHeight: sHeight,

dx: dx,

dy: dy,

dWidth: dWidth,

dHeight: dHeight }); } }

function redraw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }

function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {

if(data.length === 0) {

precalculate(img, x, y, pixelWidth, scalingFactor, offset); }

var slice, sx;

for(var n = 0, len = data.length; n < len; n++) {

slice = data[n];

ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,

slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}

YAHOO.util.Event.on(window, 'load', init);

</script>

</head>

<body>

</body>

—

720全景图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>全景演示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }

        a {
            color: #ffffff;
        }
    </style>

</head>
<body>

<div id="container"></div>
<div id="info">单张图片全景.</div>

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/three.min.js"></script>

<script>
    var camera, scene, renderer;
    var fov = 70,
            texture_placeholder,
            isUserInteracting = false,
            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0;

    init();
    animate();

    function init() {
        var container, mesh;
        container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();

        mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );
        mesh.scale.x = -1;
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
        document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
        //
        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function onDocumentMouseDown( event ) {
        event.preventDefault();
        isUserInteracting = true;
        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;
        onPointerDownLon = lon;
        onPointerDownLat = lat;
    }

    function onDocumentMouseMove( event ) {
        if ( isUserInteracting ) {
            lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
        }
    }

    function onDocumentMouseUp( event ) {
        isUserInteracting = false;
    }

    function onDocumentMouseWheel( event ) {
        // WebKit
        if ( event.wheelDeltaY ) {
            fov -= event.wheelDeltaY * 0.05;
            // Opera / Explorer 9

        } else if ( event.wheelDelta ) {
            fov -= event.wheelDelta * 0.05;
            // Firefox

        } else if ( event.detail ) {
            fov += event.detail * 1.0;
        }

        camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        render();
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        lat = Math.max( - 85, Math.min( 85, lat ) );
        phi = THREE.Math.degToRad( 90 - lat );
        theta = THREE.Math.degToRad( lon );

        camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
        camera.target.y = 500 * Math.cos( phi );
        camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

        camera.lookAt( camera.target );

        /*
         // distortion
         camera.position.x = - camera.target.x;
         camera.position.y = - camera.target.y;
         camera.position.z = - camera.target.z;
         */

        renderer.render( scene, camera );
    }
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<head>

<style>

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 0px; width: 100%;

color: #ffffff;

padding: 5px;

font-family:Monospace;

font-size:13px;

font-weight: bold;

text-align:center;

}

a {

color: #ffffff;

}

</style>

</head>

<body>

<div id="info">单张图片全景.</div>

var camera, scene, renderer;

var fov = 70,

texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 0, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0;

init();

animate();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );

camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();

mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );

mesh.scale.x = -1;

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mouseup', onDocumentMouseUp, false );

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;

onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;

lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );

render();

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );

phi = THREE.Math.degToRad( 90 - lat );

theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );

camera.target.y = 500 * Math.cos( phi );

camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

// distortion

camera.position.x = - camera.target.x;

camera.position.y = - camera.target.y;

camera.position.z = - camera.target.z;

renderer.render( scene, camera );

}

</script>

</body>

</html>

—

680 total views, 10 views today

jBox 第一次載入圖片無法顯示

Posted on 2016-03-04 by hoyo

jBox 使用 background image 來顯示圖片，在第一次點選圖片時都無法顯示

DIV background images not showing on first load. Only happens when first loading app on FB using Chrome

解決的方式是在第一次載入顯示時，加上 setTimeout()

// JBox-image-gallery1-0 
if (next_id == 0 ) {
    var $this = this;
    setTimeout(function(){
        (!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + $this.images[gallery][next_id].src + '">').load(function () {
            appendImage(gallery, next_id, true);
        });
    }, 500);
}

else {
    (!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '">').load(function () {
        appendImage(gallery, next_id, true);
    });
}

// JBox-image-gallery1-0

if (next_id == 0 ) {

var $this = this;

setTimeout(function(){

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + $this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}, 500);

}

else {

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}

—

440 total views

jQuery 的 Selectors 較佳用法

Posted on 2015-12-18 by hoyo

PhpStorm

原JavaScript 語法

$("#FormAdd input").val();

1	$("#FormAdd input").val();

警告訊息：

Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

1	Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

Inefficient jQuery usage warnings in PHPStorm IDE

修正後語法

$("#FormAdd").find("input").val();

1	$("#FormAdd").find("input").val();

—

492 total views

TinyMCE 4 使用

Posted on 2015-10-29 by hoyo

之前使用 CKeditor 作為網頁編輯器，這兩天想要一個〝拖曳圖檔到編輯區套用 base64〞的效果，搞了快一天後沒啥進度後，轉到 TinyMCE 之後，Google 一小下就完成了…

官網： TinyMCE

設定參數及說明在 Configuration 頁面，

—

停止連結樣式轉換

How do I stop TinyMCE from replacing absolute links with root-relative links?

預設會將連結網址從 “/?a=Test” 修改為 “?a=Test” ，也就是會自動修正 server name ，不過這種自動通常都很出錯可以關閉

tinymce.init({
    selector: "#id_Edit_HTML",
    menubar: false,
    convert_urls : false,
    remove_script_host : false
});

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false,

convert_urls : false,

remove_script_host : false

});

—

複製 Word 貼上時保留格式

Paste from Word to TinyMCE

paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark",
paste_retain_style_properties: "all",

1 2	paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark", paste_retain_style_properties: "all",

—

100% 開放 HTML 以及 JavaScript

如此就可以在編輯區使用所有 HTML Tag 以及切換到原始碼輸入 JavaScript 代碼

tinymce.init({
    selector: "#id_Add_HTML",
    //menubar: false,
    content_css: "Page/css/custom.css",
    language: "zh_TW",
    valid_elements : '*[*]',
    extended_valid_elements : '*[*]',
    entity_encoding : "raw",
    init_instance_callback : function(editor) {
        // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
        //     just remove the escaping and not add it back.
        editor.serializer.addNodeFilter('script,style', function(nodes, name) {
            var i = nodes.length, node, value, type;

            function trim(value) {
                /*jshint maxlen:255 */
                /*eslint max-len:0 */
                return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');
            }
            while (i--) {
                node = nodes[i];
                value = node.firstChild ? node.firstChild.value : '';

                if (value.length > 0) {
                    node.firstChild.value = trim(value);
                }
            }
        });
    },
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
    plugins: [
        "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor  ",

    paste_data_images: true
});

tinymce.init({

selector: "#id_Add_HTML",

//menubar: false,

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking"

paste_data_images: true

});

—

使用 CodeMirror 優化原始碼編輯

tinymce.init({
    selector: "#id_Edit_HTML",
    menubar: false,
    content_css: "Page/css/custom.css",
    language: "zh_TW",
    valid_elements : '*[*]',
    extended_valid_elements : '*[*]',
    entity_encoding : "raw",
    codemirror: {
        indentOnInit: true, // Whether or not to indent code on init.
        fullscreen: true,   // Default setting is false
        path: 'CodeMirror', // Path to CodeMirror distribution
        config: {           // CodeMirror config object
            mode: 'application/x-httpd-php',
            lineNumbers: false
        },
        width: 800,         // Default value is 800
        height: 600,        // Default value is 550
        saveCursorPosition: true,    // Insert caret marker
        jsFiles: [          // Additional JS files to load
            'mode/clike/clike.js',
            'mode/php/php.js'
        ]
    },
    init_instance_callback : function(editor) {
        // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
        //     just remove the escaping and not add it back.
        editor.serializer.addNodeFilter('script,style', function(nodes, name) {
            var i = nodes.length, node, value, type;

            function trim(value) {
                /*jshint maxlen:255 */
                /*eslint max-len:0 */
                return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');
            }
            while (i--) {
                node = nodes[i];
                value = node.firstChild ? node.firstChild.value : '';

                if (value.length > 0) {
                    node.firstChild.value = trim(value);
                }
            }
        });
    },
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
    plugins: [
        "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor | code ",

    paste_data_images: true
});

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false,

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

codemirror: {

indentOnInit: true, // Whether or not to indent code on init.

fullscreen: true, // Default setting is false

path: 'CodeMirror', // Path to CodeMirror distribution

config: { // CodeMirror config object

mode: 'application/x-httpd-php',

lineNumbers: false

width: 800, // Default value is 800

height: 600, // Default value is 550

saveCursorPosition: true, // Insert caret marker

jsFiles: [ // Additional JS files to load

'mode/clike/clike.js',

'mode/php/php.js'

]

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"

paste_data_images: true

});

本來原始碼編輯長這樣，沒空白、沒縮行，修改起來非常痛苦

改用 CodeMirror 之後長這樣

—

自訂 CodeMirror

不使用 TAB 縮排、縮排四個空格、啟用 Tag 對應、啟用折疊功能、開啟行數顯示

tinymce.init({
    selector: "#id_Edit_HTML",
    menubar: false, //
    content_css: "Page/css/custom.css",
    language: "zh_TW",
    valid_elements : '*[*]',
    extended_valid_elements : '*[*]',
    entity_encoding : "raw",
    force_br_newlines : false,
    force_p_newlines : false,
    forced_root_block : '',
    paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark",
    paste_retain_style_properties: "all",
    codemirror: {
        indentOnInit: true, // Whether or not to indent code on init.
        fullscreen: true,   // Default setting is false
        path: 'CodeMirror', // Path to CodeMirror distribution
        config: {           // CodeMirror config object
            mode: 'application/x-httpd-php',
            lineNumbers: true,
            indentUnit: 4,
            //匹配括号
            matchBrackets: true,
            //匹配标签
            matchTags: { bothTags: true },
            indentWithTabs: false,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}
        },
        width: 800,         // Default value is 800
        height: 600,        // Default value is 550
        saveCursorPosition: true,    // Insert caret marker
        cssFiles: [
            'addon/fold/foldgutter.css'
        ],
        jsFiles: [          // Additional JS files to load
            'addon/edit/matchbrackets.js',
            'addon/edit/matchtags.js',
            'addon/fold/foldcode.js',
            'addon/fold/foldgutter.js',
            'addon/fold/brace-fold.js',
            'addon/fold/xml-fold.js',
            'mode/clike/clike.js',
            'mode/php/php.js'
        ]
    },
    init_instance_callback : function(editor) {
        // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
        //     just remove the escaping and not add it back.
        editor.serializer.addNodeFilter('script,style', function(nodes, name) {
            var i = nodes.length, node, value, type;

            function trim(value) {
                /*jshint maxlen:255 */
                /*eslint max-len:0 */
                return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');
            }
            while (i--) {
                node = nodes[i];
                value = node.firstChild ? node.firstChild.value : '';

                if (value.length > 0) {
                    node.firstChild.value = trim(value);
                }
            }
        });
    },
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
    plugins: [
        "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor | code ",

    paste_data_images: true
});

tinymce.init({

selector: "#id_Edit_HTML",

menubar: false, //

content_css: "Page/css/custom.css",

language: "zh_TW",

valid_elements : '*[*]',

extended_valid_elements : '*[*]',

entity_encoding : "raw",

force_br_newlines : false,

force_p_newlines : false,

forced_root_block : '',

paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark",

paste_retain_style_properties: "all",

codemirror: {

indentOnInit: true, // Whether or not to indent code on init.

fullscreen: true, // Default setting is false

path: 'CodeMirror', // Path to CodeMirror distribution

config: { // CodeMirror config object

mode: 'application/x-httpd-php',

lineNumbers: true,

indentUnit: 4,

//匹配括号

matchBrackets: true,

//匹配标签

matchTags: { bothTags: true },

indentWithTabs: false,

foldGutter: true,

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}

width: 800, // Default value is 800

height: 600, // Default value is 550

saveCursorPosition: true, // Insert caret marker

cssFiles: [

'addon/fold/foldgutter.css'

jsFiles: [ // Additional JS files to load

'addon/edit/matchbrackets.js',

'addon/edit/matchtags.js',

'addon/fold/foldcode.js',

'addon/fold/foldgutter.js',

'addon/fold/brace-fold.js',

'addon/fold/xml-fold.js',

'mode/clike/clike.js',

'mode/php/php.js'

]

init_instance_callback : function(editor) {

// jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will

// just remove the escaping and not add it back.

editor.serializer.addNodeFilter('script,style', function(nodes, name) {

var i = nodes.length, node, value, type;

function trim(value) {

/*jshint maxlen:255 */

/*eslint max-len:0 */

return value.replace(/()/g, '\n')

.replace(/^[\r\n]*|[\r\n]*$/g, '')

.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n')

.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n');

}

while (i--) {

node = nodes[i];

value = node.firstChild ? node.firstChild.value : '';

if (value.length > 0) {

node.firstChild.value = trim(value);

}

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror"

paste_data_images: true

});

—

撰寫 <script> 時關閉自動增加 <p>

tinymce adding p tags automatically?

tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      force_br_newlines : false,
      force_p_newlines : false,
      forced_root_block : '',
});

tinyMCE.init({

mode : "textareas",

theme : "advanced",

force_br_newlines : false,

force_p_newlines : false,

forced_root_block : '',

});

—

實際應用案例

拖曳圖檔，使用 Base64 儲存 tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4
ajax 送出前更新 TinyMCE textarea and post form using ajax
開啟 autoresize 讓編輯區自動調整
設定自動儲存更新

<label for="id_NOTE">儀器說明 <span id="bbb"></span></label>
<textarea class="form-control" name="NOTE" id="id_NOTE" data-validation-engine="validate[required]"></textarea>

<script>
    tinymceOptions = {
        selector: "textarea",
        theme: "modern",
        language: "zh_TW", // 設定正體中文，要先下載語言檔
        menubar: false, // 關閉功能列
        content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css", // 設定 CSS 樣式和 Bootstrap 一致
        setup: function (editor) {
            // 編輯區有更新就儲存更新，確保送出資料一致
            editor.on('change', function () {
                tinymce.triggerSave();
            });
        },
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste autoresize"
        ],
        //toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",

        paste_data_images: true
    };

    tinymce.init(tinymceOptions);
</script>

tinymceOptions = {

selector: "textarea",

theme: "modern",

language: "zh_TW", // 設定正體中文，要先下載語言檔

menubar: false, // 關閉功能列

content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css", // 設定 CSS 樣式和 Bootstrap 一致

setup: function (editor) {

// 編輯區有更新就儲存更新，確保送出資料一致

editor.on('change', function () {

tinymce.triggerSave();

});

plugins: [

"advlist autolink lists link image charmap print preview anchor",

"searchreplace visualblocks code fullscreen",

"insertdatetime media table contextmenu paste autoresize"

paste_data_images: true

};

tinymce.init(tinymceOptions);

</script>

—

自訂預設選項

CKeditor 有 config.js 的預設設定檔可使用，不過 TinyMCE 4 並無類似的設定 (至少還沒發現)，參考 TinyMCE – jQuery Plugin, setting a default Theme/Options Globally 之後得到以下寫法

<script>
    // 適用全體設定
    TinyMceConfig = {
        language: "zh_TW",
        menubar: false,
        content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css",
        paste_data_images: true
    };

    // 指定對象，及個別設定
    TextArea1 = {
        selector: "textarea"
    };

    // 將設定物件合併
    $.extend(true, TextArea1, TinyMceConfig);
    
    // 初始化執行
    tinymce.init(TextArea1);
</script>

// 適用全體設定

TinyMceConfig = {

language: "zh_TW",

menubar: false,

content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css",

paste_data_images: true

};

// 指定對象，及個別設定

TextArea1 = {

selector: "textarea"

};

// 將設定物件合併

$.extend(true, TextArea1, TinyMceConfig);

// 初始化執行

tinymce.init(TextArea1);

</script>

—

讓編輯區的樣式和前台一致

content_css

tinyMCE.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'Component_Front/bootstrap/css/bootstrap.min.css'
});

tinyMCE.init({

selector: 'textarea', // change this value according to your HTML

content_css : 'Component_Front/bootstrap/css/bootstrap.min.css'

});

—

1,872 total views, 2 views today

MathJax 使用 JavaScript 顯示數學公式

Posted on 2015-10-27 by hoyo

這篇看不懂很正常，沒接觸過出版、教育的人應該很難想像，要在網頁上顯示優美的數學公式是多麼困難的事情。

接觸過的人，大概會認識一個叫 LaTeX 的傢伙，這個時候就會知道 MathJax 的偉大之處了。

官網： MathJax

MathJax is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache license.

1	MathJax is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache license.

單純在瀏覽器上顯示 LaTeX 數學公式可以使用此 JavaScript library，需要平面 PDF 輸出才使用 LaTeX 執行

範例演示兩個功能

ajax 載入的資料如何套用 MathJax
如何把所有的 LaTeX 套用 \displaystyle ，參考至：如何将一些html之前和之后使用MathJax数学时呈现How to put some html before and after math when rendering using MathJax (裡面有原出處，我有查到經過，不過看不懂)

<script>
    $(document).ajaxStop(function () {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,".Question"]);
    });

    MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
        var TEX = MathJax.InputJax.TeX;
        var PREFILTER = TEX.prefilterMath;
        TEX.Augment({
            prefilterMath: function (math,displaymode,script) {
                math = "\\displaystyle{"+math+"}";
                return PREFILTER.call(TEX,math,displaymode,script);
            }
        });
    });
</script>

$(document).ajaxStop(function () {

MathJax.Hub.Queue(["Typeset",MathJax.Hub,".Question"]);

});

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {

var TEX = MathJax.InputJax.TeX;

var PREFILTER = TEX.prefilterMath;

TEX.Augment({

prefilterMath: function (math,displaymode,script) {

math = "\\displaystyle{"+math+"}";

return PREFILTER.call(TEX,math,displaymode,script);

}

});

</script>

—

727 total views, 1 views today

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Category Archives: 網頁前端

jQuery DOM Insertion, Inside & Outside

如何控制插入內容相對於對象的位置

網頁或網頁內元素是否作用中 (可視)

元素出現就作用

元素完整出現才作用

網頁通知 HTML5 Notification

結論 (2021/7/8)

參考資源

Canvas framework

hoyo 自己的應用

Web Audio API – 使用

參考

實作

RICOH THETA 網頁全景處理

jBox 第一次載入圖片無法顯示

jQuery 的 Selectors 較佳用法

TinyMCE 4 使用

停止連結樣式轉換

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

使用 CodeMirror 優化原始碼編輯

自訂 CodeMirror

撰寫 <script> 時關閉自動增加 <p>

實際應用案例

自訂預設選項

讓編輯區的樣式和前台一致

MathJax 使用 JavaScript 顯示數學公式