為phpbb新增美麗的拾色器

自架論壇的樂趣,在於外掛擴展的多樣性,但要謹記莫被眾多擴展迷花了眼,
我有裝的,別人有裝的,你不一定要跟著裝。選擇適合自己的最重要。
本版多為一些外掛的再利用為想法,謹慎取用。
版面規則
自架論壇的樂趣,在於外掛擴展的多樣性,但要謹記莫被眾多擴展迷花了眼,
我有裝的,別人有裝的,你不一定要跟著裝。選擇適合自己的最重要。
本版多為一些外掛的再利用為想法,謹慎取用。
回覆文章
ejsoon
.*.森旅中級生.*.
.*.森旅中級生.*.
文章: 213
註冊時間: 週日 2020-09-13 08:55
個人狀態: 思想清淨
性別:
表達感謝: 84 次
擁有感謝: 35 次

為phpbb新增美麗的拾色器

文章 ejsoon »

Firefox_Screenshot_2020-09-17T06-08-32.896Z.png
目標:{ROOT_PATH}styles/prosilver/template/posting_buttons.html
第34行替換成以下代碼:

代碼: 選擇全部

		<!-- <dd id="color_palette_placeholder" class="color_palette_placeholder" data-color-palette="h" data-height="12" data-width="15" data-bbcode="true"></dd> -->
		<dd id="color_picker" class="color_picker">
			<div id="color-outer-div" style="position: absolute; background: #fff; padding: 24px; border: 3px solid black; border-radius: 7px; z-index: 99;">
				<canvas id="color-picker"></canvas>
				<br>
				<div style="text-align: center;"><input type="button" onclick="insert_color_btn(this.value)" style="cursor: pointer; width: 200px; font-size: 16px;" type="text" id="color"></input></div>
				<div id="color_storage" style="cursor: pointer; margin-top: 7px;"></div>
				<div id="insert_type_outer" style="margin-top: 7px;">
					<input style=" height: 20px; width: 20px;" type="radio" id="insert_type_color" name="insert_type" value="color" checked>
					<label style=" font-size: 20px;" for="insert_type_color">color</label>
					<input style=" height: 20px; width: 20px; margin-left: 30px;" type="radio" id="insert_type_bg" name="insert_type" value="bg">
					<label style=" font-size: 20px;" for="insert_type_bg">bg</label>
				</div>
			</div>
			<script src="{ROOT_PATH}ext/colorpicker/html5kellycolorpicker.min.js"></script>
			<script src="{ROOT_PATH}ext/colorpicker/phpbbColorPicker.js"></script>
		</dd>
再把html5kellycolorpicker.min.jsphpbbColorPicker.js兩個文件放入{ROOT_PATH}ext/colorpicker/,其中第一個代碼可以在這裏取得。

第二個是我寫的js,內容是:

代碼: 選擇全部

var color_value = "#d24fac";
// get color store value
var store_color = localStorage.getItem('color');
if (null == store_color) {
	localStorage.setItem('color', '');
} else if (store_color !== '') {
	var color_arr = store_color.split(';');
	if (color_arr.length > 0) {
		color_value = color_arr[color_arr.length - 1];
	}
}

new KellyColorPicker({
	color: color_value,
	place : 'color-picker', 
	size : 217, 
	input : 'color',  
	method : 'triangle',
	alphaSlider : true,
	changeCursor : false,
});

set_color_div_content();

// insert color button
function insert_color_btn(color_value) {
	// close window
	$('#colour_palette').toggle();
	// insert color
	var insert_type = document.querySelector('input[name="insert_type"]:checked').value;
	bbfontstyle('[' + insert_type + '=' + color_value + ']', '[/' + insert_type + ']');
	// oparate storage
	oparate_storage(color_value);
	set_color_div_content();
}

// set the color history area
function set_color_div_content() {
	var store_color = localStorage.getItem('color');
	var color_storage_hd = document.getElementById('color_storage');
	color_storage_hd.innerHTML = '';
	if (store_color !== '') {
		var color_arr = store_color.split(';');
		color_arr.forEach(function(color_arr_itm, idx) {
			color_storage_hd.innerHTML = ''
			+ '<span style=" width: 30px; height: 30px; display: inline-block; vertical-align: middle; border: 2px solid black; background:' + color_arr_itm + ';" colorindex="' + idx + '" colorvalue="' + color_arr_itm + '" onclick="select_colorstorage(this)"></span>'
			+ color_storage_hd.innerHTML;
		});
		color_storage_hd.innerHTML += ''
			+ '<span style="text-align: center; width: 30px; height: 30px; display: inline-block; vertical-align: middle; border: 2px solid black; background: #fff; font-size: 24px; line-height: 30px;" id="delete_colorstorage_span" onclick="delete_colorstorage(this)">X</span>'
			+ '<input id="is_delete_mode" type="hidden" value=0>'
			+ '';
	}
}

// click color history span
function select_colorstorage(thus) {
	// get store color
	var store_color = localStorage.getItem('color');
	var color_arr = store_color.split(';');

	// if it is delete_mode
	var is_delete_mode_hd = document.getElementById('is_delete_mode');
	if (parseInt(is_delete_mode_hd.value) == 1) {
		color_arr.splice(thus.getAttribute('colorindex'), 1);
		localStorage.setItem('color', color_arr.join(';'));
		is_delete_mode_hd.value = 0;
		set_color_div_content();
		// document.getElementById('delete_colorstorage_span').style.background = 'white';
	} else {
		// insert color value text
		insert_color_btn((thus.getAttribute('colorvalue')));
		// adjust this color to first
		color_arr.splice(thus.getAttribute('colorindex'), 1);
		color_arr.push(thus.getAttribute('colorvalue'));
		localStorage.setItem('color', color_arr.join(';'));
	}
}

// oparate storage
function oparate_storage(color_value) {
	var store_color = localStorage.getItem('color');
	if (store_color !== '') {
		var color_arr = store_color.split(';');
		// if color is not already have
		if (color_arr.indexOf(color_value) == -1) {
			// add new color value to end
			color_arr.push(color_value);
			if (color_arr.length > 6) {
				// delete first color
				color_arr.shift();
			}
			localStorage.setItem('color', color_arr.join(';'));
		}
	} else {
		localStorage.setItem('color', color_value);
	}
}

// toggle delete_colorstorage mode
function delete_colorstorage(thus) {
	if (parseInt(thus.nextElementSibling.value) == 0) {
		thus.nextElementSibling.value = 1;
		thus.style.background = 'red';
	} else {
		thus.nextElementSibling.value = 0;
		thus.style.background = 'white';
	}
}
妳們的論壇可能要把bg改成highlight。
您沒有權限檢視這篇文章所附加的檔案。
頭像
和果子
.*.森旅初級生.*.
.*.森旅初級生.*.
文章: 89
註冊時間: 週二 2013-12-31 20:12
個人狀態: 心情娛悅
性別:
來自: 燦爛明月閣
表達感謝: 96 次
擁有感謝: 25 次

Re: 為phpbb新增美麗的拾色器

文章 和果子 »

好高大上的感覺,不懂~~
純粹路過 :hammer:
:srp:世界に一つだけの花
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為phpbb新增美麗的拾色器

文章 櫻井綾乃 »

感謝分享,不過此拾色器感覺是屬於擴展功能...
但要額外修改風格檔...
個人感覺以phpbb如果版本更新來說,修改的原始prosilver風格檔也會被新版本覆蓋..
這意味著,每次遇到更新或改版.都要針對以上再次進行修改,著時有點不方便.

如果能包裝成正確的phpbb擴展.或許可以造福更多人.
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
ejsoon
.*.森旅中級生.*.
.*.森旅中級生.*.
文章: 213
註冊時間: 週日 2020-09-13 08:55
個人狀態: 思想清淨
性別:
表達感謝: 84 次
擁有感謝: 35 次

Re: 為phpbb新增美麗的拾色器

文章 ejsoon »

櫻井綾乃 寫: 週四 2020-09-17 21:50 感謝分享,不過此拾色器感覺是屬於擴展功能...
但要額外修改風格檔...
個人感覺以phpbb如果版本更新來說,修改的原始prosilver風格檔也會被新版本覆蓋..
這意味著,每次遇到更新或改版.都要針對以上再次進行修改,著時有點不方便.

如果能包裝成正確的phpbb擴展.或許可以造福更多人.
我也想包裝成「正確的phpbb擴展」,暫時沒有找到擴展的製作方法。君能否指點一下。

不過我一直是自己改程序,沒有做成「正確的擴展」,昇級的時候phpbb的昇級程序會智能的識別我修改的地方,合併二者的修改。
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為phpbb新增美麗的拾色器

文章 櫻井綾乃 »

ejsoon 寫: 週五 2020-09-18 10:55
櫻井綾乃 寫: 週四 2020-09-17 21:50 感謝分享,不過此拾色器感覺是屬於擴展功能...
但要額外修改風格檔...
個人感覺以phpbb如果版本更新來說,修改的原始prosilver風格檔也會被新版本覆蓋..
這意味著,每次遇到更新或改版.都要針對以上再次進行修改,著時有點不方便.

如果能包裝成正確的phpbb擴展.或許可以造福更多人.
我也想包裝成「正確的phpbb擴展」,暫時沒有找到擴展的製作方法。君能否指點一下。

不過我一直是自己改程序,沒有做成「正確的擴展」,昇級的時候phpbb的昇級程序會智能的識別我修改的地方,合併二者的修改。
我本身是不會編寫程式..
以前PHPBB2時,或許還可以利用前人的智慧自己修改變造..如今PHPBB3擴展倒是讓我改造不能..

這方面或許可以到竹貓(補手老師和其他大大有時也會在線)或英文支援站去尋找相關資源.

官方的擴展文檔
https://www.phpbb.com/community/viewtop ... &t=2395991

我沒仔細看內容.但應該是有關於PHPBB的擴展的

我自己又新註冊了一個PHPBB英文論壇帳號...
也不知道會不會又被刪會員(我之前申請的2個,一個有發擴展的中文化,一個完全無發文,好像過了一個月被砍掉了.)..
建議你可以去試申請看看..
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
ejsoon
.*.森旅中級生.*.
.*.森旅中級生.*.
文章: 213
註冊時間: 週日 2020-09-13 08:55
個人狀態: 思想清淨
性別:
表達感謝: 84 次
擁有感謝: 35 次

Re: 為phpbb新增美麗的拾色器

文章 ejsoon »

我基本上知道怎麼做一個往模版加內容的擴展了,現在的問題是,我想加兩個js文檔,不知道怎麼加。如果網主知道可否告知?或者幫我去竹貓問一下?因為我已經嘗試註冊過很多次,仍然無法註冊成功⋯
ejsoon
.*.森旅中級生.*.
.*.森旅中級生.*.
文章: 213
註冊時間: 週日 2020-09-13 08:55
個人狀態: 思想清淨
性別:
表達感謝: 84 次
擁有感謝: 35 次

Re: 為phpbb新增美麗的拾色器

文章 ejsoon »

後来我去下載了別人做的搌展,打開看了之後就懂的如何弄了。已經把擴展做好了,知道怎麼引入js文檔了。如果妳的論壇是prosilver系的,可否嘗試一下並提點意見。這個是我做的第一個搌展啊, :sleep: 嘻嘻得意中。其實做搌展也不是很難的。
ejpoox_colorpicker.zip
(如果網主能幫我發到竹貓和phpbb官網就更好了,我在那裏無法註冊成功。)
您沒有權限檢視這篇文章所附加的檔案。
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為phpbb新增美麗的拾色器

文章 櫻井綾乃 »

我在我的測試站裝了...
但安裝後..並沒有顯示任何變化..

後台擴展沒基本設定..(這不一定有)
前台又是基於什麼操作?
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
ejsoon
.*.森旅中級生.*.
.*.森旅中級生.*.
文章: 213
註冊時間: 週日 2020-09-13 08:55
個人狀態: 思想清淨
性別:
表達感謝: 84 次
擁有感謝: 35 次

Re: 為phpbb新增美麗的拾色器

文章 ejsoon »

櫻井綾乃 寫: 週四 2020-09-24 16:48 我在我的測試站裝了...
但安裝後..並沒有顯示任何變化..

後台擴展沒基本設定..(這不一定有)
前台又是基於什麼操作?
妳有沒有點文字顏色?這個搌展是把選色的色盤替換成了可以自由任意選色的圓盤,就是[ color]這個標籤。

設置的話,我覺的是需要加的,因為你們的背景色標籤是highlight,我的是bg。以及後面可能還有些標籤是用到顏色的。不過目前我還不懂怎麼做設置頁,這個可能還會很複雜,可能要用到數據庫,在enable時增加數據,disable時刪除數據。
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為phpbb新增美麗的拾色器

文章 櫻井綾乃 »

怎麼說呢...
一開始說拾色器,
我以為是有另外新增的代碼或圖示代表.
所以我看了後台.和post的頁面.但沒看到任何的新增.才以為有誤...
並不知道是文字顏色的增強..

我覺得這個增強版文字顏色很不錯...
有可以記憶之前選擇顏色的功能..
如果有長篇文或報告要特別標色還挺方便的..
scre8271.png
但bg的部分..我無法正常顯示,
scre7679.png
這點可能和編輯器有關..
或許可能是我後台並沒有設定bg這個bbcode..造成只會顯示原碼..


以上是試用之後的小心得.
您沒有權限檢視這篇文章所附加的檔案。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
回覆文章

回到「惡搞の外掛變身篇」