Framework7

[yazzou]

Hello Is there a way to use alternative framworks for UI. I have bought a theme based on framework7, it really fits my requiments in terms of design but don't see any easyway to use it with drupalgap 7 .

[signalpoint]

@yazzou I'm not familiar with Framework7. However, your best chance for this will be to utilize the DrupalGap 8.x-1.x JavaScript SDK with the dg_d7 middle man module to make the SDK work with Drupal 7 websites.

The DrupalGap 8 JavaScript SDK is in itself headless and made out of pure JavaScript, so you can add any framework(s) on top of it. I'd be interested in helping add support for Framework7 within the DrupalGap 8 ecosystem, but I will need you to take the lead :)

[yazzou]

Just tell me what do you need me to do i d very happy to help you :) I am not programmer, i do hack codes to fit them to my needs but never write from the scracht.

[signalpoint]

This process hasn't yet been documented, so it will be a little painful if you're up for the task...

First think you need to do is install the DrupalGap 8 SDK, just omit the part(s) about setting up a Drupal 8 website and/or the DrupalGap 8 module: http://docs.drupalgap.org/8/Resources/Manual_Installation

The trick (and I will help document this as we go) to make the DrupalGap 8 SDK work with a Drupal 7 website is to have the app run both jDrupal 7 and jDrupal 8 by including their .min.js files in the index.html file, and also include the .js file provided by the dg_dg7 module.

[yazzou]

I have followed the install as recomended, here is the structure of the destination folder drupalroot/files/myapp :

octopus.ftp:[myapp]$ ls -l
-rw-r--r--  1 octopus.ftp www-data  2388 Dec  8 06:21 Gruntfile.js
-rw-r--r--  1 octopus.ftp www-data 18092 Dec  8 06:21 LICENSE.txt
-rw-r--r--  1 octopus.ftp www-data  1355 Dec  8 06:21 README.md
-rw-r--r--  1 octopus.ftp www-data 14104 Dec  8 06:21 UPGRADE.md
-rw-r--r--  1 octopus.ftp www-data  1281 Dec  8 06:21 cordova.index.html
drwxr-sr-x  2 octopus.ftp www-data  4096 Dec  8 06:21 css
-rw-r--r--  1 octopus.ftp www-data  1217 Dec  8 06:21 default.index.html
-rw-r--r--  1 octopus.ftp www-data  1911 Dec  8 06:21 default.settings.js
-rwxr-xr-x  1 octopus.ftp www-data  1739 Dec  8 06:21 dg
drwxr-sr-x 22 octopus.ftp www-data  4096 Dec  8 06:21 docs
-rw-r--r--  1 octopus.ftp www-data 59661 Dec  8 06:21 drupalgap.min.js
-rw-r--r--  1 octopus.ftp www-data 67646 Dec  8 06:21 favicon.ico
drwxr-sr-x  2 octopus.ftp www-data  4096 Dec  8 06:21 images
-rw-r--r--  1 octopus.ftp www-data  1123 Dec  8 06:21 index.html
-rw-r--r--  1 octopus.ftp www-data 14499 Dec  8 21:17 jdrupal.min.js
-rw-r--r--  1 octopus.ftp www-data  2730 Dec  8 06:21 makefile
drwxr-sr-x  2 octopus.ftp www-data  4096 Dec  8 06:21 modules
-rw-r--r--  1 octopus.ftp www-data   765 Dec  8 06:21 package.json
drwxr-sr-x  3 octopus.ftp www-data  4096 Dec  8 06:21 scripts
drwxr-sr-x  5 octopus.ftp www-data  4096 Dec  8 06:21 src
drwxr-sr-x  5 octopus.ftp www-data  4096 Dec  8 06:21 themes

Please note that i am running my sites thanks to aegir control panel.

[signalpoint]

Next up, download jdrupal.min.js from the 7.x-1.x branch, and rename it to jdrupal-7.min.js and then include it in your index.html file.

[yazzou]

So did this octopus.ftp:[myapp]$ wget https://raw.githubusercontent.com/signalpoint/jDrupal/7.x-1.x/jdrupal.min.js

Then this

octopus.ftp:[myapp]$ cp jdrupal.min.js jdrupal-7.min.js

And here is my index.html file with the line added :

 <!-- jDrupal and DrupalGap -->
    <script type="text/javascript" charset="utf-8" src="jdrupal.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="jdrupal-7.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="drupalgap.min.js"></script>

[signalpoint]

Be careful that you did not accidentally overwrite the original jdrupal.min.js file (because that's the jDrupal 8 version), you'll need both. Your index.html looks fine. I'd recommend loading jd7 before jd8:

    <script type="text/javascript" charset="utf-8" src="jdrupal-7.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jdrupal.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="drupalgap.min.js"></script>

Next up, you need to sneak jDrupal 7's config into the settings.js file:

// jDrupal 7 Configuration
Drupal.settings.site_path = 'https://www.example.com';
Drupal.settings.endpoint = 'api'; // Rename this to your services endpoint path.

// Drupal 7 modules.
Drupal.modules.contrib.d7 = { }; // Fake jDrupal 7 out with our bridge module.

Then be sure to download the dg_d7 bridge module into the app/modules/custom folder and include the module's .js file in the index.html file.

After that, we should be pretty close to running the DrupalGap 8 SDK on top of a Drupal 7 website. We'll get this sorted out and documented, then we'll look into dropping Framework7 on top.

[yazzou]

• I have redownloaded the jdrupal.min.js file in the root folder to make sure that i haven't mess up things

• I have made a copy of the default.settings.js file (located in the root folder, ie myapp folder) and renamed it settings.js

• I have edited the settings.js and here is a a copy paste of its begining :

* jDrupal Settings.
 * @see http://jdrupal.easystreet3.com
 */

// jDrupal 7 Configuration
Drupal.settings.site_path = 'https://www.mysite.com';
Drupal.settings.endpoint = 'drupalgap'; // Rename this to your services endpoint path.

// Drupal 7 modules.
Drupal.modules.contrib.d7 = { }; // Fake jDrupal 7 out with our bridge module.

jDrupal.settings = {

  // Drupal site settings.
  sitePath: 'https://www.mysite.com', /* The Drupal 8 site URL, e.g. https://example.com */
  basePath: '/',

  // Set to true to see debug info printed to the console.log().
  debug: true

};

// App mode.
dg.settings.mode = 'web-app'; // web-app, phonegap or cordova

// App title.
dg.settings.title = 'DrupalGap';

// App front page.
dg.settings.front = null;

// App logo (render element).
/*dg.settings.logo = {
  _theme: 'image',
  _path: 'modules/custom/my_module/images/logo.jpg' // or http://example.com/logo.jpg
};*/

• I have donwloaded the bridge module and unzipped and indicated its location in the index.html file like that :

  <!-- jDrupal and DrupalGap -->
   <script type="text/javascript" charset="utf-8" src="jdrupal-7.min.js"></script> 
  <script type="text/javascript" charset="utf-8" src="modules/custom/d7/d7.js"></script>
   <script type="text/javascript" charset="utf-8" src="jdrupal.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="drupalgap.min.js"></script>

[yazzou]

Hello Is there any update about this issue ? Thanks

[signalpoint]

@yazzou At this point, I think you're ready to run the app against your Drupal 7 site.

Did you install the DrupalGap 8 SDK so it lives at, e.g. https://www.mysite.com/app?

Wherever it is, if you visit that in a browser, does it work?

If not, please take a look at the Network and Console tabs in your browser's developer tools, they should reveal more information about what is going on. Also the Drupal watchdog logs on your site are helpful too.

[yazzou]

Hi Sorry for the late feedback i was on trip.

Drupalgap8 SDK lives in files/myapp

When i browse the app i use this path

https://www.mysite.com/sites/www.mysite.com/files/myapp/index.html

My console output is the following

ripple.js:37 console.clear() was prevented due to 'Preserve log'
21:15:33.775 ripple.js:37 Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
21:15:33.915 /jdrupal/connect?_format=json Failed to load resource: the server responded with a status of 404 ()
21:15:33.916 drupalgap.min.js:2 deviceready connect failed Arguments(1)
21:15:33.918 index.html:1 Mixed Content: The page at 'https://www.mysite.com/sites/www.mysite.com/files/myapp/index.html' was loaded over HTTPS, but requested an insecure image 'http://a.tile.openstreetmap.org/14/4525/5991.png'. This content should also be served over HTTPS.
21:15:33.943 index.html:1 Mixed Content: The page at 'https://www.mysite.com/sites/www.mysite.com/files/myapp/index.html' was loaded over HTTPS, but requested an insecure image 'http://a.tile.openstreetmap.org/14/4524/5991.png'. This content should also be served over HTTPS.
21:15:33.968 index.html:1 Mixed Content: The page at 'https://www.mysite.com/sites/www.mysite.com/files/myapp/index.html' was loaded over HTTPS, but requested an insecure image 'http://c.tile.openstreetmap.org/14/4525/5992.png'. This content should also be served over HTTPS.
21:15:33.969 index.html:1 Mixed Content: The page at 'https://www.mysite.com/sites/www.mysite.com/files/myapp/index.html' was loaded over HTTPS, but requested an insecure image 'http://c.tile.openstreetmap.org/14/4524/5992.png'. This content should also be served over HTTPS.
21:15:33.989 ripple/user-agent Failed to load resource: the server responded with a status of 404 ()
21:15:33.991 ripple.js:37 web :: Setting the user agent server side failed.
21:15:33.993 ripple.js:37 web :: Initialization Finished (Make it so.)
21:15:34.044 d7.js:1 Uncaught ReferenceError: dg is not defined
    at d7.js:1
21:15:34.515 /jdrupal/connect?_format=json Failed to load resource: the server responded with a status of 404 ()
21:15:34.516 drupalgap.min.js:2 

[signalpoint]

You need to enable the jDrupal module in Drupal 8 and turn on the Connect resource in the REST UI configuration.

[yazzou]

Hum but my site is drupal 7

[signalpoint]

That's right, I forgot. I'll have to look up the next step and will get back to you here sometime soon.

[yazzou]

Hello Any update ?

[signalpoint]

@yazzou My apologies for the delay, I run into this issue today when trying to set this up again.

First, I've renamed the d7 project to dg_d7 to match the DrupalGap 8 naming conventions. So replace any occurrence of d7 with dg_d7 so far in the settings.js file, and in the index.html file make sure to include dg_d7.min.js instead of d7.js, which can be downloaded with: ./dg dl dg_d7 or from here: https://raw.githubusercontent.com/signalpoint/dg_d7/8.x-1.x/dg_d7.min.js

/jdrupal/connect?_format=json Failed to load resource: the server responded with a status of 404 ()

This means it is trying to connect to Drupal 8, which means the dg_d7_deviceready() function in the dg_d7 module isn't firing properly. I'd recommend including the dg_d7.min.js file after the inclusion of the settings.js file in the index.html file.

That should be it.

[yazzou]

Thanks i ll test that and get back to you as soon as possible

[yazzou]

Here is what it looks like : https://www.mediaterranee.com/sites/www.mediaterranee.com/files/myapp/index.html