Showing with 322 additions and 146 deletions.
  1. +1 −10 lug-o-matic/generator.css
  2. +67 −9 lug-o-matic/generator.js
  3. +74 −47 lug-o-matic/index.php
  4. BIN lug-o-matic/placeholder.png
  5. +180 −80 lug-o-matic/widget.php
11 changes: 1 addition & 10 deletions lug-o-matic/generator.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
.notes {
width: 400px;
}

.important {
font-weight: bold;
font-size: 15px;
}

.generator {
float: right;
width: 45%;
Expand All @@ -15,7 +6,7 @@

.code {
width: 100%;
height: 200px;
height: 150px;
}

.preview {
Expand Down
76 changes: 67 additions & 9 deletions lug-o-matic/generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,14 +192,72 @@ function get_html_translation_table (table, quote_style) {
return hash_map;
}

function build_url (prev) {
url = 'http://lugmap.linux.it/lug-o-matic/widget.php?region=';

region = $('select[name=region] option:selected').val ();
url += region;

if (prev == true)
url += '&format=html';
else if ($('input[name=image]').is (':checked') == true)
url += '&format=image';

if ($('input[name=head]').is (':checked') == false) {
url += '&head=false';
}
else {
head_color = $('input[name=head_color]').val ();
if (head_color != '#000080')
url += '&head_color=' + head_color.substring (1);

head_text_color = $('input[name=head_text_color]').val ();
if (head_text_color != '#FFFFFF')
url += '&head_text_color=' + head_text_color.substring (1);
}

if ($('input[name=foot]').is (':checked') == false)
url += '&foot=false';

width = $('input[name=width]').val ();
if (width != 200)
url += '&width=' + width;

return url;
}

function refresh_demo () {
var preview_code = '<iframe id="lugmap" src="URL" onLoad="calcSize();" width="WIDTHpx" scrolling="no" frameborder="0"></iframe>';
var copy_code = '<script type="text/javascript" src="URL"></script><img id="lugmap" src="http://lugmap.linux.it/lug-o-matic/placeholder.png" onload="renderLugMap();" />';
var copy_code_image = '<a href="http://lugmap.linux.it/regione/REGIONE"><img src="URL" border="0" /></a>';

if ($('input[name=image]').is (':checked') == false) {
url = build_url (true);
$('.preview').empty ().append (preview_code.replace (/URL/, url).replace (/WIDTH/, parseInt ($('input[name=width]').val ()) + 10));

url = build_url (false);
$('.code').empty ().append (htmlentities (copy_code.replace (/URL/, url), 'ENT_NOQUOTES'));
}
else {
url = build_url (false);
$('.preview').empty ().append (preview_code.replace (/URL/, url).replace (/WIDTH/, parseInt ($('input[name=width]').val ()) + 10));
$('.code').empty ().append (htmlentities (copy_code_image.replace (/URL/, url).replace (/REGIONE/, $('select[name=region] option:selected').val ()), 'ENT_NOQUOTES'));
}
}

$(document).ready (function () {
var js_code = htmlentities ('<script language="JavaScript"><!--\nfunction calcSize () { document.getElementById(\'lugmap\').height = document.getElementById(\'lugmap\').contentWindow.document.body.scrollHeight; }\n\/\/--><\/script>', 'ENT_NOQUOTES');

$('select[name=region]').change (function (event) {
var region = $('select[name=region] option:selected').val ();
var previewcode = $('.preview').html ().replace (/region=[a-z]*"/, 'region=' + region + '"');
var previewcode = previewcode.replace (/ height="[0-9]*"/, '');
$('.preview').empty ().append (previewcode);
$('.code').empty ().append (js_code + "\n" + htmlentities (previewcode, 'ENT_NOQUOTES'));
});
$('select[name=region]').change (function (event) {
refresh_demo ();
});

$('input[name=head]').change (function (event) {
if ($('input[name=head]').is (':checked') == true)
$('.depends_on_header').show ();
else
$('.depends_on_header').hide ();
});

$('input').change (function (event) {
refresh_demo ();
});
});
121 changes: 74 additions & 47 deletions lug-o-matic/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,88 @@
exit (0);
}

lugheader ('LUG-o-matic', 'LUG-o-matic', array ('generator.css'), array ('jquery.js', 'generator.js'));
lugheader ('LUG-o-matic', array ('generator.css'), array ('jquery.js', 'generator.js', 'http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js'));

?>

<div id="introTabel">
<div class="generator">
<p>
Regione <select name="region">
<?php
foreach ($elenco_regioni as $simple => $name) {
?>
<fieldset style="width: 45%; float: left;">
<legend>Opzioni</legend>

<option value="<?php echo $simple; ?>"><?php echo $name; ?></option>
<p>
<label for="region">Regione</label>

<?php
}
?>
</select>
</p>
<select name="region">
<?php
foreach ($elenco_regioni as $simple => $name) {
if ($region == $simple)
$selected = ' selected="selected"';
else
$selected = '';

<div class="preview"><iframe id="lugmap" src="<?php echo $app_url; ?>?region=abruzzo" onLoad="calcSize();" width="200px" scrolling="no" frameborder="0"></iframe></div>
?>

<br />
<option value="<?php echo $simple ?>"<?php echo $selected ?>><?php echo $name; ?></option>

<textarea class="code" cols="45" rows="15"><?php echo htmlentities (
'<script language="JavaScript"><!--
function calcSize () { document.getElementById(\'lugmap\').height = document.getElementById(\'lugmap\').contentWindow.document.body.scrollHeight;
}
//--></script>
<iframe id="lugmap" src="' . $app_url . '?region=abruzzo"
onLoad="calcSize();" width="200px" scrolling="no" frameborder="0"></iframe>'); ?>
</textarea>
</div>

<div>
<p>
Vuoi dare una mano nel promuovere le attività pro-freesoftware della tua zona?
</p>

<p>
Hai un sito web?
</p>

<p class="important">
Usa lug-o-matic!
</p>

<p>
Usando il generatore qui accanto puoi ottenere il codice HTML di un semplice widget web da
copiare ed incollare sul tuo sito, con l'elenco sempre automaticamente aggiornato dei Linux
Users Group della regione selezionata.
</p>
</div>

<div class="clear_spacer"></div>
<?php
}
?>

<option value="all">Tutti i LUG</option>
</select>
</p>

<br />

<p>
<label for="width">Larghezza</label>
<input name="width" type="text" value="200" size="4" />px
</p>

<p>
<label for="head">Mostra Header</label>
<input name="head" type="checkbox" checked="yes" />
</p>

<p class="depends_on_header">
<label for="head_color">Colore Header</label>
<input name="head_color" type="color" value="#000080" data-text="hidden" data-hex="true" style="height: 15px; width: 20px;" />
</p>

<p class="depends_on_header">
<label for="head_text_color">Colore Testo Header</label>
<input name="head_text_color" type="color" value="#FFFFFF" data-text="hidden" data-hex="true" style="height: 15px; width: 20px;" />
</p>

<p>
<label for="foot">Mostra Footer</label>
<input name="foot" type="checkbox" checked="yes" />
</p>

<br />

<p>
<p>Questa opzione puo' essere selezionata per ottenere una immagina statica anziche' un blocco di JavaScript: utile per embeddare il widget all'interno di siti che non consentono l'inclusione di codice HTML complesso, tipo Wordpress.com</p>

<label for="image">Genera Immagine</label>
<input name="image" type="checkbox" />
</p>
</fieldset>

<div style="width: 45%; float: right; text-align: center;">
<div class="preview">
<iframe id="lugmap" src="<?php echo $app_url ?>widget.php?region=abruzzo&amp;format=html" onLoad="calcSize();" width="210px" scrolling="no" frameborder="0"></iframe>
</div>

<br />
<br />
<br />

<p>Copia e incolla questo codice nella tua pagina web!</p>

<textarea class="code" cols="45" rows="10"><?php echo htmlentities (
'<script type="text/javascript" src="' . $app_url .'widget.php?region=abruzzo"></script>
<img id="lugmap" src="'. $app_url . 'placeholder.png" onload="renderLugMap();" />') ?>
</textarea>
</div>

<?php
Expand Down
Binary file added lug-o-matic/placeholder.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading