Skip to content

Commit

Permalink
Merge pull request #26 from zopefoundation/externalize_js#25
Browse files Browse the repository at this point in the history
fix #25 (externalize js)
  • Loading branch information
d-maurer committed Feb 27, 2020
2 parents 2554e87 + 9c306a7 commit 567123a
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 213 deletions.
6 changes: 5 additions & 1 deletion CHANGES.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
4.7.0 (unreleased)
==================

- Nothing changed yet.
- Move inline javascript function definitions containing "<", ">" or "&"
into external files to follow the XHTML recommendation concerning
XML/HTML compatibility
(`#25 <https://github.com/zopefoundation/zope.formlib/issues/25>`_)



4.6.0 (2019-02-12)
Expand Down
1 change: 1 addition & 0 deletions setup.py
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ def alltests():
'pytz',
'zope.browser>=1.1',
'zope.browserpage>=3.11.0',
'zope.browserresource',
'zope.component',
'zope.event',
'zope.i18n',
Expand Down
5 changes: 5 additions & 0 deletions src/zope/formlib/configure.zcml
Original file line number Diff line number Diff line change
Expand Up @@ -602,4 +602,9 @@
permission="zope.Public"
/>

<include package="zope.browserresource" file="meta.zcml" />
<browser:resourceDirectory
name="zope.formlib"
directory="js" />

</configure>
126 changes: 126 additions & 0 deletions src/zope/formlib/js/ordered_selection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
function moveItems(from, to)
{
// shortcuts for selection fields
var src = document.getElementById(from);
var tgt = document.getElementById(to);

if (src.selectedIndex == -1) selectionError();
else
{
// iterate over all selected items
// --> attribute "selectedIndex" doesn't support multiple selection.
// Anyway, it works here, as a moved item isn't selected anymore,
// thus "selectedIndex" indicating the "next" selected item :)
while (src.selectedIndex > -1)
if (src.options[src.selectedIndex].selected)
{
// create a new virtal object with values of item to copy
temp = new Option(src.options[src.selectedIndex].text,
src.options[src.selectedIndex].value);
// append virtual object to targe
tgt.options[tgt.length] = temp;
// want to select newly created item
temp.selected = true;
// delete moved item in source
src.options[src.selectedIndex] = null;
}
}
}

// move item from "from" selection to "to" selection
function from2to(name)
{
moveItems(name+".from", name+".to");
copyDataForSubmit(name);
}

// move item from "to" selection back to "from" selection
function to2from(name)
{
moveItems(name+".to", name+".from");
copyDataForSubmit(name);
}

function swapFields(a, b)
{
// swap text
var temp = a.text;
a.text = b.text;
b.text = temp;
// swap value
temp = a.value;
a.value = b.value;
b.value = temp;
// swap selection
temp = a.selected;
a.selected = b.selected;
b.selected = temp;
}

// move selected item in "to" selection one up
function moveUp(name)
{
// shortcuts for selection field
var toSel = document.getElementById(name+".to");

if (toSel.selectedIndex == -1)
selectionError();
else if (toSel.options[0].selected)
alert("Cannot move further up!");
else for (var i = 0; toSel.length > i; i++)
if (toSel.options[i].selected)
{
swapFields(toSel.options[i-1], toSel.options[i]);
copyDataForSubmit(name);
}
}

// move selected item in "to" selection one down
function moveDown(name)
{
// shortcuts for selection field
var toSel = document.getElementById(name+".to");

if (toSel.selectedIndex == -1) {
selectionError();
} else if (toSel.options[toSel.length-1].selected) {
alert("Cannot move further down!");
} else {
for (var i = toSel.length-1; i >= 0; i--) {
if (toSel.options[i].selected) {
swapFields(toSel.options[i+1], toSel.options[i]);
}
}
copyDataForSubmit(name);
}
}

// copy each item of "toSel" into one hidden input field
function copyDataForSubmit(name)
{
// shortcuts for selection field and hidden data field
var toSel = document.getElementById(name+".to");
var toDataContainer = document.getElementById(name+".toDataContainer");

// delete all child nodes (--> complete content) of "toDataContainer" span
while (toDataContainer.hasChildNodes())
toDataContainer.removeChild(toDataContainer.firstChild);

// create new hidden input fields - one for each selection item of
// "to" selection
for (var i = 0; toSel.options.length > i; i++)
{
// create virtual node with suitable attributes
var newNode = document.createElement("input");
newNode.setAttribute("name", name.replace(/-/g, '.')+':list');
newNode.setAttribute("type", "hidden");
newNode.setAttribute("value", toSel.options[i].value);

// actually append virtual node to DOM tree
toDataContainer.appendChild(newNode);
}
}

// error message for missing selection
function selectionError()
{alert("Must select something!")}
36 changes: 36 additions & 0 deletions src/zope/formlib/js/pageform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
function toggleFormFieldHelp(ob,state) {
// ob is the label element
var field = findWidgetDiv(ob);
if (field) {
field.style.visibility = state && 'hidden' || 'visible';
var help = document.getElementById("field-help-for-" + ob.htmlFor);
if (help) {
help.style.visibility = state && 'visible' || 'hidden';
}
}
}

function findWidgetDiv(label) {
var element = findFormField(label);
while (element) {
element = element.parentNode;
if (element.tagName == 'DIV' && element.getAttribute('class') == 'widget')
return element;
}
}

function findFormField(label) {
var name = label.htmlFor;
var field = label.form[name];
// Multiple fields with the same name, such as radiobuttons
if (field) {
if (field.length)
field = field[0];
return field;
}
// No field with the exact name; find one that starts with the name
for (var i = 0; field = label.form[i++];) {
if (field.name.substr(0, name.length) == name)
return field;
}
}
131 changes: 1 addition & 130 deletions src/zope/formlib/orderedSelectionList.pt
Original file line number Diff line number Diff line change
@@ -1,133 +1,4 @@
<script type="text/javascript">

function moveItems(from, to)
{
// shortcuts for selection fields
var src = document.getElementById(from);
var tgt = document.getElementById(to);

if (src.selectedIndex == -1) selectionError();
else
{
// iterate over all selected items
// --> attribute "selectedIndex" doesn't support multiple selection.
// Anyway, it works here, as a moved item isn't selected anymore,
// thus "selectedIndex" indicating the "next" selected item :)
while (src.selectedIndex > -1)
if (src.options[src.selectedIndex].selected)
{
// create a new virtal object with values of item to copy
temp = new Option(src.options[src.selectedIndex].text,
src.options[src.selectedIndex].value);
// append virtual object to targe
tgt.options[tgt.length] = temp;
// want to select newly created item
temp.selected = true;
// delete moved item in source
src.options[src.selectedIndex] = null;
}
}
}

// move item from "from" selection to "to" selection
function from2to(name)
{
moveItems(name+".from", name+".to");
copyDataForSubmit(name);
}

// move item from "to" selection back to "from" selection
function to2from(name)
{
moveItems(name+".to", name+".from");
copyDataForSubmit(name);
}

function swapFields(a, b)
{
// swap text
var temp = a.text;
a.text = b.text;
b.text = temp;
// swap value
temp = a.value;
a.value = b.value;
b.value = temp;
// swap selection
temp = a.selected;
a.selected = b.selected;
b.selected = temp;
}

// move selected item in "to" selection one up
function moveUp(name)
{
// shortcuts for selection field
var toSel = document.getElementById(name+".to");

if (toSel.selectedIndex == -1)
selectionError();
else if (toSel.options[0].selected)
alert("Cannot move further up!");
else for (var i = 0; toSel.length > i; i++)
if (toSel.options[i].selected)
{
swapFields(toSel.options[i-1], toSel.options[i]);
copyDataForSubmit(name);
}
}

// move selected item in "to" selection one down
function moveDown(name)
{
// shortcuts for selection field
var toSel = document.getElementById(name+".to");

if (toSel.selectedIndex == -1) {
selectionError();
} else if (toSel.options[toSel.length-1].selected) {
alert("Cannot move further down!");
} else {
for (var i = toSel.length-1; i >= 0; i--) {
if (toSel.options[i].selected) {
swapFields(toSel.options[i+1], toSel.options[i]);
}
}
copyDataForSubmit(name);
}
}

// copy each item of "toSel" into one hidden input field
function copyDataForSubmit(name)
{
// shortcuts for selection field and hidden data field
var toSel = document.getElementById(name+".to");
var toDataContainer = document.getElementById(name+".toDataContainer");

// delete all child nodes (--> complete content) of "toDataContainer" span
while (toDataContainer.hasChildNodes())
toDataContainer.removeChild(toDataContainer.firstChild);

// create new hidden input fields - one for each selection item of
// "to" selection
for (var i = 0; toSel.options.length > i; i++)
{
// create virtual node with suitable attributes
var newNode = document.createElement("input");
newNode.setAttribute("name", name.replace(/-/g, '.')+':list');
newNode.setAttribute("type", "hidden");
newNode.setAttribute("value", toSel.options[i].value);

// actually append virtual node to DOM tree
toDataContainer.appendChild(newNode);
}
}

// error message for missing selection
function selectionError()
{alert("Must select something!")}

</script>
<script type="text/javascript" src="++resource++zope.formlib/ordered_selection.js"></script>

<table border="0" class="ordered-selection-field">
<tr>
Expand Down
42 changes: 1 addition & 41 deletions src/zope/formlib/pageform.pt
Original file line number Diff line number Diff line change
Expand Up @@ -13,47 +13,7 @@
class="edit-form" enctype="multipart/form-data"
id="zc.page.browser_form">

<script type="text/javascript"><!--
function toggleFormFieldHelp(ob,state) {
// ob is the label element
var field = findWidgetDiv(ob);
if (field) {
field.style.visibility = state && 'hidden' || 'visible';
var help = document.getElementById("field-help-for-" + ob.htmlFor);
if (help) {
help.style.visibility = state && 'visible' || 'hidden';
}
}
}
function findWidgetDiv(label) {
var element = findFormField(label);
while (element) {
element = element.parentNode;
if (element.tagName == 'DIV' && element.getAttribute('class') == 'widget')
return element;
}
}
function findFormField(label) {
var name = label.htmlFor;
var field = label.form[name];
// Multiple fields with the same name, such as radiobuttons
if (field) {
if (field.length)
field = field[0];
return field;
}
// No field with the exact name; find one that starts with the name
for (var i = 0; field = label.form[i++];) {
if (field.name.substr(0, name.length) == name)
return field;
}
}
//-->
</script>
<script type="text/javascript" src="++resource++zope.formlib/pageform.js"></script>

<div id="viewspace" metal:define-slot="viewspace">

Expand Down
Loading

0 comments on commit 567123a

Please sign in to comment.