domifara雑記

/**
 * @file XCcodePopup.js
 * @package For legacy Cube Legacy 2.2
 * @version $Id: XCcodePopup.js ver0.01 2017/05/11  18:19:00 domifara  $
 * @author  domifara [original souce is XCcodePopup.js (Ryuji http://ryus.co.jp/)]
**/
function XCPopupCode(obj)
{
    if (typeof jQuery == 'undefined') {
        div = obj.parentNode;
        xoopscode = div.lastChild;
        XCodeWin = window.open('blank.html');
        XCodeWin.document.open();
        XCodeWin.document.write(xoopscode.innerHTML);
        XCodeWin.document.close();
    } else {
jQuery(document).ready(function($){
        div = $(obj).parent();
        xoopscode = div.find(".xoopsCode").clone();
		var preob = $(xoopscode).find("pre");
		preob.css("overflow","visible");
		preob.css("background-color","white");
		preob.css("color","black");
//		preob.css("font-size","16px");
        XCodeWin = window.open('blank.html');
        XCodeWin.document.open();
        XCodeWin.document.write($(xoopscode).html());
        XCodeWin.document.close();
});
    }
}

/**
 * @file XCcodeResizableLoad.js
 * @package For legacy Cube Legacy 2.2
 * @version $Id: XCcodeResizableLoad.js ver0.01 2017/05/11  21:48:00 domifara  $
 * @author  domifara [ https://lolipop-xodomifara.ssl-lolipop.jp/doxcl/ ]
**/
jQuery(document).ready(function($){
	/****************************************
	*  initial values
	*****************************************/
	var def_height = 200;  //int number  or  0 As it i
	var def_width = 0;    //int number  or  0 As it is
	var label_Popup = "Popup"; //language
	var label_Spread = "Spread"; //language
	var label_Narrow = "Narrow"; //language
	var id_SpreadOrNarrow = "Spread"; //class name key string
	var title_Resizable_message = "Button Push or Double click on Code Area";
	var btn_show_label_bool = false; //boolean
	var btn_show_height = 26;  //int number
    var btn_class_name_base = "btn-XCPopupCode"; //exp."btn-XCPopupCode"+"-"+id_name
	/****************************************
	*  funcion need to work temp saved values
	*****************************************/
	var sdef_height = def_height;
	var sdef_width = def_width;
	var alive_btn_Widget = false ;
	var alive_resizable_Widget = false ;
	//
	//main
	$("div.xoopsCode").each(function(i, elem) {

		//console.log("jQueryUI resizable Widget = " + typeof $(elem).resizable );
		/*** judge jQueryUI Button Widget ***/
		if (typeof $(elem).resizable == "function" ) {
			alive_resizable_Widget = true;
		}else{
			//break;
		}

		/***  Popup base button setup ***/
		button_XCPopupCode_setup(
				elem ,
				button_getClassName_from_id_name("") ,
				label_Popup ,
				btn_show_label_bool ,
				"ui-icon-newwin" ,
				label_Popup + " : " + title_Resizable_message
		 );

		/****  default height or lower  ***/
		if ( $(elem).height() > def_height ){

			/*** append Spread button ***/
			button_append(
					elem ,
					button_getClassName_from_id_name(id_SpreadOrNarrow) ,
					label_Spread ,
					btn_show_label_bool ,
					"ui-icon-arrowstop-1-s" ,
					label_Spread + " : " + title_Resizable_message
			 ).on("click",function(){
				resize_spread_switched(elem);
			});

			/*** resizable start ***/
			initial_resize(elem ,def_height , def_width );

		}else{
			$(elem).css("overflow","auto");
			child_pre_background(elem);
		}
	});
	/**
	 * initial_resize
	 *
	 * xoopsCode>pr>code
	 * resize target is <pre>
	 * pre>code area initial resizable show
	 *
	 * elem : $(".xoopsCode")
	 * ehight : show element height (int)
	 * ewidth : show element width (int)
	 */
	function initial_resize(elem ,ehight ,ewidth) {
		//xoopsCode>pr>code
		var preob = $(elem).find("pre"); //resize target

		//inital overflow
		$(elem).css("overflow","visible"); //xoopsCode
		$(preob).css("overflow","auto"); //pre
		//fix for Transparent
		child_pre_background(elem);

		//set def_height
		if (ehight !== 0){
			$(elem).height(ehight + 20 ); //xoopsCode
			$(preob).height(ehight); //pre
		}
		//set def_width
		if (ewidth !== 0){
			$(elem).width(ewidth + 20 );//xoopsCode
			$(preob).width(ewidth); //pre
		}
		//save real default height,width target pre
		sdef_height = $(preob).height();
		sdef_width = $(preob).width();

		//use resizable wedgit
		ui_resizable_initialize( preob , elem );
		//on duble click
		$(preob).on("dblclick",function(){
			resize_spread_switched(elem);
		});
	}
	/**
	 * resize_spread_switched
	 *    on button Spread function
	 * elem : $(".xoopsCode")
	 * memo
	 */
	function resize_spread_switched(elem) {
		//scrollTop
		scrolltop_resize(elem);
		var preob = $(elem).find("pre");

		if (alive_resizable_Widget){
			//instance error check
			if ( $(preob).resizable( "widget" ) ){
				resize_spread_show(elem);
			}else {
				initial_resize(elem ,def_height ,def_width);
			}
		}else{
			resize_spread_show(elem);
		}
	}
	/**
	 * resize_spread_show
	 *  Spread show or Narrow show
	 *
	 * elem : $(".xoopsCode")
	 * memo
	 *  div> btn, btn, xoopsCode>pre>code
	 */
	function resize_spread_show(elem) {
		//"btn-XCPopupCode-Spread"
		var btn_class_name = button_getClassName_from_id_name(id_SpreadOrNarrow);
		//get button
		var btn_elem = $(elem).parent().find("." + btn_class_name );
		//get target object <pre>
		var preob = $(elem).find("pre");

		//for Calculation spreaded or narrowed
		var before_hight = $(preob).height();
		//---------------------------------------
		//reset action is Spread
		//spread to initial height
		$(preob).css("overflow","auto");
		$(preob).height("");
		//get after height
		var after_hight = $(preob).height();
		var after_widt = $(preob).width();
		//xoopsCode resize synchronously
		$(elem).height(after_hight + 20 );

		//check : Is target changed ?
		//judge Spreaded or Narrowed
		if (after_hight == before_hight){

			//Spreaded  -> Narrow
			$(preob).height(def_height);
			$(elem).height(def_height + 20 );

			if (after_widt != sdef_width){
				if ( def_width != 0){
					$(preob).height(def_width);
					$(elem).width(def_width + 20);
				}else{
					$(preob).width("");
					$(elem).width("");
				}
			}
			if (alive_btn_Widget){
				//display label re Setter
				$(btn_elem).button( "option", "label", label_Spread );
				ui_button_optset_icon( btn_elem ,"ui-icon-arrowstop-1-s" );
				$(btn_elem).attr("title",label_Spread + " : " + title_Resizable_message);
			}
		}else{
			//Narrowed  -> Spread
			if (alive_btn_Widget){
				//display label re Setter
				$(btn_elem).button( "option", "label", label_Narrow );
				ui_button_optset_icon( btn_elem ,"ui-icon-arrowstop-1-n" );
				$(btn_elem).attr("title",label_Narrow + " : " + title_Resizable_message);
			}
		}
	}
	/**
	 * child_pre_background
	 *   fix for background-color Transparent on pre>code area
	 *
	 * elem : $(".xoopsCode")
	 * memo
	 *  xoopsCode>pre>code
	 */
	function child_pre_background(elem) {

		if ($(elem).find("pre")){
			var preob = $(elem).find("pre");
			$(preob).addClass("ui-corner-all");

			$(preob).css("white-space","pre");
			$(preob).css("overflow","auto");

			var before_background_color = $(elem).css("background-color");
			var before_color = $(elem).css("color");
			var preob_background_color = $(preob).css("background-color");
			var preob_color = $(preob).css("color");

			if ( preob_background_color == "rgba(0, 0, 0, 0)" || preob_background_color == "transparent" ){
				//outer design
				$(elem).addClass("ui-widget-content ui-corner-all");
				var after_background_color = $(elem).css("background-color");
				var after_color = $(elem).css("color");

				if (before_background_color == after_background_color){
					$(elem).css("background-color",before_background_color);
					$(elem).css("color",before_color);
					$(preob).css("background-color",preob_background_color);
					$(preob).css("color",preob_color);
				}else{
					$(preob).css("background-color",after_background_color);
					$(preob).css("color",after_color);
				}

			}else{
				//outer design
				$(elem).addClass("ui-widget-content ui-corner-all");
				$(preob).css("background-color",preob_background_color);
				$(preob).css("color",preob_color);
			}

			if ( $(preob).css("padding-bottom") == "0px"){
					$(preob).css("padding-bottom","10px");
			}
			if ( $(preob).css("padding-left") == "0px"){
					$(preob).css("padding-left","10px");
			}
			if ( $(preob).css("padding-right") == "0px"){
					$(preob).css("padding-right","10px");
			}
			if ( $(preob).css("padding-top") == "0px"){
					$(preob).css("padding-top","10px");
			}
		}
	}
	/**
	 * scrollTop on dblclick resize
	 * elem : $(".xoopsCode")
	 * memo
	 *  XCodePopupResizable.class.php
	 *  div> btn btn xoopsCode>pre>code
	 */
	function scrolltop_resize(elem) {
		if ( $(elem).offset() && $(window).scrollTop() ) {
			var etop = $(elem).parent().offset().top; //
			var wtop = $(window).scrollTop();
			if ( wtop > etop ){
				$(window).scrollTop( parseInt(etop) );
			}
		}
	}
	/**
	 * button_getClassName_from_id_name
	 *  class name rule of button
	 *
	 * id_name : "" or "Spread"
	 */
	function button_getClassName_from_id_name(id_name) {
		//"btn-XCPopupCode" or "btn-XCPopupCode-Spread"
		if (id_name == ""){
			var class_name = btn_class_name_base;
		}else{
			var class_name = btn_class_name_base + "-" + id_name;
		}
		return class_name;
	}
	/**
	 * button_XCPopupCode_setup
	 *   Popup button with jQueryUI Button Widget
	 *
	 * elem : xoopsCode element
	 * btn_class_name : (text) id of button
	 * btn_label : (text) label text
	 * btn_label_show : (boolean) button label show or hidden
	 * icon_class_name : (text) ui-icon name
	 * btn_title : (text) title
	 *
	 */
	function button_XCPopupCode_setup( elem ,btn_class_name, btn_label ,btn_label_show ,icon_class_name , btn_title ) {

		//get html button element (Popup button)-> jQuery element
		var btn_elem = $(elem).parent().find("." + btn_class_name );
		//judge jQueryUI Button Widget
		if (typeof $(btn_elem).button == "function" ) {
			alive_btn_Widget = true;
		}
		//ui button wedgit set
		ui_button_setup( btn_elem ,btn_label ,btn_label_show ,icon_class_name , btn_title );
		//button object
		return btn_elem;
	}
	/**
	 * button_append
	 *   append button with jQueryUI Button Widget
	 *
	 * elem : xoopsCode element
	 * btn_class_name : (text) id of button
	 * btn_label : (text) label text
	 * btn_label_show : (boolean) button label show or hidden
	 * icon_class_name : (text) ui-icon name
	 * btn_title : (text) title
	 *
	 */
	function button_append( elem ,btn_class_name ,btn_label ,btn_label_show ,icon_class_name , btn_title ) {

		//append html button element btn-Resizable-Spread
		$(elem).before('<button class="' + btn_class_name + '">[' + btn_label + ']</button>');
		//get html button element -> jQuery element
		var btn_elem = $(elem).parent().find("." + btn_class_name );
		//ui button wedgit set
		ui_button_setup( btn_elem ,btn_label ,btn_label_show ,icon_class_name , btn_title );
		//
		return btn_elem;
	}
	/**
	 * ui_button_setup
	 *   ui button wedgit setup with jQueryUI Button Widget
	 *
	 * btn_elem : button element
	 * btn_label : (text) label text and id of button
	 * btn_label_show : (boolean) button label show or hidden
	 * icon_class_name : (text) ui-icon name
	 * btn_title : (text) title
	 *
	 * jQueryUI (https://api.jqueryui.com/button/)
	 */
	function ui_button_setup( btn_elem ,btn_label ,btn_label_show ,icon_class_name , btn_title ) {

		if (alive_btn_Widget){
			$(btn_elem).button( {
				label: btn_label
			} );
			ui_button_optset_icon( btn_elem ,icon_class_name );
			ui_button_optset_showLabel( btn_elem ,btn_label_show );
		}
		$(btn_elem).attr("title",btn_title);
		ui_button_setSize(btn_elem);
	}
	/**
	 * ui_button_setSize
	 *
	 * btn_elem : button element
	 *
	 */
	function ui_button_setSize( btn_elem ) {
//		$(btn_elem).height(btn_show_height); //why firefox
		$(btn_elem).css("height",btn_show_height + "px");
		$(btn_elem).css("padding-top","0px");
		$(btn_elem).css("padding-bottom","2px");
		$(btn_elem).css("display","table-cell");
		$(btn_elem).css("vertical-align","middle");
		$(btn_elem).css("font-size","0.8em");
	}
	/**
	 * ui_resizable_initialize
	 * resizable wedget start
	 *
	 * pre_elem : $(".xoopsCode>pre")
	 * also_elem : $(".xoopsCode")
	 *
	 * jQueryUI (https://api.jqueryui.com/resizable/)
	 */
	function ui_resizable_initialize( pre_elem , also_elem ) {
		if (!alive_resizable_Widget){
			return;
		}
		$(pre_elem).resizable({
			ghost : true ,
			distance: 30 ,
			classes: {
				"ui-resizable-se": "ui-icon ui-icon-grip-diagonal-se"
			}
		});
		//xoopsCode resize synchronously with target pre
		ui_resizable_optset_alsoResize( pre_elem , also_elem );

	}
	/**
	 * ui_resizable_optset_alsoResize
	 * resize synchronously
	 *
	 * pre_elem : $(".xoopsCode>pre")
	 * also_elem : $(".xoopsCode")
	 *
	 * jQueryUI (https://api.jqueryui.com/resizable/#option-alsoResize/)
	 */
	function ui_resizable_optset_alsoResize( pre_elem , also_elem ) {
//		console.log("proportionallyResize type = " +  typeof $(pre_elem).resizable( "option", "proportionallyResize" ) );
//		console.log("alsoResize type = " +  typeof $(pre_elem).resizable( "option", "alsoResize" ) );
		if (!alive_resizable_Widget){
			return;
		}
		try{
			if (typeof $(pre_elem).resizable( "option", "alsoResize" ) == "boolean" ) {
				$(pre_elem).resizable( "option", "alsoResize", $(also_elem) );
			} else {
				$(pre_elem).resizable( "option", "proportionallyResize", [$(also_elem)] );
			}
		}catch(e){
			$(pre_elem).resizable( "option", "proportionallyResize", [$(also_elem)] );
		}
	}
	/**
	 * ui_button_optset_icon
	 *   /button option setter (jQueryUI 1.12+ or other)
	 *
	 * btn_elem : button element
	 * icon_name : icon class name
	 */
	function ui_button_optset_icon(btn_elem ,icon_name) {
//		console.log("button icons type = " +  typeof $(btn_elem).button( "option", "icons" ).primary );
//		console.log("button icon type = " +  typeof $(btn_elem).button( "option", "icon" ) );
		if (!alive_btn_Widget){
			return;
		}
		try{
				$(btn_elem).button( "option", "icons", { primary: icon_name } );
			}catch(e){
				$(btn_elem).button( "option", "icon", { icon: icon_name } );
			}
	}
	/**
	 * ui_button_optset_showLabel
	 *   /button option setter (jQueryUI 1.12+ or other)
	 *
	 * btn_elem : button element
	 * show_flag : true or false
	 * https://api.jqueryui.com/button/#option-showLabel
	 */
	function ui_button_optset_showLabel(btn_elem ,show_flag) {
//		console.log("button showLabel type = " +  typeof $(btn_elem).button( "option", "showLabel" ) );
//		console.log("button text type = " +  typeof $(btn_elem).button( "option", "text" ) );
		if (!alive_btn_Widget){
			return;
		}
		try{
			if ( typeof $(btn_elem).button( "option", "showLabel" ) == "boolean" ){
				$(btn_elem).button( "option", "showLabel", show_flag );
			} else {
				$(btn_elem).button( "option", "text", show_flag );
			}
		}catch(e){
			$(btn_elem).button( "option", "text", show_flag );
		}
	}
});