Seite 1 von 1

localstorage Checkliste

Verfasst: Mo 19. Mär 2012, 20:54
von McHubi
Hallo zusammen,

es gibt wieder ein neues Modul von mir: checklist_sd

Diese Checkliste kann eine beliebige Anzahl an vorgegebenen Punkten enthalten, die per Anklicken aus der Auflistung der Vorschläge in die Auflistung der zu besorgenden/ erledigenden Punkte wechselt. Umgekehrt ist per Anklicken eine "Rücksortierung" möglich. Die vorgegebenen Punkte können durch frei formulierte Einträge ergänzt werden. Die Sortierung erfolgt dabei immer alphabetisch.

Javascript muss im Browser aktiviert sein und für die Speicherung wird "localstorage" (http://dev.w3.org/html5/webstorage/) genutzt, sprich es funktioniert nur mit Browsern die HTML5 interpretieren können. Die aktuellsten Versionen von Firefox, Opera, Chrome und Safari sind dazu fähig, der IE ab Version 9. Smartphone-Browser sind fast durch die Bank alle dazu in der Lage.

Anwendung finden dürfte dieses Modul vermutlich in erster Linie auf mobilen Websites. Ein Anwendungsbeispiel wäre ein Rezept mit interaktiver Zutatenliste, die vor Ort im Supermarkt wieder aufgerufen werden kann. Auch eine Checkliste für eine Reiseapotheke und weitere Zusammenstellungen können hiermit realisiert werden.

Das Modul kann beliebig oft für unterschiedliche Listen verwendet werden, da die Inhalte der Listen im localstorage getrennt geführt werden.

Ein Beispiel zum "Rumspielen" ist hier zu finden: http://www.seamless-design.de/cms/front ... ?idcat=126

INSTALLATION
1) Anlegen des Moduls.
2) Einbinden der CSS-Klassen
3) Upload der Grafik "transparent-pixel.gif" und ggf. anpassen des Speicherorts am Anfang der Modul-Ausgabe (Grafik ist im Anhang zu diesem Post zu finden)
4) Anlegen eines Templates
5) Erstellen eines Artikels der auf dem entsprechenden Template basiert.
6) Konfiguration des Artikels

INPUT

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     checklist_sd
* Author(s)   :     www.Seamless-Design.de Markus Hübner
* Copyright   :     www.Seamless-Design.de Markus Hübner
* Created     :     18.03.2012
************************************************/
?>

<strong>Name der Checkliste:</strong><br/>
<input style="width: 100%;" type="text" name="CMS_VAR[1]" value="CMS_VALUE[1]"><br>
<small>
  (Wichtig: Bitte keine Sonderzeichen verwenden und statt eines Leerzeichens einen _ Unterstrich. Beispiel: checkliste_reiseapotheke)
</small><br/>
<br/>
<strong>Inhalte der Checkliste:</strong><br/>
<input style="width: 100%;" type="text" name="CMS_VAR[10]" value="CMS_VALUE[10]"><br>
<small>
  (Wichtig: Zum Trennen der einzelnen Punkte bitte ### verwenden und die Auflistung mit ### beginnen. Beispiel: ###Tabletten###Sonnencreme mit hohem LSF###Pflaster<br/>
  Die Punkte werden alphabetisch aufsteigend sortiert.)
</small><br/>
<br/>
<strong>Überschriften:</strong><br/>
Vorschläge: <input style="width: 100%;" type="text" name="CMS_VAR[20]" value="CMS_VALUE[20]"><br>
zu besorgen: <input style="width: 100%;" type="text" name="CMS_VAR[30]" value="CMS_VALUE[30]"><br>
<?php
OUTPUT

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     checklist_sd
* Author(s)   :     www.Seamless-Design.de Markus Hübner
* Copyright   :     www.Seamless-Design.de Markus Hübner
* Created     :     18.03.2012
************************************************/


$name_of_checklist="CMS_VALUE[1]";
$suggested_items="CMS_VALUE[10]";
$headline_suggestions="CMS_VALUE[20]";
$headline_to_buy="CMS_VALUE[30]";
$array_suggested_items = explode('###', $suggested_items );
asort($array_suggested_items);
$transparent_pixel="upload/bullets/transparent-pixel.gif";

echo '<script type="text/javascript">';
echo 'var var_name_of_checklist="'.$name_of_checklist.'";';
echo 'var array_suggested_items= new Array();';
$i=0;
foreach($array_suggested_items AS $element)
  {
  $element = str_replace(' ', '_',$element);
  echo 'array_suggested_items['.$i.']="'.$element.'";';
  $i++;
  }
echo '</script>';
?>

<script type="text/javascript">
var code_suggested_items="";
var code_chosen_items="";
var var_chosen_items="";
var array_chosen_items=new array();


function in_array (find, arr)
  {
  for(var i in arr)
    {
    if (find == arr[i])
      {
      return true;
      }
    }
    return false;
  }


function build_suggested_items()
  {
  var_chosen_items="#zzzfoo"+localStorage.getItem('#'+var_name_of_checklist+'#');
  array_chosen_items=var_chosen_items.split("#");
  var i=1;
  var item_replaced_nbsp="";
  while(i<array_suggested_items.length)
    {
    item_replaced_nbsp=array_suggested_items[i];
    if (in_array (item_replaced_nbsp,array_chosen_items))
      {
      }
      else
        {
        item_replaced_nbsp=item_replaced_nbsp.replace(/_/g, " "); // _ wird wieder durch Leerzeichen (nur für die Buttonbeschriftung! ersetzt)
        code_suggested_items=code_suggested_items + '<input class="checklist_sd_button" type="button" id="' + array_suggested_items[i] + '" value="' + item_replaced_nbsp + '" onclick=insert_data("' + array_suggested_items[i] +'")><br/>';
        }
     i++;
    }
  }


function build_chosen_items()
  {
  var item_replaced_nbsp="";
  var_chosen_items="#zzzfoo"+localStorage.getItem('#'+var_name_of_checklist+'#');
  array_chosen_items=var_chosen_items.split("#");
  array_chosen_items.sort();
  var var_count=array_chosen_items.length-1;
  for (var i = 1; i < var_count; ++i)
    {
    item_replaced_nbsp=array_chosen_items[i];
    item_replaced_nbsp=item_replaced_nbsp.replace(/_/g, " "); // _ wird wieder durch Leerzeichen (nur für die Buttonbeschriftung! ersetzt)
    code_chosen_items= code_chosen_items + "<input class=\"checklist_sd_button_remove\" type=\"button\" id=\"" + array_chosen_items[i] + "\" value=\"" + item_replaced_nbsp + "\" onclick=remove_data(\"" + array_chosen_items[i] +"\")><br/>";
    }
  }


function insert_data(id)
  {
  var value=document.getElementById(id).value;
  value=value.replace(/ /g, "_"); // Leerzeichen dürfen nicht vorkommen, da sonst das Löschen nicht funktioniert. Der Ersatz _ wird später für die Anzeige auf dem Button wieder durch ein Leerzeichen ersetzt. &nbsp; klappt nicht.
  if(value!='')
    {
    if(value!='eigener_Eintrag')
      {
       var_chosen_items=localStorage.getItem('#'+var_name_of_checklist+'#');
       var var_new_chosen_items=var_chosen_items+"#"+value;
       localStorage.setItem('#'+var_name_of_checklist+'#',var_new_chosen_items);
      }
    }
  show_suggested_items();
  show_chosen_items();
  }


function remove_data(element)
  {
  var_chosen_items=localStorage.getItem('#'+var_name_of_checklist+'#');
  var_new_chosen_items=var_chosen_items.replace("#"+element, "");
  localStorage.setItem('#'+var_name_of_checklist+'#',var_new_chosen_items);
  show_suggested_items();
  show_chosen_items();
  }


function clear_localStorage()
  {
  localStorage.removeItem('#'+var_name_of_checklist+'#');
  show_suggested_items();
  show_chosen_items();
  } 
   

function show_suggested_items()
  {
  code_suggested_items="";
  build_suggested_items();
  document.getElementById('div_suggested_items').innerHTML = code_suggested_items;
  }


function show_chosen_items()
  {
  code_chosen_items="";
  build_chosen_items();
  if(code_chosen_items=='') document.getElementById('div_chosen_items').innerHTML = "...";
  else document.getElementById('div_chosen_items').innerHTML = code_chosen_items;
  }
</script>



<img src="<?php echo $transparent_pixel; ?>" onload="javascript:show_suggested_items()"/>

<h2><?php echo $headline_suggestions; ?></h2>
<div id="div_suggested_items">
</div>
<input class="checklist_sd_input" type="text" maxlength="20" id="value" value="eigener Eintrag">
<input class="checklist_sd_submit" type="submit" value="speichern" onclick="javascript: insert_data('value');">


<img src="<?php echo $transparent_pixel; ?>" onload="javascript:show_chosen_items()"/>
<h2><?php echo $headline_to_buy; ?></h2>
<div id="div_chosen_items">
</div>

<p>
  <input class="checklist_sd_submit" type="submit" value="leeren" onclick="javascript:clear_localStorage();">
</p>
CSS-Klassen

Code: Alles auswählen

input.checklist_sd_button,
input.checklist_sd_button_remove,
input.checklist_sd_input {
padding: 2%;
width: 50%;
margin-bottom: 10px;
font-size: 110%;
font-weight: 900;
}
input.checklist_sd_button:active,
input.checklist_sd_button:hover {
color: #05CB00;
}
input.checklist_sd_input {
width: 46%;
}
input.checklist_sd_button_remove:active,
input.checklist_sd_button_remove:hover {
color: #FF0000;
}
input.checklist_sd_submit {
width: 33%;
padding: 2%;
font-size: 110%;
font-weight: 900;
border: 1px solid #555555;
border-radius: 1%;
background-color: #efefef;
}
input.checklist_sd_submit:hover {
background-color: #9f9f9f;
}
Viel Spaß damit! :D