Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: Enhancing the Admin Panels  (Read 2116 times)

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Enhancing the Admin Panels
« on: December 15, 2006, 04:20:00 am »

I spent all of Thursday working on ways to 'pimp-up' the sNews 1.5.30 Admin Panels. While adding short Admin tips to the collapsed sub-panels in the Admin >> Site >> Settings Panel... I thought... "What if I separated the link(s) out of the html_input('fieldset' strings... the link that expands and collapses the sub-panels... and add buttons to them... beside the Admin Tip line... under the sub-panel titles (fieldset)?"

So... let's take a look at how I did this. Here is the 'stock' snippet that expands and collapses the first sub-panel, in function settings in snews.php... the Settings sub-panel.
Quote
html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '',''.l('settings').'');
echo '
Which I modifed to:
Quote
html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '','');
echo '
And, to make this work, I modded function toggle (in the javascript section near the bottom of snews.php) from:
Quote
function toggle(div) {
      if (document.getElementById(div).style.display=='') {
         document.getElementById(div).style.display = 'none';
         return
      } document.getElementById(div).style.display = '';
   }
to...
Quote
function toggle(div) {
      if (document.getElementById(div).style.display=='') {
         document.getElementById(div).style.display = 'none';
         document.getElementById("btn").value="Expand";
         return
      } document.getElementById(div).style.display = '';
      document.getElementById("btn").value="Collapse";
   }
Now... the previously linked fieldset title is just a static title... and we have an "Expand" button under it. When we click the button, the panel expands and the button now reads "Collapse". And... if we click the button again... the panel collapses as it should.
The Toggle Button Works OK on the first panel... BUT...
Doing the same to the next Contact Info panel also gives us the same button. But... when we click it and it changes from "Expand" to "Collapse"... the same occurs to the button in the first Settings panel whether the panel is expanded or collapsed.

Question... Why do the buttons in each panel not work independently of each other... and what would the solution be? My javascript skills are limited, so any assistance would be helpful.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
Enhancing the Admin Panels
« Reply #1 on: December 15, 2006, 06:39:03 am »

The answer (and the limitation) is hiding inside document.getElementById('some-id') - there can be only one unique Id per page. On the other side, generic container like
and its Id passed via function parameter is much better solution - your "btn" is hardcoded.
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Enhancing the Admin Panels
« Reply #2 on: December 18, 2006, 09:44:17 pm »

The Solution that Works:
I left this for a few days and applied the following changes to the same panel as follows:
Quote
html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '',''.l('settings').''); // removed & moved link to next line
echo '
   <a title="'.l('maximize').'" onclick="toggle(\'sub1\')" style="cursor: pointer;"><input type="button" id="btn" onClick="toggle()" value="Panel"></a>';
echo ''.l('admintips3').'
<div id="sub1" style="display: none;">';
- Removed the link from the first line and put it in a new second line, and added the button string to replace the link text.
- Added the admin tip (language variable - admintips3) which reads: "Change your site title or add SEF words for search engines."
- No modifications to the the toggle function at all.
- Works just fine. :)
« Last Edit: March 06, 2008, 02:49:43 pm by Patric Ahlqvist »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU