Recent changes to User_Notes_drupal

Discussion for User_Notes_drupal page

Paolo Casaschi — Tue, 14 Apr 2020 16:30:26 -0000

Steven Bellens from the rokadewesterlo.be site has been successful integrating pgn4web with drupal 8 and the gutenberg editor: inserting the PGN tag and enabling the BBCode filter for the Gutenberg format, allows pasting PGN code directly in the Gutenberg editor; there is even no need to insert a 'custom HTML' block.

For an example, see https://www.rokadewesterlo.be/website-update

For further details, please contact Steven from his rokadewesterlo.be site.

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Thu, 02 Feb 2017 17:02:56 -0000

--- v26
+++ v27
@@ -11,13 +11,13 @@
 The drupal module is from a third party developer; as such it has not been prepared and fully checked by the pgn4web project and has not fully integrated into the pgn4web project; _use this module at your own risk_. For support, please contact the authors directly from [the druapl module homepage](http://drupal.org/project/pgn4web).

 ## guidelines for manual drupal integration guidelines
+
+The folowing guidelines have been tested with drupal up to v8.2.6, please contact the pgn4web project for any issue with different versions of drupal.

 Two options are available for manual drupal integration: 

   * installing pgn4web on your site and using a sophisticated bbcode supporting display options and unlimited games 
   * using pgn4web from a different site 
-
-The [pgn4web test drupal site](http://pgn4web-test.casaschi.net/drupal/) provides an implementation example (this is a test site, things might occasionally be broken).

 The following procedures require the latest version of [the Extensible BBCode module](http://drupal.org/project/xbbcode) for your version of drupal. In case this module is not available for your version of drupal, alternative procedures can be used for creating a custom BBcode with similar replacement code, for example by manually editing the drupal code providing basic BBcodes.

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Wed, 07 Dec 2016 15:34:24 -0000

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Mon, 14 Dec 2015 12:00:59 -0000

--- v24
+++ v25
@@ -109,7 +109,6 @@
 Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that:

   * for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked.
-  * "Convert BBCode into HTML" is the first processed filter
   * in the "Convert BBCode into HTML" filter settings the "Convert linebreaks to HTML" filter is not ticked

 The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain.

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Mon, 14 Dec 2015 10:17:30 -0000

--- v23
+++ v24
@@ -106,7 +106,11 @@

 Please remember to set the variable `pgn4webPath` above to the path of the pgn4web folder on your site. 

-Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked.
+Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that:
+
+  * for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked.
+  * "Convert BBCode into HTML" is the first processed filter
+  * in the "Convert BBCode into HTML" filter settings the "Convert linebreaks to HTML" filter is not ticked

 The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain.

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Mon, 14 Dec 2015 09:57:38 -0000

--- v22
+++ v23
@@ -87,7 +87,7 @@
     var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
     document.write("");
     </script>
-    {{  tag.content  }}
+    {{  tag.source  }}
     
     <script type="text/javascript">
     "use strict";
@@ -177,7 +177,7 @@
     var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
     document.write("");
     </script>
-    {{  tag.content  }}
+    {{  tag.source  }}
     
     <script type="text/javascript">
     "use strict";

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Sat, 05 Dec 2015 11:57:16 -0000

--- v21
+++ v22
@@ -91,7 +91,7 @@
     
     <script type="text/javascript">
     "use strict";
-    var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
+    var pgnText = document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
     var height = 268;
     var am = "{{ tag.attr.autoplayMode ?: tag.attr.am ?: 'l' }}";
     var sm = "{{ tag.attr.showMoves ?: tag.attr.sm ?: 'f' }}";
@@ -101,12 +101,12 @@
     var ih = "{{ tag.attr.initialHalfmove ?: tag.attr.ih ?: 's' }}";
     var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
     if (multiGamesRegexp.test(pgnText)) { height += 34; }
-    document.write("<iframe src="" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pi=" + pgn4webTextareaId + "" frameborder="0" width="100%" height=" + height + " scrolling="no" marginheight="0" marginwidth="0">your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
+    document.write("<iframe src="" + pgn4webPath + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pi=" + pgn4webTextareaId + "" frameborder="0" width="100%" height=" + height + " scrolling="no" marginheight="0" marginwidth="0">your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
     </script>

 Please remember to set the variable `pgn4webPath` above to the path of the pgn4web folder on your site. 

-Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked and that "Convert line breaks into HTML (i.e. 
 and )" filter is ticked. Also, in the "Convert BBCode into HTML" filter settings, make sure the "Convert linebreaks to HTML" filter is not ticked.
+Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked.

 The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain.

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Sat, 05 Dec 2015 10:31:19 -0000

--- v20
+++ v21
@@ -73,9 +73,9 @@

 First step is for the site administrator to install [the Extensible BBCode module](http://drupal.org/project/xbbcode); please make sure you download and install the release corresponding to your version of drupal. 

-Second step is the activation of the Extensible BBCode module (manage/extend area); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise). 
-
-Third step is the creation of a custom BBcode (manage/configuration/bbcode settings area) with name `pgn`. 
+Second step is the activation of the Extensible BBCode module (extend area); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise). 
+
+Third step is the creation of a custom BBcode (configuration/bbcode settings area) with name `pgn`. 

 The reccomended value for the `template code` is: 

@@ -106,7 +106,7 @@

 Please remember to set the variable `pgn4webPath` above to the path of the pgn4web folder on your site. 

-Final step is to modify the BBCode text format (manage/configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked and that "Convert line breaks into HTML (i.e. 
 and )" filter is ticked. Also, in the "Convert BBCode into HTML" filter settings, make sure the "Convert linebreaks to HTML" filter is not ticked.
+Final step is to modify the BBCode text format (configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked and that "Convert line breaks into HTML (i.e. 
 and 
)" filter is ticked. Also, in the "Convert BBCode into HTML" filter settings, make sure the "Convert linebreaks to HTML" filter is not ticked.

 The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain. 

@@ -116,9 +116,9 @@

 First step is for the site administrator to install [the Extensible BBCode module](http://drupal.org/project/xbbcode); please make sure you download and install the release corresponding to your version of drupal. 

-Second step is the activation of the Extensible BBCode module (administration/site building/modules area); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise). 
-
-Final step is the creation of a custom BBcode (administration/site configuration/bbcode settings area) with name `pgn`, leaving all the tag options tickboxes unticked. 
+Second step is the activation of the Extensible BBCode module (site building/modules area); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise). 
+
+Final step is the creation of a custom BBcode (configuration/bbcode settings area) with name `pgn`, leaving all the tag options tickboxes unticked. 

 The reccomended value for the `replacement code` is: 

@@ -229,11 +229,11 @@

 ### notes

-  * After adding/modifying the Extensible BBcode plugin and or adding/modiying the custom BBcode, it is recommended to clear drupal cached data in order for the pages to use the latest BBcode definitions. Drupal cached data can be cleared from the administration/configuration/performance area. 
+  * After adding/modifying the Extensible BBcode plugin and or adding/modiying the custom BBcode, it is recommended to clear drupal cached data in order for the pages to use the latest BBcode definitions. Drupal cached data can be cleared from the configuration/performance area. 

   * The recommended settings apply a predefined set of colors and options to match the default drupal template; if you need to change any of the colors and options (the parameters after board.html in the code above) you can refer to the [board widget instructions wiki page](BoardWidget_instructions) or ask for support. 

- * End users should make sure that drupal automatically cretaed summary for the article does not cut across the PGN data, otherwise the article presented in summary mode will not show the chessboard properly: modify the display settings of the `teaser` from the administration/structure/content types/article and basic page/display area. Otherwise the end users should manually assign the summary content for each article and basic page. 
+ * End users should make sure that drupal automatically cretaed summary for the article does not cut across the PGN data, otherwise the article presented in summary mode will not show the chessboard properly: modify the display settings of the `teaser` from the structure/content types/article and basic page/display area. Otherwise the end users should manually assign the summary content for each article and basic page. 

 ### caveats

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Sat, 05 Dec 2015 10:23:54 -0000

--- v19
+++ v20
@@ -71,7 +71,46 @@

 ##### drupal 8 and later versions

-TBD
+First step is for the site administrator to install [the Extensible BBCode module](http://drupal.org/project/xbbcode); please make sure you download and install the release corresponding to your version of drupal. 
+
+Second step is the activation of the Extensible BBCode module (manage/extend area); the minimal requirement is to activate the Extensible BBCode component (you can leave out the built-in bbcodes if you don't need them otherwise). 
+
+Third step is the creation of a custom BBcode (manage/configuration/bbcode settings area) with name `pgn`. 
+
+The reccomended value for the `template code` is: 
+
+    <script type="text/javascript">
+    "use strict";
+    var pgn4webPath = "/pgn4web";
+    var pgn4webTextareaIdNum;
+    if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
+    var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
+    document.write("");
+    </script>
+    {{  tag.content  }}
+    
+    <script type="text/javascript">
+    "use strict";
+    var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
+    var height = 268;
+    var am = "{{ tag.attr.autoplayMode ?: tag.attr.am ?: 'l' }}";
+    var sm = "{{ tag.attr.showMoves ?: tag.attr.sm ?: 'f' }}";
+    var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
+    var ig = "{{ tag.attr.initialGame ?: tag.attr.ig ?: 'f' }}";
+    var iv = "{{ tag.attr.initialVariation ?: tag.attr.iv ?: '0' }}";
+    var ih = "{{ tag.attr.initialHalfmove ?: tag.attr.ih ?: 's' }}";
+    var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
+    if (multiGamesRegexp.test(pgnText)) { height += 34; }
+    document.write("<iframe src="" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pi=" + pgn4webTextareaId + "" frameborder="0" width="100%" height=" + height + " scrolling="no" marginheight="0" marginwidth="0">your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
+    </script>
+
+Please remember to set the variable `pgn4webPath` above to the path of the pgn4web folder on your site. 
+
+Final step is to modify the BBCode text format (manage/configuration/text formats and editors area) by making sure that for the BBCode text format the "Display any HTML as plain text" and "Limit allowed HTML tags and correct faulty HTML" filters are not ticked and that "Convert line breaks into HTML (i.e. 
 and )" filter is ticked. Also, in the "Convert BBCode into HTML" filter settings, make sure the "Convert linebreaks to HTML" filter is not ticked.
+
+The instructions above require pgn4web 1.91 or later and requires that drupal and pgn4web are on the same domain. 
+
+At this point you should be able to add chess games to your drupal articles by using the `[pgn]` tag, as in the example above from the 1985 world championship. Please select the `BBcode` option for the `input format`of your article or page.

 ##### drupal 7 and earlier versions

@@ -124,7 +163,36 @@

 ##### drupal 8 and later versions

-TBD
+This method is implemented using the following alternative value for the `template code`. 
+
+    <script type="text/javascript">
+    "use strict";
+    var pgn4webURL = "http://pgn4web.casaschi.net";
+    if (!document.getElementById("pgn4webEncoderScript")) { document.write('<script id="pgn4webEncoderScript" type="text/javascript" src="' + pgn4webURL + '/pgn-encoder.js">'); }
+    </script>
+    <script type="text/javascript">
+    "use strict";
+    var pgn4webTextareaIdNum;
+    if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
+    var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
+    document.write("");
+    </script>
+    {{  tag.content  }}
+    
+    <script type="text/javascript">
+    "use strict";
+    var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
+    var height = 268;
+    var am = "{{ tag.attr.autoplayMode ?: tag.attr.am ?: 'l' }}";
+    var sm = "{{ tag.attr.showMoves ?: tag.attr.sm ?: 'f' }}";
+    var hd; if ((sm == "puzzle") || (sm == "p")) { hd = "v"; } else { hd = "j"; }
+    var ig = "{{ tag.attr.initialGame ?: tag.attr.ig ?: 'f' }}";
+    var iv = "{{ tag.attr.initialVariation ?: tag.attr.iv ?: '0' }}";
+    var ih = "{{ tag.attr.initialHalfmove ?: tag.attr.ih ?: 's' }}";
+    var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
+    if (multiGamesRegexp.test(pgnText)) { height += 34; }
+    document.write("<iframe src="" + pgn4webURL + "/board.html?am=" + encodeURI(am) + "&amp;d=3000&amp;ig=" + encodeURI(ig) + "&amp;iv=" + encodeURI(iv) + "&amp;ih=" + encodeURI(ih) + "&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=ZeyT&amp;dcs=OImt&amp;bbcs=OImt&amp;hm=b&amp;hcs=xnm_&amp;bd=c&amp;cbcs=Xe2L&amp;ctcs=l4It&amp;hd=" + encodeURI(hd) + "&amp;md=" + encodeURI(sm) + "&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=OImt&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=ZeyT&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pe=" + EncodePGN(pgnText) + "" frameborder="0" width="100%" height=" + height + " scrolling="no" marginheight="0" marginwidth="0">your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
+    </script>

 ##### drupal 7 and earlier versions

User_Notes_drupal modified by Paolo Casaschi

Paolo Casaschi — Sat, 05 Dec 2015 10:08:21 -0000

--- v18
+++ v19
@@ -118,6 +118,8 @@

 In case you need to install drupal and pgn4web on different domains, or in case you cannot install pgn4web on your site and you want to use the pgn4web site, you can configure a lightweight version of the pgn bbcode with a limitations on the size of the PGN data is to approximately 2000 characters. 

+The guidelines are similar to the guidelines for installing pgn4web on your site, with the differences described below. 
+
 Please remember to set the variable `pgn4webURL` below to the URL of the actual pgn4web server you plan to use.

 ##### drupal 8 and later versions