1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How Can I Add A Javascript Into A Theme

Discussion in 'Bookmarking Discussions and More' started by sereban, May 26, 2015.

  1. sereban

    sereban Active Member

    I added a js file in a theme folder javascript and do not get a job this file.
     
  2. valMETNG

    valMETNG Administrator Staff Member Admin

    I've had mixed success with getting javascript files to run in plugin directories but haven't tried it in a theme directory yet. I documented some of the problems and my troubleshooting, but sometimes it does work and I can't figure it out.

    One thing to try: instead of using the Hotaru function to clear cache, go into the actual cache directory /cache/css_js_cache and delete all the files. This sometimes helped (though I haven't any idea why). And, most certainly, clear all your browser cache and restart the browser.
     
  3. sereban

    sereban Active Member

    Unfortunately, I did not understand that i must do for proper operation of the Javascript in your theme folder.
     
  4. valMETNG

    valMETNG Administrator Staff Member Admin

    Now that I've looked more deeply into this, I can't seem to find any code that brings in javascript from the theme folder. I see the code that brings in the .css (function getThemeCss starting on line 1458 of Hotaru.php), but there isn't anything that brings in the javascript. @shibuya246 , perhaps this is an oversight?

    @sereban, name your theme javascript file the name of the theme (e.g., if the name of your theme is "yellow," name the javascript file "yellow.js") and then please add the following code to lines 1360 and 1383 of Hotaru.php:
    Code:
    if (file_exists($theme_javascript)) { echo '<script type="text/javascript" src="' . $theme_javascript . '"></script>"; }
    ... and add this code after line 1350 (before the SWITCH statement):
    Code:
    $theme_javascript = BASEURL . 'content/themes/' . THEME . '/javascript/'. THEME . '.js';
    See if that works.

    Edit: Sorry, but I forgot that we're going to have to check first if the javascript file exists. Otherwise, themes without javascript will get an error.
     
    Last edited: May 27, 2015
  5. sereban

    sereban Active Member

    My hotaru.php slightly different.
    My hotaru.php 1.7.2 is slightly different.
    Code:
     1357/* *************************************************************
    *
    *  INCLUDE CSS & JAVASCRIPT FUNCTIONS
    *
    * *********************************************************** */
    
        /**
         * Do Includes (called from template header.php)
         */
         public function doIncludes($type = 'all')
         {               
                  // Note: careful using async or defer on the js otherwise inline jquery wihch may be in plugins has trouble running
                 switch ($type) {
                        case 'all':
                            //$this->getFramework('bootstrap-lite');
    
                            // for old themes that dont split between loading js and css
                            //if ($this->vars['framework']['bootstrap-js'])
                                //$this->includeJs(LIBS . 'frameworks/bootstrap3/js/', 'bootstrap.min'); 
                            echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>";
      before the SWITCH statement              $theme_javascript = BASEURL . 'content/themes/' . THEME . '/javascript/'. THEME . '.js';
                            $version_js = $this->includes->combineIncludes($this, 'js');
                            $version_css = $this->includes->combineIncludes($this, 'css');
                            $this->includes->includeCombined($this, $version_js, $version_css, $this->adminPage);                                                          
                           
                            // only load jquery if we havent already loaded it
                            if (!isset($this->vars['framework']['jquery'])) {
                                echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>';            
                                $this->vars['framework']['jquery'] = true;                           
                            }
                           
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>';            
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
                            break;
                        case 'js':
                           
                            // for better caching we should send this js file separately to hotarus combined js
                            if (!isset($this->vars['framework']['bootstrap-js']) || $this->vars['framework']['bootstrap-js']) {
                                echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js' type='text/css' /></script>";
                                //echo "<script type='text/javascript' src='" . BASEURL . "libs/frameworks/bootstrap3/js/bootstrap.min.js' /></script>\n";
                            }
                             
                            $version_js = $this->includes->combineIncludes($this, 'js');
                            $this->includes->includeCombined($this, $version_js, 0, $this->adminPage); 
             1360 and 1383               if (file_exists($theme_javascript)) { echo '<script type="text/javascript" src="' . $theme_javascript . '"></script>'; }
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>';            
                            echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
                            break;
                        case 'css':
                            $version_css = $this->includes->combineIncludes($this, 'css');
                            $this->includes->includeCombined($this, 0, $version_css, $this->adminPage);
                           
                            // bringing this up-top with css because some inline js on plugins needs to have jquery loaded first to work
                            // only load jquery if we havent already loaded it
                            if (!isset($this->vars['framework']['jquery'])) {
                                echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>';            
                                $this->vars['framework']['jquery'] = true;                           
                            }
                           
                            break;
                        default :
                            break;
                 }
         } 1425
     
  6. valMETNG

    valMETNG Administrator Staff Member Admin

    So it should look like this:
    Code:
    /* *************************************************************
    *
    *  INCLUDE CSS & JAVASCRIPT FUNCTIONS
    *
    * *********************************************************** */
    
      /**
      * Do Includes (called from template header.php)
      */
      public function doIncludes($type = 'all')
      {  
         $theme_javascript = BASEURL . 'content/themes/' . THEME . '/javascript/'. THEME . '.js';
    
          // Note: careful using async or defer on the js otherwise inline jquery wihch may be in plugins has trouble running
          switch ($type) {
             case 'all':
               //$this->getFramework('bootstrap-lite');
    
               // for old themes that dont split between loading js and css
               //if ($this->vars['framework']['bootstrap-js'])
                 //$this->includeJs(LIBS . 'frameworks/bootstrap3/js/', 'bootstrap.min');
               echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>";
    
               if (file_exists($theme_javascript)) { echo '<script type="text/javascript" src="' . $theme_javascript . '"></script>'; }
    
               $version_js = $this->includes->combineIncludes($this, 'js');
               $version_css = $this->includes->combineIncludes($this, 'css');
               $this->includes->includeCombined($this, $version_js, $version_css, $this->adminPage);  
              
               // only load jquery if we havent already loaded it
               if (!isset($this->vars['framework']['jquery'])) {
                 echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>';  
                 $this->vars['framework']['jquery'] = true;  
               }
              
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>';  
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
               break;
             case 'js':
              
               // for better caching we should send this js file separately to hotarus combined js
               if (!isset($this->vars['framework']['bootstrap-js']) || $this->vars['framework']['bootstrap-js']) {
                 echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js' type='text/css' /></script>";
                 //echo "<script type='text/javascript' src='" . BASEURL . "libs/frameworks/bootstrap3/js/bootstrap.min.js' /></script>\n";
               }
    
               if (file_exists($theme_javascript)) { echo '<script type="text/javascript" src="' . $theme_javascript . '"></script>'; }
    
               $version_js = $this->includes->combineIncludes($this, 'js');
               $this->includes->includeCombined($this, $version_js, 0, $this->adminPage);
    
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>';  
               echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
               break;
             case 'css':
               $version_css = $this->includes->combineIncludes($this, 'css');
               $this->includes->includeCombined($this, 0, $version_css, $this->adminPage);
              
               // bringing this up-top with css because some inline js on plugins needs to have jquery loaded first to work
               // only load jquery if we havent already loaded it
               if (!isset($this->vars['framework']['jquery'])) {
                 echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>';  
                 $this->vars['framework']['jquery'] = true;  
               }
              
               break;
             default :
               break;
          }
       }
     
  7. sereban

    sereban Active Member

    Still it does not work, maybe it loсalhost.
     
  8. valMETNG

    valMETNG Administrator Staff Member Admin

    Apologies, but I think I added one too many slashes. Please replace the $theme_javascript definition with this:
    Code:
    $theme_javascript = BASEURL . 'content/themes/' . THEME . 'javascript/'. THEME . '.js';
    If that doesn't work, let's first test if that file exists. Please add the following line under the $theme_javascript definition so it looks like this:
    Code:
    $theme_javascript = BASEURL . 'content/themes/' . THEME . '/javascript/'. THEME . '.js';
    echo $theme_javascript;if (file_exists($theme_javascript)) { echo "it exists"; } else { echo "it does not"; } exit;
    Then post here what prints.
     
  9. sereban

    sereban Active Member

    White screen and the url
    http://localhost/hunttheme/content/themes/hunttheme//javascript/hunttheme/.jsit does not
     
  10. valMETNG

    valMETNG Administrator Staff Member Admin

    Guess I had more than one too many :)
    Try this:
    Code:
    $theme_javascript = BASEURL . 'content/themes' . THEME . 'javascript/javascript.js';
    Then change your javascript file name from your theme name to just javascript.js (e.g., "yellow.js" should now be "javascript.js").
     
  11. sereban

    sereban Active Member

    You missed a slash after the themes/, I still can not get a job javascript.
     
  12. valMETNG

    valMETNG Administrator Staff Member Admin

    So sorry about this @sereban. Please try:
    Code:
    $theme_javascript = BASEURL . 'content/themes/' . THEME . 'javascript/javascript.js';
     
  13. shibuya246

    shibuya246 Hotaru Developer Staff Member Admin

    the theme js is included using the "IncludeOnceJs" function in /libs/IncludeCssJs file or the includeJs function in same file which also calls the findJsFile function which looks in the default and theme folder

    PHP:
    public function findJsFile($folder ''$filename '')
        {    
            if (!
    $folder) { return false; }
           
            
    // If filename not given, make the plugin name the file name
            
    if (!$filename) { $filename $folder; }
           
            
    // First look in the theme folder for a js file...    
            
    if (file_exists(THEMES THEME 'javascript/' $filename '.js')) {    
                
    $file_location THEMES THEME 'javascript/' $filename '.js';
               
            
    // If not found, look in the default theme folder for a js file...    
            
    } elseif (file_exists(THEMES 'default/javascript/' $filename '.js')) {    
                
    $file_location THEMES 'default/javascript/' $filename '.js';
               
            
    // If still not found, look in the plugin folder for a js file... 
            
    } elseif (file_exists(PLUGINS $folder '/javascript/' $filename '.js')) {
                
    $file_location PLUGINS $folder '/javascript/' $filename '.js';        
           
            
    // If still not found, look in the full given folder itself for a js file... 
            
    } elseif (file_exists($folder $filename '.js')) {
                
    $file_location $folder $filename '.js';
            }

            if (isset(
    $file_location)) {
                return 
    $file_location;
            }
        }
     
  14. valMETNG

    valMETNG Administrator Staff Member Admin

    I saw both of those, but I didn't see where they were called. Doing a search for IncludeOnceJs just shows the function itself (and the calling function in Hotaru.php), but it doesn't appear it's called from any other function. function findJsFile comes in with arguments of $folder and $filename which seems it would work for a plugin but not a theme (e.g., it would never come in with a $folder or $filename of "yellow," which appears to be what would be required for it to be included). I'm probably then misunderstanding how this all works, but I just don't see it.
     
  15. sereban

    sereban Active Member

    This piece of code with a comment of the author of the old plugin infinite-scroll.php line 39.
    // $h->includeJs(); not sure why this method of include isn't working for me
    Is there a way that on a straight line in the footer add a URL as an example ?:
    <script src="BASEURL . 'content/themes/' . THEME . 'javascript/javascript.js'"></script>
     
  16. valMETNG

    valMETNG Administrator Staff Member Admin

    Where javascript goes (header or footer) somewhat depends on what it does, how it's designed, what needs to come before or after it, etc. Some javascript is best placed at the end, but other javascript is required in the header. Sometimes javascript works with asynch, and sometimes it doesn't. I've referred to it as my nemesis :)

    Did this hack above still not work for you (in combination with the rest of the code)? If not, you can use the code that @shibuya246 mentioned above as it effectively does the same thing. Name your javascript file as the theme name (e.g., "yellow.js") and use $this->includeJs(THEMES . THEME. "javascript/" , rtrim(THEME, "/")) like this:
    Code:
    /* *************************************************************
    *
    *  INCLUDE CSS & JAVASCRIPT FUNCTIONS
    *
    * *********************************************************** */
    
      /**
      * Do Includes (called from template header.php)
      */
      public function doIncludes($type = 'all')
      { 
      // Note: careful using async or defer on the js otherwise inline jquery wihch may be in plugins has trouble running
      switch ($type) {
      case 'all':
      //$this->getFramework('bootstrap-lite');
    
      // for old themes that dont split between loading js and css
      //if ($this->vars['framework']['bootstrap-js'])
      //$this->includeJs(LIBS . 'frameworks/bootstrap3/js/', 'bootstrap.min');
      echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>";
    
      $this->includeJs(THEMES . THEME. "javascript/" , rtrim(THEME, "/"));
    
      $version_js = $this->includes->combineIncludes($this, 'js');
      $version_css = $this->includes->combineIncludes($this, 'css');
      $this->includes->includeCombined($this, $version_js, $version_css, $this->adminPage); 
      
      // only load jquery if we havent already loaded it
      if (!isset($this->vars['framework']['jquery'])) {
      echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>'; 
      $this->vars['framework']['jquery'] = true; 
      }
      
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>'; 
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
      break;
      case 'js':
      
      // for better caching we should send this js file separately to hotarus combined js
      if (!isset($this->vars['framework']['bootstrap-js']) || $this->vars['framework']['bootstrap-js']) {
      echo "<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js' type='text/css' /></script>";
      //echo "<script type='text/javascript' src='" . BASEURL . "libs/frameworks/bootstrap3/js/bootstrap.min.js' /></script>\n";
      }
    
      $this->includeJs(THEMES . THEME. "javascript/" , rtrim(THEME, "/"));
    
      $version_js = $this->includes->combineIncludes($this, 'js');
      $this->includes->includeCombined($this, $version_js, 0, $this->adminPage);
    
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.6.0/summernote.min.js"></script>';
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>'; 
      echo '<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>';
    
      break;
      case 'css':
      $version_css = $this->includes->combineIncludes($this, 'css');
      $this->includes->includeCombined($this, 0, $version_css, $this->adminPage);
      
      // bringing this up-top with css because some inline js on plugins needs to have jquery loaded first to work
      // only load jquery if we havent already loaded it
      if (!isset($this->vars['framework']['jquery'])) {
      echo '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>'; 
      $this->vars['framework']['jquery'] = true; 
      }
      
      break;
      default :
      break;
      }
      }
     
    sereban likes this.
  17. shibuya246

    shibuya246 Hotaru Developer Staff Member Admin

    thanks. i have a fix coming up for this shortly
     
  18. shibuya246

    shibuya246 Hotaru Developer Staff Member Admin

    valMETNG likes this.
  19. shibuya246

    shibuya246 Hotaru Developer Staff Member Admin

    @valMETNG note that /libs/paginator.php was changed back to

    PHP:
    $path "http://" $host  $uri;
    instead of using the "//" due to a problem with friendly urls not producing the correct urls for paging

    I will review the SSL issue again shortly and find another solution
     

Share This Page