WordPress.org
Get WordPress

Plugin Directory

Changeset 2171771


Ignore:
Timestamp:
10/11/2019 01:01:03 PM (6 years ago)
Author:
AlfonsoAB
Message:

Vaersion 1.1.0

Location:
styles-selector
Files:
1 deleted
12 edited

Legend:

Unmodified
Added
Removed

  • styles-selector/trunk/README.txt

    r2165362 r2171771  
    88Tested up to: 5.2.3
    99License: GPLv2 or later
    10 Version:           1.0.0
     10Version:           1.1.0
    1111Requires at least: 5.2
    1212Requires PHP:      7.1.32
    … …  
    2222https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
    2323https://www.w3schools.com/
     24https://www.wordpress.org/
    2425
    2526== Description ==
    … …  
    2728Plugin for altering several items in a theme in order to change the visualization. You can choose which kind of item will be,
    2829an individual CSS element or an entire class by specifing the type of element.
    29 If you have a theme switcher, you can also alter several themes (up to five).
     30If you have a theme switcher, like "multidevice switcher", you can also alter several themes (up to five).
    3031Once you have saved the themes, their elements and the name of the option, a widget will be created with a menu list of the options you did,
    3132so the users can set the display options they want.
     33
     34
     35The main idea of this plugin came when reading some webnovel in my cellphone and couldn't change the color of the text when the light changed.
     36It provides the user an instant change of the colors of the screen, colors preselected by the administrator in order to not change very much the design of the page,
     37 also it has the advantage of not reloading the content, since there is no change of the theme, just an alteration of the CSS properties.
     38 
     39
    3240
    3341Usage
    … …  
    3745## Admin menu
    3846
    39 * The admin can choose up to five different themes from the installed ones to be changed by selectint them in a drop down at the beginning of each tab of the configuration page. Note that you can select the same theme several times if you run out of mods.
     47* The admin can choose up to five different themes from the installed ones to be changed by selecting them in a drop down at the beginning of each tab of the configuration page. Note that you can select the same theme several times if you run out of mods.
     48* You can force the selector to be displayed at the top of the page instead of using a widget or a shortcode.
     49* You can configure the style of the selector for each theme.
    4050* At each theme tab the admin can set up to ten color modifications to classes or individual elements.
    4151    ### Admin menuOptions fields
    … …  
    5666
    5767## Frontend
    58     * The user can choose between a default "Restore" option, and the ones defined by you.
     68    * The user can choose between a default "Restore" option, and the ones defined by you. This option is persistent.
     69    * The user can select the size of the text. This option is not persistent.
    5970   
    6071== Installation ==
    … …  
    7485Tested in a multisite with * domain names and works fine. Can't say yet if in a MU with only one domain will work the same.
    7586
     87= Works with xxx theme? =
     88
     89Can't say. CSS is sometimes tricky and is nor always clear which element to change.
     90Some themes may prevent tampering or have dynamic HTML5 and javascript updates of the styles.
     91
     92= Why can't I add my own stylesheet? =
     93
     94This plugin isn't a theme switcher, neither a customizer, it just changes colors and size of the fonts for better reading.
     95
     96= I have updated the plugin and fonts doesn't change size. =
     97
     98Try refreshing all caches, sometimes it takes time to reload styles and scripts.
     99
    76100
    77101== Screenshots ==
    … …  
    83107== Changelog ==
    84108
     109= 1.1.0 =
     110Added font size to frontend.
     111Configurable selector.
     112Optional force selector on head.
     113Added fields to options database.
     114Some spelling errors corrected.
     115Added "overflow:auto" to options boxes.
     116Added some nonsense to the FAQ.
     117
    85118= 1.0 =
    86119First version
     120
    87121== Upgrade Notice ==
     122= 1.1.0 =
     123
     124Added some fronted and backend options. Corrected spelling and deleted some unneded code.
    88125
    89126= 1.0 =
    … …  
    92129== TODO ==
    93130
    94 Add font size and face frontend customization.
    95 Add background image backend option.
    96 Option to selectively display the "head" menu instead of uncomenting it.
    97131Prepare code for translation.
    98132Clean a bit the code.
     133Add background image backend option.
    99134
    100135== Directories explanation ==

  • styles-selector/trunk/admin/class-styleselector-admin.php

    r2165349 r2171771  
    55 *
    66 * @link       https://chafalladas.com
    7  * @since      1.0.0
     7 * @since      1.1.0
    88 *
    99 * @package    Styleselector
    … …  
    158158 */
    159159
    160 public function validate($input) {
    161 
     160public function validate($input)
     161    {
    162162    $valid = array();
    163     $ss_fieldTypes = array("ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
     163    $ss_fieldTypes = array("ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel", "ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
    164164    for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
    165165        {
    166166        $ss_fieldId = $ss_fieldTypes[0]."_".$ss_tab;
    167         $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);       
    168             for ($ss_count = 1; $ss_count < 11; $ss_count++)
    169                 {
    170                 for ($ss_fieldCount = 1; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
    171                     {
    172                     $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
    173                     $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
    174                     }
    175                 }
    176         }
     167        $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     168        $ss_fieldId = $ss_fieldTypes[1]."_".$ss_tab;
     169        $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     170        $ss_fieldId = $ss_fieldTypes[2]."_".$ss_tab;
     171        $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     172        $ss_fieldId = $ss_fieldTypes[3]."_".$ss_tab;
     173        $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     174        $ss_fieldId = $ss_fieldTypes[4]."_".$ss_tab;
     175        $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     176        for ($ss_count = 1; $ss_count < 11; $ss_count++)
     177            {
     178            for ($ss_fieldCount = 5; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
     179                {
     180                $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
     181                $valid[$ss_fieldId] =  wp_filter_nohtml_kses($input[$ss_fieldId]);
     182                }
     183            }
     184        }
    177185    return $valid;
    178186    }

  • styles-selector/trunk/admin/css/styleselector-admin.css

    r2165349 r2171771  
    9797.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    9898    height:110px;
     99    overflow: auto;
    99100    border:1px solid #0073AA;
    100101}

  • styles-selector/trunk/admin/js/styleselector-admin.js

    r2165349 r2171771  
    11//https://stackoverflow.com/questions/21646738/convert-hex-to-rgba ******************
     2//  console.trace(this);
     3   
     4var eleArray = []; //Array of options
     5var changes = {
     6    isTab:'', option:'', isClass:'', eleName:'', rgbColor:'', rgbFont:'', alfaBg:'', alfaFn:'', restore:false,
     7    bgColor: function()
     8    {
     9        var tcolr = hexToRgbA(this.rgbColor);
     10        return "rgba(" + tcolr.ssR + ", " + tcolr.ssG + ", " + tcolr.ssB + ", "+ this.alfaBg/100 + ")";
     11    },
     12    fnColor: function()
     13    {
     14        var tcolr = hexToRgbA(this.rgbFont);
     15        return "rgba(" + tcolr.ssR + ", " + tcolr.ssG + ", " + tcolr.ssB + ", "+ this.alfaFn/100 + ")";
     16    }
     17}
     18   
    219function hexToRgbA(hex){
    320    var c;
    … …  
    4562else{document.getElementById("submit").style.display = "block";}
    4663}
     64//Select selector option ****************
     65function styleSelect(ss_element)
     66{
     67    document.getElementById("select_sheet_div_" + ss_element).disabled = true;
     68    document.getElementById("select_sheet_sel_" + ss_element).disabled = true;
     69    switch(parseInt(document.getElementById("select_style_" + ss_element).value))
     70    {
     71        case 0:
     72            document.getElementById("select_sheet_div_" + ss_element).value = '';
     73            document.getElementById("select_sheet_sel_" + ss_element).value = '';
     74        break;
     75        case 1:
     76            document.getElementById("select_sheet_div_" + ss_element).value = 'border-radius: 10px';
     77            document.getElementById("select_sheet_sel_" + ss_element).value = 'border-radius: 10px';
     78        break;
     79        case 2:
     80            document.getElementById("select_sheet_div_" + ss_element).disabled = false;
     81            document.getElementById("select_sheet_sel_" + ss_element).disabled = false;
     82        break;
     83    }
     84    document.getElementById("shortcode_sselector_" + ss_element).style = document.getElementById("select_sheet_div_" + ss_element).value;
     85    document.getElementById("widget_sselector_" + ss_element).style = document.getElementById("select_sheet_sel_" + ss_element).value;
     86    fillForm(ss_element);
     87}
    4788//Color picker routine ******************
    4889function clickColor(ss_element,ss_which)
    … …  
    81122function fillForm(ss_option)
    82123{
    83     var ss_fieldTypes = ["ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option"];
    84     var checkEl = document.getElementById(ss_fieldTypes[0] + "_" + ss_option);
    85     if (checkEl !== null)
    86     {
    87         document.getElementById(ss_fieldTypes[0] + "_" + ss_option).value = document.getElementById(ss_fieldTypes[0].replace("ss_", "") + "_" + ss_option).value;
     124    var i = 0;
     125    var ss_fieldTypes = ["ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel", "ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option"];
     126    if (ss_option.lastIndexOf("_") === -1)
     127    {   
     128        setChecked(document.getElementById(ss_fieldTypes[0].replace("ss_", "") + "_" + ss_option), document.getElementById(ss_fieldTypes[0] + "_" + ss_option));
     129        for (i=1; i < 5; i++)
     130        {
     131        document.getElementById(ss_fieldTypes[i] + '_' + ss_option).value = document.getElementById(ss_fieldTypes[i].replace("ss_", "") + "_" + ss_option).value;           
     132            if (document.getElementById(ss_fieldTypes[i].replace("ss_", "") + "_" + ss_option).value == "2")
     133            {
     134                document.getElementById(ss_fieldTypes[2].replace("ss_", "") + "_" + ss_option).disabled = false;
     135                document.getElementById(ss_fieldTypes[3].replace("ss_", "") + "_" + ss_option).disabled = false;
     136            }
     137        }       
    88138    }
    89139    else
    90140    {
    91         for (var i=1; i < ss_fieldTypes.length -1; i++)
     141        for (i=5; i < ss_fieldTypes.length -1; i++)
    92142        {
    93143            document.getElementById(ss_fieldTypes[i] + '_' + ss_option).value = document.getElementById(ss_fieldTypes[i].replace("ss_", "") + "_" + ss_option).value;
    94144        }
    95         if(document.getElementById(ss_fieldTypes[i].replace("ss_", "") + "_" + ss_option).checked == 1)
    96             {document.getElementById(ss_fieldTypes[i] + '_' + ss_option).value = 1;}
    97         else
    98             {document.getElementById(ss_fieldTypes[i] + '_' + ss_option).value = 0;}
     145    setChecked(document.getElementById(ss_fieldTypes[i].replace("ss_", "") + "_" + ss_option),document.getElementById(ss_fieldTypes[i] + '_' + ss_option));
    99146    }
    100147}
    … …  
    102149function ss_pass_stored()
    103150{
    104     var ss_fieldTypes = ["ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option"];
     151    var ss_fieldTypes = ["ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel", "ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option"];
    105152    var ss_option, i, j, k = 0;
    106153    var ss_colors = "";
    107154    for(i=1;i < 6;i++)
    108155    {
     156        checkedVal(document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + i),document.getElementById(ss_fieldTypes[k] + "_" + i).value);
     157        k++;
     158        if (document.getElementById(ss_fieldTypes[k] + "_" + i).value == "2")
     159        {
     160            document.getElementById(ss_fieldTypes[2].replace("ss_", "") + "_" + i).disabled = false;
     161            document.getElementById(ss_fieldTypes[3].replace("ss_", "") + "_" + i).disabled = false;
     162        }
     163        document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + i).value = document.getElementById(ss_fieldTypes[k] + "_" + i).value;
     164        k++;
     165        document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + i).value = document.getElementById(ss_fieldTypes[k] + "_" + i).value;
     166        k++;
     167        document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + i).value = document.getElementById(ss_fieldTypes[k] + "_" + i).value;
     168        k++;
    109169        document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + i).value = document.getElementById(ss_fieldTypes[k] + "_" + i).value;
    110170        for (j=1; j < 11; j++)
    111171        {
    112             for (k=1; k < ss_fieldTypes.length - 5; k++)
     172            for (k=5; k < ss_fieldTypes.length - 5; k++)
    113173            {
    114                 ss_option = i + "_" + j;
     174                ss_option = i + "_" + j;
    115175                document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).value = document.getElementById(ss_fieldTypes[k] + '_' + ss_option).value;
    116176            }
    117177//Some really simple yet hard to read code that renders the style colors we saved
    118178// Need to read more about wrappers to make a nice method for the test_color element here. Next version maybe.
    119 //        console.log("Test Color filling: " + ss_option + " Element: " + ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option);
    120179            document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).value = document.getElementById(ss_fieldTypes[k] + '_' + ss_option).value;
    121180            ss_colors = hexToRgbA(document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).value);
    … …  
    139198            document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).style.backgroundColor = ss_bgcolor.replace(/[^,]+(?=\))/, ss_alfa);
    140199            document.getElementById('test_color_' + ss_option).innerHTML = "Font color: " + document.getElementById('test_color_' + ss_option).style.color + " BG Color: " + document.getElementById('test_color_' + ss_option).style.backgroundColor;
    141             k++;           
    142             if(document.getElementById(ss_fieldTypes[k] + '_' + ss_option).value == 1)
    143                 {document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).checked = 1;}
    144             else
    145                 {document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option).checked = 0;}
     200            k++;
     201            checkedVal(document.getElementById(ss_fieldTypes[k].replace("ss_", "") + "_" + ss_option), document.getElementById(ss_fieldTypes[k] + '_' + ss_option).value);
    146202//Seriously, this is unreadable, it's a Must TODO.
    147203        }
    148204        k = 0;
    149     }
    150 }
     205        styleSelect("" + i);
     206    }
     207}
     208//Set checked according stored vals
     209function checkedVal(which, val)
     210{
     211    if(val == 1)
     212        {which.checked = 1;}
     213    else
     214        {which.checked = 0;}
     215}
     216//Set val according checked status
     217function setChecked(checkedOne, valOne)
     218{
     219    if(checkedOne.checked == 1)
     220        {valOne.value = 1;}
     221    else
     222        {valOne.value = 0;}
     223}
     224
     225//Selector demo options.
     226
     227//Styles options
     228
     229//Add new values
     230function addOption(a_tab, a_option,a_class,a_name,a_color,a_font,a_alfab,a_alfaf,dontcare)
     231{
     232    var exists = false;
     233    var j,k=0;
     234    for (k=0;k < eleArray.length;k++)//Check if entry already exists
     235    {
     236        if(eleArray[k].eleName == a_name && eleArray[k].option == a_option)
     237        {
     238        exists = true;
     239        }
     240    }
     241    if(!exists && (a_name == "shortcode_sselector" || a_name == "widget_sselector"))
     242    {
     243        eleArray.push(Object.create(changes,{isTab:{value:a_tab}, option:{value:a_option}, isClass:{value:a_class}, eleName:{value:a_name},
     244        rgbColor:{value:a_color}, rgbFont:{value:a_font}, alfaBg:{value:a_alfab}, alfaFn:{value:a_alfaf}}));
     245    }
     246}
     247//Change colors
     248// shortcode_sselector".$ss_tab."'
     249//sample_sselector".$ss_tab."
     250function changeProps(ss_element,tab)
     251{
     252    var i,j=0;
     253    var wichOption = ss_element.value;
     254            if (wichOption == "Restore")
     255            {
     256                ss_element.style.backgroundColor = "#ffffff";
     257                ss_element.style.color = "#000";
     258                document.getElementById("shortcode_sselector_" +tab).style.backgroundColor = "#ffffff";
     259                document.getElementById("shortcode_sselector_" +tab).style.color = "#000";
     260            }
     261
     262    for(i=0;i<eleArray.length;i++)
     263    {
     264        if(wichOption == eleArray[i].option)
     265        {
     266                ss_element.style.backgroundColor = eleArray[i].bgColor();
     267                ss_element.style.color = eleArray[i].fnColor();
     268                document.getElementById("shortcode_sselector_" +tab).style.backgroundColor =  eleArray[i].bgColor();
     269                document.getElementById("shortcode_sselector_" +tab).style.color = eleArray[i].fnColor();
     270        }
     271    }
     272}
     273
     274//Function to extract a style property
     275var getStyle = function(element, property) {
     276    return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
     277};

  • styles-selector/trunk/admin/partials/styleselector-admin-display.php

    r2165349 r2171771  
    2424    }
    2525    echo "</select>";
    26 //  echo "<fieldset>".get_stylesheet(). " ____  " .get_bloginfo('stylesheet_directory');
     26    echo "<h3>Should the selector be displayed at the head of the page?</h3>";
     27    echo "<input type='checkbox' id='disp_head_".$ss_tab."' name='disp_head_".$ss_tab."' oninput=\"fillForm('".$ss_tab."')\" />";
     28    echo "<h3>Choose a style for the selectors. You can also alter them changing the \"shortcode_sselector\" for the div and  \"widget_sselector\" for the selector classes.</h3>";
     29    echo "<table align='center'>";
     30    echo "  <tr align='center'>";
     31    echo "      <td width='50'>Choose a style for the selectors.</td>";
     32    echo "      <td width='50'>Custom CCS for \"shortcode_sselector\".</td>";
     33    echo "      <td width='50'>Custom CCS for \"widget_sselector\".</td>";
     34    echo "      <td width='50'>";
     35    echo "          <div class='shortcode_sselector_".$ss_tab."'>Select a style: ";
     36    echo "          </div>";
     37    echo "</td>";
     38    echo "  </tr>";
     39    echo "  <tr align='center'>";
     40    echo "      <td><select name='select_style_".$ss_tab."' id='select_style_".$ss_tab."' oninput=\"styleSelect('".$ss_tab."')\">";
     41    echo "          <option value='0'>Squared</option>";
     42    echo "          <option value='1'>Rounded</option>";
     43    echo "          <option value='2'>Custom</option>";
     44    echo "      </select></td>";
     45    echo "      <td><textarea id='select_sheet_div_".$ss_tab."' name='select_sheet_div_".$ss_tab."' cols='80' rows='4' class='all-options' disabled  oninput=\"styleSelect('".$ss_tab."')\">Select 'Custom' to edit.</textarea></td>";
     46    echo "      <td><textarea id='select_sheet_sel_".$ss_tab."' name='select_sheet_sel_".$ss_tab."' cols='80' rows='4' class='all-options' disabled  oninput=\"styleSelect('".$ss_tab."')\">Select 'Custom' to edit.</textarea></td>";
     47    echo "      <td style='width:150px'><div id='shortcode_sselector_".$ss_tab."'>";
     48    prepareAdmOutput($ss_tab);
     49    echo "      </div></td>";
     50    echo "  </tr>";
     51    echo "</table>";   
    2752    echo "<!-- Same as the themes options the list of configurable styles and classes is fixed, in this case to ten different styles and classes. -->";
    2853    echo "<h4>Options for this theme.</h4>";
    … …  
    3762        echo "            <div class='content'>";
    3863        echo "            <fieldset class='stylesel-admin-colors'>";
    39         echo "                <table align='center'>";
     64        echo "                <table align='center' width='100%'>";
    4065        echo "                    <tr align='center'>";
    41         echo "                      <td width='50'>Type a name for the option:&nbsp;</td>";
    42         echo "                      <td width='50'>Class or element?&nbsp;</td>";
    43         echo "                      <td width='50'>Name of the element to manipulate:&nbsp;</td>";
    44         echo "                      <td width='150'>Pick the color of the background:&nbsp;</td>";
    45         echo "                      <td width='150'>Pick the color of the font:&nbsp;</td>";
    46         echo "                      <td width='150'>Background transparency:&nbsp;</td>";
    47         echo "                      <td width='150'>Font transparency:&nbsp;</td>";
     66        echo "                      <td>Type a name for the option:&nbsp;</td>";
     67        echo "                      <td>Class or element?&nbsp;</td>";
     68        echo "                      <td>Name of the element to manipulate:&nbsp;</td>";
     69        echo "                      <td>Pick the color of the background:&nbsp;</td>";
     70        echo "                      <td>Pick the color of the font:&nbsp;</td>";
     71        echo "                      <td>Background transparency:&nbsp;</td>";
     72        echo "                      <td>Font transparency:&nbsp;</td>";
    4873        echo "                      <td>Active?</td>";
    4974        echo "                    </tr>";
    … …  
    115140 *
    116141 */
    117 $ss_fieldTypes = array("ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
     142$ss_fieldTypes = array("ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel", "ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
    118143for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
    119144{
    120145    $ss_fieldId = $ss_fieldTypes[0]."_".$ss_tab;
    121146    echo $ss_fieldId."<input type='text' name='".$this->plugin_name."[".$ss_fieldId."]' id='".$ss_fieldId."' value=\"".$options[$ss_fieldId]."\"class='all-options' />";
     147
     148    $ss_fieldId = $ss_fieldTypes[1]."_".$ss_tab;
     149    echo $ss_fieldId."<input type='text' name='".$this->plugin_name."[".$ss_fieldId."]' id='".$ss_fieldId."' value=\"".$options[$ss_fieldId]."\"class='all-options' />";
     150
     151    $ss_fieldId = $ss_fieldTypes[2]."_".$ss_tab;
     152    echo $ss_fieldId."<input type='text' name='".$this->plugin_name."[".$ss_fieldId."]' id='".$ss_fieldId."' value=\"".$options[$ss_fieldId]."\"class='all-options' />";
     153
     154    $ss_fieldId = $ss_fieldTypes[3]."_".$ss_tab;
     155    echo $ss_fieldId."<input type='text' name='".$this->plugin_name."[".$ss_fieldId."]' id='".$ss_fieldId."' value=\"".$options[$ss_fieldId]."\"class='all-options' />";
     156
     157    $ss_fieldId = $ss_fieldTypes[4]."_".$ss_tab;
     158    echo $ss_fieldId."<input type='text' name='".$this->plugin_name."[".$ss_fieldId."]' id='".$ss_fieldId."' value=\"".$options[$ss_fieldId]."\"class='all-options' />";
     159
    122160    echo "<fieldset class='stylesel-admin-colors'>";
    123161    for ($ss_count = 1; $ss_count < 11; $ss_count++)
    124162        {
    125         for ($ss_fieldCount = 1; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
     163        for ($ss_fieldCount = 5; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
    126164            {
    127165            $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
    … …  
    142180        <p>This plugin creates a select menu that lets a user change the color style of a page or post to be changed acording the settings
    143181        that the blog administrator sets. </p>
    144         <p>The admin can choose up to five different themes from the installed ones to be changed by selectint them in a drop down at the
     182        <p>The admin can choose up to five different themes from the installed ones to be changed by selecting them in a drop down at the
    145183        beginning of each tab of the configuration page. Note that you can select the same theme several times if you run out of mods.</p>
    146         <p>At each theme tab the admin can set up to ten color modifications to classes or individual elements.</p>
    147         <br>
     184        <p>At each theme tab the admin can set up to ten color modifications to classes or individual elements.</p>     
     185        <p>You can configure the style of the selector for each theme. Also you can force the selector to be displayed at the top of the page instead of using a widget or a shortcode.</p>
     186        <h4 align="center">Example</h4>
     187        <p>Copy this in the  "shortcode_sselector" box.<br> <code>font-size: 1.25em; font-weight: bolder; width: 100%; text-align:center; box-sizing: border-box; box-sizing: border-box; border: 2px solid #ccc; border-radius: 7px; padding: 9px 15px 9px 20px;</code></p>
     188        <p> And this in the "widget_sselector".<br> <code>font-size: 1.25em; font-weight: bolder; width: 100%; text-align:center; box-sizing: border-box; box-sizing: border-box; border: 2px solid #ccc; border-radius: 7px; padding: 9px 15px 9px 20px;</code></p>
     189
    148190        <h3 align="center">Options fields</h3>
    149191        <p>Name an option to be displayed to the user. This option will be added in the select input field.</p>
    … …  
    159201        <p>Save yor changes clicking the blue button at the end of the page</p>
    160202        <h3 align="center">Displaying the select drop down</h3>
    161         <p>There are currently two options, fist is to add the "Style selector widget" that this plugin creates to any sidebar.
     203        <p>There are currently two options, first one is to add the "Style selector widget" that this plugin creates to any sidebar.
    162204        You can also configure a title for the widget.</p>
    163         <p>The second is via a shortcode. Place the shortcode "[s_selector]" anywherw to display the drop down menu</p>
    164         <p>Additionally is a last minute adittion, you can uncoment the las line of the widget-selector.php file in the /public/partials dir of the pulugin directory
    165         using the wordpress plugin editor to show the drop down at the start of each page.</p>
     205        <p>The second is via a shortcode. Place the shortcode <b>"[s_selector]"</b> anywhere to display the drop down menu</p>
    166206        </div>
    167207    <script>
    168208        ss_pass_stored();
    169209    </script>
    170 
    171210</div>
     211<?php
     212//This function doesn't affect the display, is just for testing settings.
     213function prepareAdmOutput($ss_tab)
     214{
     215        $options = get_option('styleselector');
     216        $ss_fieldTypes = array("ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel","ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont" ,"ss_option");
     217        $ss_option_value = array("<select onchange='changeProps(this,".$ss_tab.")' id='widget_sselector_".$ss_tab."'><option value='Restore'>Restore</option>");
     218        $ss_option_values = array("Restore");
     219        for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
     220        {
     221            $ss_fieldId = $ss_fieldTypes[4]."_".$ss_tab;
     222            if (get_stylesheet() == $options[$ss_fieldId])
     223            {
     224                for ($ss_count = 1; $ss_count < 11; $ss_count++)
     225                {
     226                    $tem_str = $options["ss_option"."_".$ss_tab."_".$ss_count];
     227                    if ($options["ss_option"."_".$ss_tab."_".$ss_count] == 1)
     228                    {
     229                        $str = "'".$ss_tab."',";
     230                        if (!in_array($options["ss_opt_name"."_".$ss_tab."_".$ss_count], $ss_option_values))
     231                        {
     232
     233                            array_push($ss_option_value,"<option value='".$options["ss_opt_name"."_".$ss_tab."_".$ss_count]."'>".$options["ss_opt_name"."_".$ss_tab."_".$ss_count]."</option>");
     234                            array_push($ss_option_values,$options["ss_opt_name"."_".$ss_tab."_".$ss_count]);                       
     235                        }
     236                        for ($ss_fieldCount = 5; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
     237                        {
     238                            $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
     239                            if ($ss_fieldCount == 5)
     240                            {$str = $str."'".$options[$ss_fieldId]."'";}
     241                            else{$str = $str.",'".$options[$ss_fieldId]."'";}
     242                        }
     243                        echo "<script>addOption(".$str.");</script>";
     244                    }
     245                }
     246            }
     247        }
     248        foreach ($ss_option_value as $key=>$item){echo "$item\n";}
     249        echo "</select>
     250        <div><span style='font-size:15px;vertical-align:50%;cursor: pointer' title='Click to make the text smaller'>A</span>
     251        <span style='font-size:15px;vertical-align:50%;'>&#10138;</span>
     252        <span style='font-size:30px; vertical-align:25%;cursor:pointer' title='Click to make the text bigger'>A</span></div>";
     253
     254}
     255 ?>

  • styles-selector/trunk/assets

    • Property svn:ignore set to
      screenshot-1.jpg
      screenshot-2.jpg
      screenshot-3 .jpg

  • styles-selector/trunk/includes/class-styleselector-activator.php

    r2165349 r2171771  
    11<?php
    2 
    3 /**
    4  * Fired during plugin activation
    5  *
    6  * @link       https://chafalladas.com
    7  * @since      1.0.0
    8  *
    9  * @package    Styleselector
    10  * @subpackage Styleselector/includes
    11  */
    122
    133/**
    … …  
    2414
    2515    /**
    26      * Short Description. (use period)
     16     * Checks version, if needed then remake the database options fields.
    2717     *
    2818     * Long Description.
    2919     *
    30      * @since    1.0.0
     20     * @since    1.1.0
    3121     */
    3222    public static function activate() {
     23        //Check if database is already updated.
     24        $options = get_option('styleselector');     
     25        if(!isset($options["ss_disp_head_1"]))
     26        {
     27            options_updatever();
     28        }
     29    }
     30}
    3331
    34     }
     32// my $sanitize_callback function
    3533
    36 }
     34function options_updatever() {
     35    $valid = array();
     36    $options = get_option('styleselector');
     37    $ss_fieldTypes = array("ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel", "ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
     38    for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
     39        {
     40        $ss_fieldId = $ss_fieldTypes[0]."_".$ss_tab;
     41        $valid[$ss_fieldId] =  "1";
     42        $ss_fieldId = $ss_fieldTypes[1]."_".$ss_tab;
     43        $valid[$ss_fieldId] =  "Custom";
     44        $ss_fieldId = $ss_fieldTypes[2]."_".$ss_tab;
     45        $valid[$ss_fieldId] =    "font-family: 'IBM Plex Mono', monospace; font-size: 1.15em; width: 100%; box-sizing: border-box; padding: 10px 20px; border: none; border-radius: 10px; background-color: #00f1f1; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out";
     46        $ss_fieldId = $ss_fieldTypes[3]."_".$ss_tab;
     47        $valid[$ss_fieldId] =  "width: 100px; margin: auto; box-sizing: border-box; box-sizing: border-box; border: 2px solid #ccc; border-radius: 10px; padding: 12px 20px 12px 40px; background-color: #00f100; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out";
     48        $ss_fieldId = $ss_fieldTypes[4]."_".$ss_tab;
     49        $valid[$ss_fieldId] =  $options[$ss_fieldId];
     50        $valid = array_merge($valid,$options);
     51        for ($ss_count = 1; $ss_count < 11; $ss_count++)
     52            {
     53            for ($ss_fieldCount = 5; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
     54                {
     55                $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
     56                $valid[$ss_fieldId] =  $options[$ss_fieldId];
     57                }
     58            }
     59        }
     60    update_option('styleselector', $valid );
     61    $message = __('Options updated!.');
     62    $type = 'updated';
     63    // add_settings_error( $setting, $code, $message, $type )
     64    add_settings_error('styleselector', esc_attr( 'settings_updated' ), $message, $type);
     65 }
     66 

  • styles-selector/trunk/includes/class-styleselector.php

    r2165349 r2171771  
    2020 * Plugin URI:        https://chafalladas.com/styles-selector-plugin/
    2121 * Description:       A plugin that changes on the fly the styles of a page.
    22  * Version:           1.0.0
     22 * Version:           1.1.0
    2323 * Requires at least: 5.2
    24  * Requires PHP:      7.2
     24 * Requires PHP:      7.1.3.2
    2525 * Author:            Alfonso Abelenda Escudero
    2626 * Author URI:        https://chafalladas.com

  • styles-selector/trunk/public/js/styleselector-public.js

    r2165349 r2171771  
    3535    }
    3636}
     37
    3738//Add new values
    3839function addOption(a_option,a_class,a_name,a_color,a_font,a_alfab,a_alfaf,dontcare)
    … …  
    5354    }
    5455}
    55 //Change colors
    56 function changeProps(wichOption)
    57 {
    58     var i,j=0;
     56function setSize(size)
     57{
     58    var option=getCookie("ss_Option");
     59    if (option == ""){option = "Restore"}
     60    changeProps(option,size);
     61}
     62//Clean colors
     63function Restore(typeOfElement, element)
     64{
    5965    for(i=0;i<eleArray.length;i++)
    6066    {
    61         if(wichOption == eleArray[i].option)
    62         {
    63             if(eleArray[i].isClass == 0)
     67        if (eleArray[i].option == "Restore")
     68        {
     69            if (eleArray[i].isClass == 0)
    6470            {
    6571                var x = document.getElementsByClassName(eleArray[i].eleName);
    6672                for (j = 0; j < x.length; j++)
    6773                {
     74                    x[j].style.backgroundColor = eleArray[i].rgbColor;
     75                    x[j].style.color = eleArray[i].rgbFont;
     76                }
     77            }
     78            else
     79            {
     80                document.getElementById(eleArray[i].eleName).style.backgroundColor = eleArray[i].rgbColor;
     81                document.getElementById(eleArray[i].eleName).style.color = eleArray[i].rgbFont;
     82            }
     83        }
     84    }
     85}
     86//Change colors
     87function changeProps(wichOption,size)
     88{
     89    Restore();
     90    var i,j,newSize=0;
     91    for(i=0;i<eleArray.length;i++)
     92    {
     93        if(wichOption == eleArray[i].option)
     94        {
     95            if(eleArray[i].isClass == 0)
     96            {
     97                var x = document.getElementsByClassName(eleArray[i].eleName);
     98                for (j = 0; j < x.length; j++)
     99                {
    68100                    if (eleArray[i].option == "Restore")
    69101                    {
    70                         x[j].style.backgroundColor = eleArray[i].rgbColor;
    71                         x[j].style.color = eleArray[i].rgbFont;
     102                        Restore();
    72103                    }
    73104                    else
    … …  
    76107                        x[j].style.color = eleArray[i].fnColor();
    77108                    }
     109                    if(size != null)
     110                    {
     111                        newSize = size + parseFloat(x[j].style.fontSize.replace("em", ""));
     112                        if (isNaN(newSize)){newSize = parseFloat(size) + parseFloat(1.25);}
     113                        x[j].style.fontSize = newSize + "em";
     114                    }
    78115                }
    79116            }
    … …  
    82119                if (eleArray[i].option == "Restore")
    83120                {
    84                     document.getElementById(eleArray[i].eleName).style.backgroundColor = eleArray[i].rgbColor;
    85                     document.getElementById(eleArray[i].eleName).style.color = eleArray[i].rgbFont;
     121                    Restore();
    86122                }
    87123                else
    88124                {
    89                     var pp = eleArray[i].fnColor();
    90125                    document.getElementById(eleArray[i].eleName).style.backgroundColor = eleArray[i].bgColor();
    91126                    document.getElementById(eleArray[i].eleName).style.color = eleArray[i].fnColor();
    92127                }
     128                if(size != null)
     129                {
     130                    newSize = size + parseFloat(document.getElementById(eleArray[i].eleName).style.fontSize.replace("em", ""));
     131                    if (isNaN(newSize)){newSize = parseFloat(size) + parseFloat(1.25);}
     132                    document.getElementById(eleArray[i].eleName).style.fontSize = newSize + "em";
     133                }
    93134            }
    94135        }
    95136    }
    96137    setCookie("ss_Option",wichOption,365);
     138    if (newSize !== 0){setCookie("ss_Size",newSize,365);}
    97139}
    98140//Save previous values
    … …  
    109151        }
    110152    }
    111    
    112153    if(!exists)
    113154    {
    … …  
    148189  var expires = "expires=" + d.toGMTString();
    149190  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
     191  return; 
    150192}
    151193
    … …  
    168210function checkCookie() {
    169211    var option=getCookie("ss_Option");
     212    var size=getCookie("ss_Size") - 1.25;
    170213//console.log("Cookie?");
     214    size = size.toFixed(2)
    171215    if (option != "")
    172216    {
    173217//console.log("Cookie!");
    174         changeProps(option);
     218        changeProps(option,size);
    175219        return option;
    176220    }

  • styles-selector/trunk/public/partials/widget-styleselector.php

    r2165349 r2171771  
    7272{
    7373        $options = get_option('styleselector');
    74         $ss_fieldTypes = array("ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont","ss_option");
    75         $ss_option_value = array("<form><select onchange='changeProps(this.value)' class='widget_sselector' disabled><option value='Restore'>Restore</option>");
     74        $ss_fieldTypes = array("ss_disp_head", "ss_select_style", "ss_select_sheet_div", "ss_select_sheet_sel","ss_selected_theme", "ss_opt_name", "ss_theme_option_type","ss_element","ss_bg_colorPicker","ss_fn_colorPicker","ss_myRange","ss_myRangeFont" ,"ss_option");
     75        $ss_option_value = array("<form title='Select the color of the text'><select onchange='changeProps(this.value)' class='widget_sselector' disabled><option value='Restore'>Restore</option>");
    7676        $ss_option_values = array("Restore");
    7777        for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
    7878        {
    79             $ss_fieldId = $ss_fieldTypes[0]."_".$ss_tab;
     79            $ss_fieldId = $ss_fieldTypes[4]."_".$ss_tab;
    8080            if (get_stylesheet() == $options[$ss_fieldId])
    8181            {
    8282                for ($ss_count = 1; $ss_count < 11; $ss_count++)
    8383                {
     84                    $tem_str = $options["ss_option"."_".$ss_tab."_".$ss_count];
    8485                    if ($options["ss_option"."_".$ss_tab."_".$ss_count] == 1)
    8586                    {
    … …  
    9192                            array_push($ss_option_values,$options["ss_opt_name"."_".$ss_tab."_".$ss_count]);                       
    9293                        }
    93                         for ($ss_fieldCount = 1; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
     94                        for ($ss_fieldCount = 5; $ss_fieldCount < count($ss_fieldTypes); $ss_fieldCount++)
    9495                        {
    9596                            $ss_fieldId = $ss_fieldTypes[$ss_fieldCount]."_".$ss_tab."_".$ss_count;
    96                             if ($ss_fieldCount == 1)
     97                            if ($ss_fieldCount == 5)
    9798                            {$str = "'".$options[$ss_fieldId]."'";}
    9899                            else{$str = $str.",'".$options[$ss_fieldId]."'";}
    … …  
    104105        }
    105106        foreach ($ss_option_value as $key=>$item){echo "$item\n";}
    106         echo "<form></select>";
     107        echo "</select></form>
     108        <div><span style='font-size:15px;vertical-align:50%;cursor: pointer' onclick='setSize(-0.1)' title='Click to make the text smaller'>A</span>
     109        <span style='font-size:15px;vertical-align:50%;'>&#10138;</span>
     110        <span style='font-size:30px; vertical-align:25%;cursor:pointer' onclick='setSize(0.1)' title='Click to make the text bigger'>A</span></div>
     111        ";
    107112}
    108113
    109114function short_func() {
    110     echo '<div align="center" class="shortcode_sselector">Select a style: ';
     115    echo '<div align="center" class="shortcode_sselector">';
    111116    prepareOutput();
    112     //echo 'Style: '.get_stylesheet();
    113117    echo '</div>';
    114118    }
     119
     120function add_header()
     121{
     122    $options = get_option('styleselector');
     123    for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
     124    {
     125        if ($options["ss_disp_head_".$ss_tab] == 1 && get_stylesheet() == $options["ss_selected_theme_".$ss_tab])
     126        {
     127            short_func();
     128        }
     129    }
     130}
     131
    115132function wpshout_action_example() {
    116133//Add restore values and enable the select input at the end of the page to prevent errors loading objects
    117134//Also check a cookie and if exists, sets the option stored.
     135    $options = get_option('styleselector');
    118136    echo '<div style="background: green; color: white; text-align: right;" id="ss_selector_wait"><script>
    119137    var k=0;for (k;k < eleArray.length;k++){saveValues(k);};document.getElementById("ss_selector_wait").style.display = "none";
    120138    var x = document.getElementsByClassName("widget_sselector");
    121     for (i = 0; i < x.length; i++){x[i].disabled = false;};
     139    for (i = 0; i < x.length; i++){x[i].disabled = false;};';
     140    for ($ss_tab = 1; $ss_tab < 6; $ss_tab++)
     141    {
     142        if (get_stylesheet() == $options["ss_selected_theme_".$ss_tab])
     143        {
     144        $str = $options["ss_select_sheet_div_".$ss_tab];
     145        echo "x = document.getElementsByClassName('widget_sselector');
     146            for (j = 0; j < x.length; j++)
     147            {
     148                x[j].style = '".$str."';
     149            }       
     150        ";
     151        echo "x = document.getElementsByClassName('shortcode_sselector');
     152            for (j = 0; j < x.length; j++)
     153            {
     154                x[j].style = '".$str."';
     155            }       
     156        ";
     157        }
     158    }   
     159    echo '
    122160    var an_option = checkCookie();
    123     for (i = 0; i < x.length; i++){x[i].value = an_option;};
     161    x = document.getElementsByClassName("widget_sselector");
     162    for (i = 0; i < x.length; i++){x[i].value = an_option;};   
    124163    </script>Wait a sec, saving restore vars.</div>';
    125164}
    … …  
    127166add_shortcode( 's_selector','short_func');
    128167add_action('wp_footer', 'wpshout_action_example');
    129 //Uncomment to add styles selectore form at the head section
    130 //add_action('wp_head', 'short_func');
     168//Uncomment to add styles selector form at the head section
     169add_action('wp_head', 'add_header');
     170//add_action('wp_page_menu', 'add_header'); //Some themes could have this option, can crash
     171//add_action('wp_nav_menu', 'add_header'); //Some themes could have this option, can crash
     172//add_action('wp_headers', 'short_func'); //Some themes could have this option, can crash

  • styles-selector/trunk/styleselector.php

    r2165349 r2171771  
    1717 * Plugin URI:        https://github.com/Chafalleiro/Styles-selector
    1818 * Description:       Changes the styles by classes dinamically. Needs some knowledge about the css styles of the templates to alter.
    19  * Version:           1.0.0
     19 * Version:           1.1.0
    2020 * Author:            Alfonso
    2121 * Author URI:        https://chafalladas.com
Note: See TracChangeset for help on using the changeset viewer.